总结 HTML

段落

<p> 是块级元素

链接

<a href="http://www.w3school.com.cn">This is a link</a>

图像

<img src="w3school.jpg" width="104" height="142" />

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

HTML 提示:使用小写标签

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

HTML 提示:使用小写属性

属性和属性值对大小写不敏感。
不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

name='Bill "HelloWorld" Gates'

HTML 水平线


标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

HTML 注释

<!-- This is a comment -->

br 还是 br /

在 XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素。
即使 <br> 在所有浏览器中的显示都没有问题,使用 <br /> 也是更长远的保障。

HTML 输出 - 有用的提示

对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

HTML 文本格式化

文本格式化

<b>This text is bold</b>
<strong>This text is strong</strong>
<big>This text is big</big>
<em>This text is emphasized</em>
<i>This text is italic</i>
<small>This text is small</small>
This text contains<sub>subscript</sub>
This text contains<sup>superscript</sup>

This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This text containssubscript
This text containssuperscript

预格式文本

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

pre 标签很适合显示计算机代码:

<pre>
for i = 1 to 10
     print i
next i
</pre>

计算机输出标签

这些标签常用于显示计算机/编程代码。

<code>Computer code</code>
<kbd>Keyboard input</kbd>
<tt>Teletype text</tt>
<samp>Sample text</samp>
<var>Computer variable</var>

地址

<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>

缩写和首字母缩写

在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

文字方向

如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl);
达芬奇密码:

<bdo dir="rtl">
Here is some Hebrew text
</bdo>


Here is some Hebrew text

块引用

这是长的引用:

<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

这是短的引用:

<q>
这是短的引用。
</q>


这是短的引用。

删除字效果和插入字效果

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

一打有 二十 十二 件。

总结

“计算机输出”标签

标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。

引用、引用和术语定义

标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。

样式表

外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

链接

可以使用图像来作链接:

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>

HTML 链接 - target 属性

使用 Target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

HTML 链接 - name 属性

name 属性规定锚(anchor)的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
命名锚的语法:

<a name="label">锚(显示在页面上的文本)</a>

提示:锚的名称可以是任何你喜欢的名字。
提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效。

实例

首先,我们在 HTML 文档中对锚进行命名(创建一个书签):

<a name="tips">基本的注意事项 - 有用的提示</a>

然后,我们在同一个文档中创建指向该锚的链接:

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接:

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。

有用的提示:

注释:请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"
提示:假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

邮件

这是邮件链接:

<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

这是另一个 mailto 链接:

<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件!</a>

图像

替换文本属性(Alt)

alt 属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

表格

表格的表头与标题

表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:

<table border="1">
    <caption>我的标题</caption>
    <tr>
        <th>Heading</th>
        <th>Another Heading</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
我的标题
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

跨行或跨列的表格单元格

横跨两列的单元格:

<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>
姓名 电话
Bill Gates 555 77 854 555 77 855

横跨两行的单元格:

<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>
姓名 Bill Gates
电话 555 77 854
555 77 855

frame 属性

frame 属性无法在 Internet Explorer 中正确地显示。(感觉没必要用)
box above below hsides vsides

<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

总结

表格标签

表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

列表

无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下:

  • Coffee
  • Milk

有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示如下:

  1. Coffee
  2. Milk

定义列表

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

浏览器显示如下:

Coffee
Black hot drink
Milk
White cold drink

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

HTML 表单和输入

文本域(Text Fields)

First name: 
<input type="text" name="firstname" />

单选按钮(Radio Buttons)

<input type="radio" name="sex" value="male" /> 
Male

复选框(Checkboxes)

<input type="checkbox" name="bike" />
I have a bike

表单的动作属性(Action)和确认按钮

<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

下拉列表

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>

文本域(Textarea)

<textarea rows="10" cols="30">
The cat was playing in the garden.

Fieldset around data

本例演示如何在数据周围绘制一个带标题的框。

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高:<input type="text" />
    体重:<input type="text" />
  </fieldset>
</form>

<fieldset> 元素可将表单内的相关元素分组。
<legend> 标签为 fieldset 元素定义标题。

HTML 框架

使用框架的坏处:

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面 html <html> <frameset rows="50%,50%"> <frame src="/example/html/frame_a.html"> <frameset cols="25%,75%"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </frameset> </html> ### 有用的提示: 假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 标签中加入:noresize="noresize"。 为不支持框架的浏览器添加 <noframes> 标签。 重要提示:不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。

导航框架

<frameset cols="120,*">
  <frame src="/example/html/html_contents.html">
  <frame src="/example/html/frame_a.html" name="showframe">
</frameset>
<!-- html_contents.html -->
<a href="/example/html/frame_a.html" target="showframe">Frame a</a><br>
<a href="/example/html/frame_b.html" target="showframe">Frame b</a><br>
<a href="/example/html/frame_c.html" target="showframe">Frame c</a>

HTML 内联框架

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

颜色

颜色名

141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)
它们是: black(黑色), blue(蓝色), aqua(水),fuchsia(紫红), gray(灰), green(绿), lime(酸橙), maroon(栗色), navy(海军), olive(橄榄), purple(紫), red, silver, white,teal(蓝绿色), yellow,(橙)

Color Color Name
  aqua(水)
  fuchsia(一种植物:紫红)
  lime(酸橙)
  maroon(栗色)
  navy(海军)
  teal(水鸭:蓝绿色)

HTML <!DOCTYPE>

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。

提示:即将升级为最新的 HTML5 文档类型。

常用的声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML,所以不需要引用 DTD。

HTML 头部元素

HTML <head> 元素

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

以下标签都可以添加到 head 部分:<title><base><link><meta><script> 以及 <style>

HTML base 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标(target):

<base href="http://www.w3school.com.cn/images/" />

<base target="_blank" />

HTML link 元素

<link> 标签定义文档与外部资源之间的关系。

<link> 标签最常用于连接样式表:

<link rel="stylesheet" type="text/css" href="mystyle.css" />

HTML meta 元素

<meta> 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

针对搜索引擎的关键词

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述:

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

<meta name="keywords" content="HTML, CSS, XML" />

<meta name="author" content="w3school.com.cn">

<meta name="revised" content="David Yang,8/1/07">

<meta name="generator" content="Dreamweaver 8.0en">

name 和 content 属性的作用是描述页面的内容。

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。例如,添加:

<meta http-equiv="charset" content="iso-8859-1">

<meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含:

content-type: text/html

charset:iso-8859-1

expires:31 Dec 2008

当然,只有浏览器可以接受这些附加的头部字段,并能以适当的方式使用它们时,这些字段才有意义。

比如重定向:

<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />

实体

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 &apos; (IE不支持) &#39;
&cent; &#162;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

HTML 多媒体

object

<object> 的作用是支持 HTML 助手(插件)。

辅助应用程序(helper application)是可由浏览器启动的程序。辅助应用程序也称为插件。

辅助程序可用于播放音频和视频(以及其他)。辅助程序是使用 <object> 标签来加载的。

使用辅助程序播放视频和音频的一个优势是,您能够允许用户来控制部分或全部播放设置。

大多数辅助应用程序允许对音量设置和播放功能(比如后退、暂停、停止和播放)的手工(或程序的)控制。

播放声音

<audio controls="controls" height="100" width="100">

  <source src="song.mp3" type="audio/mp3" />

  <source src="song.ogg" type="audio/ogg" />

<embed height="100" width="100" src="song.mp3" />

</audio>

上面的例子使用了两个不同的音频格式。

HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。

使用了一个 mp3 文件,这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。

为了使这段音频在 Firefox 和 Opera 中同样有效,添加了一个 ogg 类型的文件。如果失败,会显示错误消息。

如果失败,代码将回退尝试 <embed> 元素。

播放视频

<video width="320" height="240" controls="controls">

  <source src="movie.mp4" type="video/mp4" />

  <source src="movie.ogg" type="video/ogg" />

  <source src="movie.webm" type="video/webm" />

  <object data="movie.mp4" width="320" height="240">

    <embed src="movie.swf" width="320" height="240" />

  </object>

</video>

优酷解决方案

在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。

如果您希望在网页中播放视频,那么您可以把视频上传到优酷等视频网站,然后在您的网页中插入 HTML 代码即可播放视频:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 

width="480" height="400" 

type="application/x-shockwave-flash">

</embed>