HTML 语法与常见任务速查表
使用 HTML 时,若能有一种简单的方法记住如何正确使用和应用 HTML 标签,将会非常方便。MDN 提供了丰富的 HTML 参考文档和一套深入的 HTML 指南。但是,许多情况下我们只需要一些快速的提示。这便是速查表的初衷——为常见用法提供一些快速、准确、现成的代码片段。
备注: HTML 标签应根据其语义价值而非外观使用。完全可以使用 CSS 改变特定标签的外观和特性。因此使用 HTML 时,要花时间留意标签的语义,而非它们的外观。
行内元素
“元素”是网页的一个单独部分。一些元素较大,作为容器包裹较小的元素。一些元素较小,“嵌入”到更大的元素中。默认情况下,“行内元素”会在网页中并排显示。它们会在网页中按需占用宽度,并且水平排列,就像句子中的词语或同行并列摆放的书本。所有行内元素都可以放置在 <body>
元素内。
用法 | 元素 | 示例 |
---|---|---|
链接 | <a> |
html
|
图片 | <img> |
html
|
内联容器 | <span> |
html
|
强调文本 | <em> |
html
|
斜体文本 | <i> |
html
|
粗体文本 | <b> |
html
|
重要文本 | <strong> |
html
|
高亮文本 | <mark> |
html
|
删除线文本 | <s> |
html
|
下标 | <sub> |
html
|
小文本 | <small> |
html
|
地址 | <address> |
html
|
文献引用 | <cite> |
html
|
上标 | <sup> |
html
|
内联引用 | <q> |
html
|
换行 | <br> |
html
|
换行机会 | <wbr> |
html
|
日期 | <time> |
html
|
代码格式 | <code> |
html
|
音频 | <audio> |
html
|
视频 | <video> |
html
|
区块元素
相反,“区块元素”,会占用整个网页宽度。它们也会占用网页的一整行;它们无法并列排列。相反,它们会像文章里的段落或像积木塔那样堆叠在一起。
备注:
由于本速查表仅包含少数几个代表特定结构或具备特殊语义的元素,因此 div
元素被特意排除————因为 div
元素不代表任何内容,也不具备任何特殊语义。
用法 | 元素 | 示例 |
---|---|---|
简单段落 | <p> |
html
|
扩展引用 | <blockquote> |
html
|
附加信息 | <details> |
html
|
无序列表 | <ul> |
html
|
有序列表 | <ol> |
html
|
定义列表 | <dl> |
html
|
水平分割线 | <hr> |
html
|
文本标题 | <h1>—<h6> |
html
|