HTML常用标签简介及快速入门

此HTML常用标签简介编写的目的，是给一个经常使用网页编辑器的一个朋友提供一个快速熟悉和入门HTML的途径。

现在分享出来，给其他有类似需求的朋友，此处只列出了编辑文章时最常用和遇到的标签，完整标签页面请参阅底部给出的链接。

标题

六个级别的标题，<h1> 最粗字体最大， <h6> 最细

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<h1>highest section level</h1>
<h6>lowest section level</h6>

示例：

h1

h2

h3

h4

h5

h6

水平线

单标记，无关闭标签

<hr>

示例：

---

段落

段落间一般会自动换行

<p>段落一</p>
<p>段落二</p>
<p>段落三</p>

示例：

段落一

段落二

段落三

换行

网页会在<br>标签处换行显示

第一行文字<br>
第二行文字

示例：

第一行文字

第二行文字

列表

an ordered list  有序列表
<ol>
    <li>条目一</li>
    <li>条目二</li>
</ol>
an unordered list 无序列表
<ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ul>

示例：

an ordered list 有序列表

1. 条目一
2. 条目二

an unordered list 无序列表

• 语文
• 数学
• 英语

文本修饰

强调文本内容（也会显示为粗体）
<strong>强调的文本内容<strong>

以粗体显示文本
<b>此文本内容以粗体显示</b>

表示强调内容（一般会显示为斜体）
<em>强调此处的文本内容</em>

删除线
<del>此段文字会有一段删除线</del>

下划线
<u>此文字会有下划线</u>

示例：

强调文本内容（也会显示为粗体）

强调的文本内容

以粗体显示文本

此文本内容以粗体显示

表示强调内容（一般会显示为斜体）

强调此处的文本内容

删除线

此段文字会有一段删除线

下划线

此文字会有下划线

图片

只有 src 里的 url 必须指定清楚，其余的属性`alt` `height` `width` 等全部可以省略
<img src="图片所在的url" alt="图片错误时显示的文本" height="图片显示的高度" width="图片显示的高度" title="图片的描述内容">
<img src="https://pic.cnblogs.com/avatar/1546939/20190220212114.png" alt="我的头像" height="120px" width="120px" title="我的头像">

示例

链接

title 可以省略

<a href="目标链接地址" title="链接描述文字">链接显示文本</a>

<a href="https://www.shwww.net/" title="网站目录大全">网站目录大全</a>

示例：

网站目录大全

表格

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

以上的表格代码会生成一个类似如下的表格

John	Doe
Jane	Doe

完整标签参考

• HTML Element (english)
• HTML 元素 (中文)