head和body标签的作用:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 注释: Ctrl + / -->
<!-- 版本声明,声明当前HTML结构属于HTML5运行环境 -->
<!--
标签结构:两部分组成
双标签:有开始<html>和结束</html>两个标签符号组成的标签,经常用来嵌套网页结构使用
单标签: 标签只有一部分,属于自开闭标签,也被称为"空标签",在开始标签中就关闭的标签,不存在成对的情况,经常用来引入外部文件<link>
-->
<!-- 编码格式 -->
<meta charset="UTF-8">
<!-- 针对IE版本的兼容,X-UA-Compatible为IE版本指定不同页面的渲染模式,IE=edge:通知IE浏览器以最高级别的可用模式显示内容 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport:布局视口, content:代表属性值, width:可视区域的宽度,device-width:设备的宽度(单位缩放为100%是CSS的像素),initial-scale=1.0":页面首次被显示可视区域的缩放级别 1.0页面按实际尺寸显示.无任何缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页的标题</title>
<!-- 为标签添加对应的CSS样式 -->
<style>
</style>
</head>
<body>
在双标签中,可以直接标记文本数据内容,也可以嵌套一段HTML结构
<br>
<strong>这是一段加粗文本内容</strong>
</body>
<!--
head和body标签的作用:
head标签:一般用来设置当前网页的一些额外内容,head中内容不会在页面上显示,因此head标签一般在开发中经常用来设置网页的标题,描述信息,为网页添加CSS样式,编码格式,引入外部的CSS样式等
body标签:body内部包含的内容代表网页的网页内容,因此网页的数据渲染全部写在body中
-->
</html><!-- 为标签添加对应的CSS样式 -->
<style></style>
标签结构:两部分组成
（1）双标签:有开始<html>和结束</html>两个标签符号组成的标签,经常用来嵌套网页结构使用
（2）单标签: 标签只有一部分,属于自开闭标签,也被称为"空标签",在开始标签中就关闭的标签,不存在成对的情况,经常用来引入外部文件<link>
head和body标签的作用:
head标签:一般用来设置当前网页的一些额外内容,head中内容不会在页面上显示,因此head标签一般在开发中经常用来设置网页的标题,描述信息,为网页添加CSS样式,编码格式,引入外部的CSS样式等
body标签:body内部包含的内容代表网页的网页内容,因此网页的数据渲染全部写在body中
标签的使用和盒模型的概念
<!DOCTYPE html>
<html lang="en">
<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>
<!-- css样式 -->
<style>
.txt{
/* 设置标签宽度 */
width: 250px;
/* 标签高度 */
height: 50px;
/* 标签背景颜色 */
background-color: red;
/* 文字颜色 */
color: white;
/* 字体大小 */
font-size: 14px;
/* 盒模型的概念：浏览器在渲染每一个标签时，会把每一个标签都看成
由外边距（margin），边框（border），内边距（padding），内容层（content）组成的矩形盒子
内边距（padding）：设置当前标签与标签中的内容之间的距离
外边距（margin）：设置当前标签与其他标签之间的距离
边框（border）：设置当前标签四个边界的厚度（默认为0）
内容层：设置当前标签用来显示自己内容数据的范围（默认块属性标签可以直接通过
width/height规定宽高，行属性标签内容层宽高由内容决定）
margin：修改标签的外边距，padding修改标签的内边距
margin属性值：
一个值：代表上下左右
两个值：1：上下2：左右
三个值：1：上2：左右3：下
四个值：上开始，逆时针设置（上右下左）
设置某一方向的内边距：
padding-left(左侧内边距)
padding-right(右侧内边距)
padding-top(上侧内边距)
padding-bottom(下侧内边距)
盒模型大小计算：
宽度：外边距（左右）+边框厚度（左右）+内边距（左右）+内容层宽度
高度：外边距（上下）+边框厚度（上下）+内边距（上下）+内容层高度*/
border: 10px solid blue;
border-right: 50px solid yellow;
margin-top: 50px;
/* 从上开始，逆时针方向设置 */
padding: 50px 30px 40px 50px;
/* 一个标签class属性对应的css样式若重复出现，后面的样式会将前面的样式覆盖（优先级）*/
font-size: 20px;
/* 怪异盒模型
计算：width/height(content+border+padding)+margin*/
/* 将标准盒模型转换为怪异盒模型 */
box-sizing: border-box;
/* 标准盒模型 */
/* 将怪异盒模型转换为标准盒模型 */
box-sizing: content-box;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<!-- 块属性标签
1.可以设置宽高
2.不可以和其他标签共处一行
3.不设置宽度的情况下 默认100% -->
<!-- 常用的块属性标签div,p,ul>li,ol>li,button,h1~h6等 -->
普通文本
<h3>黄鹤楼送孟浩然之广陵</h3>
<div class="txt">
标签不会被渲染，只有内容会被渲染
</div>
</body>
</html>
盒模型的概念
盒模型的概念：浏览器在渲染每一个标签时，会把每一个标签都看成
由外边距（margin），边框（border），内边距（padding），内容层（content）组成的矩形盒子
内边距（padding）：设置当前标签与标签中的内容之间的距离
外边距（margin）：设置当前标签与其他标签之间的距离
边框（border）：设置当前标签四个边界的厚度（默认为0）
内容层：设置当前标签用来显示自己内容数据的范围（默认块属性标签可以直接通过
width/height规定宽高，行属性标签内容层宽高由内容决定）
margin：修改标签的外边距，padding修改标签的内边距
margin属性值：
一个值：代表上下左右
两个值：1：上下2：左右
三个值：1：上2：左右3：下
四个值：上开始，逆时针设置（上右下左）
设置某一方向的内边距：
padding-left(左侧内边距)
padding-right(右侧内边距)
padding-top(上侧内边距)
padding-bottom(下侧内边距)
盒模型大小计算：
宽度：外边距（左右）+边框厚度（左右）+内边距（左右）+内容层宽度
高度：外边距（上下）+边框厚度（上下）+内边距（上下）+内容层高度
/* 怪异盒模型
计算：width/height(content+border+padding)+margin*/
/* 将标准盒模型转换为怪异盒模型 */
box-sizing: border-box;
/* 标准盒模型 */
/* 将怪异盒模型转换为标准盒模型 */
box-sizing: content-box;
块属性标签
1.可以设置宽高
2.不可以和其他标签共处一行
3.不设置宽度的情况下 默认100%
常用的块属性标签div,p,ul>li,ol>li,button,h1~h6等
行属性标签
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.mark{
font-size: 20px;
width: 500px;
}
.txt{
color: blue;
}
.txt1{
color: brown;
}
.try{
background-color: aqua;
color: black;
/* 去除超链接标签默认样式 */
text-decoration: none;
font-size: 12px;
padding: 50px 20px;
/* 问题：行属性标签调节内边距影响上下两个位置的元素，因为
行属性标签调节内边距时是以文字内容为中心
解决方法：1.将行属性标签转换为块属性标签(人为调节宽度)，
注意：块属性标签的宽度默认与父级保持一致
2.将行属性标签转换为行内块属性标签（保留行属性的特点：内容在一行显示，宽度由内容撑开），
同时具备块属性标签的特点（调节内边距或外边距时，文字对网页的固定位置
可以跟随内边距或外边距发生对应的改变） */
display: inline-block;
/* display: block; */
padding: 50px 20px;
}
h4{
background-color: chartreuse;
}
</style>
</head>
<body>
<!-- 行属性标签：特点
1.不可以设置宽高
2.可以和其他标签共处一行
3.宽高由内容撑开 -->
<!-- 常见的行属性标签：span(包裹空格，页面会显示空格，无论多少个，
只显示一个)，a,img,strong(加粗) -->
<div class="mark">
<div>换行标签</div>
<div>实现换行</div>
<strong>加粗不换行</strong>
<span class="txt">这是<span class="txt1">行属性</span>标签，<strong>不换行</strong></span>
<!-- 超链接标签：
herf(必须属性)：在没有设置对应的跳转链接时，会跳转到当前页面
不想让超链接标签被点击跳转时，可以使用‘#’代替链接-->
<!-- target：设置新页面的打开方式
1._blank:打开一个新窗口
2._self:在当前页面打开
3._top:新页面会在顶层窗口打开，一般指超链接标签所在的浏览器窗口
4._parent:新页面会在超链接所在的父级窗口打开，即：新页面会把原页面覆盖-->
<a href="http://www.baidu.com" target="_top"
class="try">点击</a>
<h4>行属性标签存在的问题</h4>
</div>
</body>
</html>问题：行属性标签调节内边距影响上下两个位置的元素，因为
行属性标签调节内边距时是以文字内容为中心
解决方法：
1.将行属性标签转换为块属性标签(人为调节宽度)，
注意：块属性标签的宽度默认与父级保持一致
2.将行属性标签转换为行内块属性标签（保留行属性的特点：内容在一行显示，宽度由内容撑开），
同时具备块属性标签的特点（调节内边距或外边距时，文字对网页的固定位置
可以跟随内边距或外边距发生对应的改变）
行属性标签：特点
1.不可以设置宽高
2.可以和其他标签共处一行
3.宽高由内容撑开
<!-- 常见的行属性标签：span(包裹空格，页面会显示空格，无论多少个，
只显示一个)，a,img,strong(加粗) -->
超链接标签：
herf(必须属性)：在没有设置对应的跳转链接时，会跳转到当前页面
不想让超链接标签被点击跳转时，可以使用‘#’代替链接-->
<!-- target：设置新页面的打开方式
1._blank:打开一个新窗口
2._self:在当前页面打开
3._top:新页面会在顶层窗口打开，一般指超链接标签所在的浏览器窗口
4._parent:新页面会在超链接所在的父级窗口打开，即：新页面会把原页面覆盖-->
<a href="http://www.baidu.com" target="_top"
class="try">点击</a>
标签间的相互转换
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.mark1{
width: 200px;
height: 100px;
background-color: blue;
/* 设置文本对齐方式 */
text-align: center;
/* 调节行高居中 */
line-height: 200px;
/* padding-top: 25px;
box-sizing: border-box; */
display: inline-block;
/* 各种标签之间的转换: */
/*1. 块级标签转为行内块属性标签(既具备行属性标签特点，又具备块属性标签特点)
display: inline-block;*/
/*2. 块级标签转为行内标签
display: inline;*/
/*3. 行内标签转换为块级标签
display: block;*/
/* 注意：块属性标签可以嵌套行属性标签，行属性标签不能嵌套块属性标签，p标签不要嵌套块属性标签，可以嵌套a,span */
}
.mark2{
width: 200px;
height: 100px;
background-color:blueviolet;
text-align: center;
line-height: 200px;
line-height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<!-- 实现两个块属性标签在一行显示：display: inline-block; -->
<div class="mark1">
页面一
</div>
<div class="mark2">
页面二
</div>
<!--公式：行高=两基线间的距离
=上间距+文本+下间距（上边距=下边距）
line-height:上基线到下基线的距离
基线：四条线中的第三条 -->
</body>
</html>/* 各种标签之间的转换: */
/*1. 块级标签转为行内块属性标签(既具备行属性标签特点，又具备块属性标签特点)
display: inline-block;*/
/*2. 块级标签转为行内标签
display: inline;*/
/*3. 行内标签转换为块级标签
display: block;*/
/* 注意：块属性标签可以嵌套行属性标签，行属性标签不能嵌套块属性标签，p标签不要嵌套块属性标签，可以嵌套a,span */
实现两个块属性标签在一行显示：display: inline-block;
公式：行高=两基线间的距离
=上间距+文本+下间距（上边距=下边距）
line-height:上基线到下基线的距离
基线：四条线中的第三条
iframe画中画
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div class="iframe">
<!--iframe标签：在对应的页面中打开一个新窗口去加载其他页面，实现画中画，
一般在需要加载插件或视频时使用 -->
<!-- .在路径中代表当前文件的文件夹，
..代表在当前文件夹的文件夹，
/代表下一级 -->
<iframe src="./page1.html" frameborder="0" width="300px" height="300px"
style="margin-top: 20px;background-color:yellow;"></iframe>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.iframe{
background-color: aqua;
}
</style>
</head>
<body>
<h3>欢迎来到一级页面</h3>
<iframe src="./page2.html" frameborder="0" width="300px"
height="200px" class="iframe"></iframe>
</body>
</html><!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<h3>欢迎来到页面</h3>
<a href="http://www.baidu.com">点击</a>
</body>
</html>
<!--iframe标签：在对应的页面中打开一个新窗口去加载其他页面，实现画中画，
一般在需要加载插件或视频时使用 -->
<!-- .在路径中代表当前文件的文件夹，
..代表在当前文件夹的文件夹，
/代表下一级 -->
a超链接标签状态
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* a超链接标签的4种状态
1.link:超链接标签准备好但未被点击 */
.mark:link{
color: aqua;
}
/*hover:鼠标悬停状态，该状态不是超链接标签特有的，所有标签都能用 */
.mark:hover{
color: black;
}
/* active：鼠标在超链接标签上按下时触发 */
.mark:active{
font-size: 25px;
}
/* visited: 点击后显示灰色*/
.mark:visited{
color: gray;
}
</style>
</head>
<body>
<a href="#" class="mark">click me!</a>
</body>
</html>a超链接标签的4种状态:
1.link:超链接标签准备好但未被点击
2.hover:鼠标悬停状态，该状态不是超链接标签特有的，所有标签都能用
3.active：鼠标在超链接标签上按下时触发
4.visited: 点击后显示灰色
a超链接锚点用法
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
/* 锚点：快速定位网页部分位置
实现方式：
1.在网页中设置唯一标识，即添加id属性值（唯一性）
2.在网页中添加超链接标签，超链接标签存储不同的唯一标识
3.查找对应内容时，通过点击对应的超链接标签完成锚点的导航 */
.mark1{
height: 300px;
background-color: aquamarine;
}
.mark2{
height: 400px;
background-color:bisque;
}
.mark3{
height: 200px;
background-color:blue;
}
.mark4{
height: 300px;
background-color:brown;
}
.mark5{
height: 200px;
background-color:chocolate;
}
.mark6{
height: 200px;
background-color:cornflowerblue;
}
.mark7{
background-color:chartreuse;
}
#mark3{
background-color:deeppink;
}
/* 设置已经访问过的元素 */
/* target：选取当前活动的目标元素（标签） */
.mark3:target{
color:aqua;
font: size 35px; ;
}
</style>
</head>
<body>
<div class="content">
<!-- 通过id使用，# -->
<a href="#mark3">mark3</a>
<a href="#mark6">mark6</a>
</div>
<!-- 快捷键：div.mark${mark$}*6 -->
<div class="mark1">mark1</div>
<div class="mark2">mark2</div>
<!-- id通过#使用，class通过.使用 -->
<div class="mark3 mark7" id="mark3">mark3</div>
<div class="mark4">mark4</div>
<div class="mark5">mark5</div>
<div class="mark6" id="mark6">mark6</div>
</body>
</html>锚点：快速定位网页部分位置
实现方式：
1.在网页中设置唯一标识，即添加id属性值（唯一性）
2.在网页中添加超链接标签，超链接标签存储不同的唯一标识
3.查找对应内容时，通过点击对应的超链接标签完成锚点的导航
<!-- id通过#使用，class通过.使用 -->
<div class="mark3 mark7" id="mark3">mark3</div>
<div class="mark4">mark4</div>
<div class="mark5">mark5</div>
<div class="mark6" id="mark6">mark6</div>
常用标签
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
h1{
color: aqua;
}
.txt_a{
font-size: 28px;
color: blueviolet;
text-decoration: none;
/* 下划线 */
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<!-- 标题标签：h系列标签（h1~h6）
h1:一级标题（最大）
h6:六级标题（最小）
特点：1.都加粗
2.标签文字大小从1到6逐渐小
3.独占一行 -->
<h1 class="h1">wwwwwww</h1>
<h2>wwwwwww</h2>
<!-- 段落标签：p,双标签
特点：1.段落间有间隔
2.每个段落独占一行-->
<p>qqqqqq</p>
<p>qq<a href="#" class="txt_a">qq</a>qq</p>
<!-- br:换行 -->
<br>
<!-- hr:分割不同主题的水平线 -->
<hr>
<!-- 文本格式化标签：让文本加粗，下划线，倾斜，删除线的格式效果 -->
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s style="color: red;">删除线</s>
<!-- 语义化强烈（推荐） -->
<br>
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
</body>
</html><!-- 标题标签：h系列标签（h1~h6）
h1:一级标题（最大）
h6:六级标题（最小）
特点：1.都加粗
2.标签文字大小从1到6逐渐小
3.独占一行 -->
<!-- 段落标签：p,双标签
特点：1.段落间有间隔
2.每个段落独占一行-->
<!-- br:换行 -->
<!-- hr:分割不同主题的水平线 -->
<!-- 文本格式化标签：让文本加粗，下划线，倾斜，删除线的格式效果 -->
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s style="color: red;">删除线</s>
<!-- 语义化强烈（推荐） -->
<br>
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
img图像标签
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.img{
width: 1000px;
height: 800px;
}
</style>
</head>
<body>
<!-- 图片标签：img
作用：在网页中显示一张图片
属性：
1.src:路径，若图片和当前页面在同级目录，直接写图片名称，若不在同级目录下，使用相对路径
2.alt:普通文本，当图片加载失败时，显示文字提示
3.title:鼠标悬浮在图片上时，才显示文字
设置图片宽高：width/height
注意：若只设置图片的宽度（或高度），高度（或宽度）会自动等比例缩放，
若同时设置宽高，可能失真变形
-->
<img src="./img/1.jpg" alt="图片加载失败" title="动图" class="img">
<!-- div标签：无语义的布局标签，经常用来搭建html结构，
充当标签的父元素-->
<div>
<p>
div标签,无语义的布局标签,经常用来搭建html结构,
充当标签的父元素
</p>
</div>
</body>
</html>
图片标签：img
作用：在网页中显示一张图片
属性：
1.src:路径，若图片和当前页面在同级目录，直接写图片名称，若不在同级目录下，使用相对路径
2.alt:普通文本，当图片加载失败时，显示文字提示
3.title:鼠标悬浮在图片上时，才显示文字
设置图片宽高：width/height
注意：若只设置图片的宽度（或高度），高度（或宽度）会自动等比例缩放，
若同时设置宽高，可能失真变形
div标签：无语义的布局标签，经常用来搭建html结构， 充当标签的父元素