html5 css3学习杂记
1. HTML <!DOCTYPE> 标签
定义和用法
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
HTML 4.01 与 HTML5 之间的差异
在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：
<!DOCTYPE html>
HTML 元素和文档类型（Doctype）
提示和注释
注释：<!DOCTYPE> 声明没有结束标签。
提示：<!DOCTYPE> 声明对大小写不敏感。
提示：请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档！
常用的 DOCTYPE 声明
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容......
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<mate charset="uft-8"/>
<style>
div{
width:100px;
height:100px;
border:2px solid green;
padding:5px;
border-radius:30px;
}
button{
width:100px;
height:30px;
border:2px solid red;
border-radius:10px/10px;
}
</style>
</head>
<body>
<button type="button">Click Me!</button>
<div>
hello
</div>
</body>
</html>
2. HTML <!--...--> 标签
定义和用法
注释标签用于在源代码中插入注释。注释不会显示在浏览器中。
您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。
使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）：
<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>
注释：注释行结尾处的两条斜杠 (//) 是 JavaScript 注释符号。这可以避免 JavaScript 执行 --> 标签。
HTML 4.01 与 HTML5 之间的差异
无。
事件属性
注释标签不支持任何事件属性。
如需更多有关 HTML 事件属性的信息，请访问 事件属性。
3. HTML <a> 标签
定义和用法
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
提示：您可能已经注意到了，W3School 站点内的链接外观与默认的链接外观非常不同。您可以使用 CSS 伪类 向文本超链接添加复杂而多样的样式。
术语解释
提示和注释
提示：如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。
提示：被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
提示：请使用 CSS 来设置链接的样式。
HTML 4.01 与 HTML5 之间的差异
在 HTML 4.01 中，<a> 标签可以是超链接或锚。在 HTML5 中，<a> 标签始终是超链接，但是如果未设置 href 属性，则只是超链接的占位符。
HTML5 提供了一些新属性，同时不再支持一些 HTML 4.01 属性。
属性
New : HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| charset | char_encoding | HTML5 中不支持。规定被链接文档的字符集。 |
| coords | coordinates | HTML5 中不支持。规定链接的坐标。 |
| download | filename | 规定被下载的超链接目标。 |
| href | URL | 规定链接指向的页面的 URL。 |
| hreflang | language_code | 规定被链接文档的语言。 |
| media | media_query | 规定被链接文档是为何种媒介/设备优化的。 |
| name | section_name | HTML5 中不支持。规定锚的名称。 |
| rel | text | 规定当前文档与被链接文档之间的关系。 |
| rev | text | HTML5 中不支持。规定被链接文档与当前文档之间的关系。 |
| shape |
|
HTML5 中不支持。规定链接的形状。 |
| target |
|
规定在何处打开链接文档。 |
| type | MIME type | 规定被链接文档的的 MIME 类型。 |
全局属性
<a> 标签支持 HTML 中的全局属性。
事件属性
<a> 标签支持 HTML 中的事件属性。
<html>
<body>
<a href="http://www.w3school.com.cn" target="_blank">W3School</a>
</body>
</html>
4. HTML <abbr> 标签
定义和用法
<abbr> 标签指示简称或缩写，比如 "WWW" 或 "NATO"。
通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
<abbr> 标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。
提示和注释
提示：可以在 <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。
HTML 4.01 与 HTML5 之间的差异
无。
全局属性
<abbr> 标签支持 HTML 中的全局属性。
事件属性
<abbr> 标签支持 HTML 中的事件属性。
<!DOCTYPE HTML>
<html>
<body>
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
</body>
</html>
5. HTML <address> 标签
定义和用法
<address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
提示和注释
提示：<address> 标签不应该用于描述通讯地址，除非它是联系信息的一部分。
提示：<address> 元素通常连同其他信息被包含在 <footer> 元素中。
HTML 4.01 与 HTML5 之间的差异
HTML 4.01 不支持 <article> 标签，因此在 HTML 4.01 中，<address> 标签始终定义文档作者/拥有者的联系信息。
全局属性
<address> 标签支持 HTML 中的全局属性。
事件属性
<address> 标签支持 HTML 中的事件属性。
<!DOCTYPE html>
<html>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
6. HTML <area> 标签
定义和用法
<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。
area 元素总是嵌套在 <map> 标签中。
注释：<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。
HTML 与 XHTML 之间的差异
在 HTML 中，<area> 没有结束标签。
在 XHTML 中，<area> 必须正确地关闭。
提示和注释：
注释：<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 <map> 添加 id 和 name 两个属性。
必需的属性
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 定义此区域的替换文本。 |
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| coords | 坐标值 | 定义可点击区域（对鼠标敏感的区域）的坐标。 |
| href | URL | 定义此区域的目标 URL。 |
| nohref | nohref | 从图像映射排除某个区域。 |
| shape |
|
定义区域的形状。 |
| target |
|
规定在何处打开 href 属性指定的目标 URL。 |
全局属性
<area> 标签支持 HTML 中的全局属性。
事件属性
<area> 标签支持 HTML 中的事件属性。
相关页面
HTML DOM 参考手册：Area 对象
<html>
<body>
<p>请点击图像上的星球，把它们放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>
7. HTML <article> 标签
定义和用法
<article> 标签规定独立的自包含内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源：
- 论坛帖子
- 报纸文章
- 博客条目
- 用户评论
HTML 4.01 与 HTML 5 之间的差异
<article> 标签是 HTML 5 中的新标签。
全局属性
<article> 标签支持 HTML 中的全局属性。
事件属性
<article> 标签支持 HTML 中的事件属性。
<!DOCTYPE html>
<html>
<body>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
</body>
</html>
8. HTML <aside> 标签
定义和用法
<aside> 标签定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。
HTML 4.01 与 HTML 5 之间的差异
<aside> 标签是 HTML 5 的新标签。
提示和注释：
提示：<aside> 的内容可用作文章的侧栏。
全局属性
<aside> 标签支持 HTML 中的全局属性。
事件属性
<aside> 标签支持 HTML 中的事件属性。
<!DOCTYPE HTML>
<html>
<body>
<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
</body>
</html>
9. HTML <audio> 标签
定义和用法
<audio> 标签定义声音，比如音乐或其他音频流。
HTML 4.01 与 HTML 5 之间的差异
<audio> 标签是 HTML 5 的新标签。
提示和注释
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
属性
new : HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 规定视频输出应该被静音。 |
| preload | preload |
如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的音频的 URL。 |
全局属性
<audio> 标签支持 HTML 中的全局属性。
事件属性
<audio> 标签支持 HTML 中的事件属性。
相关页面
HTML DOM 参考手册：Audio 对象
<!DOCTYPE HTML>
<html>
<body>
<audio src="/i/horse.ogg" controls="controls" autoplay="autoplay" loop="loop">
Your browser does not support the audio element.
</audio>
</body>
</html>
10. HTML <b> 标签
定义和用法
<b> 标签规定粗体文本。
HTML 4.01 与 HTML5 之间的差异
无。
提示和注释
注释：根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 <b> 标签作为最后的选项。HTML5 规范声明：应该使用 <h1> - <h6> 来表示标题，使用 <em> 标签来表示强调的文本，应该使用 <strong> 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。
提示：您也能够使用 CSS "font-weight" 属性来设置粗体文本。
全局属性
<b> 标签支持 HTML 中的全局属性。
事件属性
<b> 标签支持 HTML 中的事件属性。
<!DOCTYPE html>
<html>
<body>
<p>这是普通文本 - <b>这是粗体文本</b>。</p>
<em>这是em文本</em>
<h1>这是h1文本</h1>
<h2>这是h2文本</h2>
<h3>这是h3文本</h3>
<strong>这是strong文本</strong>
<mark>这是mark文本</mark>
</body>
</html>
11. HTML <base> 标签
定义和用法
<base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
HTML 与 XHTML 之间的差异
在 HTML 中，<base> 标签没有结束标签；在 XHTML 中，<base> 标签必须被正确地关闭。
提示和注释：
注释：<base> 标签必须位于 head 元素内部。
必需的属性
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 规定页面中所有相对链接的基准 URL。 |
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| target |
|
在何处打开页面中所有的链接。 |
标准的属性和事件
NONE
相关页面
HTML DOM 参考手册：Base 对象
<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" /><br />
<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
<br /><br />
<p><a href="http://www.w3school.com.cn">W3School</a></p>
<p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
</body>
</html>
12. HTML <bdi> 标签
定义和用法
bdi 指的是 bidi 隔离。
<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时，该标签很有用。
HTML 4.01 与 HTML 5 之间的差异
<bdi> 标签是 HTML5 中的新标签。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| dir |
|
可选。规定 <bdi> 元素内的文本的文本方向。默认值：auto。 |
全局属性
<bdi> 标签支持 HTML 中的全局属性。
事件属性
<bdi> 标签支持 HTML 中的事件属性。
<!DOCTYPE HTML>
<html>
<body>
<ul>
<li>Username <bdi dir="ltr">Bill</bdi>:80 points</li>
<li>Username <bdi dir="rtl">Steve</bdi>: 78 points</li>
</ul>
<li>Username Bill:80 points</li>
<li>Username Steve: 78 points</li>
</body>
</html>
浙公网安备 33010602011771号