温故而知新 —— HTML参考手册

1. HTML元素

  • HTML元素的内容是起始标签(opening tag)与闭合标签(closing tag)之间的内容。
  • 某些 HTML 元素具有空内容(empty content),空元素在开始标签中进行关闭(以开始标签的结束而结束)。
  • 大多数 HTML 元素可拥有属性。

2. 标签属性

  • 属性一般在开始标签内描述,为 HTML 元素提供附加信息,赋予元素意义和语境。
  • 属性总是以名称/值对的形式出现,比如:name="value"
  • 属性和属性值对大小写不敏感,但推荐使用小写。
  • 常见的全局属性有idclasstitlestyle另外还有lang(规定元素内容的语言)、accesskey(规定激活元素的快捷键)、tabindex(规定元素的 tab 键次序)、dir(规定元素中内容的文本方向)。

注意: 属性值应该始终被包括在引号内(单/双引号都可以)。 但如果属性值本身就含有双引号,那么就必须使用单引号。 例如:name='Game "of" Throne'

3. 标题

  • 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的,搜索引擎使用标题为网页的结构和内容编制索引。
  • 1到6号标题与1到6号字体逆序对应,比如1号字体对应6号标题,2号字体对应5号标题。
  • 浏览器会自动地在标题的前后添加空行。默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
  • 请确保将 HTML 标题 <h1> - <h6> 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

4. 段落

段落标签<p></p>可以把 HTML 文档分割为若干段落。

  • <p>段落标签中,无法通过添加额外的空格或换行来改变输出的效果。
  • 当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被显示为一个空格。
  • 默认情况下两个段落在浏览器显示时中间会空一行。

5. 样式

<style>标签和style属性用于改变 HTML 元素的样式。

避免使用这些被废弃的标签和属性,使用CSS样式代替!

标签 描述
<center> 定义居中的内容。
<font><basefont> 定义 HTML 字体。
<s><strike> 定义删除线文本。
<u> 定义下划线文本。
属性 描述
align 定义文本的对齐方式。
bgcolor 定义背景颜色。
color 定义文本颜色。

6. 格式化

HTML 可定义很多供格式化输出的元素。 1. 预格式化文本:

  • <pre> 原样输出,不会处理内部文本的空格与换行符,而文本也会呈现为等宽字体。经常用来表示计算机的源代码。

2. “计算机输出”标签:

<code>定义计算机代码。<samp>定义计算机代码样本。

<kbd>定义键盘码。 <tt>定义打字机代码。

<var>定义变量。<pre>定义预格式文本。

  • <listing><plaintext><xmp>不赞成使用,使用 <pre>代替。

注意:

  1. pre元素是块级元素,但是只能包含文本或行内元素。也就是说,任何常见的可以导致段落断开的块级元素标签都不能位于pre元素中。 eg: 标题 <p> <address> (address 元素中的文本通常呈现为斜体,而且大多数浏览器会在 address 元素前后添加折行)
  2. pre元素中允许的文本可以包含物理样式和基于内容的样式变化(W3C的HTML 教程延伸阅读:改变文本的外观和含义),还有<a>链接、<img>图像和<hr />水平分隔线。当把其他标签,比如<a>标签放到 pre块中时,就像放在HTML/XHTML文档的其他部分中一样即可。
  3. 制表符tab在pre标签定义的块当中可以起到应有的作用,每个制表符占据8个字符的位置,但并不推荐使用tab,因为在不同的浏览器中,tab的表现形式各不相同。在用pre标签格式化的文档段中使用空格,可以确保文本正确的水平位置。
  4. 如果希望使用 <pre> 标签来定义计算机源代码,比如 HTML 源代码,要使用符号实体来表示特殊字符。 比如 “& lt;” 代表 “<”,”& gt;” 代表 “>”,”& amp;” 代表 “&”。 一般将pre标签与<code>标签结合起来使用,以获得更加精确的语义,用于标记页面中需要呈现的源代码。

3. 强调与上标下标:

<b> 定义粗体文本。<strong> 定义加重语气。 <big> 定义大号字。 <small> 定义小号字。 <i> 定义斜体字。 <em> 定义着重文字。 <sup> 定义上标字。 <sub> 定义下标字。

  • 通常使用 strong 标签(重要性、严重性和紧急性)来替换 b 标签,em(从一句话中突出某个词)替换 i 标签。
  • 通常标签 del 替换定义加删除线的文本定义标签 s 和 strike。

4. 插入删除和下划线:

  • <ins> 定义插入字。 <del> 定义删除字。
  • <u>为文本添加下划线。

文本显示格式笔记: 文本单行显示:white-space:nowrap使文本显示为单行,直···

<div>  
  white-space:nowrap使文本显示为单行,直到遇到 <br> 标签为止。超过部分隐藏并使用省略号
  修改 width 属性查看效果。
</div>
​```
div {
  overflow:hidden;	/*规定当文本溢出包含元素时发生的事情*/
  text-overflow:ellipsis; /*显示省略符号来代表被修剪的文本。*/
  white-space:nowrap; /*规定段落中的文本一行显示完全 不折行*/
  width:200px; /*为兼容IE6一定要设置宽度*/
}

文本多行显示:

让文本显示为多行只有-webkit内核才有作用,超过部分隐藏并使用省略号。不需要指定整个块元素的高度,-webkit-line-clamp自动将高度设置为2行···

<p> 
  让文本显示为多行只有-webkit内核才有作用,超过部分隐藏并使用省略号。不需要指定整个块元素的高度,-webkit-line-clamp自动将高度设置为2行的高度(指定后反而 会导致超出元素显示)。必须指定display:-webkit-box;和overflow:hidden; 不需要指定text-overflow:ellipsis; 如果有英文则使用word-break:break-all;连续英文折行。
</p>
div {
  display:-webkit-box; /*将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient:vertical; /*设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 2;  /*限制在一个块元素显示的文本的行数*/
  overflow:hidden;
}

7. 引用

  • <cite>元素定义著作或参考文献的引用(标题,书名,来源)。浏览器通常会以斜体显示引用内容。

  • <q> 元素定义短的引用(一句话),浏览器通常会为引用内容包围引号。

  • <blockquote> 元素定义长引用(段落),浏览器通常会对引用内容进行缩进处理。

8. 缩写与定义

  • <abbr>元素定义缩写或首字母缩略语。将注释写进其title属性,对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
  • <dfn>元素定义项目或缩写的说明解释。一般用法和 abbr 相同或直接用它代替。
  • <address> 元素定义文档或文章的联系信息(作者/拥有者)。 此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
  • <bdo>元素定义双流向覆盖(bi-directional override)。

<bdo> 元素定义文本方向,用于覆盖当前文本方向:

<bdo dir="rtl">My Bolg</bdo>
gloB yM

9. 链接

9.1 默认情况下,链接将以以下形式出现在浏览器中:

  • 未访问过(link)的链接显示为蓝色字体并带有下划线。
  • 已访问过(visited)的链接显示为紫色并带有下划线。
  • 当把鼠标指针悬停(hover)在网页中的某个链接上时,箭头会变为一只小手。
  • 点击(active)链接时,链接显示为红色并带有下划线。

9.2 有两种使用 <a> 标签的方式:

  1. 通过使用href 属性(规定链接的目标)- 创建指向另一个文档的链接。
<a href="http://www.w3.org">W3C</a>
  1. 链接地址的协议和host是可以省略的,浏览器会根据当前页面的协议去补全。如果资源支持,推荐省略的写法。
  2. 路径可以使用绝对路径和相对路径,但为了避免项目中页面层级太深的问题,一般使用绝对路径的写法。
  3. 请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://sunburst.wang/tags",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://sunburst.wang/tags/"
  1. 通过使用name属性(规定锚(anchor)的名称)- 创建文档内的书签。
  1. 也可以使用 id 属性来替代 name 属性,命名锚同样有效。 命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。
  2. 在其他页面中创建指向该锚的链接,将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到这个锚。
  3. 假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

9.3 使用 Target 属性,可以定义被链接的文档在何处显示。

_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。 _self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。 _parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标_self 等效。 _top 这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

  1. target的值也可以是自己指定的,如果同一个页面中两个链接指定相同的值,它们会共用一个窗口。
  2. 这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略,因此,不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

使用<a>链接发送邮件:

<p>
这是一个电子邮件链接:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>

<p>
<b>注意:</b> 单词之间空格使用 %20 代替,以确保浏览器可以正常显示文本。
</p>

10. 头部

<head>元素:

  • <head>元素是所有头部元素的容器,以下6种标签都可以添加到 head 部分。

<title> 元素:

1.定义文档的标题,并在浏览器工具栏中显示 2.提供页面被添加到收藏夹时显示的标题 3.显示在搜索引擎结果中的页面标题

  • <title>元素在所有 HTML/XHTML 文档中都是必需的。

<base> 元素:

  • <base>标签为页面上的所有链接规定默认地址或默认目标(target):
<base href="http://www.xxxx.com/images/" target="_blank">

<link> 元素:

  • <link>标签定义了文档与外部资源之间的关系,通常用于链接到外部样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">

<meta>元素:

  • 元数据(metadata)是关于数据的信息,终位于 head 元素中。
  • <meta>标签提供关于 HTML 文档的元数据,元数据不会显示在页面上,但会被浏览器解析。
  • 元素通常用于指定网页的描述,关键词,文档的作者、最后修改时间和其他元数据。
  • 元数据还可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

一些搜索引擎会利用 <meta> 标签的 namecontent 属性来索引网站页面以及描述页面的内容。

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
定义每30秒刷新当前页面:
<meta http-equiv="refresh" content="30">

<style>元素:

  • <style> 标签内的CSS规定 HTML 元素在浏览器中呈现的样式。

<script> 元素:

  • <script> 标签用于定义客户端脚本,比如 JavaScript。

11. 图像

<img> 是空标签,只包含属性,没有闭合标签。

源属性(Src)

  • 要在页面上显示图像,需要使用源属性src (”source”)来指明图像的 URL 地址。
  • 加载页面时,如果页面的图像路径没有被正确设置,浏览器则无法加载图片,图像标签就会显示一个破碎的图片。

替换文本属性(Alt)

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

  • 在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。
  • 为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
  • 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。

笔记创建图片映射: <img>定义图像,<map>定义图像地图,<area>定义图像地图中的可点击区域

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

该段代码中的shape指的是点击区域的形状,coords指的应该是链接区域在图片中的坐标(像素为单位)。

1、距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>

2、圆形:(圆心坐标为(X1,y1),半径为r)

<area shape="circle" coords="x1,y1,r" href=url>

3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ……)

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

12. 表格

  • 表格由<table> 标签来定义,表头使用 <th> 标签,每个表格均有若干行<tr>,每行被分割为若干单元格<td>

  • 表格的标题使用 <caption> 标签进行定义,必须是table的第一个子元素,位于<table>开始标签与<tr><thead>标签之间。

  • thead定义表格的页眉,tbody定义表格的主体,tfoot定义表格的页脚。

  • <col> 标签为表格中一个或多个列定义属性值。<colgroup>标签用于对表格中的列进行组合,以便对其进行格式化。

    • 字母td指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
    • 如果不定义边框属性,表格默认将不显示边框,但是大多数时候,都要使用border属性来显示边框。
    • 大多数浏览器会把表头tr内容显示为粗体居中的文本。
    • 在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。
    • 横向跨列属性:colspan 纵向跨行属性:rowspan 如果是又横向又纵向的合并,这个时候同时标示colspanrowspan(空格隔开)。合并后的单元格归属原则都是左上原则,即下归上,右归左,越往左上角越优先。
    • 单元格边距(Cell padding), 用来创建单元格内容与其边框之间的空白。
    • 单元格边距(Cell spacing), 用来增加单元格之间的距离。

13. 列表

HTML 支持有序、无序和自定义列表,三种列表项内部都可以使用段落、换行符、图片、链接以及其他列表等等。

13.1 有序列表

  • 有序列表 <ol>start属性规定有序列表的起始值(number)。
  • 根据<ol>type属性的值为A、 a、 I、 i 来分别使用大写字母,小写字母,大写罗马字母,小写罗马字母来标记列表项目,value属性规定列表项的默认标记序号。

13.2 无序列表

  • 无序列表<ul> 的列表项<li>默认使用粗体圆点(典型的小黑圆圈)进行标记。
  • 根据<ul>type属性的值为disc、 circle、 square 来分别使用实心小黑圆圈(默认),空心小黑圆圈,实心小黑方块来标记列表项目。

13.3 自定义列表

  • 自定义列表不仅仅是一列项目,而是项目及其注释的组合。
  • 自定义列表以 <dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以 <dd> 开始。
自定义列表<h3>《爱在黎明破晓前》</h3>
<dl> //自定义带描述的列表
	<dt>导演:</dt> //列表项
	<dd>理查德.林克莱特</dd>  //列表项的描述
	<dt>主演:</dt>
	<dd>伊桑.霍克</dd>
	<dd>朱莉.德尔佩</dd>
	<dt>上映日期:</dt>
	<dd>1995-01-27</dd>  	
</dl>

14. 框架

通过使用框架,可以在同一个浏览器窗口中显示不止一个页面。 每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

使用框架的坏处:

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面

框架结构标签<frameset>

  • 框架集标签(<frameset>)定义如何将窗口分割为框架。

  • 每个< frameset> 定义了一系列行rows或列columns

  • rows/columns的值规定了每行或每列占据屏幕的面积。

    <frameset cols="25%,75%">
       <frame src="frame_a.htm">
       <frame src="frame_b.htm">
    </frameset>
    

框架标签<frame>

  • 框架标签 frame 定义框架集的窗口或框架及放置在每个框架中的 HTML 文档。
  • 这是一个两列(column)的框架集。
  • 第一列被设置为占据浏览器窗口的 25%,第二列占 75%。
  • HTML 文档 “frame_a.html” 被置于第一个列中,而 “frame_b.html” 被置于第二个列中。

内联框架标签<iframe>

<iframe src="URL" width="200" height="200" frameborder="0" name="iframe_a"></iframe>
<p><a href="http://www.baidu.com" target="iframe_a">点我在内联框架内显示百度页面</a></p>
  • 定义一个内联的 iframe ,该URL指向不同的网页。
  • heightwidth属性用于规定 iframe 的高度和宽度。默认单位是像素,但也可以用百分比来设定。
  • frameborder属性用于定义 iframe 表示是否显示边框,设置属性值为"0" 移除边框。
  • iframe 可以用来显示一个目标链接的页面,此时目标链接的target属性值必须使用 iframe 的name属性值。
  • 一些老的浏览器不支持 iframe。如果不支持,iframe是不可见的。

注意事项:

<frameset cols="120,*,30%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html" noresize="noresize">
  <frame src="/example/html/frame_c.html">
  <noframes>
    <body>您的浏览器无法处理框架!</body>
  </noframes>
</frameset>
  • 假如一个框架有可见边框,用户可以拖动边框来改变它的大小。
  • 为了避免这种情况发生,可以在<frame>标签中加入:noresize="noresize"
  • 为不支持框架的浏览器添加<noframes>标签。
  • 不能将 body 标签与 frameset 标签同时使用!
  • 不过,假如添加包含一段文本的 <noframes>标签,就必须将这段文字嵌套于 body 标签内。

15. 表单

设计原则:

  1. 帮助用户不出错,如果输入错误,尽早提示错误。
  2. 扩大选择/点击的区域
  3. 控件较多时要分组
  4. 主要动作(默认行为)和次要动作

基本用法:

  • 表单<form>是一个包含表单元素的区域,用于搜集不同类型的用户输入。

  • 多数情况下被用到的表单标签是输入标签(<input>),输入类型是由类型属性(type)定义的,比如 radiohiddenpasswordfilecheckbox等。

  • 其他经常用到的标签还有<label>标签,文本域(<textarea>)标签,下拉列表(<select>)标签以及按钮<button>标签。

  • 可以使用<label>for属性,值为输入标签的id或者直接包裹输入标签的方法来实现点击文字选中表单项,提高表单的可用性。

  • <select>multiple属性规定可选择多个选项,size规定下拉列表中可见选项的数目。而如果<option>选项很多,可以通过<optgroup> 标签把相关的选项组合在一起。

  • 注意<button>type属性默认值为submit,点击时会有提交表单的行为,而不是无行为的type="button"。如果不指定type的话,回车提交的时候会出发第一个button的绑定事件。

  • 进行表单提交时,最好的方法是绑定formsubmit事件,而不是buttononclick事件。

  • 表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。

    基本属性:

  • action属性定义在提交表单时执行的动作,如果省略 action 属性,则 action 会被设置为当前页面。

  • method 属性规定在提交表单时所用的 HTTP 方法(GET(默认)POST)。

  • 如果表单中包含文件上传,那么要为表单指定enctype="multipart/form-data"

  • 还可以通过给file类的 input 标签添加accept属性来规定通过文件上传来提交的文件的类型。例如:accept="image/gif,image/jpeg"

    但请避免使用该属性,应该在服务器端验证文件上传。

  • name属性 如果要正确地被提交,每个输入字段必须设置一个 name 属性。

  • readonly属性规定 input 输入字段为只读。

  • disabled属性规定禁用按钮,被禁用的按钮既不可用,也不可点击。


其他标签或属性的详细用法及HTML5新增特性,请翻阅HTML5手册查看。