HTML-04-HTML5

HTML-HTML5

HTML5相关介绍

1. HTML5是HTML的第五个版本或第五次修改；
2. HTML5是一个标准；
3. HTML5技术已经包含很多东西，html、css、html5、css3、JS(原生)、vue.js、react.js、小程序

HTML4文档声明

​ 是基于SGML（标准通用标记语言）规定了在不同系统之间文档结构都是一样的

​ 文档类型：

• strict 严格型
• Transitional 过渡型
• Frameset 框架型
• DTD mobile 移动端 （DTD 规定了标记语言阿规则，这样浏览器才能正确地呈现内容）

H5优点

• 更简洁

• 语义化

• 语法更宽松

• 跨平台

• 自适应网页设计

  语义化的重要性：

  1. 当页面加载失败的时候，还能呈现出清晰的结构；
  2. 有利于SEO的优化，利于搜索引擎收录（即便于网络爬虫的识别）；
  3. 在项目开发及维护时，语义化也很大程度上降低开发难度，节省成本；

H5新增

常用语义化标签

header：头部

nav：导航

main：主要，身体，一个页面里只有一个main标记

section：块

footer：尾部

article：文章

aside：侧边栏

firgure：用作文档中插图的图像，一般表示文档中主题内容中的一个独立单元，一个figure只能放一个figcaption

figcaption：标题

<figure>
    <!-- 一个figure只能放一个figcaption -->
  <figcaption>标题</figcaption>
</figure>

address：地址

time：时间

mark：显示高亮

canvas：画布（内联块）

Datalist：列表，带有提示信息的（ajax技术前后端交互使用的）

<Datalist id="data">
  <option value=""></option>
  <input type="text" list="data">
  <!-- list和id绑定，一致 -->
</Datalist>

音视频

vedio：视频，支持的格式：mp4、ogg、webm 三种

source：资源 — 作用：路径

object：对象 — 作用是引用flash使用的 （.swf表示flash格式的后缀名）

<video src="" controls autoplay loop poster="" muted preload="auto"></video>
<!-- src表示资源路径，contrs：播放控件，autoplay：自动播放，loop：循环播放，poster：视频封面，muted：静音，preload：预加载 -->

<video controls autoplay loop poster="" muted preload="auto">
  <source src="" type=""></source>
</video>

controls：播放控件

autoplay：自动播放

loop：循环播放

poster：视频封面

muted：静音

preload：预加载

preload取值：

• auto：一旦页面加载（预加载），则开始加载音频/视频；
• metadata：当页面加载后，仅加载音视频的元数据；
• none

audio：音频

，属性与video一致

embed：视频和音频的插件，作用：可以播放视频，也可以播放音频

智能表单

<form novalidate>
  <!-- novalidate是一个布尔值，表示当提交表单时不对其进行验证 -->
  ...
</form>

新增类型和标记：

<form>
  <input type="emial">
  <!-- emial：电子邮箱 -->
  <input type="url" required="">
  <!-- url：地址，require：表示表单为空，不能提交 -->
  <input type="search">
  <!-- search：搜索 -->
  <input type="number" value="" min="" max="" step="">
  <!-- number：数字，只能输入数字，value表示初始值，min：最小值，max：最大值，step：步进（间隔） -->
  <input type="range">
  <!-- range：进度条 -->
  <input type="color">
  <!-- color：颜色拾取器 -->
  <input type="tel">
  <!-- tel：电话号码 -->
  <input type="date">
  <!-- date：日历 -->
  <input type="month">
  <!-- month：月份 -->
  <input type="week">
  <!-- week：星期 -->
</form>

浏览器运行效果：

属性：

placeholder：和value作用类似；

autofocus：自动获取焦点；

autocomplete：off/on；开关表单提示功能；

type=“hidden”：隐藏域，对用户是不可见的，提交数据时，把收集的用户数据提交给服务器

优雅降级与渐进增强

图示

定义

优雅降级（Graceful Degradation）： 一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。相当于向下兼容

渐进增强（Progressive Enhancement）： 一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。相当于向下兼容

二者区别

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

渐进增强观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

引用：前端开发之优雅降级与渐进增强