①HTML介绍及标签用法

前端Jerry_Zheng

已于 2024-02-18 15:39:42 修改

阅读量8.2k

点赞数 2

分类专栏： # HTML和CSS 文章标签： html

于 2020-04-01 00:31:28 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45613931/article/details/105234575

版权

HTML和CSS 专栏收录该内容

15 篇文章

订阅专栏

如果您对前端的其它内容的学习感兴趣，欢迎前往👉 个人博客主页 👈翻阅
📝 一个努力学习的程序猿

专栏：
HTML和CSS
JavaScript
jQuery
Vue
Vue3
React
TypeScript
uni-app
Linux
前端面试分享
 前端学习+方案分享(VitePress、html2canvas+jspdf、vuedraggable、videojs)
前端踩坑日记（ElementUI）

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

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

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

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

在这里插入图片描述

HTML简介

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

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

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

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

标签结构

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

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

元素

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

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

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

<p>一级标题</p>

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

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

<p>我是一个<em>段落</em></p>

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

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

<div>
    <p><em>内容</em></p>
</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文件。
在这里插入图片描述
或者右键左侧项目文件夹，也可以New一个HTML文件即可。

通常编译器新建HTML文件，基本结构都会创建（随后将会对其中内容进行说明）。

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

接下来说回正题。

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

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

doctype

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

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

比如：在这里插入图片描述

可以发现上述文档声明十分的麻烦。不过现在通常使用的是 html5 的文档声明，非常简单：

<!DOCTYPE html>

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

meta

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

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

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

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

<meta charset="utf-8" >

meta作用：

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<!-- 可以通过meta标签来设置网页的字符集，避免乱码问题 -->
	<meta charset="UTF-8">
	<!-- 
            meta主要用于设置网页中的一些元数据，元数据不是给用户看
        
            charset 指定网页的字符集
            name 指定的数据的名称
            content 指定的数据的内容
            
            keywords 表示网站的关键字，可以同时指定多个关键字，关键字之间使用,隔开
            <meta name="keywords" content="网上购物,网上商城,手机">
                    
            description 用于指定网站的描述
            <meta name="description" content="京东JD.COM-专业的综合网上购物商城">
            网站的描述会显示在搜索引擎的搜索的结果中
     -->
	<meta name="keywords" content="HTML5,前端,CSS3">
	<meta name="description" content="这是一个非常不错的网站">
	<!--
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com"> 
        将页面重定向到另一个网站
    -->
	<title>网页的基本结构</title>
</head>
<body>
	<h1>示例</font></h1>
</body>
</html>

HTML使用的补充说明

属性

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

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

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

简例：

<h1 title="我是一个标题">标题</h1>

常见属性

• id

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

• class

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

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

• title

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

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

标签属性例：

<html>
	<head>
		<title>标签的属性</title>
	</head>
	<body>
	<!-- 
		属性，在标签中（开始标签或自结束标签）还可以设置属性
			属性是一个名值对（x=y）
			属性用来设置标签中的内容如何显示
			
			属性和标签名或其他属性应该使用空格隔开
			
			属性不能瞎写，应该根据文档中的规定来编写，
		    有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来
	-->
		<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>
    <!-- 
        width 图片的宽度 (单位是像素)
        height 图片的高度    
               宽度和高度中如果只修改了一个，则另一个会等比例缩放

            注意：
                一般在pc端，不建议修改图片的大小，需要多大的图片就裁多大
                但是在移动端，经常需要对图片进行缩放（大图缩小）

           图片的格式：
            jpeg(jpg)
                - 支持的颜色比较丰富，不支持透明效果，不支持动图
                - 一般用来显示照片
            gif
                - 支持的颜色比较少，支持简单透明，支持动图
                - 颜色单一的图片，动图
            png
                - 支持的颜色丰富，支持复杂透明，不支持动图
                - 颜色丰富，复杂透明图片（专为网页而生）
            webp
                - 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
                - 它具备其他图片格式的所有优点，而且文件还特别的小
                - 缺点：兼容性不好
            base64 
                - 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片    
                - 一般都是一些需要和网页一起加载的图片才会使用base64
     -->
    <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>
    <!-- 
	可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值
    -->
    <!--根据标签id属性跳转-->
    <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>

    <!-- 
        可以直接将超链接的href属性设置为#，这样点击超链接以后
        页面不会发生跳转，而是转到当前页面的顶部的位置
     -->
    <a href="#">这是一个新的超链接</a>
    <br><br>
    
    <!-- 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生 -->
    <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标签时会显示一个比父元素小的字号。

<p><small>&copy;2016 XX. 保留所有权利.</small></p>

< cite >

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

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

< blockquote >和< q >

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

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

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

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

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

< sup >和< sub >

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

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

10<sup>3</sup>

下标则用于表示类似余H₂O中的2。

H<sub>2</sub>O

< ins >和< del >

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

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

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

<!-- 
        header 表示网页的头部
        main 表示网页的主体部分(一个页面中只会有一个main)
        footer 表示网页的底部
        nav 表示网页中的导航
        aside 和主体相关的其他内容（侧边栏）
        article 表示一个独立的文章
        section 表示一个独立的区块，上边的标签都不能表示时使用section

        div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
        span 行内元素，没有任何的语义，一般用于在网页中选中文字
-->
<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>

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

音视频标签

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

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

如果您现在对音视频标签用法感兴趣，可参考我的文章：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 src="./source/audio.mp3" controls autoplay loop></audio> 
    -->
    <!-- 
   		<audio src="./source/audio.mp3" controls></audio> 
    -->

    <!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
    <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标签来向网页中引入一个视频
          - 使用方式和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>

对标签的说明

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

都有哪些标签：

块状标签：<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>
    <!-- 
        块元素（block element）
            - 在网页中一般通过块元素来对页面进行布局
        行内元素（inline element）
            - 行内元素主要用来包裹文字

            - 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
            - 块元素中基本上什么都能放
            - p元素中不能放任何的块元素

            浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
            比如：
                标签写在了根元素的外部
                p元素中嵌套了块元素
                根元素中出现了除head和body以外的子元素
                ... ...
     -->
     <p>
         <h1>哈哈</h1>
     </p>
</body>
</html>

<h1>我就要写在html标签的外部！</h1>

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

实体（转义字符）

实体：

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

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

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

语法: &实体名;
在这里插入图片描述
例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>实体</title>
</head>
<body>
	<!-- 
        在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格

        在HTML中有些时候，我们不能直接书写一些特殊符号
        比如：多个连续的空格，比如字母两侧的大于和小于号

        如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
     -->
	<p>今天&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天气真不错！</p>
	<p>a&lt;b&gt;c</p>
</body>
</html>