第九章HTML5入门基础
目录
HTML5是一种网络标准，相比早期的HTML4.01和XHTML1.0，可以实现更强的页面表现性能，同时充分调用本地资源，实现不输于APP的功能效果。HTML5带给了浏览者更强的视觉冲击，同时也让网站程序员更好的与HTML语言“沟通”。
1、认识HTML5
在新的HTML5语法规则中，部分JavaScript代码将被HTML5的新属性所替代，部分Div布局代码也将被HTML5变为更加语义化的结构标签，这使得网站前端的代码变得更加精炼、简介和清晰，代码所要表达的意思也更加一目了然。
HTML5是一种用来组织Web内容的语言，其目的是通过创建一种标准和直观的标记语言来让Web设计和开发变得容易起来。HTML5提供了各种切割和划分页面的手段，允许切割组件不仅能用来逻辑地组织站点，而且能够赋予网站聚合的能力。这是HTML5富于表现力的语义和实用性美学的基础。HTML5赋予设计者和开发者各种层面的能力来向外发布各种各式各样的内容，从简单的文本到丰富的交互式多媒体无不包括在内。
HTML5提供了高效的数据管理、绘制、视频和音频工具，促进了网页和移动设备的跨浏览器应用的开发。HTML5拥有强大的灵活性，支持开发非常精彩的交互式网站。其还引入了新的标签和增强性的功能，其中包括了表单控制、API、多媒体、数据库支持和显著提升的处理速度等。
2、HTML5与HTML4的区别
2.1HTML5的语法变化
在各种情况下，各浏览器之间的互兼容性是它的一个很大的目标，为了确保兼容性和互操作性，在很大程度上取决于网站或Web应用开发者们所做的共同努力，而浏览器本身始终是存在缺陷的。
2.2HTML5中的标记方法
1.内容类型（ContentType）
HTML5的文件扩展符与内容类型保持不变。也就是说，扩展符仍然为“.html”或“.htm”，内容类型（ContentType）仍然为“text/HTML”。
2.DOCTYPE声明
DOCTYPE声明是HTML文件中必不可少的，它位于文件第一行。在HTML4，它的声明方法如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">DOCTYPE声明是HTML5里众多新特征之一。现在你只需要写<!DOCTYPE HTML>这就行了。HTML5中的DOCTYPE中的DOCTYPE声明方法如下：
<!DOCTYPE HTML>3.指定字符编码
在HTML4中，使用meta元素的形式指定文件中的字符编码，如下所示：
<meta http-equiv="Content-Type" content="text/HTML;charset=UTF-8">在HTML中，可以使用对元素直接追加charset属性的方式来指定字符编码，如下所示：
<meta charset="UTF-8">在HTML5中这两种方法都可以使用，但是不能同时混合使用两种方式。
2.3HTML5语法中的3个要点
1.可以省略标签的元素
在HTML5中，有些元素可以省略标签，具体来讲有3种情况。
（1）必须写明结束标签
area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr（2）可以省略结束标签
li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th（3）可以省略整个标签
HTML、head、body、colgroup、tbody需要注意的是，虽然这些元素可以省略，但实际上却是隐形存在的。
（2）取得boolean值的属性
取得布尔值（Boolean）的属性，例如disabled和readonly等，通过默认属性的值来表达“值为true”。此外，在属性值为true时，可以将属性值设置为属性名称本身，也可以将值设为空字符串。
3.省略属性的引用符
在HTML4中设置属性值时，可以使用双引号或单引号来引用。
在HTML5中，只要属性值不包括“空格”“<” “>” “'” “"” “=”等字符，都可以省略属性的引用符。
2.4HTML5与HTML4在搜索引擎优化的对比
1.使搜索引擎更加容易抓取和索引
对于一些网站，特别是那些严重依赖于Flash的网站，HTML5是一个大福音。如果整个网站都是Flash的，就一定会看到转换成HTML5的好处。首先，搜索引擎蜘蛛将能够抓取站点内容。所有嵌入到动画中的内容将全部可以被搜索引擎读取。
2.提供更多的功能
使用HTML5的另一个好处就是它有更加丰富的功能。
3.可用性提高，提升用户体验
从可用性的角度上看，HTML5可以更好的促进用户与网站间的互动。多媒体网站可以获得更多的改进，特别是在移动平台上的应用，使用HTML5可以提供更多高质量的视频和音频流。
3、HTML5新增的元素和废除的元素
3.1新增的结构元素
HTML5增加了新的结构元素来表达这些最常用的结构。
1.section：可以表达书本的一部分或一章，或者一章内的一节。
2.header：页面主体上的头部，并非head元素。
3.footer：页面的底部（页脚），可以是一封邮件签名的所在。
4.nav：到其他页面的链接集合。
5.article：博文、杂志、文章汇编等中的一篇文章。
1.section元素
section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，表示文档结构。
<section>...</section>2.header元素
header元素标识页面中一个内容区域或整个页面的标题。
<header>...</header>3.footer元素
footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息。
<footer>...</footer>4.nav元素
nav元素表示页面中导航链接的部分。
<nav></nav>5.articl元素
article元素表示页面中的一块与上下文不相关的独立内容。
<article>...</article>3.2新增块级元素
HTML5还增加了一些纯语义性的块级元素：aside、figure、figcaption、dialog。
- aside：定义页面内容之外的内容，比如侧边栏。
- figure：定义媒介内容的分组，以及它们的标题。
- figcaption：媒介内容的标题说明。
- dialog：定义对话（会话）。
aside可以用以表达注记、侧栏、摘要、插入的引用等作为补充主体的内容。
figure元素表示一段独立的流内容，一般表示文档主题流内容的一个独立单元。使用figcaption元素为figure元素组添加标题。
dialog元素用于表达人们之间的对话。在HTML5中，dt用于表示说话者，而dd则用来表示说话者的内容。
3.3新增的行内的语义元素
HTML5增加了一些行内语义元素：mark、time、meter、progress。
- mark：定义有记号的文本。
- time：定义日期/时间。
- meter：定义预定义范围内的度量。
- progress：定义运行中的速度。
progress是HTML5中新增的状态交互元素，用来表示页面中的某个任务完成的进度。
meter元素用于表示在一定数量范围中的值。
3.4新增的嵌入多媒体元素与交互性元素
1.video
2.audio元素
3.embed元素
3.5新增的input元素的类型
1.url类型
input元素里的url类型是一种专门输入url地址的文本框。如果该文本框中内容不是url地址格式的文字，则不允许提交。
<form>
<input name="urls" type="url" value="URL地址">
<input type="submit" value="提交">
</form>2.email类型
在表单提交的时候，会自动验证此输入框中的内容是否为email格式，如果不是，则无法提交。
<form>
<input name="email" type="email" vlaue="http:sina.com/"/>
<input type="submit" value="提交" />
</form>3.date类型
<form>
<input id="" name="" type="date" />
<input type="submit" value="提交" />
</form>4.time类型
input里的time类型是专门用来输入时间的文本框，并且会在提交时会对输入时间的有效性进行检查。
<form>
<input id="" name="" type="time" />
<input type="submit" value="提交">
</form>5.datetime类型
Datetime类型是一种专门用来输入本地日期和时间的文本框，同样，它在提交的时候也会对数据进行检查。
<form>
<input id="" name="" type="datetime" />
<input type="submit" value="提交">
</form>
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
