DOCTYPE 是 html5 标准文档声明

标签特性

  • block块标签

    独自占有一行
    支持所有的样式设置
    不设置宽度，默认撑满父级

  • inline内联标签

    img标签可替换元素
    一行可以显示多个
    不支持宽高的设置，宽高由内容撑开
    上下margin、上下padding、上下border 会受到影响
    代码换行会解析出空格

    1. 父元素 font-size: 0; 子元素再单独设置字体大小
    2. <span>Line 1</span><!–
      –><span>Line 2</span>
  • inline-block内联块标签

    一行可以显示多个
    支持宽高的设置
    代码换行会解析出空格
    需要设置对齐方式vertical-align: top;

标签嵌套规则

  • ul 下只能用 li
  • ol 下只能用 li
  • dl 下只能用 dt、dd
  • figcaption 只能写在 figure 内
  • a 标签里面不能套 a 标签
  • p、h1~h6、dt 标签中 不用块标签
  • 内联标签中 不用块标签

标签分类

结构类标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>结构的划分</div>
块: 一般没有别的适合的标签的时候，就可以轮到它啦

<header>这里包含头部的内容</header>
头部，这里可以是一个网站的头部，也可以是一个大版块的头部

<section>划分版块</section>

<article>文章</article>
文章（可以包含: 标题、作者、发布时间、发布内容等）

<nav>导航栏</nav>

<aside>侧边悬浮</aside>

<footer>这里包含底部的内容</footer>
底部，可以是一个网站的底部，也可以是一个大板块的底部

aside 和 header 中都可能出现导航（nav 标签），二者的区别是，header 中的导航多数是到文章自己的目录，而 aside 中的导航多数是到关联页面或者是整站地图。

标题类标签

1
2
3
4
5
6
<h1>logo 或 网站名称</h1>
<h2>板块标题</h2>
<h3>文章标题</h3>
<h4>加粗强调文本</h4>
<h5>加粗强调文本</h5>
<h6>加粗强调文本</h6>

列表类标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<ol type="a" start="2">
  <li>有序标签</li>
  <!--
    type: 列表中的列表项目的项目符号的类型
      1 数字顺序的有序列表（默认值）（1, 2, 3, 4）
      a 字母顺序的有序列表，小写（a, b, c, d）
      A 字母顺序的有序列表，大写（A, B, C, D）
      i 罗马数字，小写（i, ii, iii, iv）
      I 罗马数字，大写（Ⅰ，Ⅱ，Ⅲ，Ⅳ）

    start: 规定有序列表的开始点
   -->
</ol>

<ul>
  <li>无序标签</li>
  <!--
    list-style-type: disc(实心圆)/circle(空心圆)/square(实心方块)/none;
    list-style-image: url('');
    list-style-position: outside / inside;
   -->
</ul>

自定义列表
<dl>
  <dt>水果</dt>
    <dd>苹果</dd>
    <dd>梨</dd>
    <dd>香蕉</dd>
  <dt>蔬菜</dt>
    <dd>番茄</dd>
    <dd>娃娃菜</dd>
    <dd>土豆</dd>
</dl>

文本类标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<span>文本</span>
<p>段落</p>

<b>文本加粗</b>
<strong>文本加粗，强调</strong>

<i>文字斜体</i>
<em>文字斜体，强调</em>

<mark>高亮</mark>
<time>时间</time>
<cite>引用</cite>

<sup>上标文本</sup>
<sub>下标文本</sub>
<del>删除文本</del>

<pre>
  定义预格式化的文本
</pre>

a 标签

1
2
3
<base target="_self" href="https://www.5207.fun/">

<a target="_blank" href="跳转地址 或 下载地址 或 锚点" title="鼠标停留的提示信息"></a>
  • href <link>
    1. 并行下载 建立联系 非阻塞
    2. 空的 href 属性对首屏渲染的影响比较小
  • src <script> <img> <iframe>
    1. 串行下载 应用资源 阻塞文档
    2. 浏览器在渲染过程中会把 src 属性中的空内容进行加载，直至加载失败 error，影响 DOMContentLoaded 与 Loaded 事件之间的资源准备过程，拉长了首屏渲染所用的时间

img 标签

1
2
3
4
5
6
7
8
9
10
11
<img src="图片地址" title="鼠标停留的提示信息" alt="图片不显示时候的备用文字" style="object-fit: cover;" />

<img src="clock-demo-thumb-200.png"
     alt="Clock"
     srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
     sizes="(min-width: 600px) 200px, 50vw" />

<picture>
  <source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)">
  <img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

img 标签底部存在间隙vertical-align: top;可以解决

图文标签

1
2
3
4
<figure>
  <img src="图片地址" />
  <figcaption>图片描述文字</figcaption>
</figure>

meta 标签

1
2
3
4
5
6
7
8
<meta charset="UTF-8" >

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta http-equiv="refresh" content="2; https://www.5207.fun/">

<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">

table 表格

form 表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<form action="提交地址" method="提交方式" target="_blank" enctype="multipart/form-data">

  <label for="username">用户名</label>
  <input id="username" type="text" value="" name="username" />

  <input type="file" name="file" accept="image/*" multiple="multiple" />

  <label>男<input type="radio" value="男" name="gender" checked /></label>
  <label>女<input type="radio" value="女" name="gender" /></label>

  <input type="checkbox" value="html权威指南" name="book[]" />html权威指南
  <input type="checkbox" value="css权威指南" name="book[]" />css权威指南
  <input type="checkbox" value="js权威指南" name="book[]" checked />js权威指南

  <select>
    <option>北京</option>
    <option>上海</option>
    <option selected>广州</option>
    <option>深圳</option>
  </select>

  <textarea cols="30" rows="10" placeholder="请输入.."></textarea>

  <!-- password email tel search url color range number
    datetime-local date month week time -->
  <input type="image" src="图片地址" alt="定义图像形式的提交按钮" />

  <!-- datalist定义可能出现的值，和list配合使用 -->
  <input type="text" list="tips" />
  <datalist id="tips">
    <option value="">提示1</option>
    <option value="">提示2</option>
    <option value="">提示3</option>
  </datalist>

  <!-- progress进度条 -->
  <progress value="" max=""></progress>
  <!-- 记录用户输入过的内容 -->
  <input type="text" autocomplete="on" name="要添加name" />
  <!-- 正则 -->
  <input type="tel" pattern="^1[234]\d{9}$" />
  <!-- 新增提交地址, 不依靠 form 上面的 action -->
  <input type="submit" value="草稿箱" formaction="https://api.daidaibo.com/" />
  <!-- 取消验证 -->
  <input type="submit" value="草稿箱" formnovalidate />
  <!-- 必填项 -->
  <input type="text" required />
  <!-- 自动获取光标 -->
  <input type="text" autofocus />
  <!-- 只读 -->
  <input type="text" readonly />
  <!-- 禁用 -->
  <input type="text" disabled />
  <!-- 隐藏 -->
  <input type="text" hidden />
  <input type="hidden"/>
  <!-- 可编辑 -->
  <div contenteditable="true"></div>

  <button>按钮</button>
  <input type="button" value="按钮" />

  <input type="reset" value="重置" />
  <input type="submit" value="提交" />
</form>

其它标签

1
2
3
4
5
6
水平线
<br />

换行
<hr />

清除默认样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p, dl, dd, figure {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, strong, b {
  /* 默认加粗 */
  font-weight: normal;
}

em, i, cite {
  /* 默认倾斜 */
  font-style: normal;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

mark {
  /* 去除高亮背景色 */
  background: none;
}

a {
  /* all: unset; */
  color: inherit;
  outline: none;
  text-decoration: none;
}

img {
  border: none;
  vertical-align: top;
  object-fit: cover;
  flex-shrink: 0;
}

/* 表格 */
th {
  font-weight: normal;
}

th, td {
  padding: 0;
}

table {
  border-collapse: collapse;
}

/* 表单 */
form {
  margin: 0;
}

input {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  vertical-align: top;
}

select {
  padding: 0;
  outline: none;
  vertical-align: top;
}

button {
  padding: 0;
  border: none;
  outline: none;
  vertical-align: top;
  cursor: pointer;
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

textarea {
  padding: 0;
  margin: 0;
  outline: none;
  vertical-align: top;
  /* vertical horizental both(配合 overflow: auto 一起使用) */
  resize: none;
}