①HTML介绍及标签用法

你的名字 2023-07-20 10:32 14阅读 0赞

如果您对前端的其它内容的学习感兴趣，可以前往 [我的个人主页][Link 1] 翻阅。具体专栏内容如下：

[HTML和CSS][HTML_CSS]

[JavaScript][]

[jQuery][]

[Vue][]

[Vue3][]

[React][]

[TypeScript][]

[uni-app][]

--------------------

### HTML介绍 ###

*  HTML简介
 *  HTML使用的基本结构
 *  HTML使用的补充说明
 *  常用标签
 *   *  < h1 > ~ < h6 >
     *  < p >
     *  < br />
     *  < hr />
     *  < img /> ※
     *  < a > ※
     *  文本标签
     *   *  < em >和< strong >
         *  < i >和< b >
         *  < small >
         *  < cite >
         *  < blockquote >和< q >
         *  < sup >和< sub >
         *  < ins >和< del >
     *  布局标签（结构化语义标签 div）
     *  列表相关标签
     *  音视频标签
     *  相关用法的展示
     *  对标签的说明
 *  实体（转义字符）

--------------------

***本人是个新手，写下博客用于自我复习、自我总结。  
如有错误之处，请各位大佬指出。  
学习资料来源于：尚硅谷***

--------------------

对于整个前端最基础的三部分内容就是：HTML、CSS、JavaScript。当然也涉及到了[W3C标准][W3C]。W3C的出现是为了制定网页开发的标准，以使同一个网页在不同的浏览器中有相同的效果。所以，我们编写的网页都需要遵循W3C的规范。具体内容可点击上面链接查阅。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]  
结构：HTML用于描述页面的**结构**

表现：CSS用于控制页面中元素的**样式**

行为：JavaScript用于**响应用户操作**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]

--------------------

# HTML简介 #

HTML（Hypertext Markup Language）也被称为 **超文本标记语言**。

• 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。

• 在使用 HTML 时，我们会以 **标签的形式** 来 **标识网页中的不同组成部分**。

那么标签到底是什么？该如何使用？

--------------------

**标签结构**

<标签名>标签内容</标签名>

标签一般成对出现，但随着后续的学习，我们也会发现一些 **自结束标签**：`<标签名/>`

--------------------

**元素**

• 我们在有了标签之后，这个完整的标签结构也被称为 **元素**。

• 这里我们 **可以暂时** 将元素和标签认为是一个 **同义词**。

我们先不考虑具体标签的用法，看一下说明：

在上面这段代码里，p 我们就可以称为元素，当然也可以说为 p 标签。

--------------------

除了上面这种基本结构外，标签也是可以嵌套的，也就是标签内部可以放其它标签。

在上面这段代码里，p 也是一个元素，em 是 p 的子元素，p 是 em 的父元素。

--------------------

在通常情况下，为了方便代码管理，区分各部分功能，经常会用某些标签（比如 div）来包裹功能代码。

• div 也是一个元素。

• div 是 p 和 em 的祖先元素。

• p 和 em 是 div 的后代元素。

--------------------

**注释**

• HTML **注释中的内容不会在网页中显示**。

• 格式:

• 合理的使用注释可以帮助开发人员理解网页的代码。

• 注释不能嵌套！

--------------------

# HTML使用的基本结构 #

结合上面的内容，我们先来看一下最基本的结构。这需要涉及到几个标签。

--------------------

**< html >**

• 作用：`<html>` 标签用于**告诉浏览器这个文档中包含的信息是用HTML编写的**。

• 用法：

– **所有的网页的内容都需要编写到html标签中**，**一个页面中html标签只能有一个**。

– **html标签中有两个子标签head和body** 。

--------------------

**< head >**

• 作用：`<head>` 标签用来**表示网页的元数据**，**head中包含了浏览器和搜索引擎使用的其他不可见信息**。

• 用法：head标签作为html标签的子元素的出现，**一个网页中只能有一个head**。

在 head 标签中，**通常会包括 meta 标签、title 标签**，也可以考虑选择将 CSS样式信息（**style 标签**）写在其中。

--------------------

**< title >**

• 作用：`<title>` 标签表示**网页的标题**，一般**会在网页的标题栏上显示**。title标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。

• 用法：

– 建议将title标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签。

– 网站中的多个页面的title也不应该重复，这样不利于搜索隐藏检索。

--------------------

**< body >**

• 作用：`<body>`标签用来**设置网页的主体**，所有**在页面中能看到的内容都应该编写到body标签中**。

• 用法： body标签作为**html的子标签**使用。

--------------------

所以综上所述，最基本的结构就是下述代码所示：

<html>
    	<head>
    		<title>网页标题</title>
    	</head>
    	<body>
    		<h1>回乡偶书（二首）</h1>
    		<h2>其一</h2>
    		<h2>贺知章</h2>
    		<p>少小离家老大回</p>
    		<p>乡音无改鬓毛衰</p>
    		<p>儿童相见不相识</p>
    		<p>笑问客从何处来</p>
    	</body>
    </html>

如果我们想运行HTML，最简单的方式就是可以在记事本上书写，然后改txt格式为html。

除此以外，笔者推荐的编译器：**WebStorm（强烈推荐）**、IDEA、VS Code、HBuilderX。

--------------------

在这里简单介绍该如何运行（以 WebStorm 为例）：

在WebStorm打开自己新建的项目文件夹之后，可以通过左上角 File - New - HTML File 的方式来新建HTML文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]  
或者右键左侧项目文件夹，也可以New一个HTML文件即可。  
![在这里插入图片描述][20210310102259935.png]  
通常编译器新建HTML文件，基本结构都会创建（随后将会对其中内容进行说明）。

如果我们想运行，只需要**鼠标放在代码页面**，右上就会出现想要运行的浏览器。选择一个已经安装在电脑的浏览器即可。（对于浏览器，笔者**强烈推荐使用Google Chrome**）  
![在这里插入图片描述][20210310102527726.png]

接下来说回正题。

--------------------

如果您将上面的代码这样直接运行的话，我们可以发现，展现的效果在网页中就是一行。虽然暂时不知道body标签中其它标签的用法，但是这确实不是想要的结果。这是因为基本结构不止如此。

--------------------

**doctype**

HTML总共有很多的版本，而且这其中至少有三个版本在广泛使用，那么浏览器怎么知道我们在使用哪个版本呢？

为了让浏览器知道我们使用的HTML版本，我们还需要**在网页的最上边添加一个doctype声明**，来告诉浏览器网页的版本。

比如：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]  
可以发现上述文档声明十分的麻烦。不过现在通常使用的是 html5 的文档声明，非常简单：

<!DOCTYPE html>

需要注意：**如果不写的话，解析网页时可能会产生一些不可预期的行为**，所以避免的最好方式就是在页面中编写正确的doctype。不过不用担心，在用各种编译器时，这些通常都会自动生成。

--------------------

**meta**

除此以外，还有编码问题。如果我们保存文件时使用的是 utf-8 进行编码，而浏览器读取页面时使用 gb2312，这样就会导致页面中的内容不能正常显示，也就是我们所说的乱码。

（常见的字符集：ASKII、ISO8859-1、GBK、GB2312、UTF-8。）

所以我们只需要统一两者使用的字符集就可以解决乱码问题。为了页面有更好的使用性，一般会使用utf-8。

为了解决这个问题，在html5中只需要**使用meta标签**即可完成这个任务：

meta作用：

– meta 标签可**提供有关页面的元信息**，比如针对搜索引擎和更新频度的描述和关键词。

– meta 标签**位于文档的头部**，不包含任何内容。meta 标签的属性定义了与文档相关联的名称/值对。

以下是基础用法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 5]  
如果您对meta标签感兴趣，可以参考以下文章内容：[常用meta标签总结][meta]、[HTML中meta标签的作用及使用方法][HTML_meta]

--------------------

现在综合以上内容，一个HTML文件，最基本的结构如下所示：

<!DOCTYPE html>
    <html>
    <head>
    	
    	<meta charset="UTF-8">
    	
    	<meta name="keywords" content="HTML5,前端,CSS3">
    	<meta name="description" content="这是一个非常不错的网站">
    	
    	<title>网页的基本结构</title>
    </head>
    <body>
    	<h1>示例</font></h1>
    </body>
    </html>

--------------------

# HTML使用的补充说明 #

**属性**

在往后的学习中，**标签的属性必不可少**。这个**属性是直接在HTML标签中设置的**。

有了这个属性后，它就能为 HTML元素提供附加信息，告知标签该如何展现，或者展现什么内容。有些属性可以是任意值，有些则必须是指定值。具体内容在学习过程中就可以体会到。

**属性需要设置在开始标签或自结束标签中**。属性总是以 **名称 / 值对** 的形式出现。

简例：

--------------------

**常见属性**

• id

– id属性作为**标签的唯一标识**，**在同一个网页中不能出现相同的id属性值**。

• class

– class属性用来**为标签分组**，**拥有相同class属性的标签我们认为就是一组**，**可以出现相同的class属性**，**可以为一个元素指定多个class**。

（ id 和 class 主要是用来和 CSS 配合，在后续CSS文章中即可看到）

• title

– title属性用来指定标签的标题，**指定title以后，鼠标移入到元素上方时，会出现提示文字**。

**其它说明**：当然属性不止于这些，以上是每个标签都可以设置的内容。后续还有很多用法，主要是针对各个标签而言。

标签属性例：

<html>
    	<head>
    		<title>标签的属性</title>
    	</head>
    	<body>
    	
    		<h1>这是我的<font color="red" size='3'>第二个</font>网页！</h1>
    	<body>
    </html>

--------------------

# 常用标签 #

--------------------

## < h1 > ~ < h6 > ##

h1 ~ h6都是网页中的标题标签，用来**表示网页中某一段正文的一个标题**，不同的是，从**h1 ~ h6重要性越来越低**。通常认为 h1 ~ h6 重要性仅次于页面的title。

一般标题标签通常只会使用到h3，h3以后的标题标签对于搜索引擎就没有什么意义了。

**一个页面中通常只会使用一个h1标签**。

--------------------

## < p > ##

p 标签表示**网页中的一个段落**。

一般浏览器会在段落的前和后各加上一个换行，也就是段落会在页面中自成一行。

--------------------

## < br /> ##

br 标签表示一个**换行标签**，使用br标签可以使br标签后的内容另起一行

--------------------

## < hr /> ##

hr 标签是**水平线标签**，使用hr标签可以**在页面中打印一条水平线**，水平线可以将页面分成上下两个部分。

--------------------

## < img /> ※ ##

`<img/>`标签是图片标签，**可以用来向页面中引入一张外部的图片**。**img标签是一个自结束标签**。

img这种元素属于**替换元素**。

所谓替换元素就是 浏览器会**根据其标签的元素属性**来判断显示具体的内容的元素，且元素一般拥有固定的尺寸。比如：**img标签，浏览器就会根据src来显示内容。**

而非替换元素就是 直接将内容告诉浏览器，直接显示出来。例如：p标签，浏览器会直接显示p标签里的内容。

• 属性：

– src ：**指向一个外部的图片的路径**。（路径规则和超链接是一样的）

– alt ：**图片的描述**。这个描述**默认情况下不会显示**，有些浏览器会**图片无法加载时显示搜索引擎会根据alt中的内容来识别图片**，如果不写alt属性则图片不会被搜索引擎所收录。

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>图片标签</title>
    </head>
    <body>
        
        <img src="./img/1.gif" alt="松鼠">
    
        <img width="200" src="https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠">    
    </body>
    </html>

--------------------

## < a > ※ ##

• 作用：

– `<a>` 标签是**超链接标签**，通过a标签，**可以快速跳转到其他页面**。

• 属性：

– href ：**指向一个链接地址**，这个地址可以是一个外部网站的地址，也可以写一个内部页面的地址。

– target：**设置打开目标页面的位置**，可选值：\_blank新窗口、\_self当前窗口。

在a标签中可以嵌套除它自身外的任何元素。

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>超链接</title>
    </head>
    <body>
        
        <a href="https://www.baidu.com" target="_self">超链接</a>
        <br><br>
        
        <a href="NewFile.html" target="_block">超链接2</a>
        <br><br>
        
        
        <a href="#bottom">去底部</a>
        <br><br>
        <a href="#p3">去第三个自然段</a>
        <br><br>
    
        
        <p>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。</p>
        <p>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。</p>
        <p id="p3">在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia quasi numquam quam molestias cumque eveniet ab nobis doloribus dolores. Nesciunt, distinctio tempore similique consequuntur nulla dolorem sapiente minus praesentium impedit.</p>
    
        
        <a href="#">这是一个新的超链接</a>
        <br><br>
        
        
        <a href="javascript:;">这是一个新的超链接</a>
        <br><br>
    
        <a id="bottom" href="#">回到顶部</a>
    </body>
    </html>

--------------------

当我们需要**跳转一个服务器内部的页面时，一般我们都会使用相对路径**。

对于相对路径，通常都会使用 `./`或`../`开头。

`./`表示当前文件所在的目录

`../` 表示当前文件所在目录的上一级目录

也就是说，`./`可以省略不写。如果不写`./`，也不写`../`，则就相当于写了`./`。

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    
        <a href="./target.html">超链接1</a> 
        <br><br>
        <a href="../target4.html">超链接2</a>
        <br><br>
        <a href="./inner/target2.html">超链接3</a>
        <br><br>
        <a href="../outer/target3.html">超链接4</a>
    
    </body>
    </html>

--------------------

## 文本标签 ##

--------------------

### < em >和< strong > ###

• em标签用于**表示一段内容中的着重点**。

• strong标签用于**表示一个内容的重要性**。

这两个标签可以单独使用，也可以一起使用。

<p>
    <strong>警告：任何情况下不要接近僵尸。</strong>
    他们只是 <em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！
    </p>

通常**em显示为斜体，而strong显示为粗体**。

--------------------

### < i >和< b > ###

• i 标签会**使文字变成斜体**。

• b 标签会**使文字变成粗体**。

这两个标签**和em和strong类似，但是这两个标签没有语义**。所以根据html5标准，当我们只想设置文本特殊显示，而不需要强调内容时就可以使用i和b标签。

--------------------

### < small > ###

small标签**表示细则一类的旁注**，**通常包括免责声明、注意事项、法律限制、版权信息等**。

浏览器在**显示small标签时会显示一个比父元素小的字号**。

--------------------

### < cite > ###

使用 cite 标签可以**指明对某内容的引用或参考**。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等。

<p>
    <cite>《七龙珠》</cite>讲的是召唤神龙的故事。
    </p>

--------------------

### < blockquote >和< q > ###

• blockquote 和 q 表示标记引用的文本。

• blockquote 用于长引用，q 用于短引用。

• 在两个标签中还可以使用 cite 属性来表示引用的地址。

孟子曾经说过：
    <blockquote>天将降大任于是人也...</blockquote>

<p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>

--------------------

### < sup >和< sub > ###

• **sup 和 sub 用于定义上标和下标。**

上标主要用于表示类似于103中的3。

10<sup>3</sup>

下标则用于表示类似余H2O中的2。

H<sub>2</sub>O

--------------------

### < ins >和< del > ###

• ins 表示**插入的内容**，显示时通常会**加上下划线**。

• del 表示**删除的内容**，显示时通常会**加上删除线**。

--------------------

## 布局标签（结构化语义标签 div） ##

<header></header>
    <main></main>
    <footer></footer>
    
    <nav></nav>
    <aside></aside>
    <article></article>
    
    <section></section>
    
    <div></div>
    
    <span></span>

在这里**最重要的就是记住这个 div 标签**。虽然它没有语义，但是它能标识一个区块，将代码分成多个区域，并且正是因为它没有语义，所以 div 标签 也是十分重要的布局元素。后续将一直使用。

--------------------

## 列表相关标签 ##

在html中也可以创建列表，html列表一共有三种：

(1) **有序列表**：使用 ol 标签来创建有序列表，使用 li 表示列表项

(2) **无序列表**：使用 ul 标签来创建无序列表，使用 li 表示列表项

(3) **定义列表**：使用 dl 标签来创建一个定义列表，使用 dt 来表示定义的内容，使用 dd 来对内容进行解释说明

列表之间可以互相嵌套。

例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <ul>
            <li>结构</li>
            <li>表现</li>
            <li>行为</li>
        </ul>
    
        <ol>
            <li>结构</li>
            <li>表现</li>
            <li>行为</li>
        </ol>
        
        <dl>
            <dt>结构</dt>
            <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
            <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
            <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
        </dl>
    
        <ul>
            <li>
                aa
                <ul>
                    <li>aa-1</li>
                    <li>aa-2
                        <ul>
                            <li>aa-1</li>
                            <li>aa-2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
    </html>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 6]

--------------------

## 音视频标签 ##

audio 标签**用来向页面中引入一个外部的音频文件的**。

音视频文件引入时，默认情况下不允许用户自己控制播放停止。

如果您现在对音视频标签用法感兴趣，可参考我的文章：[HTML5 音视频标签的简单使用，状态标签，列表标签][HTML5]

属性：

controls 是否允许用户控制播放

autoplay 音频文件是否自动播放

*  如果设置了autoplay 则音乐在打开页面时会自动播放  
    但是目前来讲**大部分浏览器都不会自动对音乐进行播放** (因为浏览器的安全性考量）

loop 音乐是否循环播放

--------------------

使用video标签来**向网页中引入一个视频**。使用方式和audio基本上是一样的.

--------------------

例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>音视频</title>
    </head>
    <body>
        
        
    
        
        <audio controls>
            
            <source src="./source/audio.mp3">
            <source src="./source/audio.ogg">
            <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
        </audio>
    
        
        <video controls>
            <source src="./source/flower.webm">
            <source src="./source/flower.mp4">
            <embed src="./source/flower.mp4" type="video/mp4">
        </video>
    
        <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>
    
    </body>
    </html>

--------------------

## 相关用法的展示 ##

更多其他标签和以上所有标签的使用，大家可以参照[文档][Link 2]，自己尝试。

基础使用展示代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
         <h1>一级标题</h1>
         <h2>二级标题</h2>
         <h3>三级标题</h3>
         <h4>四级标题</h4>
         <h5>五级标题</h5>
         <h6>六级标题</h6>
    
         
          <hgroup>
                <h1>回乡偶书二首</h1>
                <h2>其一</h2>
          </hgroup>
    
         
          <p>在p标签中的内容就表示一个段落</p>
          <p>在p标签中的内容就表示一个段落</p>
    
          
          <p>今天天气<em>真</em>不错！</p>
    
          
          <p>你今天必须要<strong>完成作业</strong>！</p>
    
          鲁迅说：
          
          <blockquote>
              这句话我是从来没有说过的！
          </blockquote>
    
          
          子曰<q>学而时习之，乐呵乐呵！</q>
    
          
          <br>
          <br>
    
          今天天气真不错啊
    </body>
    </html>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 7]  
例：（内联框架）

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>内联框架</title>
    </head>
    <body>
        
        <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
        <h1>Hello</h1>
    </body>
    </html>

--------------------

## 对标签的说明 ##

在对标签的使用时，您可能注意到了，有的标签会自己占据一行，后续标签会默认到下一行中排列。也有的标签会在一行中排列。这是因为这些标签有自己的特性。

--------------------

**都有哪些标签**：

**块状标签**：`<div> <p> <nav> <h1~h6> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <footer> <header> <main> <section> <artical>…`

**行内标签**：`<a> <i> <span> <em> <u> <br> <strong>…`

**行内块状标签**：`<input> <img> <label> <textarea> <select> <option>…`

--------------------

**它们的区别：**

**块状标签**： 能独自占据一行，可以对其设置宽度、高度、对齐等属性。它可以容纳行内标签和其他块状标签。但是 p,h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

**行内状标签**： 不能独自占据一行，默认在一行中排列，不能对其设置宽度、高度、对齐等属性，仅仅靠自身的字体大小和图像尺寸来支撑结构。行内元素只能容纳文本或其他行内元素。（a特殊: a标签可以放div块级标签，同时a标签里不能再放a标签）

**行内块标签**： 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。默认宽度就是它本身内容的宽度。高度，行高、外边距以及内边距都可以控制。

--------------------

例：（浏览器解析网页，会自动对内容进行修正）

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
         <p>
             <h1>哈哈</h1>
         </p>
    </body>
    </html>
    
    <h1>我就要写在html标签的外部！</h1>

效果图：  
![在这里插入图片描述][20200331231356286.png]

--------------------

# 实体（转义字符） #

--------------------

**实体：**

在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。

比如`<`和`>`，我们不能直接在页面中使用`<`和`>`号，因为浏览器会将它解析为html标签。

为了可以使用这些预留字符，我们必须在html中使用字符实体。

语法: `&实体名`;  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 8]  
例：

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>实体</title>
    </head>
    <body>
    	
    	<p>今天         天气真不错！</p>
    	<p>a<b>c</p>
    </body>
    </html>

--------------------

目前通过HTML的了解，我们可以发现，现在只能显示我们想展现的事物，但是还没有办法给这些事物调节样式（比如：位置、颜色、字体大小等）。后续CSS就是做这方面工作的。

[Link 1]: https://blog.csdn.net/qq_45613931
[HTML_CSS]: https://blog.csdn.net/qq_45613931/category_9859453.html
[JavaScript]: https://blog.csdn.net/qq_45613931/category_9873083.html
[jQuery]: https://blog.csdn.net/qq_45613931/category_9890428.html
[Vue]: https://blog.csdn.net/qq_45613931/category_9941207.html
[Vue3]: https://blog.csdn.net/qq_45613931/category_10525285.html
[React]: https://blog.csdn.net/qq_45613931/category_9980286.html
[TypeScript]: https://blog.csdn.net/qq_45613931/category_10542289.html
[uni-app]: https://blog.csdn.net/qq_45613931/category_10596940.html
[W3C]: https://www.w3cschool.cn/xuexiw3c/xuexiw3c-standards.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: /images/20230528/027a0a2c4c9246c3b64c473b9d004245.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]: /images/20230528/d50195452dcc454e9e9901b0b1be3d50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]: /images/20230528/6cb30a38c69845cb995766028e5e9737.png
[20210310102259935.png]: /images/20230528/8904bec4a4f24910a805422b52109f36.png
[20210310102527726.png]: /images/20230528/ea349256e46f4522932225e97631f8cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]: /images/20230528/497b98fe4d0e42608a0eda1494a8ef76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]: /images/20230528/9cac616dd4a14d3085c611237315fbb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 5]: /images/20230528/3b5f492f9ece46839ee75749ec873e99.png
[meta]: https://blog.csdn.net/leo_shire/article/details/81588001
[HTML_meta]: https://www.deanhan.cn/html-meta.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 6]: /images/20230528/64d3f8267a9d4e7e9815684b43ded5c4.png
[HTML5]: https://blog.csdn.net/qq_45613931/article/details/106556503
[Link 2]: https://www.w3school.com.cn/tags/tag_html.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 7]: /images/20230528/c8cc8ea408b540a0877f6adf62646e35.png
[20200331231356286.png]: /images/20230528/7de17dd5aac54f4a805937b7ee575526.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 8]: /images/20230528/420aa04edc6746768d44b89c83065145.png