语义化标签

今天一起来学习HTML5中的语义化标签。

首先要了解为什么要使用语义化标签？

优点

 

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；

 

比<div>标签有更加丰富的含义，方便开发与维护；

 

方便搜索引擎能识别页面结构，有利于SEO；

方便其他设备解析（如移动设备、盲人阅读器等）；

 

有利于合作，遵守W3C标准。

语义化标签

 

 

1.HTML5新语义化标签 ( 很重要的 )

div span h1 img -> html4.01
width height background -> css2.1
transform border-radius -> css3

header footer main -> html5

注：很多新的HTML5语义化标签，跟div类似。

header : 页眉
footer : 页脚
main : 主体
注：header footer main 语义化标签在一个页面中只能出现一次。

hgroup : 标题组合
nav : 导航
article : 独立的内容
论坛帖子
报纸文章
博客条目
用户评论
aside : 辅助信息的内容
section : 区域 , 跟div的功能以及语义是一样的

figure : 描述图像或视频
figcaption : 描述图像或视频的标题部分

datalist : 选项列表
details / summary : 文档细节 / 文档标题
time : 定义日期或时间

mark：带有记号的文本

 

2. 音频与视频

audio ：音频 ，双标签
格式:mp3 m4a ogg avi...

controls : 显示控件
loop : 循环播放
autoplay : 自动播放 ( 很多浏览器已经

禁止这个功能，因为考虑到用户体验的问题 )
muted : 静音

video : 视频 ， 双标签

object-fit: cover; 可以让视频覆盖整个

父容器。

注：音频和视频的默认控件是隐藏的。
注：如果想做出跟QQ音乐一样的效果：audio标

签 + 隐藏控件（默认的，控件的样式用HTML+CSS模

拟）+ JavaScript来实现交互功能。
注：在视频中，可以通过 autoplay + muted

可以在静音的情况下进行自动播放。
注：默认情况下，视频是不能进行拉伸的，必

须成比例。
注：为了能够支持多个备选文件的兼容支持，

可以配合source标签。

3. 新的表单控件

email : 电子邮件地址输入框
url : 网址输入框
number : 数值输入框
range : 滑动条
date / month / week : 日期控件
search : 搜索框 ( 跟普通框的区别，会多一个关闭按钮 )
color : 颜色控件
tel : 电话号码输入框 ( 跟普通框的区别，在移动端，会调起带数字的软键盘 )
time : 时间控件
表单怎么把值传给后端的？
name -> 卡
value -> 钱
后端根据 name 拿到 value
传输方式？
method : 数据传输方式
GET （ 默认的 ）
POST
传输类型?
enctype : 数据传输类型
application/x-www-form-urlencoded 默认传输的是文本
multipart/form-data 传输的是文件

表单的新属性？
autocomplete="off" 关闭表单的默认提示
信息
autofocus : 自动获取焦点
required : 值不能为空
pattern : 正则验证 ( JS的内容了 )

4. 分栏布局
column-count : 分栏的个数
column-width : 分栏的宽度
注：column-count column-width 不要一起去写。
column-gap : 分栏的间距
column-rule : 分栏的边线
column-span : 合并分栏
注：num | all