HTML文档由嵌套的HTML元素组成。
HTML<html>标签
<html>这个元素可告知浏览器自身是一个Html文档。
<html>与</html>标签限定了文档的开始点和结束点,他们之间是文档的头部和主体,头部由<head>标签定义,主体由<body>定义。
1.HTML标题
标题是通过<h1>-<h6>等标签进行定义的,<h1>定义最大的标题,<h6>定义最小的标题。
例<h1>标题2</h1>
<h2>标题2</h2>
注释:浏览器会自动的在标题的前后添加空行。
默认情况下,HTML会自动的在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
HTML水平线
<hr/>标签在HTML页面中创建水平线,hr元素可用于分割内容。
使用水平线(<hr/>)来分割文章中的小节是一个办法(但并不是唯一的办法)。
HTML注释
<!-- 注释 -->
注释不会在浏览器中显示,注释能提高代码的可读性
注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。
2.HTML段落
<p>浏览器会自动在段落的前后添加空行。
<p>this is</p>
HTML折行
在不产生一个新段落的情况下进行换行(新行),用<br/>标签,没有结束标签。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML中的所有连续空格(换行)也被显示为一个空格。
3.HTML超链接(链接)<a>
超链接可以使一个字,一个词,也可以是一组图像,可以点击这些内容跳转到新的文档或者当前文档中的某个部分。
有两种使用<a>标签的方式:
(1).通过使用href属性--创建执行另一个文档的链接
<a href="http://www.baidu.com/">This is a link</a>
在href属性中指定链接的目标,开始标签和结束标签之间的文字被作为超链接来显示。
HTML链接target属性
使用Target属性,可以定义被链接的文档在何处
<a href="http://www.baidu.com.cn/"target="_blank"
>百度!</a>
如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。
(2).通过使用name属性--创建文档内的书签
name属性规定锚的名称,可以使用name属性创建HTML页面中的书签,书签不会以任何特殊方式显示,对读者是不可见的。当使用命名锚时,可以创建直接跳至该命名锚(比如页面中某个小节)的链接。
<a name="label">锚</a>
锚可以是任意你喜欢的名字,可以使用id属性来代替name属性,命名锚同样有效。
<a href="#C1">查看Chapter 1<a/>
<h2><a name="C1">Chapter 1</a></h2>
4.HTML图像<img>
<img src=1.jpg width="104" height="142"/>
图像的名称和尺寸是以属性的形式提供的。
空的HTML元素
没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。<br>就是没有关闭的标签的空元素(<br/>标签定义换行)。
HTML标签对大小写不敏感,<P>等同于<p>,但推荐使用小写
折行<br/>
居中排列的标题:<h1 align="center">This is heading 1</h1>
水平线<hr/>
1
<a href="http://www.w3school.com.cn">W3School</a>
<a> 标签定义超链接,用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性,它指示链接的目标。
在所有浏览器中,链接的默认外观是:
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
CSS 伪类提示:您可能已经注意到了,W3School 站点内的链接外观与默认的链接外观非常不同。您可以使用 向文本超链接添加复杂而多样的样式。
a:link {color: #FF0000}/* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。
2.
<abbr> 标签指示简称或缩写,比如 "WWW" 或 "NATO"。
<abbr>HTML5 中不支持 <acronym> 标签。请使用 标签代替。
3.
<address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
4.
object 元素HTML5 中不支持 <applet> 标签。请使用 标签代替。
HTML 4.01 中不赞成使用 <applet> 元素。
<applet> 标签定义嵌入的 applet。
5.
<area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。
area 元素总是嵌套在 <map> 标签中。
<img>map注释: 标签中的 usemap 属性与 元素 name 属性相关联,创建图像与映射之间的联系。
6.
<article> 标签规定独立的自包含内容。
一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源:
论坛帖子
报纸文章
博客条目
用户评论
7.
<aside> 标签定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。
8.
<audio> 标签定义声音,比如音乐或其他音频流
<audio src="someaudio.wav"> 您的浏览器不支持 audio 标签。</audio>
9.
<b> 标签规定粗体文本。
<p>这是普通文本 - <b>这是粗体文本</b>。</p>
10.
<base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
<head> <base href="http://www.w3school.com.cn/i/" /> <base target="_blank" /> </head> <body> <img src="eg_smile.gif" /> <a href="http://www.w3school.com.cn">W3School</a> </body>
11.
<basefont> 标签定义基准字体。该标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列。
<head> <basefont color="red" size="5" /> </head> <body> <h1>This is a header</h1> <p>This is a paragraph</p> </body>
12.
bdi 指的是 bidi 隔离。
<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时,该标签很有用。
13.
bdo 元素可覆盖默认的文本方向。
<bdo dir="rtl">Here is some text</bdo>
14.
<big> 标签呈现大号字体效果。
使用 <big> 标签可以很容易地放大字体。这简直不能再简单了:浏览器显示包含在 <big> 标签和其相应的 </big> 标签之间的文字时,其字体比周围的文字要大一号。但是,如果文字已经是最大号字体,这个 <big> 标签将不起任何作用。
更妙的是,可以嵌套 <big> 标签来放大文本。每一个 <big> 标签都可以使字体大一号,直到上限 7 号文本,正如字体模型所定义的那样。
但是使用 <big> 标签的时候还是要小心,因为浏览器总是很宽大地试图去理解各种标签,对于那些不支持 <big> 标签的浏览器来说,它经常将其认为是粗体字标签。
15.
<blockquote> 标签定义块引用。
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
16.
body 元素定义文档的主体。
body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
<html> <head> <title>文档的标题</title> </head> <body> 文档的内容... ... </body> </html>
17.
<br> 可插入一个简单的换行符。
<br> 标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。在 XHTML 中,把结束标签放在开始标签中,也就是 <br />。
<p> 标签请注意,<br> 标签只是简单地开始新的一行,而当浏览器遇到 时,通常会在相邻的段落之间插入一些垂直的间距。
18.
<button> 标签定义一个按钮。
在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"
所有主流浏览器都支持 <button> 标签。
input 元素重要事项:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 来创建按钮。
<button type="button">Click Me!</button>
19.
<canvas> 标签定义图形,比如图表和其他图像。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
实例
如何通过 canvas 元素来显示一个红色的矩形:
<canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>
20.
定义和用法
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
实例
<table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
21.
定义和用法
对其所包括的文本进行水平居中。 ??????????????标签呢?
22.
定义和用法
<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
按照惯例,引用的文本将以斜体显示。
用 <cite> 标签把指向其他文档的引用分离出来,尤其是分离那些传统媒体中的文档,如书籍、杂志、期刊,等等。如果引用的这些文档有联机版本,还应该把引用包括在一个 <a> 标签中,从而把一个超链接指向该联机版本。
<cite> 标签还有一个隐藏的功能:它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器,它能够自动整理引用表格,并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用;它使浏览器能够以各种实用的方式来向用户表达文档的内容。
23.
HTML <em> <strong> <dfn> <code> <samp> <kbd><var> <cite> 标签
定义和用法
以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式,但实际上,这些标签都拥有确切的语义。
我们并不反对使用它们,但是如果您只是为了达到某种视觉效果而使用这些标签的话,我们建议您使用样式表,那么做会达到更加丰富的效果。
<em> |
把文本定义为强调的内容。 |
<strong> |
把文本定义为语气更强的强调的内容。 |
<dfn> |
定义一个定义项目。 |
<code> |
定义计算机代码文本。 |
<samp> |
定义样本文本。 |
<kbd> |
定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 |
<var> |
定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 |
<cite> |
定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。 |
24.
定义和用法
<col> 标签为表格中一个或多个列定义属性值。
如需对全部列应用样式,<col> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。
您只能在 table 或 colgroup 元素中使用 <col> 标签。
25.
定义和用法
<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。
如需对全部列应用样式,<colgroup> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。
<colgroup> 标签只能在 table 元素中使用。
实例
两个 colgroup 元素为表格中的三列规定了不同的对齐方式和样式(注意第一个 colgroup 元素横跨两列):
<table width="100%" border="1"> <colgroup span="2" align="left"></colgroup> <colgroup align="right" style="color:#0000FF;"></colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table>
26.
定义和用法
command 元素表示用户能够调用的命令。
<command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。
只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。
实例
标记一个按钮:
<menu> <command onclick="alert('Hello World')"> Click Me!</command> </menu>
27.
实例
下面是一个 input 元素,datalist 中描述了其可能的值:
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
定义和用法
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
28.
定义和用法
<dd> 在定义列表中定义条目的定义部分。
实例
<dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
29.
<del>定义和用法
定义文档中已被删除的文本。
实例
a dozen is <del>20</del> 12 pieces
30.
定义和用法
<details> 标签用于描述文档或文档某个部分的细节。
实例
关于文档的细节:
<details> <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details>
31.
定义和用法
<dialog> 标签定义对话框或窗口。
实例
使用 <dialog> 元素:
<table border="1"> <tr> <th>一月 <dialog open>这是打开的对话窗口</dialog></th> <th>二月</th> <th>三月</th> </tr> <tr> <td>31</td> <td>28</td> <td>31</td> </tr> </table>
32.
定义和用法
<dir> 标签定义目录列表。
不赞成使用 dir 元素!
实例
目录列表:
<dir> <li>HTML</li> <li>XHTML</li> <li>CSS</li> </dir>
33.
定义和用法
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
实例
文档中的一个部分会显示为绿色:
<div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p> </div>
34.
定义和用法
<dl> 标签定义了定义列表(definition list)。
<dt><dd><dl> 标签用于结合 (定义列表中的项目)和 (描述列表中的项目)。
<dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
35
定义和用法
<dt> 标签定义了定义列表中的项目(即术语部分)。
36
定义和用法
<embed> 标签定义嵌入的内容,比如插件。
37
定义和用法
figure<figcaption> 标签定义 元素的标题(caption)。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
定义和用法
<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。
figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
38
定义和用法
<font> 规定文本的字体、字体尺寸、字体颜色。
实例
规定文本字体、大小和颜色:
<font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text!</font>
39
定义和用法
<footer> 标签定义文档或节的页脚。
<footer> 元素应当含有其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。
实例
文档中的页脚部分:
<footer> <p>Posted by: W3School</p> <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p> </footer>
40
定义和用法
<form> 标签用于为用户输入创建 HTML 表单。
input 元素表单能够包含 ,比如文本字段、复选框、单选框、提交按钮等等。
menustextareafieldsetlegendlabel 元素表单还可以包含 、、、 和 。
表单用于向服务器传输数据。
例子
<form action="form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /> </form>
41
定义和用法
<frame> 标签定义 frameset 中的一个特定的窗口(框架)。
frameset 中的每个框架都可以设置不同的属性,比如 border、scrolling、noresize 等等。
实例
简单的三框架页面:
<html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
42
定义和用法
frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
<html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
43
定义和用法
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。
实例
六个不同的 HTML 标题:
<h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
44
定义和用法
<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<base><link><meta><script><style><title>下面这些标签可用在 head 部分:, , , , , 以及 。
<title> 定义文档的标题,它是 head 部分中唯一必需的元素。
实例
一个简单的 HTML 文档,带有最基本的必需的元素:
<html> <head> <title>文档的标题</title> </head> <body> 文档的内容... ... </body> </html>
45
定义和用法
<hr> 标签在 HTML 页面中创建一条水平线。
水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。
实例
被水平线分隔的标题和段落:
<h1>This is header 1</h1> <hr /> <p>This is some text</p>
46
实例
<html> <head> 这里是文档的头部 ... ... ... </head> <body> 这里是文档的主体 ... ... ... </body> </html>
定义和用法
此元素可告知浏览器其自身是一个 HTML 文档。
<head> 标签<body> 标签<html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。正如您所了解的那样,文档的头部由定义,而主体由 定义。
47
定义和用法
<i> 标签显示斜体文本效果。
<em><i> 标签和基于内容的样式标签 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。
提示:<i> 标签一定要和结束标签 </i> 结合起来使用。
48
定义和用法
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。
49
定义和用法
img 元素向网页中嵌入一幅图像。
请注意,从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
src 属性alt 属性<img> 标签有两个必需的属性: 和 。
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
以上代码的效果:
上海鲜花港 - 郁金香
50
定义和用法
<input> 标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等
实例
一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:
<form action="form_action.asp" method="get"> First name: <input type="text" name="fname" /> Last name: <input type="text" name="lname" /> <input type="submit" value="Submit" /> </form>
51
定义和用法
<ins> 标签定义已经被插入文档中的文本。
实例
带有已删除部分和新插入部分的文本:
a dozen is <del>20</del> <ins>12</ins> pieces
52
定义和用法
<keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时,私钥存储在本地,公钥发送到服务器。
实例
带有 keygen 字段的表单:
<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>
53
定义和用法
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
实例
带有两个输入字段和相关标记的简单 HTML 表单:
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
54
定义和用法
fieldset 元素legend 元素为 定义标题(caption)
实例
组合表单中的相关元素:
<form> <fieldset> <legend>health information</legend> height: <input type="text" /> weight: <input type="text" /> </fieldset> </form>
55
定义和用法
<li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
56
定义和用法
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
<head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head>
57
实例
<main> <h1>Web Browsers</h1> <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p> <article> <h1>Google Chrome</h1> <p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器,于 2008 年发布。</p> </article> <article> <h1>Internet Explorer</h1> <p>Internet Explorer 由微软开发的一款免费的 web 浏览器,发布于 1995 年。</p> </article> <article> <h1>Mozilla Firefox</h1> <p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器,发布于 2004 年。</p> </article> </main>
定义和用法
<main> 标签规定文档的主要内容。
<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
注释:在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>。
58
<map> 实例
带有可点击区域的图像映射:
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
所有主流浏览器都支持 <map> 标签。
定义和用法
定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
59
实例
突出显示部分文本:
<p>Do not forget to buy <mark>milk</mark> today.</p>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <mark> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <mark> 标签。
定义和用法
<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
60
实例
带有两个菜单按钮 ("File" 和 "Edit") 的工具栏,每个按钮都包含带有一系列选项的下拉列表:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="file_new()">New...</button> <button type="button" onclick="file_open()">Open...</button> <button type="button" onclick="file_save()">Save</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="edit_cut()">Cut</button> <button type="button" onclick="edit_copy()">Copy</button> <button type="button" onclick="edit_paste()">Paste</button> </menu> </li> </menu>
定义和用法
<menu> 标签定义命令的列表或菜单。
<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
61
实例
包含不同 <menuitem> 元素的上下文菜单:
<menu type="context" id="mymenu"> <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"> </menuitem> <menu label="Share on..."> <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);"> </menuitem> <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);"> </menuitem> </menu> <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem> </menu>
定义和用法
<menuitem> 标签定义用户可以从弹出菜单调用的命令/菜单项目。
62
定义和用法
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
HTML 与 XHTML 之间的差异
在 HTML 中,<meta> 标签没有结束标签。
在 XHTML 中,<meta> 标签必须被正确地关闭。
提示和注释:
注释:<meta> 标签永远位于 head 元素内部。
注释:元数据总是以名称/值的形式被成对传递的。
63
定义和用法
<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。
例子:磁盘用量、查询结果的相关性,等等。
注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。
64
实例
<nav> <a href="index.asp">Home</a> <a href="html5_meter.asp">Previous</a> <a href="html5_noscript.asp">Next</a> </nav>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <nav> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <nav> 标签。
定义和用法
<nav> 标签定义导航链接的部分。
65.
定义和用法
noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
实例
<frameset cols = "25%, 25%,*"> <noframes> <body>Your browser does not handle frames!</body> </noframes> <frame src ="venus.htm" /> <frame src ="sun.htm" /> <frame src ="mercur.htm" /> </frameset>
66
实例
向 HTML 代码添加一个对象:
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50"> <param name="BorderStyle" value="1" /> <param name="MousePointer" value="0" /> <param name="Enabled" value="1" /> <param name="Min" value="0" /> <param name="Max" value="10" /> </object>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
几乎所有主流浏览器都拥有部分对 <object> 标签的支持。
定义和用法
定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。
<object> 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。
浏览器的对象支持有赖于对象类型。不幸的是,主流浏览器都使用不同的代码来加载相同的对象类型。
而幸运的是,object 对象提供了解决方案。如果未显示 object 元素,就会执行位于 <object> 和 </object> 之间的代码。通过这种方式,我们能够嵌套多个 object 元素(每个对应一个浏览器)。
67
定义和用法
<ol> 标签定义有序列表。
68
实例
通过 <optgroup> 标签把相关的选项组合在一起:
<select> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </optgroup> </select>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
所有主流浏览器都支持 <optgroup> 标签。
定义和用法
<optgroup> 标签定义选项组。
optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。
69
实例
创建带有 4 个选项的选择列表:
<select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
所有浏览器都支持 <option> 标签。
定义和用法
option 元素定义下拉列表中的一个选项(一个条目)。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。
option 元素位于 select 元素内部。
70
实例
执行计算然后在 <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>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
Firefox, Chrome, Safari 以及 Opera 支持 <output> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <output> 标签。
定义和用法
<output> 标签定义不同类型的输出,比如脚本的输出。
71
实例
以下代码标记了一个段落:
<p>This is some text in a very short paragraph</p>
(在页面下部,您可以找到更多实例。)
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
所有主流浏览器都支持 <p> 标签。
定义和用法
<p> 标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。
72
实例
向 HTML 代码添加一个对象:
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50"> <param name="BorderStyle" value="1" /> <param name="MousePointer" value="0" /> <param name="Enabled" value="1" /> <param name="Min" value="0" /> <param name="Max" value="10" /> </object>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
所有浏览器都支持 <param> 标签。
定义和用法
<object><applet> 标签param 元素允许您为插入 XHTML 文档的对象规定 run-time 设置,也就是说,此标签可为包含它的 或者 提供参数。
73
定义和用法
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
<p><address> 标签可以导致段落断开的标签(例如标题、 和 )绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。
物理样式和基于内容的样式变化链接图像水平分隔线pre 元素中允许的文本可以包括,还有、和。当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。请看下面的例子:
<pre> <html> <head> <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body> <script type="text/javascript"> xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml"); document.write("xmlDoc is loaded, ready for use"); </script> </body> </html> </pre>
符号实体在上面的代码中,<pre> 标签中的特殊符号被转换为,比如 "<" 代表 "<",">" 代表 ">"。另外,请注意蓝色的代码,我们在 <pre> 标签中使用了链接,也就是 <a> 标签。上面这段代码的显示效果如下:
loadXMLDoc<html> <head> <script type="text/javascript" src="loadxmldoc.js"> </script> </head> <body> <script type="text/javascript"> xmlDoc=("books.xml"); document.write("xmlDoc is loaded, ready for use"); </script> </body> </html>
提示和注释
提示:制表符(tab)在 <pre> 标签定义的块当中可以起到应有的作用,每个制表符占据 8 个字符的位置。但是我们不推荐使用它,因为在不同的浏览器中,Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格,可以确保文本正确的水平位置。
符号实体提示:如果您希望使用 <pre> 标签来定义计算机源代码,比如 HTML 源代码,请使用来表示特殊字符,比如 "<" 代表 "<",">" 代表 ">","&" 代表 "&"。
<code> 标签提示:在 W3School 中,非常多页面中的源代码实例都是通过 <pre> 标签定义的,您可以参考这些页面,学习如何使用该标签。我们甚至把 <pre> 标签与 结合起来使用,以获得更加精确的语义。
74
实例
正在进行的下载:
<progress value="22" max="100"></progress>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 6 支持 <progress> 标签。
注释:Internet Explorer 9 以及更早的版本不支持 <progress> 标签。
定义和用法
<progress> 标签标示任务的进度(进程)。
75
实例
标记短的引用:
<q>Here is a short quotation here is a short quotation</q>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
所有浏览器都支持 <q> 标签。
定义和用法
<q> 标签定义短的引用。
浏览器经常在引用的内容周围添加引号。
<q> 与 <blockquote> 的区别
<blockquote><q> 标签在本质上与 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分(通常显示为缩进的块),请使用 <blockquote> 标签。
76
实例
一个 ruby 注释:
<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <rp> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <rp> 标签。
定义和用法
<rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
ruby 注释是中文注音或字符。
在东亚使用,显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
77
定义和用法
<rt> 标签定义字符(中文注音或字符)的解释或发音。
ruby 注释是中文注音或字符。
在东亚使用,显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
78
定义和用法
<ruby> 标签定义 ruby 注释(中文注音或字符)。
在东亚使用,显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
79
例子
可以像这样标记删除线文本:
在 HTML 5 中,<s>仍然支持</s>已经不支持这个标签了。
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
所有浏览器都支持 <s> 标签。
定义和用法
<s> 标签可定义加删除线文本定义。
<strike> 标签<s> 标签是 的缩写版本,Netscape 和 Internet Explorer 都支持它。但在 HTML 4 和 XHTML 中已经不再赞成使用它了,意思就是不再使用了;它早晚有一天将会消失。
80
实例
在 HTML 页面中插入一段 JavaScript:
<script type="text/javascript"> document.write("Hello World!") </script>
(在本页底部可以找到更多实例)
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
6.0 |
9.0 |
4.0 |
5.0 |
11.1 |
所有浏览器都支持 <script> 标签。
定义和用法
<script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
81
实例
文档中的区段,解释了 PRC:
<section> <h1>PRC</h1> <p>The People's Republic of China was born in 1949...</p> </section>
浏览器支持
表格中的数字指示了支持此元素的首个浏览器版本。
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
6.0 |
9.0 |
4.0 |
5.0 |
11.1 |
所有浏览器都支持 <section> 标签。
定义和用法
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
82
实例
创建带有 4 个选项的选择列表:
<select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
所有主流浏览器都支持 <select> 标签。
定义和用法
select 元素可创建单选或多选菜单。
<option><select&> 元素中的 标签用于定义列表中的可用选项。
83
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
所有浏览器都支持 <small> 标签。
定义和用法
<small> 标签呈现小号字体效果。
<small> 标签和它所对应的 <big> 标签一样,但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号,那么 <small> 标签将不起任何作用。
与 <big> 标签类似,<small> 标签也可以嵌套,从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号,直到达到下限的一号字。
84
实例
拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件(如果有的话):
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <source> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <source> 标签。
定义和用法
<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
85
定义和用法
<span> 标签被用来组合文档中的行内元素。
86
定义和用法
<strike> 标签可定义加删除线文本定义。
87
定义和用法
<style> 标签用于为 HTML 文档定义样式信息。
在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。
style 元素位于 head 部分中。
88
定义和用法
<sub> 标签可定义下标文本。
包含在 <sub> 标签和其结束标签 </sub> 中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。
<sup> 标签提示:无论是 <sub> 标签还是和它对应的 ,在数学等式、科学符号和化学公式中都非常有用。
89
<details> <summary>HTML 5</summary> This document teaches you everything you have to learn about HTML 5. </details>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
只有 Chrome 以及 Safari 6 支持 <summary> 标签。
定义和用法
<summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。
90
定义和用法
<sup> 标签可定义上标文本。
包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。
提示:这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a> 标签结合起来使用,就可以创建出很好的超链接脚注。
91
定义和用法
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格 单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
实例
一个简单的 HTML 表格,包含两行两列:
<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
92
实例
带有 thead、tbody 以及 tfoot 元素的 HTML 表格:
<table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
<tbody> 标签仅得到所有主流浏览器的部分支持。
定义和用法
<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。
theadtfoottbody 元素应该与 和 元素结合起来使用。
thead 元素用于对 HTML 表格中的表头内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。
注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
提示:在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。
详细描述
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
93
实例
一个简单的 HTML 表格,包含两行两列:
<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
所有浏览器都支持 <td> 标签。
定义和用法
<td> 标签定义 HTML 表格中的标准单元格。
HTML 表格有两类单元格:
表头单元 - 包含头部信息(由 th 元素创建)
标准单元 - 包含数据(由 td 元素创建)
td 元素中的文本一般显示为正常字体且左对齐。
94
实例
<textarea rows="3" cols="20"> 在w3school,你可以找到你所需要的所有的网站建设教程。 </textarea>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
所有浏览器都支持 <textarea> 标签。
定义和用法
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
注释:在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。
有关 wrap 属性的详提示:可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式。
细信息。
95
实例
带有 thead、tbody 以及 tfoot 元素的 HTML 表格:
<table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
<tfoot> 标签仅得到所有主流浏览器的部分支持。
定义和用法
<tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。
theadtbodytfoot 元素应该与 和 元素结合起来使用。
thead 元素用于对 HTML 表格中的表头内容进行分组,而 tbody 元素用于对 HTML 表格中的主体内容进行分组。
注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
提示:在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。
详细描述
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
96
定义和用法
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格:
表头单元格 - 包含表头信息(由 th 元素创建)
标准单元格 - 包含数据(由 td 元素创建)
th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。
实例
普通的 HTML 表格,包含两行两列:
<table border="1"> <tr> <th>Company</th> <th>Address</th> </tr> <tr> <td>Apple, Inc.</td> <td>1 Infinite Loop Cupertino, CA 95014</td> </tr> </table>
97
定义和用法
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
tbodytfootthead 元素应该与 和 元素结合起来使用。
tbody 元素用于对 HTML 表格中的主体内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。
注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
提示:在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。
详细描述
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
实例
带有 thead、tbody 以及 tfoot 元素的 HTML 表格:
<table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table>
98
实例
如何定义时间和日期:
<p>我们在每天早上 <time>9:00</time> 开始营业。</p> <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
定义和用法
<time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果
99
定义和用法
<title> 元素可定义文档的标题。
浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。
实例
一个简单的 HTML 文档,带有尽可能少的必需的标签:
<html> <head> <title>XHTML Tag Reference</title> </head> <body> The content of the document...... </body> </html>
100
实例
一个简单的 HTML 文档,带有尽可能少的必需的标签:
<html> <head> <title>XHTML Tag Reference</title> </head> <body> The content of the document...... </body> </html>
实例
一个简单的 HTML 表格,包含两行两列:
<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
101
定义和用法
<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。
实例
播放带有字幕的视频:
<video width="320" height="240" controls="controls"> <source src="forrest_gump.mp4" type="video/mp4" /> <source src="forrest_gump.ogg" type="video/ogg" /> <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese"> <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English"> </video>
102
定义和用法
<tt> 标签呈现类似打字机或者等宽的文本效果。
<code><kbd><tt> 标签与 和 标签一样,<tt> 标签和必需的 </tt> 结束标签告诉浏览器,要把其中包含的文本显示为等宽字体。对于那些已经使用了等宽字体的浏览器来说,这个标签在文本的显示上就没有什么特殊效果了。
103
定义和用法
<u> 标签可定义下划线文本。
实例
使用 <u> 标签为文本添加下划线:
<p>如果文本不是超链接,就不要<u>对其使用下划线</u>。</p>
104
定义和用法
<ul> 标签定义无序列表
105
实例
一段简单的 HTML5 视频:
<video src="movie.ogg" controls="controls"> 您的浏览器不支持 video 标签。 </video>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。
注释:Internet Explorer 8 以及更早的版本不支持 <video> 标签。
定义和用法
<video> 标签定义视频,比如电影片段或其他视频流。
106
实例
一段带有 Word Break Opportunity 的文本:
<p> 如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。 </p>
浏览器支持
IE |
Firefox |
Chrome |
Safari |
Opera |
|
|
|
|
|
所有浏览器都支持 <wbr> 标签,除了 Internet Explorer。
定义和用法
Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。
提示:如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机)。