H5、前端语义化、响应式布局原理
一、H5新增语义/结构化标签
1.结构标签
- <head>定义页面或者区域头部
- <main>规定文档主要内容
- <footer>定义页面或者区域底部
- <article>定义一篇文章
- <nav>定义导航链接
- <scetion>定义一个区域
- <aside>定义页面内容部分侧边栏
- <hgroup>用于对网页或者区域段的标题组合
- <figure>定义一组媒体内容以及标题
- <figcaption>定义figure元素标题
- <address>定义文章拥有者的联系信息
- <time>定义时间、日期
- <mark>高亮显示文字
- <video>定义一个视频
- <audio>定义一个音频
- <source>定义媒体资源标签
- <canvas>定义图形
- <embed>定义可交互的内容或者插件
- <progress>状态标签、进度条
- <mark>定义有标记的文本（默认是黄色选中内容）
- <output>定义一些输出内容，计算表单结果配合oninput事件
- <datalist>为input标记定义一个下拉option
1.类型：
- url:提交表单时检测input的value是否是一个url格式
- email:一个电子邮件地址或电子邮件地址列表
- date:年-月-日格式的控件
- time:时:分格式的控件
- datetime:年-月-日 时:分:秒:秒的小数格式的控件，有时区
- datetime-local:同上，但没时区
- month:年-月格式的控件
- week:年-周数格式的控件
- number:数字输入框
- cel:电话输入框
- color:颜色选择框
- range:选择区域
2.属性
- placeholder:占位符，当输入框为空时显示的文字
- required:该input是否为必填项
- list:指定一个datalist，作为下拉提示单
- pattern:指定一个正则表达式，用于检查输入是否符合正则
- min/max:input能输入的最大/最小字节的长度
- step:针对input的range类型，每次递增step的值
三、HTML5通过meta标签达到监听并适配设备屏幕的布局
<meta name="viewport" content="width=device-width, initial-scale=1.0">
四、HTML5删除/废弃不能用的元素
| 删除的元素 | 被以下替代 |
|---|---|
| <acronym> 首字母缩写 | <abbr> |
| <applet> | <object> |
| <basefont> 页面上默认字体颜色和字号 | CSS样式 |
| <big> 更大的文本 | CSS样式 |
| <center> 文本水平居中 | CSS样式 |
| <dir> 目录列表 | CSS样式 |
| <font> 字体外观，尺寸，颜色 | CSS样式 |
| <frame> 定义子窗口 | |
| <frameset> 定义框架集 | |
| <noframes> 向浏览器显示无法处理框架的提示文本，位于frameset元素中 | |
| <strike> 文本添加删除线 | CSS样式，<s>或<del> |
| <tt> 定义打字机文本 | CSS样式 |
五、前端语义化概念
1.概念：
语义化是指根据内容的结构，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。
2.语义化的必要：
随着互联网的发展，WEB承载越来越多的信息（图片，音频，视频等），人们开始用机器来处理网络信息，就此诞生了搜索引擎。如次庞大及复杂的信息如何让搜索引擎处理和挖掘，所以让机器能够更好地读懂WEB上内容就变得越来越重要。
3.作用：
1. 页面结构清晰：去掉或 CSS 样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。
2.支持更多设备: 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页。
3 . 利于SEO优化: 和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
4 . 便于团队开发和维护: 在团队中大家都遵循W3C标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
4.语义化方法：
（1）根据文档上下文结构合理的选用最适合表达当前语义的标签；
（2）尽可少使用无语义的标签 <div> 和 <span>；
（3）不要使用带有样式的标签，比如：<b> 、 <u> 、 <font> 等，使用 CSS 设置；
（4）标题标签的使用应该根据重要性逐级递减，没有断层，并且一个页面只能有一个 <h1>；
（5）提高关键词密度，如图像的替代文本 alt，提示文本 title；
（6）正确使用内容容器，比如段落 <p>，列表 <ul>, <ol>, <li>, <dl>, <dt>, <dd>;
（7）需强调的文本，可使用 <strong> 或 <em> 标签（浏览器默认样式，能用 CSS 设置就不用）， <strong> 默认样式是加粗（不用 <b>），<em> 是斜体（不用 <i>）；
（8）表格注意使用，标题 <caption>，表头 <thead>，表格主体（正文）<tbody>，表注（页脚）<tfoot>。<tr> 定义表格行，<th> 定义表头，<td> 定义表格单元。
（9）表单域使用 <fieldset>标签，并且<legend> 标签为 <fieldset> 定义标题；
（10）每个 <input> 标签对应的说明文本都需要使用 <label> 标签，通过为 <input> 设置 id 属性，并且在 <lable> 标签中设置 for=id 使说明文本和对应的 <input> 关联。
六、前端响应式原理：
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局
响应式设计与自适应设计的区别：
响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容
自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面
方案：
1.媒体查询：
CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
@media screen and (min-width: 414px)/@media screen and (max-width: 414px)
2.百分比布局
通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。
Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。
必须要弄清楚css中子元素的百分比到底是相对谁的百分比:
1.子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height
2.子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度
3.子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关
4.跟padding一样，margin也是如此，子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width
5.border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，除了border-radius外，还有比如translate、background-size等都是相对于自身的
3.rem布局
rem是css3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。
缺点：在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前
视口单位:
| 单位 | 含义 |
|---|---|
| vw | 相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw |
| vh | 相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh |
| vmin | vw和vh中的较小值 |
| vmax | vw和vh中的较大值 |
响应式布局的要点:
在实际项目中，我们可能需要综合上面的方案，比如用rem来做字体的适配，用srcset来做图片的响应式，宽度可以用rem，flex，栅格系统等来实现响应式，然后可能还需要利用媒体查询来作为响应式布局的基础，因此综合上面的实现方案，项目中实现响应式布局需要注意下面几点：
设置viewport(viewport 是用户网页的可视区域)--->媒体查询--->字体的适配（字体单位）--->百分比布局--->图片的适配（图片的响应式）--->结合flex，grid，BFC，栅格系统等已经成型的方案
<meta name="viewport" content="width=device-width, initial-scale=1.0"> width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放。
