HTML

瑞纷晓宇
136 阅读6分钟

1.HTML是什么？

超文本标记语言

2.标签/元素

语法：

<ele> content </ele>
<ele/>

关系：标签嵌套、并列标签

3.注释

定义：备注+解释

使用方法：

<!-- 注释内容 -->

快捷键：ctrl+/

注意：注释不能嵌套注释

4.文档声明

默认：使用HTML5

用法：

<!DOCTYPE html>

其他版本：

HTML4：strict、transitional、Frameset

5.字符编码

过程：编码、查找字符集、解码

字符集特点
ASCII大小写字母、数字、符号
ISO 8859-1在ASCII基础上，扩充了一些希腊字符
GB2312继续扩充，收录了汉字，字符
GBK收录了汉字和符号达到了20K+，支持繁体中文
UTF-8包含了世界上所有语言的字符（万国码）

6.设置语言

刷新方式：F5 强制刷新方式：shift + F5

设置方式 ：

<html lang = "en"></html>

<html lang = "zh-CN"></html>

7.标准结构

结构：

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
 </body>
</html>

快捷键：！+ enter

设置图标：favicon.ico

8.排版元素

区域标题元素：重要h1—h3标签、不重要h4—h6标签

段落标签元素：p标签

【注意】：段落标签元素中不能含有h、p、div标签

div标签：无含义，用于整体布局

9.语义

语义：h1~h6标题、p段落、div无语义

语义化：增强代码的可读性、有利于SEO（搜索引擎优化、爬虫）、方便设备解析

原则：标签默认的效果不重要，语义最重要

10.块级元素与行内元素

块级元素：h、p、div、marquee

块级元素分类依据：一个元素独占一行

行内元素：input、span、em、strong

行内元素分类依据：一个元素不独占一行

规则：

  1. 块级元素中能写：行内元素、块级元素、几乎什么都能写
  2. 行内元素中能写：行内元素、不能写块级元素
  3. h1~h6中不能相互嵌套
  4. p标签中不能写块级元素

11.常用的文本标签

作用：

  1. 用于包裹词汇、短语
  2. 通常写在排版标签里
  3. 排版标签更加宏观（大段的文字），文本标签更微观（词汇、短语）

常用：

  1. em：要着重阅读的内容
  2. strong：十分重要的内容
  3. span：没有语义，用于包裹短语

12.图片标签

用法：

<img src = "" alt = "" width = ""/>

src：图片路径的链接

alt：替代文字

width：图片的宽度

height：图片的高度

【注】：单独调整高或宽，另一个属性会按比例进行调整

格式：

  1. bmp：支持颜色丰富、保留细节更多、占用空间极大
  2. png：支持的颜色丰富、支持透明背景
  3. jpg：支持的颜色丰富、占用空间较小
  4. gif：仅支持256中颜色、支持简单透明背景、支持动态图
  5. webp：专门用来在页面中呈现图片、2010下半年谷歌推出，兼容性不好、支持动态图
  6. base64：一串特殊格式的文本，要用浏览器打开，原理是把图片进行base64编码，形成一串文本，可以用一些工具或者网站生成，使用的时候写在src的属性值中，前缀是 data: 当网站看到这个前缀的时候，就不会再发送请求，用于较小的图片

13.路径

绝对路径：

  1. 本地绝对路径：从盘符出发
  2. 网络绝对路径：网址不能是瞎写的、有的会有防盗链

相对路径：

  1. ./：当前位置
  2. ../：上一级文件夹
  3. /：下一级文件夹

14.超链接

标签名：a

属性：href、target

超链接不能嵌套超链接，但是可以嵌套其他的标签

target属性：_self 当前页面打开，_blank 打开新页面

如果想要强制下载，添加 download 属性

锚点：只有 name 的一个空标签

<a href="#anc">跳转锚点</a>
​
<a name="anc1"></a>
​
<!-- 推荐使用第二种方式 -->
<p id="anc2"></p>
​
<!-- 回到顶部 -->
<a href="#"></a>
​
<!-- 刷新 -->
<a href="#"></a>

使用js

<a href="javascript:alert(6)">点击弹窗</a>

使用指定功能

<a href="tel:10010">打电话</a>
<a href="mailto:10010@qq.com">寄邮件</a>
<a href="sms:10010">寄邮件</a>

15.超文本

超文本是一种组织信息的方式

16.列表

有序列表

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

无序列表

<ul>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

自定义列表

<dl>
    <dt>1</dt>
    <dd>解释1</dd>
    <dt>2</dt>
    <dd>解释2</dd>
    <dt>3</dt>
    <dd>解释3</dd>
</dl>

【注意事项】：

  • 不管怎么样，建议让子元素是li，li不能单独使用
  • 列表是可以嵌套的

17.表格

组成：table、caption、thead、tbody、tfoot

表格标题：caption

表格头部：thead

表格身体：tbody

表格脚注：tfoot

行：tr

单元格：th（头部）、td（主体）

table属性：

  1. border：边框
  2. width：宽度
  3. height：高度（高度至少是height）
  4. cellspacing：单元格间隔

thead属性：

  1. height：高度（如果超过了table中的高度，则此处的head高度为height，table的高度为head的高度加内容的高度）
  2. align：对齐方式（left、right、center）
  3. valign：垂直对齐方式（top、middle、bottom）

tbody属性：

  1. height：高度（至少是：table的height - thead的height - tfoot的height）
  2. align：对其方式
  3. valign：垂直对齐方式

tfoot属性：

  1. height：高度
  2. align：对其方式
  3. valign：垂直对齐方式

tr属性：

  1. height：单独设置某一行的高度
  2. align：对其方式
  3. valign：垂直对齐方式

th属性：

  1. width：一整行的宽度
  2. height：一整行的高度
  3. align：对其方式
  4. valign：垂直对齐方式

td属性：

  1. width：一整行的宽度
  2. height：一整行的高度
  3. align：对其方式
  4. valign：垂直对齐方式
  5. rowapan：跨行
  6. colspan：跨列

18.表单

官方概念：

网页中的一个交互区域，专门用于收集用户的数据

表单控件：

<form action="https://www.baidu.com/s">
    <input type="text" name="wd"/>
    <button>
        去百度搜索
    </button>
</form>
<hr/>
<form action="https://search.jd.com/search" target="_blank" method="GET">
    <input type="text" name="keyword"/>
    <button>
        去京东搜索
    </button>
</form>
<a href="https://search.jd.com/search?keyword=手机">搜索手机</a>

过程：

1.提交（请求） 2. 反馈（响应）

主要属性：

form：action、target、method

input：type、name、placeholder、value、checked

radio：naem、value、checked

隐藏域：name、value、type="hidden"

button：type、value

文本域（textarea）：col、row、name、value、placeholder

select：name、option标签：value（option中才添加value）、selected（默认选择）

disabled属性：禁用表单

label标签：for属性（填写id选择器），或者包裹整个文本和输入框

隐藏域：用户不可见的一个输入区域，在提交表单的时候用于携带一些固定的数据

19.fieldset和legend

fieldset：为表单空间分组

legend：分组标题

20.iframe框架标签

可以和其他的资源进行引用，包括嵌入普通网页、广告网页、图片、音频、视频、PDF

属性：width、height

<iframe src="https://www.toutiao.com" width="900" height="300" frameborder="0"></iframe>
<iframe src="https://www.baidu.com" width="900" height="300" frameborder="0"></iframe>
<iframe src="https://www.jd.com" width="900" height="300" frameborder="0"></iframe>

21.字符实体

<!-- 都代表一个空格 -->
&nbsp;&#160;
<!-- 分别代表左右括号 -->
&lt;&gt;
<!-- 代表一个& -->
&amp;
<!-- 代表一个￥ -->
&yen;
<!-- 代表一个© -->
&copy;

22.全局属性

属性名含义
id给标签指定唯一标识，id不能是重复的
class给标签指定类名，随后通过css可以给标签设置样式
style给标签设置css样式
dir内容的方向，值：ltr、rtl
title给标签设置一个文字提示，一般超链接和图片用的比较多
lang给标签指定语言

23.meta

meta：基本信息

<!-- 针对IE浏览器的一个兼容设置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对移动端的一个配置 -->
<meta name="viewpoint" content="width=device-width, inital-scale=1.0">
avatar
文章
阅读
粉丝