一、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)"> 0<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键时的索引次数