重学HTML5的一些新体会
引言
半年前粗略的学习了前端三大件，现在决定走前端路线，重新开始学习！对于HTML5，有了一些新的收获
核心
这次重学HTML5,我最大的体会便是语义和实现分离。借用小甲鱼的一句话：这种终究是一个语义为王的时代！
我之前在写一些静态网页时，总喜欢大量的使用div元素，遇事不决div就完事了。
div元素虽然非常便利，但却容易被滥用。由于它们自身没有任何语义，因此容易导致 HTML 代码的含义变得混乱。所以要小心使用，只有在没有找到更好的语义方案时才选择它，而且要尽可能地少用，否则文档的升级和维护工作会变得异常困难
补充
关于HTML5的一些常用元素，我在之前有过总结HTML总结
总结的不太全面,完整速查表我推荐小甲鱼的HTML5/CSS3速查宝典
以下是对我的"HTML总结"的一些补充
语义为王的新时代
- header —— 定义简介形式的内容
- nav —— 定义页面主导航功能
- main —— 定义主内容，主内容中可以有各种子内容区段（比如 article、section、div 等）
- article —— 定义独立的文章内容，与页面其它部分无关（比如一篇博文）
- section —— 定义文档中的节，与 article 类似，但 section 更适用于组织页面使其按功能分块
- aside —— 定义侧边栏（术语条目、作者简介、相关链接等）
- footer —— 定义页脚部分的内容
- details —— 定义额外的细节
- summary —— 定义 details 元素的标题
meta标签
- 实现网页的自动跳转
<meta http-equiv="refresh" content="0; http://fishc.taobao.com">
content的值是跳转的时间,单位是秒
style标签下的media属性
- 实现网页在不同大小上的不同样式
<style type="text/css" media="screen and (min-width:512px) and (max-width:1024px)">
body {
background-image: url("../img/bc2.png");
}
</style>
link标签的rel属性
rel 属性必不可少，它说明了当前文档与被链接资源之间的关系。换言之，没有 rel 属性，浏览器可能不知道如何处理 link 元素
- 关联网站图标
关联网站图标，只需要将 rel 属性设置为 "icon"，然后设置 type 属性为 "image/x-icon"(不设置也能显示)，最后在 href 属性中指定图标的位置即可：
<link rel="icon" href="../Image/rabbit.ico" />
效果如下:
注意:图片格式只能为ico或icon
defer属性
defer 属性用于告诉浏览器只有再 HTML 文档全部解析完成之后再支持代码文件。
目前我只在script标签中用过,使用defer后script可以放在头部同时不必担心不会被执行
<script defer src="script.js">
fieldset和legend标签
fieldset 标签将表单内容的一部分打包，生成一组相关表单的字段。
legend 必须作为 fieldset 元素的第一个子元素存在。
<form oninput="x.value=parseInt(a.value)*parseInt(b.value)">
<fieldset>
<legend>乘法计算器</legend>
<input type="number" id="a" value="50">X
<input type="number" id="b" value="50">=
<output name="x" for="a,b">2500</output>
</fieldset>
</form>
video标签
video标签之前的文章中有过介绍,这里只做补充
muted属性
将视频静音.
video中的autoplay属性能让视频自动播放,但许多浏览器都默认禁止了,如果添加muted属性,浏览器便不会再拦截
视频预加载
- auto：要求浏览器尽快加载整个视频，默认行为
- metadata：只加载视频的元数据（宽度、高度、第一帧影像和视频总长度等）
- none：在用户点击开始播放之前不会加载视频
有选择的调整视频是否预加载,可以为用户节省流量
封面
默认情况下视频的封面，一般就是第一帧的图像
通过poster属性可以重新设置封面
图像映射
map元素
map 元素就是在图片上建立映射的意思。该元素有一个 name 属性，即指定图像映射的名称，然后给 img 元素的 usemap 属性填入对应的名称，这样就建立了映射的关系
area元素
光有映射还不够，咱还需要确定映射的具体位置，那就需要使用到 area 元素了。area 元素用于定义图像映射中的区域以及对应跳转的 URL。
<img src="pic.jpg" alt="鱿鱼游戏" usemap="#map" />
<map name="map">
<area
shape="circle"
coords="715,666,82"
href="https://fishc.com.cn"
alt="圆圈"
target="_blank"
/>
<area
shape="poly"
coords="906,656, 821,806 991,806"
href="https://movie.douban.com/subject/34812928"
alt="三角"
target="_blank"
/>
<area
shape="rect"
coords="1492,770 1645,922"
href="https://www.cnblogs.com/rfcaTheshy/"
alt="矩形"
target="_blank"
/>
</map>
- circle 需要提供圆心的坐标以及圆的半径
- poly 需要提供多边形每个点的坐标
- rect 需要提供矩形左上角和右下角的坐标
图像适配
picture 元素包含了一系列的 source 子元素，每个 source 对应一个不同的图片资源和匹配条件，这样浏览器就可以根据条件来选择最合适的图片显示
<picture>
<source media="(min-width: 1024px)" srcset="big.jpg">
<source media="(min-width: 512px)" srcset="small.jpg">
<img src="normal.jpg" alt="小姐姐" style="width:auto;">
</picture>
当浏览器分辨率大于 1024 像素的时候，显示的图像是 big.jpg；当浏览器分辨率小于 1024 像素但大于 512 像素的时候，显示的图像是
small.jpg；当浏览器分辨率小于 512 像素或者不支持 picture 元素的时候，显示的 normal.jpg。
list 属性和 datalist 元素
list 属性通常是搭配 datalist 元素来实现的。
强强联手的结果就是实现一个数据列表，说白了就是可以为用户提供一批备胎选项。
与select不同的是,这种方法用户既可以手动输入,也可以选择
<label>课程：<input list="myDatalist" name="datalist"></label>
<datalist id="myDatalist">
<option>《零基础入门学习Python》</option>
<option>《零基础入门学习Web开发》</option>
<option>《零基础入门学习Scratch》</option>
<option>《带你学C带你飞》</option>
</datalist>
上传文件
上传文件有许多的细节问题,具体请访问小甲鱼
引用
- q元素
q 元素用于定义较短的引用，浏览器通常会在引用内容的两侧添加引号。 - blockquote元素
引用一大段文本通常使用 blockquote 元素，浏览器通常会使用缩进的方式来显示该段文本，另外可以通过 cite 属性指定该引用的来源 URL。 - cite元素
cite 元素用于定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等）的标题。 - abbr元素
abbr 元素用于定义简称或者缩写，配合全局属性 title，可以指定该缩写代表的完整含义。 - dfn元素
dfn 元素表现定义中的术语，术语又称技术名词，是在特定专业领域中一般概念的词语指称，一个术语表示一个概念。 - address元素
address 元素定义文档或文章的作者/拥有者的联系信息。 - ruby元素
ruby 元素用于在网页上显示注音符号。
ruby 元素需要与 rt 元素和 rp 元素搭配使用。
其中，rt 元素用来标记注音符号，rp 元素则用来标记当浏览器不支持 ruby 元素时所显示的内容。 - bdo元素
HTML 的 bdo 元素允许你修改默认的文本方向。(rtl或ltr)
浙公网安备 33010602011771号