一、HTML5与HTML4之间的区别

1. DOCTYPE 声明

　　1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　2). HTML5 中为 <!DOCTYPE html>

2.指定字符编码

　　1). HTML4 中为 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

　　2). HTML5 中为 <meta charset="utf-8" />

　　PS: 从HTML5开始, 对于文件的字符编码推荐使用UTF-8

3.具有 boolean 值的属性(例如 disabled 和 readonly 等)

　　true:

　　　　1). 只写属性名而不指定属性值

　　　　2). 属性值赋值为空字符串或属性值

　　false:

　　　　不写属性名

　　<!-- 只写属性不写属性值代表属性为 true -->

　　<input type="checkbox" checked />

　　<!-- 不写属性代表为false -->

　　<input type="checkobx" />

　　<!-- 属性值=属性名, 代表属性为 true -->

　　<input type="checkbox" checked="checked" />

　　<!-- 属性值=空字符串, 代表属性为true -->

　　<input type="checkbox" checked="" />

4.HTML5新增的标签

　　HTML5 为了更好的解释 DOM, 使HTML代码在语义化方面更加精确, 启用了很多类似 div 的标签, 其功能与 div 类似, 但有利于 SEO(从 SEO 角度理解以下标签会好很多)

　　<section> 标签: 它用来表现普通的文档内容或应用区块, 通常由内容及其标题组成, 但 section 元素标签并非一个普通的容器元素, 它表示一段专题性的内容; 当我们描述一件具体的事物的时候, 通常鼓励使用 article 来代替 section , 当我们使用 section 时, 仍然可以使用 h1 来作为标题, 而不用担心它所处的位置, 以及其它地方是否用到; 当一个容器需要被直接定义样式或通过脚本定义行为时, 推荐使用div元素而非section, 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分

<section>

    <h1>section是什么？</h1>

    <h2>一个新的章节</h2>

    <article>

        <h2>关于section</h1>

        <p>section的介绍</p>

    </article>

</section>

　　<article> 标签: 是一个特殊的 section 标签, 它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块, 一般会带有标题(一般放在一个header里面), 可独立于页面其它内容使用, 例如一篇完整的论坛帖子, 一篇博客文章, 一个用户评论等等; 一般来说, article 会有标题部分(通常包含在 header 内), 有时也会包含 footer, article 可以嵌套, 内层的 article 对外层的 article 标签有隶属关系, 例如一篇博客的文章可以用 article 显示, 然后一些评论可以以 article 的形式嵌入其中

　　section 元素是对页面上的内容进行分块, 或者说对文章进行分段, 而 article 有着自己的完整的、独立的内容

<article>

    <header>

        <hgroup>

            <h1>这是一篇介绍HTML 5结构标签的文章</h1>

            <h2>HTML 5的革新</h2>

        </hgroup>

        <time datetime="2011-03-20">2011.03.20</time>

    </header>

    <p>文章内容详情</p>

</article>

　　为了更好的区分 article 和 section 标签, 看以下两个例子

<article>

    <h1>苹果</h1>

    <p><b>苹果</b> ，植物类水果，多次花果...</p>

    <section>

        <h2>红富士</h2>

        <p>红富士是从普通富士的芽(枝)变中选育出的着色系富的统称...</p>

    </section>

    <section>

        <h2>国光</h2>

        <p>国光苹果品，又名小国光、万寿。原产美国，1600年发现的偶然实生苗...</p>

    </section>

</article>
<section>

    <h1>水果</h1>

    <article>

        <h2>苹果</h2>

        <p>苹果，植物类水果，多次花果...</p>

    </article>

    <article>

        <h2>橘子</h2>

        <p>橘子，是芸香科柑橘属的一种水果...</p>

    </article>

    <article>

        <h2>香蕉</h2>

        <p>香蕉,属于芭蕉科芭蕉属植物，又指其果实，热带地区广泛栽培食用...</p>

    </article>

</section>

　　总结: article 更强调独立性, section 强调分块或分段;

　　1.不要把 section 弄成设置页面样式的容器, 那是 div 的工作

　　2.如果 article, aside, nav 更适合条件, 则不用 section

　　3.不要为没有标题的内容区块设置 section 容器

　　<nav> 标签: 相比 div, 明显突出了此块语义

<nav>

    <ul>

        <li>随永杰1</li>

        <li>随永杰2</li>

        <li>随永杰3</li>

    </ul>

</nav>

　　<aside> 标签: 用来装载非正文的内容, 被视为页面里面一个单独的部分, 它包含的内容与页面的主要内容是分开的, 可以被删除, 而不会影响到网页的内容、章节或是页面所要传达的信息, 例如广告、成组的链接、侧边栏等等

<aside>

    <h1>作者简介</h1>

    <p>随永杰</p>

</aside>

　　<header> 标签: 定义文档的页眉, 通常是一些引导和导航信息, 它不局限于写在网页头部, 也可以写在网页内容里面, 通常 <header> 标签至少包含(但不局限于)一个标题标记(<h1>-<h6>), 还可以包括 <hgroup> 标签, 还可以包括表格内容、标识、搜索表单、<nav>导航等

<header>

    <hgroup>

        <h1>网站标题</h1>

        <h1>网站副标题</h1>

    </hgroup>

</header>

　　<footer> 标签: 定义 section 或 document 的页脚, 包含了与页面、文章或是部分内容有关的信息, 比如说文章的作者或者日期, 作为页面的页脚时, 一般包含了版权、相关文件和链接, 它和 <header> 标签使用基本一样, 可以在一个页面中多次使用, 如果在一个区段的后面加入 footer , 那么它就相当于该区段的页脚了

<footer>

    COPYRIGHT@随永杰

</footer>

　　<hgroup> 标签: hgroup 标签是对网页或区段 section 的标题元素(h1-h6)进行组合, 例如, 在一区段中你有连续的h系列的标签元素, 则可以用 hgroup 将他们括起来

<hgroup>

    <h1>这是一篇介绍HTML 5结构标签的文章</h1>

    <h2>HTML 5的革新</h2>

</hgroup>

　　<figure> 标签: 用于对元素进行组合, 多用于图片与图片描述组合

<figure>

　　<img src="img.gif" alt="figure标签"  title="figure标签" />

　　<figcaption>这儿是图片的描述信息</figcaption>

</figure>

　　总结: div 无任何语义, 仅仅用作样式化或者脚本化的钩子(hook), 对于一段主题性的内容, 则就适用 section, 而假如这段内容可以脱离上下文, 作为完整的独立存在的一段内容, 则就适用 article, 原则上来说, 能使用 article 的时候, 也是可以使用 section 的, 但是实际上, 假如使用 article 更合适, 那么就不要使用 section , nav 和 aside 的使用也是如此, 这两个标签也是特殊的 section, 在使用 nav 和 aside 更合适的情况下, 也不要使用 section 了

　　<mark> 标签: 高亮显示某段文字

<span>我是<mark>高亮</mark>的标签</span>

　　<progress> 标签: 进度条

<progress value="50" max="100">您的浏览器不支持 progress 标签</progress>

　　<meter> 标签: 度量值(类似进度)

<meter value="0.6">60%</meter>

　　<time> 标签: 时间(不会在任何浏览器中展示特殊效果)

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>

<p>我在 <time datetime="2015-02-14">情人节</time> 有个约会。</p>

　　<wbr> 标签: 软换行, 与 br 元素的区别是, br 表示此处必须换行, wbr 表示浏览器窗口或者父级元素足够宽时(没必要换行时), 不进行换行, 而宽度不够则在此处换行, wbr对字符型语言作用挺大, 对于中文貌似没有多大用处

<p>To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>Request Object.</p>

　  <video> 标签: 视频标签

<video src="movie.ogg" controls="controls">

    您的浏览器不支持 video 标签。

</video>

　　在 HTML4 中实现如下

<object type="video/ogg" data="movie.ogv">

    <param name="src" value="movie.ogv">

</object>

　　<audio> 标签: 音频标签

<audio src="audio.wav">

    您的浏览器不支持 audio 标签

</audio>

　　在 HTML4 中实现如下

<object type="application/ogg" data="audio.wav">

    <param name="src" value="audio.wav">

</object>

　　<embed> 标签: 用来插入各种多媒体, 格式可以是 Midi、Wav、AIFF、AU、MP3等

　　<embed src="horse.wav" />

　　<source> 标签: 定义媒介资源, 如果拥有两份源文件, 浏览器应该选择它所支持的文件

<audio controls>

   <source src="horse.ogg" type="audio/ogg">

   <source src="horse.mp3" type="audio/mpeg">

　　您的浏览器不支持 audio 标签

</audio>

　　<details> 标签: 表示用户要求得到并且可以得到的细节信息, 它可以与 summary 元素配合使用, summary 提供标题或者图例, 标题是可见的, 用户点击标题, 会显示出细节信息, summary 标签应该是 details 标签内的第一个子元素

<details>

    <summary>Copyright 2011.</summary>

    <p>All pages and graphics on this web site are the property of W3School.</p>

</details>

　　<datalist> 标签: 表示可选数据的列表, 与 input 元素配合使用, 可以制作出输入值的下拉列表

<input id="myCar" list="cars" />

<datalist id="cars">

    <option value="BMW">

    <option value="Ford">

    <option value="Volvo">

</datalist>

　　<keygen> 标签:  标签规定用于表单的密钥对生成器字段, 当提交表单时, 私钥存储在本地, 公钥发送到服务器

<form action="/example/html5/demo_form.asp" method="get">

    用户名：<input type="text" name="usr_name" />

    加密：<keygen name="security" />

    <input type="submit" />

</form>

　　<output> 标签: 定义不同类型的输出, 比如脚本的输出

<!-- 执行计算然后在 <output> 元素中显示结果 -->

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"><input type="range" id="a" value="50">100

+<input type="number" id="b" value="50">

=<output name="x" for="a b"></output>

</form>

5.HTML5 中新增的 input 元素类型

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

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

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

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

　　Date Pickers: 可选取日期和时间的文本输入框

　　　　date: 选取日、月、年

　　　　month: 选取月、年

　　　　week: 选取周和年

　　　　time: 选取时间(小时和分钟)

　　　　datetime: 选取时间、日、月、年(UTC时间)

　　　　datetime-local: 选取时间、日、月、年(本地时间)

6.HTML5 中废除的元素

　　<center>、<font>、<u>, <frame>, <frameset>, <marqueue>等, 主要是可以用CSS替代以及只有某些浏览器支持此标签

7.HTML5 中新增的属性

　　autofocus: 打开画面时自动获得焦点

　　placeholder: 提示用户可以输入的内容

　　form: 执行属于哪个表单

　　required: 提交时进行检查, 检查该元素内一定要有内容

　　min, max, step: 设置最大最小值以及步长

　　pattern: 正则表达式, 其中内容必须符合

　　multiple: 可以选择多个文件

　　autocomplete: 表单自动完成

8.HTML5 中的全局属性

　　contentEditable="true/false": 设置元素为可编辑状态

<ul contentEditable="true">

    <li>测试</li>

</ul>

　　designMode="on/off": 通过JS设置整片文档的可编辑状态

<script type="text/javascript">

    document.designMode = "on"

</script>

　　hidden="true/false": 设置元素的隐现

<ul hidden="true">

    <li>测试</li>

</ul>

　　spellCheck="true/false": 对用户输入的内容进行拼写和语法检查

<textarea spellcheck="true">

测试

</textarea>

　　tabindex="0": 为元素设置按下tab键时的索引次数

HTML-HTML5+CSS3权威指南阅读（一、HTML5与HTML4之间的区别）的更多相关文章

  1. html5+css3 权威指南阅读笔记（三）---表单及其它新增和改良元素

    一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...

  2. HTML-HTML5+CSS3权威指南阅读（三、CSS3）

    不同的浏览器(包括-moz-代表的Mozilla Firefox, -ms-代表的Microsoft Internet Explorer等)厂商在发布正式版本之前之前, 试验各自对CSS3新特性的实现 ...

  3. HTML-HTML5+CSS3权威指南阅读（二、让IE支持HTML5标签及对CSS3 Media Query的兼容）

    兼容解决 HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标 签<header>.<section>.<footer>等在IE8以下不会被识 ...

  4. HTML-HTML5+CSS3权威指南阅读（五、深入理解viewport）

    1.手机浏览器与桌面浏览器的不同 现在手机浏览器的显示分辨率与桌面浏览器差不多,但是手机的尺寸比电脑要小很多.一个没做过响应式处理的网站,在手机和电脑上显示完全一样的内容, 不可避免的会出现字体被缩小 ...

  5. HTML-HTML5+CSS3权威指南阅读（四、媒体查询）

    1.媒体类型 HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义 ...

  6. HTML-HTML5+CSS3权威指南阅读（五、设备像素和CSS像素的概念）

    在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...

  7. HTML-HTML5+CSS3权威指南阅读（三、CSS选择器）

    1.伪元素选择器 first-line, first-letter, before, after 2.属性选择器 [attr*=val]: 如果元素的 attr 属性中包含用 val 指定的字符的话, ...

  8. Html5与CSS3权威指南 百度云下载

    Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3

  9. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

随机推荐

  1. hdu 4074 Darts

    思路:p[n][m][0]表示A为n,B为m,A为先手胜的概率:          p[n][m][1]表示A为n,B为m,B为先手胜的概率.          d[i]表示圆盘上数字的大小. 容易得 ...

  2. Problem F: 零起点学算法101——统计字母数字等个数

    #include<stdio.h> #include<string.h> int main(){ ]; while(gets(str)!=NULL){ ,b=,c=,d=; ; ...

  3. 8VC Venture Cup 2016 - Elimination Round A. Robot Sequence 暴力

    A. Robot Sequence 题目连接: http://www.codeforces.com/contest/626/problem/A Description Calvin the robot ...

  4. Xcode 6.4项目中的常见文件(info.plist)

    Xcode 6.4项目中的常见文件(info.plist) 代码中获取 info.plist[NSBundle mainBundle] infoDictionary]; Bundle display ...

  5. MYSQL复习笔记9-存储过程

    date: 20140208auth: Jin参考引用:http://blog.sina.com.cn/s/blog_52d20fbf0100ofd5.html mysql存储过程详解一.基本介绍1. ...

  6. 激活Debian 7 的桌面（把图标放在桌面上）

    转:http://www.acyoo.com/archives/3017.html Debian 7的默认桌面是Gnome 3,  刚装好时无法在桌面进行任何操作,不过只需要设置一下就可以了: 左上角 ...

  7. java锁对象

    在Java5中,专门提供了锁对象,利用锁可以方便的实现资源的封锁,用来控制对竞争资源并发访问的控制,这些内容主要集中在java.util.concurrent.locks 包下面,里面有三个重要的接口 ...

  8. 给ul下的li加click时间

    $('.province ul li').click(function() {//方法 });

  9. AI 语音对话技术

    机器学习以及自然语言处理技术的进步,开启了人与人工智能进行语音交互的可能,人们透过对话的方式获取信息.与机器进行交互,将不再只是存在科幻情结当中.语音交互是未来的方向,而智能音箱则是语音交互落地的第一 ...

  10. DevExpress 小计 GridControl 隔行换行

    摘自: http://www.cnblogs.com/yuerdongni/archive/2012/09/08/2676753.html 1. 如何解决单击记录整行选中的问题 View->Op ...