一、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. 嵌入式控制(0)----linux系统网络配置

    嵌入式系统本身具有操作系统的全部属性,但收到其硬件条件制约,故需要主机通过串口/网口等方式与其通信.今日下午的工作主要是linux系统的ssh传输配置,nfs服务器配置,tftp服务器配置. ip的概 ...

  2. List学习笔记

    List 特点:1.有序.2.可重复. ArrayList: 底层是数组,数组是有下标的. 会自动扩容,底层默认初始化容量是10,扩大之后的容量预设是原来容量的一半(jdk 1.8).以前好像是原容量 ...

  3. Openstack Swift 原理、架构与 API 介绍

    OpenStack Swift 开源项目提供了弹性可伸缩.高可用的分布式对象存储服务,适合存储大规模非结构化数据.本文将深入介绍 Swift 的基本设计原理.对称式的系统架构和 RESTful API ...

  4. Java实训作业

    1.编写程序:声明一个整型变量a,并赋初值5,在程序中判断a是奇数还是偶数,然后输出判断的结果. public class hello{ public static void main(String[ ...

  5. 每天一套题打卡|河南省第十一届ACM/ICPC

    A 计划日 题意:已知李明在YYYY年MM月DD日星期W订了学习计划,现在想看看李明N天后的完成情况和个人总结,你能告诉我那天的日期和星期几吗? 模拟日期计算: 计算星期可以用基姆拉尔森公式 //中国 ...

  6. Java变量与运算

    变量 1.变量名可以使用 数字.字母.下划线.$符号.数字包括 '0'~'9' 和某种语言中表示数字的任何 Unicode 字符.字母包括 'A'~'Z'.'a'~'z' 和某种语言中表示字母的任何 ...

  7. TCP交互流程

    前言:在FPGA上实现TCP协议实际是一个不太好的计划,因为FPGA最擅长的是流水线处理方式,而TCP存在交互,导致FPGA需要进行反馈式的处理.但是由于项目新增的附加要求而又只能在FPGA上去实现T ...

  8. 在selenium测试中使用XPATH功能函数starts-with、contains、descendant、ancestor、text()定位网页元素

    项目中一些使用xpath函数的复杂例子,记录于此 1. 使用starts-with //div[starts-with(@id,'res')]//table//tr//td[2]//table//tr ...

  9. Java变量和运算符

    1.变量 变量概述 什么是变量?变量是一个内存中的小盒子(小容器),容器是什么?生活中也有很多容器,例如水杯是容器,用来装载水:你家里的大衣柜是容器,用来装载衣裤:饭盒是容器,用来装载饭菜.那么变量是 ...

  10. 并发HashMap的put操作引起死循环

    今天研读Java并发容器和框架时,看到为什么要使用ConcurrentHashMap时,其中有一个原因是:线程不安全的HashMap, HashMap在并发执行put操作时会引起死循环,是因为多线程会 ...