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

完整标签参考

posted @ 2019-02-20 21:37  隔壁老王python  阅读(88)  评论(0编辑  收藏