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 有序列表
- 条目一
- 条目二
- 语文
- 数学
- 英语
文本修饰
强调文本内容(也会显示为粗体)
<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 |