// 理解html语义化
1. 让人更容易读懂,增加代码可读性
2. 让搜索引擎更容易读懂(seo)
----------------------------------------------------------------------------------------------
// 块状和内联元素
1. display: block/table // 块状元素
h1、h2、table、ul、ol、p等
2. display: inline/inline-block // 内联元素
span、img、input、button等
----------------------------------------------------------------------------------------------
// 结构标签,块级有意义的div
1. <article> // 标记定义一篇文章
2. <header> // 标记定义一个页面或一个区域的头部
3. <nav> // 标记定义导航链接
4. <section> // 标记定义一个区域
5. <aside> // 标记定义页面的内容部分的侧边栏
6. <hgroup> // 标记定义文件中一个区块的相关信息 h1 ~ h6
7. <figure> // 标记定义一组媒体内容以及他们的标题 视频等
8. <figcation> // 标记定义figure元素的标题
9. <footer> // 标记定义一个页面或一个区域的尾部
10. <dialog> // 标记定义一个对话框(会话框),类型微信
11. 嵌套规则:
不嵌套: 1、2、4、5、9
(2、4、9) > (1、3、5、6、7) > div > figcation
----------------------------------------------------------------------------------------------
// 多媒体标签, IE8及以下不支持
1. <video> // 标记定义一个视频 MP4、webm、ogr
2. <audio> // 标记定义音频内容
3. <source> // 标记定义媒体资源src、type、media资源的类型
4. <video>低版本不识别,提示该换浏览器了</video>
<video><source src="url" type="video/MP4" /></video>
属性:
width = "宽"
height = "高"
src = "url"
autoplay = "autoplay" // 自动播放
controls = "controls" // 显示播放控件
loop = "loop" // 循环播放
muted = "muted" // 静音
preload = "preload" // 预加载
poster = "url" // 视频下载时显示的图像
5. <audio>低版本不识别,提示该换浏览器了</audio>
<audio><source src="url" type="audio/mpeg" /></audio>
属性:
src = "url"
autoplay = "autoplay" // 自动播放
controls = "controls" // 显示播放控件
loop = "loop" // 循环播放
muted = "muted" // 静音
preload = "preload" // 预加载
6. <embed> // 定义一个gif
属性:
src = "url"
width = "宽"
height = "高"
type = "类型"
----------------------------------------------------------------------------------------------
// 状态标签
1. <meter> // 实时状态显示: 气压、气温 firefox、opera、chrome、safari6
属性值:
form = "formid" // 属于哪个表单
high = "最高值"
low = "最低值"
max = "范围的最大值"
min = "范围的最小值"
optimum = "度量的优化值"
value = "度量的当前值"
2. <progress> // 任务过程: 安装、加载 firefox、opera、chrome、safari6、IE10+
属性值:
max = "任务一共需要多个工作"
value = "当前完成多少"
----------------------------------------------------------------------------------------------
// 列表标签
1. <datalist> // 为input标记定义一个下拉列表,配合option firefox、chrome、IE10+
<input list="id" />
<datalist id="id">
<option>内容</option>
</datalist>
2. <details> // 标记定义一个元素的详细内容,配合summary firefox、chrome、safari
<details open="open">
<summary>标题</summary>
内容
</details>
----------------------------------------------------------------------------------------------
// 注释标签
1. <ruby> // 标记定义注释或音标
2. <rt> // 标记定义对ruby的注释内容文本
3. <rp> // 不支持ruby元素的浏览器的显示方式
----------------------------------------------------------------------------------------------
// 其他标签
1. <mark> // 标记定义有标记的文本(黄色选中状态)
2. <output> // 标记定义一些输出类型计算表单结果
----------------------------------------------------------------------------------------------
// input新增类型
1. <input type="email/url/tel/number..." />
2. type = "Date" // 选取年月日
3. type = "Mouth" // 选取年月
4. type = "week" // 选取年周, ipone不兼容
5. type = "Time" // 选取时间(小时分钟)
6. type = "Detetime-local" // 选取时间,年月日和本地时间
7. type = "range" // 选择范围 max和min,进度条
8. type = "search" // 输入框多个x
9. type = "color" // 颜色选择框
----------------------------------------------------------------------------------------------
// form和input新增属性
1. autocomplete = "on/off" // 自动补全默认on,也可以用于input
2. autofocus = "autofocus" // 自动获得焦点,用于所有input标签
3. multiple = "multiple" // 选择多个值,用于email和file
4. placeholder = "提示文字" // 用于text、search、url、tel、email、password
5. required = "required" // 用于input判断是否必填
----------------------------------------------------------------------------------------------
// 链接属性
1. <link sizes="16*16"> // 图标大小,用于不同的浏览器大小
2. <base href="url" target="_blank">
3. <a>的属性:
media: 规定链接文档为何种媒体媒介
hreflang: 规定被链接文档的语言
rel: 规定当前文档与被链接文档之间的关系
4. <script>的属性:
默认：HTML 暂停解析，下载 JS，，下载完成后执行 JS，再继续解析 HTML
defer：HTML 继续解析，并行下载 JS，HTML 解析完再执行 JS，和把 script 放在 body 底部的效果差不多
只是放在底部不会并行下载，会执行到底部才会下载再解析 JS
async：HTML 继续解析，并行下载 JS，下载完成后执行 JS，再解析 HTML
----------------------------------------------------------------------------------------------
// ol标签新增属性
1. start = "起始值"
2. reversed = "reversed"
----------------------------------------------------------------------------------------------
// html新增属性
1. manifest = "网页名.manifest" // 定义页面离线应用文件
----------------------------------------------------------------------------------------------
// style新增
1. scoped: 内嵌css,可以在body任意地方写css
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
