一. 语法的改变
1.1 HTMl5中的标记方法
1. 内容类型
文件扩展符不变,仍为.htm或.htm,内容类型为“text/html”
2. DOCTYPE的声明
<! DOCTYPE HTML>
3. 指定字符的编码
<meta charset = “utf-8”>(推荐使用utf-8)
1.2 HTML确保了与之前的HTML版本的兼容性
三个方面:
1. 可以省略标记的元素
不允许使用结束标记的元素有:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、sourse、track、wbr。
可以省略结束的标记元素有:li、dt、dd、p、rt、rp、optgroup、option、colgroup、thread、tbody、tfoot、tr、td、th。
可以省略的全部标记的元素有:html、head、body、colgroup、tbody。
2. 具有boolean的属性
参考代码示例:
<!—只写属性不写属性值代表属性为true-->
<input type = “checkbox” checked>
<!—属性值= 属性名,代表属性为true-->
<input type = “checkbox”checked = “checked”>
3. 省略引号
当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时,属性的两边的符号可以省略。
<input type = text>
1.2 标记示例
<!DOCTYPE HTML>
<meta charset = “utf-8”>
<title>HTML5 标记示例</title>
<p>这段代码是HTML5
<br/>语法编写的
2.1 新增的元素和废除的元素
1. 与结构相关的元素
1) section元素
表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他部分。它与h1、h2。。。等元素结合起来使用标示文档结构。
<section>..</section>
2) article元素
表示页面中的一块与上下文不相关的独立内容,譬如博客的一篇文章。
<article>..<article>
3) aside元素
表示article元素之外的、与article元素内容相关的辅助信息。
<aside>..</aside>
4) header元素
表示页面中的一个内容区块或整个页面的标题。
<header>..</header>
5) hgroup元素
用于对整个页面或页面中的一个内容去快的标题进行组合。
<hgroup>..</hgroup>
6) footer元素
表示整个页面或页面中的一个内容区块的标注。
<footer>..</footer>
7) nav元素
表示页面中的导航的链接部分。
<nav>..</nav>
8) figure元素
表示一段独立的内容,一般表示文档主题流内容中的一个独立单元。使用figcaption元素为figure添加标题。
<figure>
<figcaption>PRC</figcaption>
<p>Hello World!</p>
</figure>
2. 新增的其他元素
1) Video元素
HTML5中的代码示例:
<video src = “movie.ogg”controls = “controls”>video元素</video>
HTML4中的代码示例:
<object type = “video/ogg” data = “movie.ogv”>
<param name = “src” value = “movie.ogv”>
</object>
2) Audio元素
Audio元素定义音频。
HTML5中的代码示例:
<audio src = “someaudio.wav”>audio元素</audio>
HTML4中的代码示例:
<object type = “application/ogg” data = “someaudio.wav”>
<param name = “src” value = “someaudio.wav”>
</object>
3) Embed元素
用于插入各种多媒体.
HTML5中的代码示例:
<embed src = “horse.wav”/>
HTML4中的代码示例:
<object data = “flash.swf”type = “application/x-shockwave-flash”>
</object>
4) Mark元素
主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。Mark元素是一个比较典型的应用就是在搜索结果中向用户高亮显示搜索的关键词。
HTML5中的代码示例:
<mark>..</mark>
HTML4中的代码示例:
<span>..</span>
5) Progress元素
表示在运行中的进程,可以使用progress元素来显示javascript中耗费时间函数的进程。
HTML5中的代码示例:
<mark>..</mark>
HTML4中的代码示例:
<span>..</span>
6) Meter元素
表示度量衡仅用于已知最大值和最小值的度量。必须定义度量的范围,既可以在元素的文本中也可以在min/max属性中定义。
HTML5中的代码示例:
<meter>..</meter>
7) Time元素
表示时间或日期,也可以同时表示两者。
HTML5中的代码示例:
<time>..</time>
8) Ruby元素
表示ruby注释。(中文注音或字符)
9) Rt元素
表示字符的发音或解释。
10) Rp元素
在ruby注释中使用,以定义不支持ruby元素浏览器所显示的内容。
3.1 全局属性
使用contentEditable属性,当列表元素被加上contentEditable元素之后,该元素变成可编辑 。
属性示例:
<!DOCTYPE HTML>
<head>
<meta charset = “utf-8”>
<title>contentEditable属性示例</title>
</head>
<h2>可编辑列表</h2>
<ul contentEditable = “true”>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ul>