一、网页布局的核心
1、HTML：网页的骨架
2、CSS：美化网页
3、JS
二、HTML
1、概念：hypertext markup language超文本标记语言。
（1）“.txt”文件是纯文本；“.html”文件是超文本。
（2）超文本不仅仅是文本，还包含了更多的内容：图片、音频、视频、超链接...等其他资源。
（3）标记：组成网页的代码。一个标记就代表一个html元素。
（4）语法：
双标签：<标签名>要显示的内容
单标签：<标签名/>，例如：
（5）语言：代表人与计算机沟通的语言，也叫做计算机语言。
（6）网页的基本结构
<!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>
欢迎来到本网站
</body>
</html>
：用作声明下面的代码以HTML5这个版本进行加载和解析。
：代表一个网页的根标签，唯一的。
lang="en"代表英文网站；lang="cn-zh"代表中文网站；
：网页的头部，默认是隐藏的，主要使用来配置网页的基本信息。
meta：网页的元信息，charset="UTF-8"告诉网页的编码格式是"UTF-8"
用于兼容IE的配置。
控制网页的视口模式。
description：网页的描述
keywords：网页的关键字，用于帮助搜索引擎优化SEO,优化搜索排名。
网页的主体，用于展示出所有需要显示出来的内容。
代码注释：Ctrl + /
三、标签——div
1、div是一个常用的布局标签，可以看做一个包裹内容的容器，也可以成为一个‘盒子’。
特点：
（1）默认是没有任何样式的
（2）高度由内容撑开
（3）宽度默认占满一行
作用：可以包裹文字、也可以包裹图片、甚至可以包裹其他标签，可以存放任意内容。
四、CSS
1、概念：Cascading Style Sheets样式表
CSS是一种样式表语言，用于描述html标签应该如何呈现的，用来美化html标签。
（1）层叠：CSS样式可以出现在多个地方，多个地方的样式可以同时作用在一个标签身上，相同的样式就会出现权重问题
（2）样式表：
①内部样式、外部样式、内链样式、
②浏览器默认样式、浏览器用户自定义样式
2、基础语法：
（1）内嵌样式（内链样式）
<div style = "color:red;background-color: pink; height: 140px;">headerdiv>color：文本的颜色
background-color：背景颜色
height：标签的高度
with：宽度
3、（1）内部样式：在head标签内定义一个style标签，用来包裹样式
<head>
<style>
div{ //此处的“div”叫选择器。
color :green;
}
style>
head>（2）外部样式表
需要在html文档的外部定义一个CSS结尾的文件
#wel{
color:green;
}在html中还需要将外部css文件链接到文档内，在头部定义一个link标签去链接文件。
4、id选择器
id=""5、CSS样式
①宽高：以px为单位的属性值
②以百分比%作为属性值，它参考的是父级标签的宽度。
复制某行代码快捷键：Alt+shift+↓
颜色：
①推荐W3school网站。
②英文单词、16进制的颜色值（#ffffff、#alalal）、RGB（RGB（157,41,55））
字体大小：
①以px为单位的数值，数字越大字号就越大
②浏览器默认字号16px
③浏览器默认最小字号12px
盒子居中：
①margin：0 auto；
②0，距离上边距0px;
③
6、class选择器
（1）class名可以多次使用
（2）同一个标签上可以拥有多个clss名
（3）class命名规范
①名字可以包含数字、英文、英文下划线“_”、“-”不能以数字、“-”开头。
选择器的权重
（1）行内样式>id>class>标签选择器
（2）样式表的优先级：行内样式表＞内部样式表≈外部样式表（内部和外部按照就近原则作用样式）
（3）在同一个样式表中:id＞class＞标签选择器（在开发过程中，只用外部样式写css样式）
<style>
.header .header-top .logo{
color:red;
}
style>
head>
<body>
<div id="header">
<div class="header-top">
<div class="logo">
logo
div>
div>
div>
body>7、外部链接
<link rel="stylesheet" href="E:\\stylesheet1.css">rel="stylesheet"是固定写法；href="E:\\stylesheet1.css"的“”中是css文件的绝对路径
8、h标签
<h1>这是h1标签h1>
<h2>这是h2标签h2>（1）h1-h6数字越大字号越小，h4为默认字号14px
（2）独占一行
（3）都是粗体字
p标签-段落标签
（1）文字独占一行，一行排列不下时会自动换行。
（2）上下有默认的外边距
①代码
<p>《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。p>运行②运行效果
③缩小屏幕后的段落效果
9、span标签
（1）一般用来包裹简短的文字信息。
（2）标签之间是同行显示的
（3）不支持设置宽高
①span标签代码
②运行效果
10、超链接
<a href="http://www.baidu.com">百度一下</a>注意：写网络路径的时候需要将协议补全http或者https
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a href="http://www.baidu.com" target="_self">百度一下</a>
<!-- _blank在新窗口打开
_self在当前窗口打开 -->11、图片标签
<img class="img" src="https://ossweb-img.qq.com/upload/webplat/info/yxzj/20230302/666551066703402.jpg" alt="图片备注：王者荣耀">
<img src="图片路径" alt="图片加载失败时图片备注" srcset="鼠标悬停图片上的提示">特点：
(1)、同行显示
(2)、支持设置宽高
12、路径问题
（1）绝对路径
①网络路径：以http/https开头的资源路径
②本地路径：以盘符（C盘或其他盘）开头的路径
（2）相对路径
①从当前资源所在路径出发，去查找其他的资源
②“./”在当前文件所属的文件夹下去找
③“../”在当前文件所属文件夹的上一层目录去查找
13、标签的分类
标签一共分为3类：行级元素、块级元素、行内元素
（1）行级（行内）元素：
①标签a、span、em、i、strong、b、sub......
特点:
①同行显示，所有行级元素都可以同行显示
②不支持设置宽高，所有行级元素都不支持
（2）块级元素
标签：h1—h6、div、p、ul、li、dd、dt、table......
特点：
①独占一行，所有块级元素都是独占一行的
②支持修改宽高
（3）行内块元素
标签：img、input、button
特点：
①同行显示，可以和其他的行级元素以及行内块元素同行显示
②支持修改宽高
14、标签类型之间的切换
通过display的CSS属性来对标签类型进行切换
display:block； 块级
display:inline; 行级
display:inline-block; 行内块15、margin：外边距
（1）作用：把当前元素和其他元素间隔开，这个可以存在于兄弟盒子之间的间隙，也可以存在于父子之间的间隙。
（2）语法：
.box1{
width: 200px;
height: 200px;
background-color: pink; margin-bottom: 20px; margin-left: 40px;
margin-top: 50px;
margin-right: 20px;
margin: 20px 50px ;
/* 20代表上下，50代表左右 */
margin: 20px 50px 30px 40px;
/* 分别代表顺时针方向的“上 右 下 左 ”*/
}（3）margin的传递性
盒子与盒子是父子关系的时候，子盒子设置margin-top它会将这个距离传递给没有边界的父盒子。
/* 设置一个属性，来解决传递过来的margin */
overflow: hidden;（4）margin的使用技巧
①实现盒子垂直居中：（父盒子的高度 - 子盒子的高度）/ 2
②实现盒子的水平居中 margin：0 auto ；
注意：垂直方向的auto是没有效果的（可能因为页面可以无限往下延长）
（5）margin的重叠性
①兄弟盒子之间设置margin会重叠，只设置一个盒子就好
②margin可以设置负值
（6）margin的传递性
①
一、盒模型
1、html中所有的标签都可以看做是一个盒子，在css中盒模型通常是用来布局使用的。
·content：内容区域，通常来说我们设置的width和height就是设置的content的宽高
·padding：内边距，内容与边框的距离
·border：边框
·margin：外边距
2、边框border
·border边框的粗细、边框的样式、边框的颜色
·solid代表实线
·边框会撑大盒模型
·语法：
/* border:边框的粗细、边框的样式、边框的颜色 */
border-top: 20px solid red;
border-width: 2px;
border-style: solid;
border-color: red;两条·边的交汇处会呈45°斜线，可以用这个技巧绘三角形。把不需要的部分改成透明色（tans parent是透明色）
·语法
padding: 20px 40px;/* 两个值代表 上下 左右 */ padding: 20px 40px 30px; /* 两个值代表 上 左右 下*/ padding: 20px 40px 30px 10px; /* 四个值代表 上 右 下 左 （顺时针）*/
三、浮动
浮动的设计之初，是为了实现图文环绕。
借用浮动的特点来实现图文的同行排列。
1、浮动元素的特点
①浮动元素会和其他浮动元素在同一行显示，如果都为左浮动，所有元素都会从左到右一次排列。
②块级元素浮动之后还是一个块级元素，行级元素设置浮动之后会变成一个块级元素。
③元素浮动了之后，如果没有设置宽高，那么宽高由内容决定。
④浮动元素会脱离文档流：
·标准文档流：元素按照标准规范，从左往右，从上到下依次排列，块级元素会独占一行，行级元素同行显示。元素按照这个规范，那么元素就处于标准文档流当中。
·脱离文档流：浮于标准文档流之上，之前所占用的空间会被处于标准文档流中的元素所顶替。
⑤浮动元素的下方没有办法存文字，会被浮动元素挤开，默认是往浮动元素的右边去挤。
2、浮动元素带来的影响
影响：后续的标准文档流中的元素会被覆盖住
解决：
办法①清除浮动元素带来的影响，给受到影响的盒子设置一个属性：
clear both；办法②让浮动元素在一个独立的空间浮动，外界的元素就不会受到影响。
办法③父盒子中的子盒子都设置成了浮动，而且父盒子没有设置高度时，父盒子的高度会塌陷。解决方案：给父盒子设置overflow：hidden；（推荐方案）
办法4、伪元素
3、属性选择器
概念：通过标签上的属性去访问对应标签
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| [属性名] | [class] | 选择带有class属性的所有元素 |
| [属性名=属性值] | [class = box] | 选择带有class = box属性的所有元素，精准匹配 |
| [属性名~=属性值] | [class ~= box] | 选择带有包含“box”一词的class属性的所有元素。必须为单独的完整的单词 |
| [属性名|=属性值] | [class |= box] | 选择带有以“box”开头的class属性的所有元素。必须为完整单词或加连字符 |
| [属性名^=属性值] | [class ^= box] | 选择其class属性值以“box”开头的所有元素，不必为完整单词 |
| [属性名$=属性值] | [class $= box] | 选择其class属性值以“box”结尾的所有元素，不必为完整单词 |
| [属性名*=属性值] | [class *= box] | 选择其class属性值包含“box”的所有元素，不必为完整的单词，模糊匹配 |
4、通配符
匹配网页上的所有标签，性能开销极大，不建议使用。
*{
margin ：0；
padding ： 0；
color ：red;
}5、选择器权重计算
id、class、标签、伪类、伪元素、属性选择器、通配符、行内样式... ...
这些选择器都可以作用在同一个标签上，在解析css的时候浏览器内核就会计算选择器的权重，并且将最终的样式作用在标签上。
（1）权重的加法运算
· 行内样式：1000
· id ：100
· class (类选择器)、伪类、属性：10
· 标签(元素)选择器、伪元素：1
· 通配符 ：0
· 继承样式比通配符还低
·数一数有多少个该类型的选择器，权重就是把它们各自的权重加起来。
<style>
ul li[class="box"][id="box"]{ 22
color: blue;
}
ul li.box { 2
color: red !important;
}
#box{ 100
color: blueviolet;
}
/* （2）权重
通配符选择器权重是 0,0,0,0
标签选择器的权重是 0,0,0,1
类选择器的权重是 0,0,1,0 （伪元素）
id选择器使用权重是 0,1,0,0
<style>
ul li[class="box"][id="box"]{ 【0,0,2,2】
color: blue;
}
ul li.box { 【0,0,1,2】
color: red ;
}
#box{ 【0,1,0,0】
color: blueviolet;
}
.box.bo2.bo3.bo4.bo5.bo6.bo7.bo8.bo9.bo0.bo11{ 【0,0,11,0】
color: red;
}
从高位往低位依次比较，若高位先出现非零数即停止后面低位的比较。
4、！important
将某一个样式的权重提高到最高，行内元素都干不过它。注意：少用，会影响代码的维护。
ul li.box {
color: red !important;
}5、概念：后代标签继承父辈标签的样式
主动继承：需要额外的操作才能继承样式
<style>
.father{
width: 300px;
height: 300px;
border: 1px solid red;
}
.son{
width: 200px;
height: 200px;
/* 继承父亲的边框样式 */
border: inherit;
/* border: 1px solid red; 有了上边inherit那句，就不用写这一句就继承了父亲的样式*/
}
button{
cursor: pointer;
}
</style>自动继承（被动继承）：不需要额外的操作（跟文字相关的都能被动继承）
①font系列：font-size、font-family、font-weight等等
②文本样式系列：text-align、text-decoration、color、line-height等等
<style>
.father{
width: 300px;
height: 300px;
border: 1px solid red;
color: blue;
font-size: 30px;
font-weight: bold;
text-align: center;
line-height: 200px;
/* 设置鼠标为小手 */
cursor: pointer;
}
.son{
width: 200px;
height: 200px;
/* 继承父亲的边框样式 */
border: inherit;
/* border: 1px solid red; */
}
</style>6、按钮上悬浮的小手效果
button{
cursor: pointer;
}7、
当遇到文字和图片在垂直方向上居中对齐，可以调整图片以及文字的基线，vertical - align为 middle
vertical-align
<style>
.box{
width: 290px;
height: 53px;
border: 1px solid red;
margin: 100px auto;
text-align: center;
}
.box img{
/* 调整文字的基线 */
vertical-align: middle;
}
.box span{
/* 调整文字的基线 */
vertical-align: middle;
}
</style>只要不是块级元素，都可以用text-align:center居中对齐
