HTML-HTML5+CSS3权威指南阅读（一、HTML5与HTML4之间的区别）
一、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之间的区别）的更多相关文章
- html5+css3 权威指南阅读笔记（三）---表单及其它新增和改良元素
一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...
- HTML-HTML5+CSS3权威指南阅读（三、CSS3）
不同的浏览器(包括-moz-代表的Mozilla Firefox, -ms-代表的Microsoft Internet Explorer等)厂商在发布正式版本之前之前, 试验各自对CSS3新特性的实现 ...
- HTML-HTML5+CSS3权威指南阅读（二、让IE支持HTML5标签及对CSS3 Media Query的兼容）
兼容解决 HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标 签<header>.<section>.<footer>等在IE8以下不会被识 ...
- HTML-HTML5+CSS3权威指南阅读（五、深入理解viewport）
1.手机浏览器与桌面浏览器的不同 现在手机浏览器的显示分辨率与桌面浏览器差不多,但是手机的尺寸比电脑要小很多.一个没做过响应式处理的网站,在手机和电脑上显示完全一样的内容, 不可避免的会出现字体被缩小 ...
- HTML-HTML5+CSS3权威指南阅读（四、媒体查询）
1.媒体类型 HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义 ...
- HTML-HTML5+CSS3权威指南阅读（五、设备像素和CSS像素的概念）
在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...
- HTML-HTML5+CSS3权威指南阅读（三、CSS选择器）
1.伪元素选择器 first-line, first-letter, before, after 2.属性选择器 [attr*=val]: 如果元素的 attr 属性中包含用 val 指定的字符的话, ...
- Html5与CSS3权威指南 百度云下载
Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
随机推荐
- DP套DP
DP套DP,就是将内层DP的结果作为外层DP的状态进行DP的方法. [BZOJ3864]Hero meet devil 对做LCS的DP数组差分后状压,预处理出转移数组,然后直接转移即可. tr[S] ...
- Idea集成svn
Idea集成svn 既然要使用svn,首先需要下载一个 svn的客户端,到这里下载对应的安装程序:http://subversion.apache.org/packages.html#windows ...
- 防止xss攻击
<?php function _removeXSS($val) { $search = 'abcdefghijklmnopqrstuvwxyz'; $search .= 'ABCDEFGHIJK ...
- 椭圆曲线加密算法（ECC）原理和C++实现源码（摘录）
/* 1.用户A选定一条适合加密的椭圆曲线Ep(a,b)(如:y2=x3+ax+b),并取椭圆曲线上一点,作为基点G. 2.用户A选择一个私有密钥k,并生成公开密钥K=kG. 3.用户A将Ep(a,b ...
- Quartz_TimeJob例子（C#）
执行入口: using System; using System.Collections.Generic; using log4net; using Quartz; using ypt_base.Co ...
- 如何在windows下的Python开发工具IDLE里安装其他模块
以安装Httplib2模块为例 1 下载模块 到 “https://code.google.com/p/httplib2/” 下载一款适合你的压缩包“httplib2-0.4.0.zip” 2 解压下 ...
- 17、percona-toolkit
pt-ioprofile工具:1.percona-toolkit(在http://www.percona.com下载)2.安装该工具依赖的perl组件yum install perl-IO-Socke ...
- Asp.net Core CORS（跨域资源共享）实验
环境:Asp.Net Core 2 1.问题 最近项目在调用远程UI时遇到点麻,在调用远程CSS文件时无法加载其中的字体文件.远程CSS文件对字体的定义: @font-face { font-fami ...
- TCP为何采用三次握手来建立连接,若采用二次握手可以吗?
首先简单介绍一下TCP三次握手 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接. 第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_ ...
- 一起talk GDB吧（第五回：GDB查看信息）
各位看官们.大家好,上一回中我们说的是GDB的调用栈调试功能,而且说了怎样使用GDB进行查看调用 栈.这一回中,我们继续介绍GDB的调试功能:查看信息.当然了.我们也会介绍怎样使用GDB查看程序 执行 ...