HTML是万维网核心语言的第几代,Html5相关的知识点总结

1.html5：万维网的核心语言、HTML规范的第五次重大修改。HTML是一种标记语言。

2.布局的语义化标签：

article：标签装载显示一个独立的文章内容

section ：标签定义文档中的节

aside：用来装载非正文类的内容

header ：标签定义文档的页面头部，通常是一些引导和导航信息

footer ： 标签定义 section 或 document 的页脚

nav ：标签定义显示导航链接

他们的使用场景代码如下：

1

2

3

4

5

Html5标签布局

6

7 *{8 margin: 0;9 padding: 0;10 }11 header{12 width: 1000px;13 height: 90px;14 background: #9cf1fd;15 margin-left: 150px;16 }17 p{18 margin-left: 20px;19 }20 nav{21 width: 950px;22 height: 30px;23 line-height: 30px;24 text-align:left;25 background: #e9fad0;26 margin-top: 20px;27 margin-left: 20px;28 }29 article{30 width: 700px;31 height: 400px;32 background: #b2d5fd;33 margin-top: 10px;34 margin-left: 150px;35 }36 section{37 width: 650px;38 height: 100px;39 margin-left: 20px;40 margin-top: 20px;41 background: #fcb062;42 float: left;43 }44 aside{45 width: 280px;46 height: 400px;47 float: right;48 margin-top: -400px;49 margin-right: 125px;50 background: #c8b1e7;51 }52 footer{53 width: 1000px;54 height: 40px;55 background: #78def3;56 margin-left: 150px;57 margin-top: 10px;58 }59

60

61

62

63

64

header

65

66

nav

67

68

69

70

article

71

section

72

section

73

section

74

75

aside

76

77

footer

78

79

80

3.标题语义化标签

标签用于对网页或区段(section)的标题进行组合.

1

2

会议内容

3

会议主题

4

4.媒体语义化标签

： 标签包含独立的媒体内容

标签定义 figure 元素的标题

这是黑夜

5.标记标签

在需要突出显示文本时使用 标签。

我的骑士

6.详细信息标签

标签用于描述文档或文档某个部分的细节，而这个细节并不需要文档加载时就展示，而是可以折叠。

默认显示的details 元素的标题。

1

2

3 导航1

4

导航内容1

5

导航内容2

6

导航内容3

7

7.进度条标签

标签定义运行中的进度(进程)

8.新增表单类型

标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

1

2

3 111

4 222

5 321

6 444

7 555

8

9.新增表单输入类型

email ---- 邮箱验证【@】

url ---- 网址输入法【http://www.xx.xx】

number --- (min、max、step数字间隔、value)

range --- (min、max、step数字间隔、value)---进度条

color ---- 检色器

date ---- 选取日、月、年

month ---- 选取月、年 week - 选取周和年

time ---- 选取时间(小时和分钟)

datetime ---- 选取时间、日、月、年(UTC 时间)

datetime-local ---- 选取时间、日、月、年(本地时间)

1

2 　　

3

4 　　

5

6 　　

7

8 　　

9 　　

10

10.新增表单属性

placeholder : 输入框提示信息

autofocus : 指定表单获取输入焦点

required : 必须要填写的字段

pattern : 正则验证 pattern="\d{1,5}"

1

2