HTML 标签词典 126 个
每个标签做什么、要不要写闭合标签、常配哪些属性,一行说清。
文档骨架5
每份文档都有的骨架,顺序和位置都是定死的。
分区17
把文档切成有意义的块。搜索引擎和读屏工具就顺着这个结构走。
<header>一段内容开头的部分 —— 标题、导航之类。一页里可以有好几个。<nav>主要的导航链接区。读屏工具靠它跳转。<main>这一页的主要内容,一页只能有一个。<section>有主题的一段内容,通常配一个标题。<article>拿出去单独看也说得通的一块内容,比如一篇文章。<aside>和正文相关但不是主线的旁支内容。<footer>一段内容结尾的部分 —— 版权、联系方式之类。<div>没有语义的块级盒子。找不到合适的标签时才用它。<h1>这一页最高一级的标题,通常只写一个。<h2>第二级标题,用来切分大的段落。<h3>第三级标题,切分 h2 底下的内容。<h4>第四级标题,用在 h3 之下。<h5>第五级标题,实际上很少会用到。<h6>最低一级的标题,很少需要用到。<hgroup>把标题和它的副标题捆在一起。<address>这段内容的联系方式。不是用来写普通地址的。<search>包住搜索框那一块的容器。
文本7
段落、引用、代码块这类成块流动的文字。
行内标记30
只标出一句话里的一部分,不会另起一行。
<a>通往别处的链接。没有 href 就只是个占位,算不上链接。<span>行内的无义盒子,用来给一句话里的某段单独设样式。<strong>表示重要。看起来变粗只是附带结果,不是目的。<em>表示强调。读屏工具会把语气读出来。<b>只是想让它粗一点,不带任何轻重之分。<i>换一种语气的文字 —— 术语、外来词、想法。<u>标出非文字性的注记,比如拼写错误。别拿它当链接用。<s>已经不再准确的内容。删掉的内容要用 del。<mark>像荧光笔一样标出和当下相关的部分。<small>免责声明、版权这类附带的小字。<sub>下标。化学式的 H₂O 就靠它。<sup>上标。平方和脚注号码用它。<code>一小段代码或者变量名。<kbd>要用户按下的那个按键,比如 Ctrl。<samp>程序吐出来的输出内容。<var>数学式或程序里的一个变量名。<q>短短的行内引用。引号由浏览器按语言自动加。<cite>作品的名字 —— 书名、片名之类。<abbr>缩写。全称写在 title 属性里。<time>机器能读的日期或时间,写在 datetime 属性里。<data>给一段文字配上机器能读的值。<dfn>这个术语第一次下定义的地方。<bdi>把一段文字的书写方向和周围隔开。用户名常需要。<bdo>强行指定这一段的书写方向。<ruby>汉字上方标注读音的注音结构。<rt>注音里实际的读音文字。<rp>给不支持注音的浏览器留的括号。<wbr>长字符串里允许换行的位置。<ins>后来加进去的内容,默认带下划线。<del>被删掉的内容,默认带删除线。
列表7
有序或无序的列表,还有术语解释。
表格10
横竖排开的数据。不是拿来排版面的。
输入14
接收并送出值的各种输入。
<form>把输入的内容打包送出去的表单。<input>输入的格子。type 一变,它的样子和行为就完全不同。<textarea>可以换行的多行文字输入框。<button>可以按的按钮。表单里默认是提交。<select>点开会掉下来的下拉选单。<option>下拉选单里可选的一项。<optgroup>把下拉选单里的选项分成几组。<label>输入框的说明文字。点它就等于点那个输入框。<fieldset>把相关的几个输入框圈成一组。<legend>fieldset 那一组输入框的标题。<datalist>给输入框配的候选词,但仍可自由输入。<output>用来显示算出来的结果。<progress>进度条,表示做完了多少。<meter>在已知范围里的一个量,比如磁盘用量。
图像·声音·视频10
图像、声音、视频,以及现画出来的画面。
嵌入4
把别的文档或资源嵌进本页。
脚本与样式5
给文档加上行为和外观。
文档信息2
给浏览器和搜索引擎读的信息,不是给人看的。
展开收起3
不写 JavaScript 也能点开点合的那些。
已不再使用12
已经退出标准的标签,只在读旧文档时才会遇到。
<center>居中排版的旧标签。现在用 CSS 的 text-align。<font>设定字体颜色大小的旧标签,已被 CSS 取代。<marquee>让文字滚动的旧标签。别再用了。<blink>让文字闪烁的旧标签,浏览器早就不理它了。<big>把字调大一号的旧标签。<strike>画删除线的旧标签,现在用 del 或 s。<tt>等宽字体的旧标签,现在用 code 或 CSS。<frame>旧式框架集里的一格,早已废弃。<frameset>把窗口切成几格的旧方式,已被 iframe 取代。<acronym>首字母缩写的旧标签,现在统一用 abbr。<applet>嵌入 Java 小程序的旧标签,已经废弃。<dir>目录列表的旧标签,现在用 ul。
怎么看这一页
- 标签大多是开合成对的。只有 img、br 这种里面没内容的才不写闭合标签。
- 给空元素补一个 </br>,浏览器要么当没看见,要么给你多出一个空行。
- 长什么样由 CSS 说了算。标签说的是「这是什么」,加粗、倾斜只是随之而来的效果。
- 挑对语义的标签,搜索和读屏会一起变好。全用 div 包起来,这些信息就丢光了。
常见问题
Q. HTML 标签一共有多少个?
还留在标准里的大约 110 个,把废弃的也算上就有 130 上下。这里把现在还在用的和读旧文档会碰到的合起来收了 126 个。
Q. 哪些标签不用写闭合标签?
img、br、hr、input、meta、link 这些里面装不下内容的标签。给它们补一个 </img>,浏览器会直接忽略。照 XHTML 的老习惯写成 <br /> 也行,但在 HTML 里加不加都一样。
Q. div 和 section 有什么区别?
div 是没有语义的盒子,section 是带标题的一个主题块。那个位置配得上一个标题,就用 section;只是想圈起来设个样式,那就是 div。
Q. 标签名可以写成大写吗?
HTML 不分大小写,<DIV> 照样能跑。不过惯例是小写,而且在 XHTML 和 SVG 这类遵守 XML 规则的地方,只有小写才算数。
Q. 用了废弃的标签会怎样?
大多数浏览器眼下还会画出来。但它已经退出标准,哪天不认了也不奇怪,而且替代的做法早就有了 —— center 用 CSS,font 也用 CSS,marquee 用 CSS 动画。