HTML 标签

创建时间:2019.02.16 修改时间:2019.03.24

以下为一个简单的 HTML5 文档:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title> 文档标题 </title>
</head>

<body>
<h1> 第一个标题 </h1>
<p> 第一个段落。</p>
</body>

</html>

HTML 文档就是一个个并列或者相互套嵌的标签(元素)及其中的内容组成。

< 标签 > 内容 </ 标签 >

标签的作用是组织内容结构,浏览器并不直接显示标签,但可以识别解析标签,并通过与标签相对应的格式把标签中的内容展示给用户。

标题:<h1>-<h6>

<h1> 这是一个标题 </h1>
<h2> 这是一个标题 </h2>
<h3> 这是一个标题 </h3>

段落:<p>

<p> 这是一个段落。</p>
<p> 这是另外一个段落。</p>

换行:<br> 或 <br />

<p> 这是一行。<br />
 这是另外一行。</p>

注: 所有标签都有开始标签和与之对应的结束标签,形成闭合。所以 <br /> 的形式优于 <br>。

链接:<a>

<a href="http://quma.live"> 这是一个链接 </a>

图像:<img>

<img src="/images/logo.png" width="258" height="39" />

水平线:<hr> 或 <hr />

<h1> 这是一个标题 </h1>
<hr />
<p> 这是一个段落。</p>

文本格式化标签:

<b> 粗体字 </b>
<strong> 加强语气,默认格式同粗体 </strong>
<i> 斜体字 </i>
<em> 着重文字,默认格式同斜体字 </em>
<small> 小号字 </small>
<sub> 下标字 </sub>
<sup> 上标字 </sup>
<ins> 插入文字,格式下划线 </ins>
<del> 删除文字,格式删除线 </del>
<mark> 记号文字,格式高亮显示 </mark>
<pre> 预格式文本      保留空格和换行符 
 常用于表现计算机源代码。</pre>

效果如下:

粗体字 斜体字 加强语气,默认格式为粗体字 着重文字,默认格式为斜体字 小号字 下标字 上标字 插入文字,格式下划线 删除文字,格式删除线 记号文字,格式高亮显示
 预格式文本      保留空格和换行符 
 常用于表现计算机源代码。

引文,引用,标签定义:

<abbr title="title 属性用来展示缩写词的完整版本 "> 缩写词 </abbr>
<address> 文档作者联系信息,<br> 通常包含在 <footer> 元素中。<br>
 默认格式为斜体字,标签前后换行。</address>
<bdo dir="rtl"> 文字从右到左显示。</bdo>
<blockquote cite="http://quma.live">
<p> 包含段落(块级元素)的长引用。</p>
<p> 默认格式缩进。</p>
<p>cite 属性值为 URL(链接地址),定义引用来源。</p>
</blockquote>
<p> 不需要段落分隔的短引用:<q> 默认格式双引号。</q></p>
<p><cite> 作品(如书籍、歌曲、电影、电视作品等)标题 </cite> 其他文本 </p>

效果如下:

缩写词
文档作者联系信息,
通常包含在 <footer> 元素中。
默认格式为斜体字,标签前后换行。
文字从右到左显示。

包含段落(块级元素)的长引用。

默认格式缩进。

cite 属性值为 URL(链接地址),定义引用来源。

不需要段落分隔的短引用: 默认格式英文双引号。

作品(如书籍、歌曲、电影、电视作品等)标题 其他文本

注释:<!-- -->

<!--  这是一个注释  -->