html5和html4d的区别

一. 语法的改变

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 = checkboxchecked = 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.oggcontrols = 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.swftype = 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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值