HTML5---新标签与特性

1.HTML5新标签与特性

HTML5 是对 HTML 标准的第五次修订，目前仍未完工。2014年10月由万维网联盟（W3C）完成标准制定，其设计目的是为了在移动设备上支持多媒体。HTML5的出现，对于WEB来说意义重大。因为它的意图是想要把目前WEB上存在的各种问题一并解决掉，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。

• Web浏览器之间的兼容性很低

• 文档结构不够明确（增加了很多结构, 语义化的标签）

• Web应用程序的功能受到了限制Web浏览器之间的兼容性很低

总之：HTML5就是对HTML4已有标签属性的删除和增加，另外又增加了新的多媒体等标签，解决目前WEB上存在的问题。

HTML5 中的一些有趣的新特性：

• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如 calendar、date、time、email、url、search

1.1 文档类型设定

• document
  • HTML: html:4t
  • XHTML: html:xt
  • HTML5: html:5

1.2 字符设定

• ：HTML与XHTML中建议这样去写,其中，http-equiv 属性可用于模拟一个 HTTP 响应头。
• ：HTML5的标签中建议这样去写

1.3 常用新标签

w3c 手册中文官网：http://www.w3school.com.cn/

• header：定义文档的页眉

• nav：定义导航链接的部分

• footer：定义文档或节的页脚

• article：标签规定独立的自包含内容

• section：定义文档中的节（section、区段）

• aside：定义其所处内容之外的内容

• datalist：标签定义选项列表。请与 input 元素配合使用该元素，其中input的list属性值必须和datalist的id值一致。（修改后要刷新页面）

• fieldset：可将表单内相关元素分组，与legend 配合使用

• meter: 使用 meter 元素来度量给定范围（gauge）内的数据

  <meter value="3" min="0" max="10">十分之三</meter>
  

• progress: 标签定义运行中的进度（进程）

  <progress value="3" min="0" max="10"></progress>
  

1.4 常用新属性

属性****	用法****	含义****
placeholder****		占位符提供可描述输入字段预期值的提示信息
autofocus****		规定当页面加载时 input 元素应该自动获得焦点
multiple****		多文件上传
autocomplete****		规定表单是否应该启用自动完成功能，on默认，启用自动完成（name必须，提交按钮必须）
required****		必填项
accesskey****		规定激活（使元素获得焦点）元素的快捷键,Alt+S键

1.5 新增的input的type属性值：

类型****	使用示例****	含义****
email****	<input type="email">	输入邮箱格式
tel****	<input type="tel">	输入手机号码格式
url****	<input type="url">	输入url格式
number****	<input type="number">	输入数字格式
search****	<input type="search">	搜索框（体现语义化）
range****	<input type="range">	自由拖动滑块
time****	<input type="time">
date****	<input type="date">
datetime****	<input type="datetime">
month****	<input type="month">
week****	<input type="week">

综合案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WoBIu6yz-1574499871178)(media\zonghe.png)]

<form action="">
  <fieldset>
    <legend>学生档案</legend>
    <label for="userName">姓名:</label