HTML 基础标签

  1. title 元素的内容会显示在浏览器的标题栏中。<title>我的第一个 HTML 页面</title>
  2. body 元素的内容会显示在浏览器中。
  3. 段落标签: <p>这是段落。</p> ,段落元素由 p 标签定义。这个段落在源代码中包含许多行但是浏览器忽略了它们。段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
  4. 注意: 浏览器忽略了源代码中的排版,即忽略多余的空格和换行。
  5. 换行使用<br>标签
  6. 关于<h1>~<h6>标题标签,请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替
  7. 居中排列标题: <h1 align="center">This is heading 1</h1>

  8. hr 标签定义水平线

    1
    2
    <p>这是段落。</p>
    <hr />

  9. 注释: <!--这是一段注释。注释不会在浏览器中显示。-->

  10. 背景颜色: <body bgcolor="yellow">

HTML 文本格式化

常用的格式化

1
2
3
4
5
6
7
8
9
10
<b>This text is bold</b><br />
<strong>This text is strong</strong><br />
<em>This text is emphasized</em><br />
<i>This text is italic</i><br />
<big>This text is big</big><br />
<small>This text is small</small><br />
This text contains
<sub>subscript</sub><br />
This text contains
<sup>superscript</sup>

一些说明:
<b>标签与<strong>标签的区别:
两者在网页中显示效果一样，但实际目的不同。
<b>这个标签对应 bold,即文本加粗,目的仅仅是为了加粗显示文本,是一种样式/风格需求
<strong>这个标签意思是加强，表示该文本比较重要，提醒读者/终端注意。为了达到这个目的，浏览器等终端将其加粗显示；
总结：<b>为了加粗而加粗，<strong>为了标明重点而加粗。

HTML5 的一个最大的特性 – 语义化
<b> 和 <i> 创建之初就是简单地表示粗体和斜体样式，但现在是 HTML5 的天下。语义化是 HTML5 最大的特性之一，而所有被 HTML5 保留的标签都带有其特有的语义，<b> 和 <i> 也不例外，它们分别被重新赋予了语义。相比较而言，标签的样式反而变得无足轻重，所以上面所讲的两组标签，虽然样式上表现极其相似，但其实语义上各有侧重。
在默认的 HTML 样式表定义中，b 和 strong 的样式一样，为 { font-weight: bolder }而 em 的默认样式为 { font-style: italic }，与 i 相同。在 HTML 4 中，em 表示 emphasized text，strong 表示 strong emphasized text，故 strong 的强度要更强。而在 HTML 5 中，strong 的定义改成了 important text。当然 emphasized 和 strong emphasized 乃至 important 之间怎么界定很模糊，关键是在自己编写 HTML 代码的时候保持使用上一致。b 和 i 仅仅表示这里应该用粗体或者斜体显示.

<big> 和 <small> 显示大号和小号字体
<sub> 和<sup>分别表示下标和上标.
<tt> 呈现类似打字机或者等宽的文本效果。

文本预格式化

文本预格式化使用<pre>标签
被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。

“计算机输出”标签

1
2
3
4
5
<code>Computer code</code>
<kbd>Keyboard input</kbd>
<tt>Teletype text</tt>
<samp>Sample text</samp>
<var>Computer variable</var>

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

在 HTML 文件中写地址

1
2
3
4
5
6
7
<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>

关于缩写和首字母缩写,即缩词略写

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

在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
title仅对于 IE 5 中的 acronym 元素有效。但对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。

文字方向

如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)即right to left.

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

块引用

长引用和短引用
长引用使用<blockquote>标签, 使用 blockquote 元素的话，浏览器会插入换行和外边距.
短引用使用<q>标签, 使用q 元素不会有任何特殊的呈现。

删除字效果和插入字效果

删除文本使用<del>标签, 插入文本使用<ins>标签,
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
大多数浏览器会改写为删除文本和下划线文本。一些老式的浏览器会把删除文本和下划线文本显示为普通文本。

HTML 链接

创建超级链接

1
2
3
4
5
6
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。
</p>
<p>
<a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

将图像作为链接

1
2
3
4
5
<p>
    <a href="/example/html/lastpage.html">
        <img border="0" src="/i/eg_buttonnext.gif" />
    </a>
</p>

点击链接打开新的标签页

1
2
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新标签页中打开。</p>

链接到同一个页面的不同位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<p><a href="#C4">查看 Chapter 4。</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
....

跳出框架

1
<a href="/index.html" target="_top"> 跳出框架,请点击这里！</a>

创建电子邮件链接

1
2
3
4
5
6
7
8
9
<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>
<p>
这是另一个 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>
</p>

注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

HTML 框架

垂直与水平框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--使用三份不同的文档制作一个垂直框架-->
<!--垂直框架-->
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
<!--水平框架-->
<frameset rows="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
<!--水平垂直混合框架-->
<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>

使用 标签

noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
注释：如果浏览器有能力处理框架，就不会显示出 frameset 元素中的文本。
重要事项：如果您希望 frameset 添加 <noframes> 标签，就必须把其中的文本包装在 <body></body> 标签中！

1
2
3
4
5
6
7
8
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>

含有 noresize=”noresize” 属性的框架结构

noresize 属性使框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。

1
2
3
4
5
<frameset cols="50%,*,25%">
  <frame src="/example/html/frame_a.html" noresize="noresize" />
  <frame src="/example/html/frame_b.html" />
  <frame src="/example/html/frame_c.html" />
</frameset>

导航框架

导航框架包含一个将第二个框架作为目标的链接列表。名为 “contents.htm” 的文件包含三个链接.

1
2
3
4
<frameset cols="120,*">
  <frame src="/example/html/html_contents.html">
  <frame src="/example/html/frame_a.html" name="showframe">
</frameset>

内联框架

一些老的浏览器不支持 iframe。如果得不到支持，iframe 是不可见的。
<iframe src="/i/eg_landscape.jpg"></iframe>

跳转至框架内的一个指定的节

其中的一个框架设置了指向另一个文件内指定的节的链接。这个”link.htm”文件内指定的节使用 <a name="C10"> 进行标识。

1
2
3
4
<frameset cols="20%,80%">
 <frame src="/example/html/frame_a.html">
 <frame src="/example/html/link.html#C10">
</frameset>

使用框架导航跳转至指定的节

左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。

1
2
3
4
<frameset cols="180,*">
<frame src="/example/html/content.html">
<frame src="/example/html/link.html" name="showframe">
</frameset>

HTML 表格

每个表格由 table 标签开始, 每个表格行由 tr 标签开始, 每个表格数据由 td 标签开始.
border控制表格边框宽度,当不指定border或者指定border=”0”时,则表示无边框.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 一列表格
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>
# 一行三列表格
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>
# 两行三列表格
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

表格中的表头(Heading)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table border="1">
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>

空单元格

1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr>
  <td>Some text</td>
  <td>Some text</td>
</tr>
<tr>
  <td></td>
  <td>Some text</td>
</tr>
</table>

其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。我们的技巧是在单元中插入一个 no-breaking 空格。
no-breaking 空格是一个字符实体。no-breaking 空格由 “&” 符号开始，然后是字符”nbsp”，并以分号结尾(“;”)。

带有标题的表格

1
2
3
4
5
6
7
8
9
10
11
12
13
<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

跨行或跨列的表格单元格(合并单元格)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 横跨两列的单元格：
<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>
# 横跨两行的单元格：
<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>

表格内的包括段落, 表格, 列表和文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table border="1">
<tr>
  <td>
   <p>这是一个段落。</p>
   <p>这是另一个段落。</p>
  </td>
  <td>这个单元包含一个表格：
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元包含一个列表：
   <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

单元格边距(Cell padding)

1
2
3
4
5
6
7
8
9
10
<table border="1" cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

表格的单元格间距(Cell spacing)

1
2
3
4
5
6
7
8
9
10
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

向表格添加背景颜色或背景图像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table border="1" bgcolor="red">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
<table border="1" background="/i/eg_bg_07.gif">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

向表格单元添加背景颜色或者背景图像

1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr>
  <td bgcolor="red">First</td>
  <td>Row</td>
</tr>   
<tr>
  <td background="/i/eg_bg_07.gif">Second</td>
  <td>Row</td>
</tr>
</table>

在表格单元中排列内容对齐方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table width="400" border="1">
 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
 <tr>
  <td align="left">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="left">食物</td>
  <td align="right">$730.40</td>
  <td align="right">$650.00</td>
 </tr>
 <tr>
  <th align="left">总计</th>
  <th align="right">$1001.50</th>
  <th align="right">$744.65</th>
 </tr>
</table>

表格的框架(frame)属性

注释：frame 属性无法在 Internet Explorer 中正确地显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<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>
<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>