html

H5新特性

1. canvas 元素
2. 用于媒介回放的 video 和 audio
3. 语意化更好的内容元素，比如 article、footer、header、nav、section
4. 表单控件，calendar、date、time、email、url、search
5. localStorage 长期存储数据，浏览器关闭后数据不丢失；能维持在多个会话范围内
6. sessionStorage 的数据在浏览器关闭后自动删除。客户端数据存储，只能维持在当前会话范围内。

---

什么是viewport？

Viewprot是用户网页的可视区域，Viewprot翻译为中文可以叫做“视区”，

浏览器就想一个盒子一样，pc的浏览器和手机浏览器屏幕是不同尺寸大小。同样一套尺寸网页在pc上可以正常浏览，如果没有viewport定义浏览器的尺寸，想pc尺寸一样在手机浏览器上显示，布局可能就乱掉，或者先尺寸比例非常的不协调。

使用viewport元标签控制布局

<mate name='viewport' content='width=device-width;initial-scale=1.0;maximum-scale=1;user-scalable=no'>

Width - 正整数或device-width - 定义视口的宽度，单位为像素

Height - 正整数或device-height - 定义视口的高度，单位为像素，一般不用

Initial-scale - [0.0-10.0] - 定义初始缩放值

Minimum-scale - [0.0-10.0] - 定义缩小最小比例，它必须小于或等于maximum-scale

Maximum-scale - [0.0-10.0] - 定义放大最大比例，它必须大于等于minimum-scale

User-scalable - Yes/no - 定义是否允许手动缩放，默认值yes

• 延伸提问 - 怎样处理 移动端 1px 被 渲染成 2px问题
  • 局部处理
    mate标签中的 viewport属性 ，initial-scale 设置为 1
    rem按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；
  • 全局处理
    mate标签中的 viewport属性 ，initial-scale 设置为 0.5
    rem 按照设计稿标准走即可

---

如何解决移动端屏幕尺寸适配问题

1. 响应式布局
2. 百分比布局
3. rem布局
4. 媒体查询
5. vh和vw
6. viewport

---

语义化的理解

• 用正确的标签做正确的事情！
• HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
• 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
• 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解