首页 > 代码库 > HTML-HTML5+CSS3权威指南阅读（一）
HTML-HTML5+CSS3权威指南阅读（一）
一、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 具有更明确的语义, 它代表一个独立的、完整的相关内容块, 可独立于页面其它内容使用, 例如一篇完整的论坛帖子, 一篇博客文章, 一个用户评论等等; 一般来说, article 会有标题部分(通常包含在 header 内), 有时也会包含 footer, article 可以嵌套, 内层的 article 对外层的 article 标签有隶属关系, 例如一篇博客的文章可以用 article 显示, 然后一些评论可以以 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>
<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>
<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="http://www.mamicode.com/horse.wav" />
5.
HTML-HTML5+CSS3权威指南阅读（一）