a标签download属性无效_HTML5(1)- 语义化标签和多媒体

1. 新增语义化标签

语义化标签能够更好地构建我们HTML文件的结构，同时在SEO中能提高搜索排名。

新增的标签有：

1. header：头部标签
2. nav：导航标签
3. main：主体标签
4. article：独立的内容标签
5. section：区段标签
6. aside：侧边栏标签
7. footer：尾部标签

1. 语义化标准主要针对搜索引擎的
2. 新标签在一个页面中可以使用多次
3. IE9中需要把元素转换成块级元素
4. 移动端更喜欢用这些标签
5. H5新增标签不止上面这些

2. 多媒体标签

2.1 audio

属性	值	描述
autoplay	autoplay	音频就绪后马上播放
controls	controls	显示控件
loop	loop	循环播放
preload	preload	页面加载时加载音频，如果设置了autoplay，那么该属性会被忽略
src	url	音频的url

<

• 注意：h5中如果属性值和属性名相同，那么可以省略书写属性值（后面大多使用这个技巧节省代码量）
• 简略写法

<

由于各个浏览器中对音频格式支持不一样，一般至少需要设置两种格式的音频。

<

2.2 video

属性	值	描述
autoplay	autoplay	视频就绪后马上播放
controls	controls	显示控件
loop	loop	循环播放
preload	preload/none	页面是否加载时加载视频，如果设置了autoplay，那么该属性会被忽略
src	url	音频的url
width	px	播放器宽度
height	px	播放器高度
poster	imgurl	加载等待时的图片
muted	muted	静音播放

• 注意：浏览器中可能出现设置autoplay会无效的情况，这是浏览器为了用户体验默认禁止的，可以添加muted属性让视频静音播放。
• 正常写法：

<

<

结论

1. 多媒体标签使用基本相同。
2. 需要考虑浏览器支持
3. 视频可设置muted自动静音播放，音频不能静音
4. 视频通常只设置宽高其中一个，另一个等比例适应
5. 视频一般不使用controls属性，存在兼容问题

Links：目录——走扎实的前端路​