一、HTML基础标签

1.HTML简介

2.HTML标签

3.HTML基础标签

4.标签分类

1.HTML简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言

标记语言是一套标记标签

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML 运行在浏览器上，由浏览器来解析

HTML文档也叫做 web 页面

文档的后缀名：xxx.html 或 xxx.htm

2.HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现 的，比如 <b> 和</b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

3.HTML基础标签

html

html是网页的根标签，网页的所有内容，都必须要写在该标签里面

head

head是头部标签，用于导入外部的资源信息和描述网页自身信息

title

title是网页自身的标题标签，它里面的内容会在网页的浏览器的选项卡上显示

body

body是主体标签，网页中能看到到所有内容，都必须要写在该标签里面

<!--html标签是网页的根标签，网页中的所有内容，都要放置在该标签中-->
<html><!-- head是头部标签，用于导入外部的资源信息和描述网页自身信息 --><head><!-- title是网页自身的标题标签，它里面的内容会在网页的浏览器的选项卡上显示 --><title>我的第一个HTML网页</title></head><!-- body是主体标签，网页中能看到到所有内容，都必须要写在该标签里面 --><body>好好学习，天天向上</body>
</html>

页面显示为:

`<!DOCTYPE html>`

文档声明，是告诉浏览器采用什么标准去解析下面的网页，这里表示html5的标准。如果没有文档声明标签，浏览器会根据网页中具体的标签去判断使用什么标准。

其他标准：

HTML 4.01

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

XHTML 1.0

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

meta

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务

meta标签是单标签，不需要闭合标签，规范写法，单标签需要自闭合

声明编码：

utf-8 包含全世界所有国家需要用到的字符 gb2312 包含全部中文字符

<meta charset='utf-8' />

页面关键词：

<meta name="keywords" content="web前端" />

页面描述：

<meta name="description" content="Web前端" />

<!DOCTYPE html>
<html>
<head><!-- meta标签提供关于HTML文档的元数据，元数据指定是网页自身的数据，元数据不会显示在页面上，但是对于机器是可读的 --><!-- charset="UTF-8" 表示设置字符编码类型为UTF-8，UTF-8编码类型：包含全世界所有国家需要用到的字符，gb2312编码类型：包含全部中文字符 --><meta charset="UTF-8"><!-- 页面关键词，设置name属性值为keywords，通过content属性设置具体的关键词，作用：当用户通过搜索引擎搜索对应的关键词时，能够提高网站被搜索到的概率。 --><meta name="keywords" content="酒店预订,特价酒店, 机票,机票预订,飞机票查询,航班查询,酒店团购,旅游度假,旅行,商旅管理" /><!-- 页面描述，设置name属性值为description，通过content属性设置具体的描述内容，作用：也是为了提高网页的搜索率。 --><meta name="description" content="携程旅行网是中国领先的在线旅行服务公司，向超过9000万会员提供酒店预订、酒店点评及特价酒店查询、机票预订、飞机票查询、时刻表、票价查询、航班查询、度假预订、商旅管理、为您的出行提供全方位旅行服务" /><title>meta标签的用法</title>
</head>
<body></body>
</html>

页面重定向和刷新：

content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页

<meta http-equiv="refresh" content="30;url=" />

移动设备：

如果不是响应式网站，不要使用initial-scale或者禁用缩放

大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
height：高度（数值 / device-height）（范围从223 到10,000）
initial-scale：初始的缩放比例（范围从>0 到10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes)

注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容

<link rel="icon" href="favicon.ico">

<!DOCTYPE html>
<html>
<head><title>设置网页选项卡图标</title><!-- meta标签，用于给网页自身添加数据 --><meta charset="UTF-8"><!-- link标签，用于给网页导入外部资源，比如：外部样式，选项卡图标 --><!-- 下面是通过link标签，导入一个选项卡图标，rel属性设置外部资源类型，href属性设置资源路径 --><link rel="icon" href="./favicon.ico">
</head>
<body></body>
</html>

页面显示为:

h1~h6

h1~h6是网页的内容标题标签，h1最大，h6最小。标题标签的特点是：字体会加粗

<!-- 这里的第一个标签是文档声明，是告诉浏览器采用什么标准去解析下面的网页，这里表示html5的标准
如果没有文档声明标签，浏览器会根据网页中具体的标签去判断使用什么标准 -->
<!DOCTYPE html>
<html>
<head><!-- title是网页自身的标题标签 --><title>内容标题</title>
</head>
<body><!-- h1~h6是网页的内容标题标签，h1最大，h6最小。标题标签的特点是：字体会加粗 --><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>

页面显示为:

p标签是段落标签，用于描述一段内容

hr是水平线标签，用于对网页中的内容进行分隔

在网页中，无论打多少空格，或者换多少次行，默认都只是一个空格如果需要手动换行，需要使用br标签

strong

strong是加粗标签，用于突出一段内容里面的部分信息

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>常用的内容标签</title>
</head>
<body><!-- h2是二级标题 --><h2>段落标签、水平线标签、换行标签</h2><!-- hr是水平线标签，注意：hr是单标签，单标签的规范写法需要自闭合 --><hr/><!-- p是段落标签 --><p>我正在学习HTML语言</p><p>好好学习，天天向上</p><!-- 注意：在网页中无论打多少个空格，换多少次行，都只是一个空格。通过br标签对文本换行。 --><p>到荆州去，摸一摸城墙，城砖<br>它们牙关紧咬，两千年了不曾开口<br><br>并非因为仇恨而咬牙切齿<br>只是像一个病人那样说不出话来</p><h2>加粗和倾斜标签</h2><!-- strong是加粗标签，em是倾斜标签，加粗和倾斜可以嵌套使用 --><p>如果有<strong>时间</strong>，一定要在<em>趁年轻</em>到处驾车<strong><em>旅游</em></strong></p>
</body>
</html>

页面显示为:

em是倾斜标签，也用于突出一段内容里面的部分信息

特殊符号

&nbsp; 空格
&lt; 小于号
&gt; 大于号
&quot; 双引号
&copy; 版权符号

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>常用的特殊符号</title>
</head>
<body><!-- 在网页中无论打多少个空格，默认都只是一个空格，如果需要多个空格，就需要使用特殊符号&nbsp; --><p>好好学习&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天天向上</p><!-- &lt;是小于号，&gt;是大于号 --><p>&lt;html&gt;标签，是网页的根标签</p><!-- &quot;是双引号 --><p>&quot;好好学习，天天向上&quot;</p><!-- &copy;是版权符号 --><p>&copy;前端学习</p><!-- 更多特殊符号，可以到用到时再查一下 --><p>❤</p>
</body>
</html>

页面显示为:

img

img是图片标签，src属性设置图片的地址，地址可以是本地地址，也可以是网络地址

title属性设置鼠标悬停提示信息，alt属性设置图片的替代文字，当图片无法显示时，显示对应的文字

width属性设置图片宽度，height属性设置图片高度，如果只设置了其中一个属性，另一个属性会等比缩放

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片标签</title>
</head>
<body><!-- img是图片标签，通过src属性设置图片地址，地址可以是本地地址，也可以是网络地址 --><img src="./img/bkhm.jpg"><img src="https://img2.baidu.com/it/u=3132957431,311755709&fm=26&fmt=auto"><br><!-- title属性设置图片的标题，鼠标悬停在图片上显示width属性设置图片的宽度，height属性设置图片的高度，如果需要对图片的大小重新调通，设置这两个属性。注意1：设置设置width和height属性，可以会导致图片失真和变形。注意2：width和height属性，如果只设置一个，另一个会等比调整。--><img src="./img/cl.jpg" title="大家好！我是C罗" width="200" height="100"><img src="./img/cl.jpg" title="大家好！我是C罗" width="200"><!-- 当图片无法打开时，如果有title属性并且没有alt属性，显示title的内容。如果有alt属性，显示alt的内容，alt是图片的替代文字，当图片无法正常显示时，显示对应的文字。 --><img src="./img/cl2.jpg" title="大家好！我是C罗" alt="图片加载中..." width="200">
</body>
</html>

页面显示为:

超链接标签，根据链接类型可以分为：页面间链接，锚链接，功能性链接

1.页面间链接：

href属性设置链接的地址，可以是本地地址，也可以是网络地址

target属性设置目标窗口打开的位置，属性值_self替换自身窗口，_blank是打开新窗口

<a href="./index06.html" target="_self">替换自己</a>
<a href="./index06.html" target="_blank">打开新窗口</a>

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接-页面间链接</title>
</head>
<body><!-- a是超链接标签，href属性设置跳转地址，地址可以是本地地址，也可以是网络地址 --><a href="http://www.baidu.com">到百度</a><!-- 在设置本地路由时，./表示当前目录，../表示上一级目录 --><a href="../L01/index07.html">查看图片</a><hr><!-- target属性设置跳转方式，属性值包括：_self(替换自身窗口)、_blank(打开新窗口) --><a href="../L01/index07.html" target="_self">查看图片(_self)</a><a href="../L01/index07.html" target="_blank">查看图片(_blank)</a>
</body>
</html>

页面显示为:

2.锚链接：

用于当前页面的跳转，从页面的某个区域，跳转到另一个区域

通常需要两个a标签，一个a标签通过name属性设置锚标记，另一个a标签通过href属性跳转到对应的锚标记处

注意：href属性值需要加一个#号

如果需要跨页面，在href属性中，显示设置地址，在地址的后面在设置对应的锚标记

<a href="#bj">北京</a>
<!-- 这里的a标签，只是做一个锚标记，通过name属性设置标记名 -->
<a name="bj"></a>

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接-锚链接</title><!-- 这里是给p标签定义样式 --><style>p{font-size: 30px;}</style>
</head>
<body><!-- 锚链接，用于当前页面的跳转，从页面的某个区域，跳转到另一个区域 --><!-- 一组锚链接需要写两个a标签，一个a标签定义锚标记，另一个a标签定义链接，标记通过name属性定义，链接地址通过#标记名称的方式定义。 --><a href="#bx">冰箱</a><a href="#kt">空调</a><a href="#ds">电视</a><a href="#xyj">洗衣机</a><hr><!-- 注意：这里的a标签通过name属性定义标记的名称 --><h1><a name="bx">冰箱</a></h1><p>保持恒定低温的一种制冷设备，也是一种使食物或其他物品保持恒定低温状态的民用产品。</p><p>箱体内有压缩机、制冰机用以结冰的柜或箱，带有制冷装置的储藏箱。</p>    <p>家用电冰箱的容积通常为20～500升。</p><p>1910年世界上第一台压缩式制冷的家用电冰箱在美国问世。</p><p>1925年瑞典丽都公司开发了家用吸收式冰箱。1927年美国通用电气公司研制出全封闭式冰箱。</p><p>1930年采用不同加热方式的空气冷却连续扩散吸收式电冰箱投放市场。1931年研制成功新型制冷剂氟利昂12。</p><p>50年代后半期开始生产家用热电冰箱，中国从50年代开始生产电冰箱。</p><p>50年代后半期开始生产家用热电冰箱，中国从50年代开始生产电冰箱。</p><p>50年代后半期开始生产家用热电冰箱，中国从50年代开始生产电冰箱。</p><h1><a name="kt">空调</a></h1><p>空调即空气调节器（Air Conditioner）。是指用人工手段，</p><p>对建筑或构筑物内环境空气的温度、湿度、流速等参数进行调节和控制的设备。</p>   <p>一般包括冷源/热源设备，冷热介质输配系统，末端装置等几大部分和其他辅助设备。</p><p>主要包括，制冷主机、水泵、风机和管路系统。末端装置则负责利用输配来的冷热量，</p><p>具体处理空气状态，使目标环境的空气参数达到一定的要求。</p><p>空调是现代生活中人们不可缺少的一部分，空调为人们提供了凉爽，</p><p>但同时空调常开也易引起疾病，如“空调病”等，需要慎用。</p><p>但同时空调常开也易引起疾病，如“空调病”等，需要慎用。</p><p>但同时空调常开也易引起疾病，如“空调病”等，需要慎用。</p><p>但同时空调常开也易引起疾病，如“空调病”等，需要慎用。</p><h1><a name="ds">电视</a></h1><p>电视 (Television 、TV）指使用电子技术传送活动的图像画面和音频信号的设备，即电视接收机，</p><p>也是重要的广播和视频通信工具，最早由英国工程师约翰·洛吉·贝尔德在1925年发明。</p><p>电视 (Television 、TV）指使用电子技术传送活动的图像画面和音频信号的设备，即电视接收机，</p><p>也是重要的广播和视频通信工具，最早由英国工程师约翰·洛吉·贝尔德在1925年发明。</p><p>电视 (Television 、TV）指使用电子技术传送活动的图像画面和音频信号的设备，即电视接收机，</p><p>也是重要的广播和视频通信工具，最早由英国工程师约翰·洛吉·贝尔德在1925年发明。</p><p>电视 (Television 、TV）指使用电子技术传送活动的图像画面和音频信号的设备，即电视接收机，</p><p>也是重要的广播和视频通信工具，最早由英国工程师约翰·洛吉·贝尔德在1925年发明。</p><p>电视 (Television 、TV）指使用电子技术传送活动的图像画面和音频信号的设备，即电视接收机，</p><p>也是重要的广播和视频通信工具，最早由英国工程师约翰·洛吉·贝尔德在1925年发明。</p><h1><a name="xyj">洗衣机</a></h1><p>洗衣机是利用电能产生机械作用来洗涤衣物的清洁电器，按其额定洗涤容量分为家用和集体用两类。</p><p>中国规定洗涤容量在6千克以下的属于家用洗衣机：家用洗衣机主要由箱体、</p><p>洗涤脱水桶（有的洗涤和脱水桶分开）、传动和控制系统等组成，有的还装有加热装置。</p><p>洗衣机一般专指使用水作为主要的清洗液体，有别于使用特制清洁溶液，及通常由专人负责的干洗。</p><p>洗衣机是利用电能产生机械作用来洗涤衣物的清洁电器，按其额定洗涤容量分为家用和集体用两类。</p><p>中国规定洗涤容量在6千克以下的属于家用洗衣机：家用洗衣机主要由箱体、</p><p>洗涤脱水桶（有的洗涤和脱水桶分开）、传动和控制系统等组成，有的还装有加热装置。</p><p>洗衣机一般专指使用水作为主要的清洗液体，有别于使用特制清洁溶液，及通常由专人负责的干洗。</p><p>洗衣机是利用电能产生机械作用来洗涤衣物的清洁电器，按其额定洗涤容量分为家用和集体用两类。</p><p>中国规定洗涤容量在6千克以下的属于家用洗衣机：家用洗衣机主要由箱体、</p><p>洗涤脱水桶（有的洗涤和脱水桶分开）、传动和控制系统等组成，有的还装有加热装置。</p><p>洗衣机一般专指使用水作为主要的清洗液体，有别于使用特制清洁溶液，及通常由专人负责的干洗。</p>
</body>
</html>

页面显示为:(页面只显示一部分，下方还有)

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接-跨页面锚链接</title>
</head>
<body><!-- 如果要跨页面跳转锚链接，href属性要先设置跳转路径，在路径的后面再设置锚标记。 --><a href="./index02.html#bx">冰箱</a><a href="./index02.html#kt">空调</a><a href="./index02.html#ds">电视</a><a href="./index02.html#xyj">洗衣机</a>
</body>
</html>

页面显示为:

3.功能性链接：

利用超链接打开本地的应用

<a href="mailto:123456789@qq.com">发送邮件</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes">打开QQ</a>

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接-功能性链接</title>
</head>
<body><!-- 功能性链接，用于打开本地的软件，比如：可以打开邮箱软件给指定的邮箱地址发右键，可以打开qq软件给指定的qq号发消息 --><a href="mailto:10001@qq.com">发送邮件</a><a href="http://wpa.qq.com/msgrd?v=3&uin=752169642&site=qq&menu=yes">联系QQ</a>
</body>
</html>

页面显示为:

div

div是分区标签，是一个块级标签，通常用于网页的布局

span

span是范围标签，是一个行级标签，通常用于突出显示段落中的部分内容

4.标签分类

所有的标签可以分为两类：块级标签和行级标签(内联标签)

块级标签：该元素独占一行(h2,p)

注意：通常情况下，行级标签要放在块级标签里面使用

注意：p标签不能嵌套p标签