HTML5技术初探

最新推荐文章于 2024-08-02 06:15:47 发布

QD阿朱

最新推荐文章于 2024-08-02 06:15:47 发布

阅读量876

点赞数 1

分类专栏： HTML5 文章标签： html5技术 web应用开发 internet html5 xhtml

本文链接：https://blog.csdn.net/zwjabcd/article/details/44153623

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文是学习总结类型的文章，有的章节是从别的地方摘下来的，不算是完全原创。

HTML的发展史

HTML5的基础是HTML4，也就是上世纪的1999年发布的4.01版本。随着HTML4的发布，业界认为HTML已经成熟，对web的标准的兴趣开始转移到XML和XHTML。

HTML4主要由W3C负责制定。在之后，W3C发布了XHTML的1.0版。XHTML语法和XML有些类似，对于HTML的改动比较小，但是对于语法的要求比较严格，比如开始标签必须有结束标签、所有标签小写、所有参数必须有双引号括起来、所有元素，包括空元素（img、br等）必须闭合以及标签属性不允许省略等等。

通常使用的文档类型声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">说的就是XHTML1.0的过渡版本。

XHTML的愿望是好的，但是它仅仅是对于HTML4在编写规范上进行了要求，没有按照时代的发展添加相应的新功能，因此没有被浏览器厂商积极的响应。在浏览器厂商的支持下成立了WHATWG（Web Hypertext Application Technology Working Group，web超文本应用技术工作组）。他们开始创立HTML5的规范，真是针对web应用开发新的功能。2006年后W3C重新介入HTML，于2008年发布了HTML5的草案，次年XHTML的演进工作停止。2012年HTML5基本编写完成，并于2014年10月份发布了HTML5.0的正式版本。HTML5的发展没有结束，5.1和5.2的草案编写和意见征集工作还在进行。

HTML5的设计思想

伯斯塔尔法则

对自己严格，对他人宽容。体现在HTML设计中的思想是：发送时保守，接收时宽容。

避免不必要的复杂性

Doctype方面

HTML4.01的doctype：

<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

XHTML1.0的doctype：

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5的doctype：<!DOCTYPE html>

文档编码的声明

HTML4.01的doctype：

XHTML1.0的doctype：

<?xml version="1.0" encoding="UTF-8" ?>

HTML5的doctype：<meta charset="utf-8">

支持已有的内容

<img src="foo" alt="bar" /> 
<p class="foo">Hello world</p> 
<img src="foo" alt="bar"> 
<p class="foo">Hello world  
<IMG SRC="foo" ALT="bar"> 
<P CLASS="foo">Hello world</P> 
<img src=foo alt=bar> 
<p class=foo>Hello world</p>

虽然习惯了XHTML的人会对上面的代码有不同看法，但是上面的所有写法在HTML5中都是正确的。

解决现实的问题

现实中为了解决问题，人们有了许多不规范但是能解决问题的编码方式，在以前当然不符合HTML编写规范，但是在HTML5中对这些技巧都加以认可。

比如某块内容中有标题，文本，图片等，如果想统一加上链接该怎么写？

方法一：
<h2><a href="/path/to/resource">Headline text</a></h2> 
<p><a href="/path/to/resource">Paragraph text.</a></p> 
方法二：
<a href="/path/to/resource"> 
<h2>Headline text</h2> 
<p>Paragraph text.</p> 
</a>

求真务实

解决那些令人头痛的问题之前，先看看人们为应对这些问题都想出了哪些办法。集中精力去理解这些“民间的”解决方案才是当务之急。

<body> 
<div id="header">...</div> 
<div id="navigation">...</div> 
<div id="main">...</div> 
<div id="sidebar">...</div> 
<div id="footer">...</div> 
</body> 
<body> 
<header>...</header> 
<nav>...</nav> 
<div id="main">...</div> 
<aside>...</aside> 
<footer>...</footer> 
</body>

通过使用header、nav、aside和footer就可以做到对内容分区，就像DOM的盒模型一样，对于内容建立一个模型，用不同的标签代表不同的区域。对于代码更加容易阅读，对于SEO也更加友好。

平稳退化

HTML5中对于input的type属性增加了好几个新的值，如果能够解析HTML5的浏览器自然会显示出不同的控件，否则浏览器认为那只是条字符串而已，只会显示一个普通的文本框。

又比如HTML5为已有标签添加了一些新的属性。例如input的placeholder（占位符），其实就是文本框中预先定义的一段灰色的文字，点击文本框后会自动消失。如果文本框内没有内容，失去焦点后这段文字又会自动出现在文本框中。

又比如浏览器中显示视频，HTML5中提供了非常友好的实现方式。

<video> 
<source src="movie.mp4"> 
<source src="movie.ogv"> 
<object data="movie.swf"> 
<a href="movie.mp4">download</a> 
</object> 
</video>

解释上面的代码的意思：

1、如果浏览器支持video元素，也支持H264，没什么好说的，用第一个视频。

2、如果浏览器支持video元素，支持Ogg，那么用第二个视频。

3、如果浏览器不支持video元素，那么就要试试Flash影片了。

4、如果浏览器不支持video元素，也不支持Flash，起码给出了下载链接。

一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。

HTML5的特点

HTML5语法

1、标记的语法变化

a) 文档类型。

HTML4:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5:<!DOCTYPE html>，HTML5中不区分大小写。

b) 字符编码

HTML4:<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5:<meta charset="UTF-8">，从HTML5开始对于文件的字符编码推荐使用UTF-8。

c) 结束标记的变化

对于标记的要求比较宽松，分为三类：

l 不允许写结束标记的元素：

area，base，br，col，command，embed，hr，img，input，keygen，link，meta，param，source，track，wbu。

l 可以省略结束标记的元素：

li，dt，dd，p，rt，rp，optgroup，option，colgroup，thead，tbody，tfoot，tr，td，td。

l 可以省略全部标记的元素：

html，head，body，colgroup，tbody。

不允许写结束标记的元素是指，不允许使用开始标记与结束标记将元素括起来的形式，只允许使用<元素/>的形式进行书写。可以省略全部标记的元素是指，该元素可以完全被省略。

d) 标签属性的变化

具有Boolean类型的值的属性可以只写属性名，默认为true，不写代表false，属性值等于属性名的时候代表值为true。

当属性值不包括空字符串、<、>、=、单引号和双引号等字符时，属性值两边的引号可以去掉。

2、新增的元素

a) 新增的结构元素

section：表示页面中的一个内容区块，章节，页眉，页脚或者页面的其他部分。

article：表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或者报纸中的一篇文章。

aside：表示article元素之外的，与article元素相关的辅助信息

header：表示页面中的一个内容区块或者整个页面的标题

hgroup：用于对整个页面或页面中的一个内容区块的标题进行组合

footer：表示整个页面或者页面中的一个内容区块的脚注，一般来说，它会包含创作者的姓名，穿做日期以及创作者的i联系信息

nav：表示页面中的导航练级的部分

figure：表示一段独立的流内容，一般表示文档主题流内容的一个独立单元。使用figcapton元素为figure元素添加标题。

b) 新增的其他元素

video：定义视频

audio：定义音频

embed：用来插入各种多媒体，格式可以是Midi，Wav，AIFF，AU，MP3等。

mark:用来在视觉上向用户呈现那些需要突出显示或者高亮显示的文字。mark元素的一个比较经典的应用就是在搜索结果中向用户高亮显示搜索的关键字。

progress：表示运行中的进程。可以使用progress元素来显示JavaScript中耗费时间的函数的进程

time：表示日期或时间

ruby：表示ruby注释

rt：表示字符（中文注音或字符）的结束或发音

rp：在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容

wbr：软换行。wbr元素与br元素的区别是：br元素表示此处必须换行，而wbr元素的意思是浏览器窗口或父级元素的宽度足够宽的时候不进行换行

canvas：表示图形，这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这快画布上。

command：表示命令按钮，比如单选，复选，或者按钮

details：表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用，summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示细节信息。summary元素应该改是details元素的第一个元素

datalist：表示可选数据列表，与input元素配合使用，可以制作出输入值的下拉列表

datagrid：datagrid元素可以表示数据列表，它以树形列表的形式来显示

keygen：表示生成密钥

output：表示不同类型的输出，比如脚本的输出

source：为媒介元素定义媒介资源

menu：表示菜单列表。当希望列出表单控件时使用该标签

c) 新增的input元素类型

mail：表示必须输入E-mail地址的文本输入框

url：表示必须输入URL地址的文本输入框

number：表示必须输入数值的文本输入框

range：表示必须输入一定范围内数字值的文本输入框

Data Pickers

HTML5拥有多个可供选取日期和时间的类型输入文本框

date：年月日

month：月年

week：周年

time：选取时间（小时和分钟）

datetime：选取时间，日，月，年（UTC时间）

datetime-local：选取时间，日，月，年（本地时间）

3、废除的元素

a) 表示样式的元素

basefont，big，center，font，s，strike，tt，u这些元素的样式在HTML5中用CSS来表达，不再单独列出。

HTML5不欢迎表现性元素，也就是那些仅仅是为了网页添加样式的元素。被剔除的元素都是web开发人员很多年都不会用的元素（例如big、center、font、tt等）。

b) frame框架

对于frameset元素，frame元素，noframes元素，由于frame框架对网页可用性存在负面影响，框架往往意味着严重的可访问性的问题，难以适应搜索引擎、辅助软件和移动设备。在HTML5中已不再支持frame框架，只支持iframe框架，或者服务器方创建的由多个页面组成的符合页面的形式，同时将以上三个元素废除。

c) 只有部分浏览器支持的元素

对于applet、bgsound、blink、marquee等元素，由于只有部分浏览器支持这些元素，特别是bgsound元素以及marquee元素，只被Internet Explorer所支持，所以在HTML 5中被废除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee可以由JavaScript编程的方式所替代。

d) 其他被废除的元素

其他被废除元素还有：

废除rb元素，使用ruby元素替代

废除acronym元素，使用abbr元素替代

废除dir元素，使用ul元素替代

废除isindex元素，使用form元素与input元素相结合的方式替代

废除listing元素，使用pre元素替代

废除xmp元素，使用code元素替代

废除nextid元素，使用GUIDS替代

废除plaintext元素，使用“text/plian”MIME类型替代

4、新增的属性

a) 表单相关属性

b) 链接相关属性

c) 其他元素的属性

5、废除的属性

略

6、公共属性（全局属性）

全局属性是指可以对任何元素使用的属性。

contentEditable、designMode、hidden、spellcheck、tabindex等

7、Web存储

HTML5提供了两种在客户端存储数据的办法：localStorage和sessionStorage。localStorage存储的东西没有时间限制，而sessionStorage的存储时间与session的生存时间一致。localStorage的数据除非主动删除，永远都存在，而且数据可以跨越窗口，无视当前会话，可以被共同使用。sessionStorage的数据在窗口关闭的时候就会被清理，而且不能跨越窗口。

参考资料

1、《HTML5与CSS3权威指南》

2、http://www.cnblogs.com/AshWang/p/3294324.html

3、http://zh.wikipedia.org/zh/HTML5

4、http://zh.wikipedia.org/zh/XHTML

5、http://www.ituring.com.cn/article/49844

6、http://www.w3school.com.cn/html5/html_5_webstorage.asp

7、http://blog.csdn.net/dojotoolkit/article/details/6624972

8、http://www.zhangxinxu.com/wordpress/2011/09/html5-localstorage%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E5%AE%9E%E9%99%85%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/

9、http://javascript.ruanyifeng.com/bom/webstorage.html

QD阿朱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5技术初探

本文是学习总结类型的文章，有的章节是从别的地方摘下来的，不算是完全原创。HTML的发展史HTML5的基础是HTML4，也就是上世纪的1999年发布的4.01版本。随着HTML4的发布，业界认为HTML已经成熟，对web的标准的兴趣开始转移到XML和XHTML。HTML4主要由W3C负责制定。在之后，W3C发布了XHTML的1.0版。XHTML语法和XML有些类似，对于H
复制链接

扫一扫

专栏目录