HTML 语法和常用任务备忘单
在使用 HTML 时,方便地记住如何正确使用 HTML 标签以及如何应用它们会非常有帮助。MDN 为您提供了详尽的 HTML 参考文档,以及一套深入的教学 HTML 指南。然而,在很多情况下,我们只需要一些快速的提示。这正是备忘单的目的,为您提供一些常见用法的快速、准确、可直接使用的代码片段。
注意: HTML 标签必须根据其语义值使用,而不是外观。使用 CSS 总是可以彻底改变给定标签的外观和感觉,因此,在使用 HTML 时,请花时间关注其含义而非外观。
内联元素
“元素”是网页的单个组成部分。有些元素很大,像容器一样包含其他较小的元素。有些元素很小,被“嵌套”在较大的元素中。默认情况下,“内联元素”会彼此相邻显示在网页上。它们只占用页面上所需的宽度,像句子中的单词或并排放在一排书架上的书一样水平排列。所有内联元素都可以放置在 <body> 元素内。
| 用法 | Element | 示例 |
|---|---|---|
| 链接 | <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 |
| Date | <time> |
html |
| 代码格式 | <code> |
html |
| 音频 | <audio> |
html |
| 视频 | <video> |
html |
块级元素
另一方面,“块级元素”会占据网页的全部宽度。它们也会占据网页的整行;它们不会并排排列。相反,它们像论文中的段落或塔中的积木一样堆叠。
注意: 因为这个备忘单仅限于代表特定结构或具有特殊语义的少数元素,所以 <div> 元素故意未包含在内——因为 div 元素本身不代表任何内容,也没有任何特殊的语义。
| 用法 | Element | 示例 |
|---|---|---|
| 一个简单的段落 | <p> |
html |
| 扩展引用 | <blockquote> |
html |
| 附加信息 | <details> |
html |
| 无序列表 | <ul> |
html |
| 有序列表 | <ol> |
html |
| 定义列表 | <dl> |
html |
| 水平分割线 | <hr> |
html |
| 文本标题 | <h1>-<h6> |
html |