HTML5新特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/LikeStudyBoy/article/details/78901536

目录
一、HTML的发展史
二、新的文档类型声明（DTD）
三、新增的HTML5标签
四、删除的HTML标签
五、崭新的页面布局
六、新增的表单下input元素的type类型
七、新增的表单元素、属性
八、新增的表单验证

一、HTML的发展史

1.1 由上面的图可以得知，现在的HTML5还不是一个最终统一的版本，所以说HTML5用在手机端的开发
不同的浏览器显示的效果可能不一样。因为HTML5没有一个统一的标准，不同的浏览器解析时不一样的，现在还处
于一个推广的阶段，但是大部分的是一样的

这里写图片描述

1.2 HTML5的特点
	更简单、标签的语义化、语法更宽松、多设备跨平台、自适应网页设计
1.3 什么是语义化标签？
	语义化标签就是尽量使用有相对应的结构的含义的Html标签
	1.3.1 好处
	结构更好，更利于搜索引擎的抓取（SEO的优化）和开发人员的维护（可维护性更高，因为结构清晰，so易于阅读）
	有利于特殊终端的阅读（手机、个人助理等），尽量用于有结构含义，少用无语义的，如<span><div>无意
	义，看不出是什么东西，可是<address>一看就知道这里面的是地址，em标签一看就知道这个是强调的内
	容，区分于不同内容。

二、新的文档类型声明（DTD）

2.1 HTML5的文档类型声明
	<!DOCTYPE html>
2.2 HTML5基本结构
	<!DOCTYPE html>命名文档类型
	<html></html>说明我们写的是标记语言
	<head></head>文件头部
	<title></title>文件标题（显示在状态栏上的内容）
	<meta charset="utf-8" />编码格式
	<body></body>文件主体(所有要写的内容)

三、新增的HTML5标签

3.1 新增的结构元素
	3.1.1 header元素 <header></header>
		header元素表示页面中一个内容区块或者整个页面的标题
	3.1.2 footer元素 <footer></footer>
		footer元素表示整个页面或者页面中的一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作
		日期以及创作者联系信息
	3.1.3 article元素 <article></article>
		article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或者报纸中的一篇
		文章
	3.1.4 aside元素 <aside></aside>
		aside元素表示acticle元素的内容之外的，与acticle元素的内容相关的辅助信息
	3.1.5 section元素 <section></section>
		section元素表示页面中的一个内容区块。比如章节、页眉、页脚或者页面中的其他重要部分。它可以
		与h1-h6等元素结合起来使用，标示文档结构。
	3.1.6 nav元素 <nav></nav>
		nav元素表示页面中导航链接的部分
	3.1.7 figure元素 <figure></figure>
		figure元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元。使用figcaption元
		素为figure元素添加标题。
		figure是一种元素的组合，带有可选标题。用来表示网页上一块独立的内容。
		figcaption表示figure的标题。从属于figure，并且figure中只能放置一个figcaption
3.2 新增的其他元素
	3.2.1 video元素 <video src="" controls=""></video>
		定义视频，比如电影片段或其他视屏流
	3.2.2 audio元素 <audio src=""></audio>
		audio元素定义音频，比如音乐或者其他音频流
	3.2.3 mark元素 <mark></mark>
		mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型
		的应用就是在搜索结果中向用户高亮显示搜索关键词
	3.2.4 canvas元素 <canvas id="" width="" height=""></canvas>
		canvas元素表示图形，比如图标和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘
		图API展现给客户端js。以使脚本能够把绘制的东西绘制到这块画布上。
	3.2.5 改良的ol元素 可以自定义编号 start，可以自定义编号类型 type
		type取值：1、a、A、i、I
		有序列表的列表项是从数字1开始的，通过start参数可以调整起始数值

四、删除的HTML标签

4.1 能使用css替代的元素
	basefont、big、center、font、s、strike、tt、u
	对于basefont、big、center、font、s、strike、tt、u这些元素，由于它们的功能都是纯粹为画面展
	示服务的，而HTML5中提倡吧画面展示性功能放在css样式表中统一编辑，所以将这些元素废除了，并使用编
	辑css，添加css样式表的方式进行替代。
	其中font元素允许由“所见即所得”的编辑器来插入，s元素、strike元素可以用del元素替代，tt元素可以
	由css的font-family属性替代。
4.2 不再使用的frame框架
	frameset、frame、noframes
	对于frameset元素、frame元素与noframes元素，由于frame框架对网页可用性存在负面影响，在HTML5
	中已不支持frame框架，只支持iframe框架，或者用服务器创建的由多个页面组成的复合页面的性质，同时
	将以上这三个元素废除。
4.3 只有部分浏览器支持的元素 applet、bgsound、blink、marquee
	对于applet、bgsound、blink、marquee等元素，由于只有部分浏览器支持这些元素
	特别是bgsound元素以及marquee元素，只被IE所支持，所以HTML5中被废除。
	其中applet元素可由embed元素或者object元素替代，
	bgsound元素可由audio元素替代
	marquee可由js编程方式所替代
4.4 其他被废除的元素
	废除rb元素，使用ruby元素替代
	废除acrony元素，使用abbr元素替代
	废除dir元素，使用ul元素替代
	废除isindex元素，使用form元素与input元素相结合的方式替代
	废除listing元素，使用pre元素替代
	废除xmp元素，使用code元素替代
	废除nextid元素，使用GUIDS替代
	废除plaintext元素，使用“text/plian”MIME类型替代

五、崭新的页面布局

这里写图片描述

六、新增的表单下input元素的type类型

在HTML5中，大幅度地增加与改良了input元素的种类，可以简单地使用这些元素来实现HTML5之前需要使用js才
能实现的许多功能。
例如：datetime date search tel url email number
	range color file month week time datetime-local
6.1 email类型
	<input type="email" value="damo@sina.com.cn" />
	email类型的input元素是专门用来输入email地址的文本框，如果该文本框中内容不是email地址格式的，
	则不允许提交。但它不检查email地址是否存在。提交时可以为空，除非加上了required属性。
	具有multiple属性，它允许在该文本框中输入一串以逗号分隔的email地址
6.2 url类型
	<input type="url" value="http://www.baidu.com" />
	url类型的input元素是一种专门用来输入url地址的文本框，需要输入http://才有效
6.3 number类型
	<input type="number"  min="10" max="100" step="5" />
	number类型的input元素是一种专门用来输入数字的文本框，并且提交时会检查其中的内容是否为数字。
	它与min、max、step属性很好地协作,为包含数字或日期的input类型规定限定（约束）
	max:最大值min:最小值step:数字间隔
6.4 range类型
	<input type="range" value="25" min="0" max="100" step="5" />
	range类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min和max属性，可以设定最小
	值与最大值（默认值为0与100）；还具有step属性，可以指定每次拖动的步幅
6.5 date pickers（date、month、week、time、datatime、datetime-local）
	拥有多个可供选取日期和时间的新输入类型。
	date-选取日月年；month-选取月年；week-选取周年；
	time-选取时间（小时和分钟）;datetime-选取时间、日月年（utc时间）；
	datetime-local-选取时间、日月年（本地时间）
6.6 search类型
	专门用来输入搜索关键字的文本框，与type="text"基本一样
6.7 color类型
	用来选取颜色，志在BlackBerry浏览器中被支持
6.8 output类型
	定义不同类型的输出，如计算结果的输出，或脚本的输出
6.9 注：必须从属于某个表单。即必须将它书写在表单内部，或对它添加form属性。
6.10 对新元素样式的使用
	注意，跟input标签设置样式一样，但是要设置标签中局部的样式不能实现。如改变日历的背景色，颜色狂的
	按钮效果等，这些都不可以实现。

七、新增的表单元素、属性

7.1 datalist 元素 选项列表
	<input type="text" list="works" />
	<datalist id="works">
	<option value="浏览器">
	……
	</datalist>
	datalist提供一个实现定义好的列表，通过ID与input关联，当在input内输入时就会有自动完成的功能，
	用户将会看见一个下拉列表供其选择。 请与input元素配合使用该元素，来定义input可能的值。
	datalist及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用input元素的list属性来绑定
	datalist。
7.2 placeholder 属性
	<input type="text" placeholder="请输入正确信息" />
	该属性用于可以显示简短的提示，提示用户该输入什么样的信息
7.3 autofocus 属性
	<input tyoe="text" autofocus />
	给文本框、选择框或者按钮空间加上该属性，当打开页面时，该控件自动获得光标聚点，一个页面只有一个。
7.4 list 属性
	参照上面新增的datalist标签
	在HTML5中，为单行文本狂增加一个list属性，该属性的值为datalist标签的id。
7.5 autocomplete 属性
	<input type="text" autocomplete="on" list="greeting" />
	辅助输入所用的自动完成功能，只有三种：on/off/（不指定）。
	on可以显示指定候补输入的数据列表，自动完成时，可以将该datalist元素中的数据作为在文本框中显示
7.6 multiple属性
	<input type="email" multiple />
	可以输入一个或者多个值，每个值之间用逗号分开；如果要获取其中的值在用split获取还可以应用于file

八、新增的表单验证

在HTML5中，在增加了大量的表单元素与属性的同时，也增加了大量在提交时对表单与表单内新增元素进行内容有
效性验证的功能。
8.1 required 属性
	<input type="text" required />
	可以应用在大多数输入元素上（除了隐藏元素和图片），在提交时如果元素内容为空白，则不允许提交，同时
	显示提示文字。
8.2 pattern 属性
	<input type="text" pattern />
	该属性能够提供一种正则表达式，只有用户输入的内容与该表达式匹配才是有效地，用户可自定义匹配格式
	例如：<input type="password" pattern="[0,9]{6,10}" />
	用户名验证规则：用户名长度为6~112并且由字母组成
	pattern="[a-z]{6,12}"
	密码验证规则：密码必须是数组与字母组合
	pattern="[a-za-z].*[0-9][0-9].*[a-za-z]"
8.3 取消验证
	可以对form表单添加novalidate属性
	即使form表单中的input添加了required，也将不进行验证

H5基础