H5新增笔记

H5

H5简介

HTML5是HTML最新的修订版本，具有新的元素，属性和行为。
HTML5规范于2014年10月29日由万维网联盟正式宣布。

H5新变化

H5文档声明与字符集的变化

• 简化了文档声明
• 简化了字符集

**H5新特性

• 新增语义化元素
• 新增表单相关新元素、新属性
• 新增了全局属性
• 新增API（应用程序接口）
  • canvas绘图
  • 多媒体（视频、音频）
  • 本地存储、离线存储
  • 地理信息

移除的元素（了解）

• 以下的HTML4.01标签在HTML5中已经被废弃

<acronym> 定义只取首字母缩写 
<applet> 规定 Java applet 的文件名 
<basefont> 定义文档中所有文本的默认颜色、大小和字体 
<big> 呈现大号字体效果 
<center> 标签控制文本的居中显示 
<dir> <dir> 标签定义目录列表 
<font> 标签规定文本的字体、字体尺寸、字体颜色 
<frame> 标签定义 frameset 中的一个特定的窗口（框架） 
<frameset> frameset 元素可定义一个框架集 
<noframes> noframes标签向浏览器显示无法处理框架的提示文本 
<strike> strike 标签可定义加删除线文本定义。

• 提示：由于H5是向前兼容的，所以在H5中使用这些标签也不会报错或出现异常，但这些元素在H5中已不被W3C标准推荐，不建议使用

H5新增的语义元素

HTML5新增了页眉、页脚、内容块等文档结构相关的标签，可以使文档结构更加清晰明确

article（文章）

• 语法：

<article></article>

• 作用：元素表示文档、页面、应用或网站中的独立结构，可以成为可独立分配的或可复用的结构

	代表文档、页面或应用程序中所有“正文”部分，它所描述的内容应该是独立的、完整的、可以独自被外部引用的
	可以使一篇博客、报刊中的文章、一篇论坛中的帖子、段用户评论，一个独立的插件，或任何独立于 上下文中其他部分的内容

• 典型应用：论坛帖子、杂志或新闻文章、博客、用户提交的评论、或者其他独立的内容项目
• 注意：
  • 每个article通常包括标题（h1-h6）作为article的子元素
  • 可能包含一个或多个section

section（节、章节）

• 语法：

<section></section>

• 作用：
  • 定义文档中的节（页面内容的区段、文章中的章节）
  • 对网站或应用程序中的页面上的内容进行层次结构上的划分
• 典型应用：文章中的情节
• 注意：
  • 样式上的分区用div，内容结构上的分区用section
  • 一个section元素通常由内容及标题组成，不建议为没有标题的内容使用section

nav

• 语法

<nav></nav>

• 作用：定义导航链接的部分，在nav中一般以ul放置链接组元素
• 典型应用：主导航、侧边栏导航、业内导航、菜单、面包屑导航、分页、目录和索引等

aside

• 语法

<aside></aside>

• 语义：表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他有别于主要内容的部分
• 典型应用：当前文章有关的参考资料何名词解释等，也可以是友情链接、其他文章列表或广告模块等

header

• 语法

<header></header>

• 语义：定义整个文档或文档中一个节段的头部（页眉）
  作为文档的头部通常含搜索表单、相关的logo、站点名称以及水平菜单等
  作为一个节段的头部，通常包含了节段的标题和作者名字等
• 典型应用：整个页面的头部、文章页的包含标题部分的头部

footer

• 语法：

<footer></footer>

• 作用：定义文档或节的页脚
  作为文档的页脚通常会包含版权信息和法律声明以及一些其他链接
  作为区块的页脚，一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等消息
• 典型应用：网页中的版权信息，相关阅读链接

<article>,<section>,<aside>,<nav>可以拥有他们自己的<footer>

兼容问题

问题概述：IE8浏览器中还没有添加对HTML5新标签的支持，当页面中使用HTML5新标签时，新标签被当做错误处理

解决方案

一、

通过document.createElement(tagname)方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加css样式

<!--[if lt IE 9]> 
	<script>
		document.createElement("header"); 
		document.createElement("footer"); 
	</script> 
<![endif]-->

由于创建出来的元素是内联元素，所以需要转换成块级，宽度和高度才能生效 header,footer,nav,article,section,aside{ 
	display: block;
}

二、使用封装好的插件html5shiv.js解决

html5shiv主要解决HTML5提出的新元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式

<!--[if lt IE 9]> 
	<script src="html5shiv.js"></script> 
<![endif]-->

• 说明
  • 条件注释作用是使得该代码块在IE浏览器的版本小于IE9时执行，读取html5.js文件，并解析它
  • 可以使用本地的文件也可以使用外部资源库
    • Google 资源库：（不稳定）http://html5shiv.googlecode.com/svn/trunk/html5.js
    • 百度静态资源库：（国内推荐使用）http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js

新增表单元素与相关属性

H5新增的input类型

概述：HTML5拥有多个新的表单输入类型，其新特性提供了更好的输入控制和验证

search搜索域

作用：搜索域，比如站点搜索或Google搜索

<input type="search">

tel电话号码输入域

• 作用：输入电话号码的文本域——移动端配合数字键盘的变化

<input type="tel">

url域

• 作用：url地址的输入域；
• 说明：
  • 在提交表单时，会自动验证url域的值，输入不合法无法提交，弹出提示框
  • 移动端：配合.com键盘变化

<input type="url">

email域

• 作用：包含e-mail地址的输入域
• 说明：
  • 在提交表单时，会自动验证email域的值
  • 移动端：@和.com选项的键盘变化

<input type="email">

number 数值输入域

• 作用：包含数值的输入域
• 相关属性：通过以下属性设定对所接受的数字的限定
  • max：定义允许的最大值
  • min：定义允许的最小值
  • step：定义合法的数字间隔（步长）
  • value：定义默认值

<input type="number" value="6" max="10" min="2" step="2">

range 一定范围内的数值输入域

• 作用：用于包含一定范围内数字值的输入域，显示为滑动条
• 相关属性：通过以下属性设定对所接受的数字的限定
  • max：定义允许的最大值
  • min：定义允许的最小值
  • step：定义合法的数字间隔（步长）
  • value：定义默认值

<input type="range" value="6" max="10" min="2" step="2">

color 颜色输入域

• 作用：颜色输入域，用于选取颜色

<input type="color">

世间日期选择器

date日期

• 作用：选择一个日期（年月日）
• 代码示例

<input type="date">

time事件

• 作用：选择小时分钟
• 代码示例

<inpput type="time">

datetime-local本地时间

• 作用：选择一个日期和时间（无时区）
• 代码示例

<input type="datetime-local"

提示：

并不是所有的主流浏览器都支持新的input类型，
即使不被支持，仍然可以显示为常规的文本域

测试地址

新增表单属性

placeholder

• 作用：提供一种输入提示，描述输入域所期待的值

min、max、step

• 作用：
  • max属性规定输入域所允许的最大值
  • min属性规定输入域所允许的最小值
  • step属性为输入域规定合法的数字间隔

• 提示：适用于range何number类型

autofocus自动获取焦点

• 作用：规定在页面加载完成时，自动地获得焦点

autocomplete属性

• 作用：当表单元素获取焦点时，会提供选项列表，以供用户选择自动填充
• 取值：
  • on——开启
  • off——关闭

<form action="">

• 提示：【该功能与浏览器本身的设置】有关，可能需要首先启用浏览器本身的自动完成功能，才能使autocomplete属性起作用

required属性

• 作用：规定必须在提交之前验证输入域（不能为空），为空则弹出提示，无法提交

<form action="">

pattern属性

• 作用：用于验证input域的模式
  • 提交时会根据指定的模式对输入的值进行验证
  • 输入合法可以提交，不合法弹出提示，无法提交

<form action=""> <input type="text" name="testname2" pattern="[0-9]"> <input type="submit" value="提交"> </form>

multiple属性

• 作用：规定输入域中可选择多个值
  一般用于上传域何email类型的输入域
  • 用于email域
    默认email域不支持多个email地址，用于email之后则允许输入多个逗号隔开的email地址、
  • 用于file域
    默认file类型只支持选择单个文件上传,multiple属性可以使它一次性选择上传多个文件

<form action=""> email域： <input type="email" name="testemail" multiple> 文件域： <input type="file" name="testfile" multiple> <input type="submit" value="提交"> </form>

form属性

• 作用：规定表单元素所从属表单区域的id
• 引用一个以上的表单，使用空格分隔的列表

<form action="#" id="form1"> <input type="text" name="username"/> </form> <input type="reset" form="form1">

新增的多媒体元素

网页中大多数视频、音频是通过插件（比如flash）来显示的
HTML5规定了网页包含视频、音频的标准方法

video视频

<video src="video/movie.mp4"> 您的浏览器已out,不支持欣赏视频 </video>

兼容：video元素在ie9以下不支持（允许在开始和结束之间放置内容，用于在不支持的浏览器显示文本内容）

属性：

• src="" 视频资源地址
• controls 显示播放、暂停等控件
• loop 循环播放
• muted 静音
• autoplay 自动播放
• width=“500” height=“1000” 宽高只指定一个，另一个按原比例等比缩放，（播放控件的大小）
• poster=“图片地址表示视频封面”

各浏览器支持的视频格式

![](C:\Users\20199\Desktop\笔记\img\video.png)

音频

兼容：audio元素在ie9以下不支持

允许在开始何结束中间放置内容，用于在不支持的浏览器显示

属性

• src="" 音频资源地址
• controls 显示播放 、暂停控件
• loop 循环播放
• muted 静音
• autoplay 自动播放

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

source标签

<video controls loop muted height="500" poster="video/pic.png"> 
	<source src="video/PPAP.webm" type="video/webm"> 
	<source src="video/movie.mp4" type="video/mp4"> 
	<source src="video/butterfly.ogg" type="video/"> 
	您的浏览器已out,不支持欣赏小视频 
</video>

• 允许使用source标签引入多个音、视频资源
• 浏览器会播放第一个【可识别】的格式

全局属性

使用data-* 来嵌入自定义数据
data-* 属性包括两部分内容：

• 属性名不应该包含任何大写字母，并且在前缀"data-"会后必须有至少一个字符
• 属性值可以使任意字符串

<ul>
	<li data-en="HOME">首页</li> 
	<li data-en="ABOUT">关于我们</li> 
	<li data-en="Contact">联系我们</li> </ul>