本文链接： https://blog.csdn.net/qq_41427568/article/details/100375234

大一还是小会员的时候，qq部长教过我们HTML，到大二我当部长的时候我又教了一遍HTML给我的小会员。虽然已经过两次HTML的洗礼，但是总感觉还有很多HTML知识没有掌握，就趁这篇博文记录HTML中那些常用的标签吧！

什么是HTML？

简单来说，HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)。
HTML 不是一种编程语言，而是一种标记语言 (markup language)。
标记语言是一套标记标签 (markup tag)。
HTML 使用标记标签来描述网页。

常用HTML标签（一）

HTML通用格式

HTML文档由嵌套的HTML元素构成，一般来讲结构如下。

<html>

<head>
...(内容)
</head>

<body>
...(内容)
</body>

</html>

<html>元素定义了整个 HTML 文档。
<body>元素定义了 HTML 文档的主体。

HTML头部

<head>元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
title标签
<title> 标签定义文档的标题。title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

base标签
<base>标签为页面上的所有链接规定默认地址或默认目标(target):

<html>
<head>
<base href="https://www.baidu.com/" />
<base target="_blank" />
</head>

<body>
<a href="img/bd_logo1.png?where=super">使用默认链接以及默认目标</a>
</body>

</html>

其中默认地址指的是基准地址，在有链接的标签内直接写相对地址即可，如上展示代码所示，实际上a标签指向的地址是https://www.baidu.com/img/bd_logo1.png?where=super。默认目标为打开一个新网页。
link元素
link标签常用于连接文档与外部资源的关系。最常用于连接外部css样式表：

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

style元素
style标签用于为HTML文档定义样式信息，不使用外部样式表就可以使用CSS样式。

<head>
<style type="text/css">
body.tip {background-color:yellow}
p.style {color:blue}
</style>
</head>

meta元素
元数据（metadata）是关于数据的信息。

<meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta> 标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容。
script元素
<script>标签用于定义脚本，比如JavaScript脚本。

HTML主体

在HTML中使用body标签最为网页主体。可以使用bgcolor属性设置背景为某种颜色，比如：

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

也可以使用background属性将背景设置为图像，如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。例子：

<body background="xxx.gif">
</body>

注意事项：
<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

HTML标题

HTML标题通过<h1>-<h6>等标签定义。
例子：

<h1 align="center">I'm a heading</h1>
<h3>I'm a heading,too</h3>

效果：

I'm a heading

I'm a heading,too

HTML段落

HTML中段落使用<p>标签定义的。
例子:

<p>I'm a paragraph.</p>

效果：

I'm a paragraph.

HTML链接

HTML中的超链接是通过<a>标签定义的，其中href属性是链接地址，target属性是选择在哪个界面打开链接。
例子：

<a href="https://blog.csdn.net/qq_41427568" target="_blank">This is my blog.</a>

效果：
This is my blog.

name/id属性：
name 属性规定锚（anchor）的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
例子：
1.先在HTML文档中对锚进行命名，使用id或者name属性。

<a name="anchors" href="https://www.baidu.com">这是一个链接</a>
<!--name可以是任意名字
而且可以使用id属性来代替name属性，这个命名锚也有效-->

效果：
这是一个链接

2.然后，在同一个文档中创建一个指向该锚的链接：

<a href="#anchors">点击这个可以跳到指定锚所在的地方</a>

效果：
点击这个可以跳到上面锚所在的地方

3.除此之外也可以在其他界面中创建指向该锚的链接：

<a href="./test.html#anchors"> 点击这个可以跳到指定锚所在的地方</a>

我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

HTML图像

img标签
HTML中插入图像是通过<img>标签进行定义的。
例子：

<img src="xxx.jpg" width="100" height="100" alt="xxx"/>

width和height是<img>的属性，会对插入图像进行resize。
alt是为图像定义的一串预备的可替换文本，当浏览器无法加载图像时，将会显示替换文本。
map与area标签
使用img、map和area标签可以组成点击图片不同地方跳到不同界面的功能。这里拿一个W3School的例程做示范：

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

效果：
在这里插入图片描述
area圈起来的区域可以当作一个超链接，点击的时候就会跳到href所指向的网页。<img>标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。也就是说img标签中的usemap属性引用map标签中的id或者name，从而建立图像和map之间的联系。

HTML换行

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。比如说换行标签<br>，但是要记得使用/符号关闭标签，虽然<br>在目前浏览器中依然有效，但是在未来的HTML、XML以及XHTML中不保证可以使用，所以使用<br/>是更加长远的保障。
除此之外，HTML标签对大小写也不敏感，但是个人习惯使用小写标签。

HTML水平线

使用<hr/>标签在HTML页面画出一条水平线。
效果：

上面确实是一条线对吧。

HTML注释

例子：

<!-- 这是注释，不会显示在网页中 -->

中间进行换行也是可以的：

<!--这是注释
<p>不会显示在网页中</p>
-->

HTML样式CSS

使用<style>在head里定义HTML元素的样式。或者使用style属性改变 HTML 元素的样式。
通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。具体使用方法请看这篇博文：
【前端学习之路】在HTML中链接css样式的三种方法

HTML文本格式化

HTML提供了很多可以格式化输出文本的标签，下面将列出来这些标签。
文本格式化标签

标签	作用
`<b>`	定义粗体文本。
`<big>`	定义大号字。
`<em>`	定义着重文字。
`<i>`	定义斜体字。
`<small>`	定义小号字。
`<strong>`	定义加重语气。
`<sub>`	定义下标字。
`<sup>`	定义上标字。
`<ins>`	定义插入字。
`<del>`	定义删除字。
`<s>`	不赞成使用。使用 `<del>`代替。
`<strike>`	不赞成使用。使用 `<del>`代替。
`<u>`	不赞成使用。使用样式（style）代替。

效果展示：
在这里插入图片描述

HTML"计算机输出"标签

标签	作用
`<code>`	定义计算机代码。
`<kbd>`	定义键盘码。
`<samp>`	定义计算机代码样本。
`<tt>`	定义打字机代码。
`<var>`	定义变量。
`<pre>`	定义预格式文本。
`<listing>`	不赞成使用。使用 `<pre>`代替。
`<plaintext>`	不赞成使用。使用`<pre>`代替。
`<xmp>`	不赞成使用。使用 `<pre>`代替。

效果展示：
在这里插入图片描述
感觉中间几个标签在浏览器中显示效果都差不多。这里主要介绍一下<pre>标签，这个标签在之后使用会比较多：
1.被包围在 pre 元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。所以有可能导致段落断开的标签（例如<h1>-<h6>、<p>等等）绝对不能包含在<pre>标签内。
2.pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a>标签）放到 <pre>块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。
例子：
因为code标签不保留多余的空格和换行，所以使用pre包围code标签的内容，使得code标签内的内容中空格和换行得以保留。

<p>Coding Example:</p>

<code>
<pre>
var person = {
	Name:"lhy",
    age:20,
    university:"hohai university"
}
</pre>
</code>

效果：

Coding Example:

var person = {
	Name:"lhy",
    age:20,
    university:"hohai university"
}

HTML引用

标签	作用
`<abbr>`	定义缩写。
`<acronym>`	定义首字母缩写。
`<address>`	定义地址。
`<bdo>`	定义文字方向。
`<blockquote>`	定义长的引用。
`<q>`	定义短的引用语。
`<cite>`	定义引用、引证。
`<dfn>`	定义一个定义项目。

引用和定义的具体用法会在下面一个模块讲。
注：上述表格摘自w3school html教程：w3school html

q标签
HTML中使用<q>元素定义短引用，且浏览器会为<q>元素自动包围引号。
例子：

<p>物联网技术部的目标是：<q>提高小会员的科创水平能力</q></p>

效果：

物联网技术部的目标是：提高小会员的科创水平能力

blockquote标签
HTML中使用< blockquote>标签来表示长引用。浏览器会对< blockquote>标签包括的元素进行缩进。
abbr标签
HTML中使用<abbr>元素定义缩写或者首字母缩略语，对缩略进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
例子：

<p><abbr title="物联网工程学院学生科学与技术协会"> 院科协</abbr>很棒</p>

效果：

院科协很棒

dfn标签
dfn也被用来定义项目或缩写。dfn标签的用法比较复杂，分为一下三种方式：
1.如果设置了dfn元素的title属性，那么即为定义项目，与abbr标签一样：

<p><dfn title="物联网工程学院学生科学与技术协会"> 院科协</dfn>很棒。</p>

院科协很棒。

2.如果dfn元素包含具有abbr的元素，那么在abbr的title中定义项目。

<p> <dfn> <abbr title="物联网工程学院学生科学与技术协会"> 院科协</abbr> </dfn>很棒。  </p>

效果：

院科协很棒。

3.第三种则是直接将dfn的文本内容圈起来，在父元素中包含定义。

<p><dfn>院科协</dfn>物联网工程学院学生科学与技术协会</p>

效果：

院科协物联网工程学院学生科学与技术协会

address标签
可以在HTML中添加<address>标签定义作者的联系信息，浏览器会在此元素后面添加回车。
例子：

<address>
Written by lhy.<br/>
www.lhystrive.com<br/>
</address>

效果：

Written by lhy.
www.lhystrive.com

cite标签
在HTML中使用<cite>标签来定义文章的标题。浏览器通常会以斜体显示<cite>元素。
例子：

<p><cite>科协成功举办物联网创想修</cite>by 物联网技术部</p>

效果：

科协成功举办物联网创想修by 物联网技术部

bdo标签
使用<bdo>元素可以定义双流向覆盖，显示出来的文本是到过来的。
例子：

<bdo dir="rtl">物联网学院科协</bdo>

效果：
物联网学院科协

HTML表格

在HTML中使用<table>标签定义表格。表格中的行使用<tr>标签定义，每行被分为若干列，使用<td>标签定义。表格的表头使用<th>标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
例子：

<table border="1">
<tr>
<th>Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

浏览器显示如下：

Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框，所以使用border属性进行边框选择。

HTML列表

HTML支持有无序、有序以及定义列表。
无序列表
无序列表始于 <ul> 标签。每个列表项始于 <li>。例子：

<ul>
<li>Mike</li>
<li>Lily</li>
</ul>

效果：

Mike
Lily

可以看出来无序列表使用小黑圆圈进行标记，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
有序列表始于<ol> 标签。每个列表项始于 <li> 标签，列表项目使用数字进行标记。例子：

<ol>
<li>Mike</li>
<li>Lily</li>
</ol>

效果：

Mike
Lily

同样，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

效果：

Coffee: Black hot drink
Milk: White cold drink

可以看到上面是列表项，下面是列表项的定义。

HTML块

HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>

HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>

HTML div 标签
HTML <div>元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML span 标签
HTML <span> 元素是内联元素，可用作文本的容器。而且<span> 元素也没有特定的含义。当span与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。

HTML类

分类块级元素
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式，这样就可以通过CSS样式对HTML界面进行美化。
例子：

<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>深度学习</h2>
<p>
<pre>
深度学习(DL, Deep Learning)是机器学习(ML, Machine Learning)领域中一个新的研究方向，
它被引入机器学习使其更接近于最初的目标——人工智能(AI, Artificial Intelligence)。
</pre>
</p>
</div> 

</body>
</html>
</p>
</div> 

</body>
</html>

效果：
在这里插入图片描述
分类行内元素

<!DOCTYPE html>
<html>
<head>
<style>
  .red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">little</span> baby </h1>

</body>
</html>

效果：
在这里插入图片描述

HTML框架

使用HTML框架可以在浏览器中显示不止一个界面，每份HTML文档都被称为一个框架，各个框架之间相互独立。
框架结构标签frameset
例子：

<frameset cols="25%,75%">
   <frame src="https://www.baidu.com">
   <frame src="https://www.bilibili.com">
</frameset>

在这里插入图片描述
可以看到左边有25%的部分是百度，右边是bilibili。在frameset标签的属性中可以通过cols设置为列并列，通过rows设置为行并列。这样的框架有可见边框，用户可以拖动边框来改变它的大小，可以通过在frame中设置属性noresize="noresize"来避免用户拖动改变边框大小。
为不支持框架的浏览器添加<noframes>标签，例如：

<frameset cols="25%,75%">
  
   <frame src="https://www.baidu.com">
   <frame src="https://www.bilibili.com">

	<noframes>
	<body>您的浏览器无法处理框架！</body>
	</noframes>

</frameset>

**注意：**不能将 <body></body>标签与 <frameset></frameset>标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

HTML iframe

iframe标签用于在网页内显示网页。

<iframe src="https://www.baidu.com" width="1000" height="1000" frameborder="0"> </iframe>

显示出来效果：
在这里插入图片描述
通过src指定内嵌的界面，width规定这个窗口的宽度，height规定窗口的高度，frameborder规定是否有边框，0为没有，1为有。

HTML脚本

在HTML中使用JavaScript脚本让HTML界面更具有动态和交互性。
script标签
<script> 标签用于定义客户端脚本，比如 JavaScript。script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。下面的脚本会向浏览器输出“Hello World!”：

<script type="text/javascript">
document.write("Hello World!")
</script>

JavaScript 最常用于图片操作、表单验证以及内容动态更新。上述代码只是最简单的用法，前端学习还有很长的路要走。
noscript标签
<noscript>标签提供无法使用脚本时显示出来的替代的内容，就和图片没有显示出来使用文本代替是一样的。当浏览器不支持脚本或者禁用脚本的时候，才会显示noscript标签里面的内容：

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

应对老式浏览器的方法
有些浏览器无法识别script标签，那么就会在浏览器中显示script标签对里面的代码内容，这样就会使网页内容变乱。解决这个问题的办法就是将脚本隐藏在注释标签当中。对于老的浏览器（不识别script标签）就会忽略掉script标签，同时会忽略注释。对于新的浏览器，则会执行脚本代码，即使代码被嵌套在注释标签内，javascript代码也是会照常执行的。例如：

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

HTML实体

在HTML中，有些字符是预留的，比如说在HTML中不能使用大于（>）小于号（<），因为浏览器会误认为他们是标签，如果想正确的显示预留字符，必须要在HTML源代码中使用字符实体来代替预留字符。因为markdown中支持html格式，则在markdown中直接输入<a>会被当作a标签处理显示，那么为了正确显示，就需要用到字符实体来代替预留符号，比如使用<a>代替<a>，这样就能正常早markdown中显示了：<a>。
下面列出的是常用的一些字符实体：

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`' (IE不支持)`	`'`
￠	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

HTML文档类型

HTML 有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE>不是HTML标签，他为浏览器提供声明，即为这个HTML文件是用什么版本编写的。
常见的声明：
HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

可以看到，对于不同HTML版本有不同DOCTYPE声明。

XHTML

XHTML属性是与XML格式编写的HTML属性。主要特点有以下几点：
对于XHTML的文档结构来讲：

XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的

下面这个例子展示了带有最少标签的XHTML文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title of document</title>
</head>

<body>
......
</body>

</html>

对于XHTML元素来讲：

XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素

对于属性来讲：

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 禁止属性简写
所以其实

【前端学习之路】HTML常用标签（一）

文章目录