一、网页的构成
网页通常由结构、样式、行为这三个方面组成，他们分别对应了
结构——HTML（后缀名.html）
样式——CSS（后缀名.css）
行为——JavaScript（后缀名.js）
接下来我们分别讨论HTML和CSS我们需要掌握的内容，以及需要注意的细节。
二、HTML
html是“超文本标签语言”，是用来描述网页的一种语言。而结构用于对网页元素进行整理和分类，非常重要，它支撑了整个网页的架构。学好html，熟知标签语义以及搭建良好的构架，是对学习者来说必要的能力。
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>
</body>
</html>标签
HTML标签：
作用所有HTML中标签的一个根节点。
最大的标签 ：根标签。
head标签： 文档的头部
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。比如说用于存放title、meta、base、style、script、link
注意在head标签中我们必须要设置的标签是title
title标签： 文档的标题
作用：让页面拥有一个属于自己的标题。
body标签：文档的主体 以后我们的页面内容 基本都是放到body里面的。
在前面我们已经了解了html不可缺少的标签，那么接下来我们来看下还需要什么标签
在上方我们看到的代码，很明显的是标签都是成对出现的。但也有特殊情况，单标签，例如mate、br、hr等。
标签语义化
我们常使用到的标签都有它特别的含义，所以当它被附上了意义那么我们在选择如何使用标签也找了参考性，接下来我会跟据项目带大家了解不一样的标签所使用不同的场景。
标签是可以进行嵌套
标题标签
通常是用于标题，有着字体放大放粗的效果。
根据小米产品展示，“Xiaomi 12S Uitra”就是用标题标签h3，它的确也是这个产品的名字，所以使用标题标签。
文本标签
p标签多用于文字段落，解释内容。
斜体标签: i标签- 表示内容重要,不同
表示语义强调: em标签 语调加重 斜体
表示粗体: b标签
列表标签
无序列表*
用途广泛，多适用于大量有序且子元素类似的模块
有序列表
<!-- 有序列表的创建 -->
<ol>
<li>铅笔</li>
<li>钢笔</li>
<li>圆珠笔</li>
</ol>自定义列表
<dl>
<dt>属性</dt>
<dd>xxxxxxxxxxxxx</dd>
<dt>标题</dt>
<dd>yyyyyyyyyyyyyy</dd>
</dl>应用范围
超链接标签
a 标签：
1.可以访问到外部网络的资源
2.可以访问本地网页资源
3.可以作为锚点，在当前页面指定位置进行定位跳转
img标签
用于渲染，图片资源的标签
没有语义的标签
使用广泛，在网页布局会大量使用，去包裹或搭建某个模块的框架，例如小米商城的整体框架
div标签是块级元素：
- 1、具备块级元素的特征
- 2、典型的块级元素，可以嵌套任何元素
- 3、div没有任何的语义
- 4、通常作为页面布局的容器使用
span标签是行内元素：
- 1、具备行内元素的特征
- 2、典型的行内元素，通常用用存放文本，其他的行内元素
- 3、span没有任何的语义
- 4、作为行内容器使用
三、CSS
CSS（层叠样式表）：主要用于设置网页整体的布局，以及元素的样式设置负责网页的美观
css的引用
第一种：行内样式
每一个元素都具备style属性，通过该属性可以设置元素的相关样式。但是复用性不高、样式更新麻烦不符合网页标准 因为html是属性结构文件，负责的网页的结构不推荐使用！
第二种：内联样式
通过style标签，在html中设置当前网页所需要的css样式内容style标签不是用户所见的内容，通常放在 head标签中。但是复用性不高、还是存在模块没有分离，相互耦合，并不独立在学习阶段、教学阶段使用比较多
第三种：外联样式
将css的内容，保存为一份独立的文件该文件可以被任何的页面进行引用在html种通过 link标签去引入外部样式文件该方式是最优的选择！
css基础语法：css主要是两部分组成： 选择器 声明块
css选择器
1.基础选择器
- 元素选择器 通过元素的名字去选择对应的元素 如：div span p ul
- id选择器 语法 #id值 每一个元素都具备id属性 id值是唯一的
- 类选择器 语法 .类名 每一个元素都具备class属性 类名是可以重复的
- 通配符选择器 语法： * 选中页面中所有的元素
2. 复合选择器
复合选择器分为两种类型：
交集选择器： 选择器1选择器2选择器3
- 被选中的元素需要满足所有的选择器条件，才会被选中
并集选择器： 选择器1,选择器2,选择器3
- 被选中的元素只需要满足其中一个选择器条件，就会被选中
3.关系选择器
子代选择器 ： 选择器1>选择器2>选择器3
后代选择器： 选择器1 选择2 选择3
兄弟选择器：
- 选择器1+选择器2 选中某个元素后的第一个兄弟元素
- 选择器1~选择器2 选中某个元素后的所有的兄弟元素
4.伪类选择器
伪类：不存在的类，假的。 在css中可以将伪类分为两种：
- 结构型伪类 （html元素结构有关）
：first-child 父元素下的第一个子元素
：last-child 父元素下的最后一个子元素
：nth-child 父元素下任意的顺序子元素
:first-of-type
:last-of-type
:nth-of-type()
- 动态伪类（用户交互有关）
- link 表示未被访问过的超链接 （只能用于a标签）
- visited 表示已经被访问过的超链接 （只能用于a标签）
- active 表示被用户点击的元素 （用于任何元素）
- hover 鼠标移入到某个元素 (用于任何元素)
5.伪元素选择器：
表示页面中一些特殊的元素，这些元素并不是 常规的标签元素 或者 元素中特别的位置等
伪元素通常使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行的文字
::selection 表示被选中的内容信息
::before 元素最开始的位置
::after 元素结束的位置
注意：以上两个伪元素，单独使用没有任何的效果必须配合 content属性 使用
css具备三大特性
- 层叠性
- 优先级（权重）
- 继承性
层叠性：当有多个相同选择器或者同类型的选择器选中同一个元素，并且为该元素设置同一个样式属性，但是属性值设置的不一样拉架（解决样式冲突问题）会优先使用，靠近元素的选择器所设置的样式。
注意：当选择器权重（优先级）不同时，无法通过层叠性解决样式冲突
优先级（权重）：
- * 通配符选择器 没有权重 权重最低
- 元素选择器 0,0,0,1
- 类/伪类 0,0,1,0
- id选择器 0,1,0,0
- 行内样式（style） 1,0,0,0
- !important 无限大 谨慎使用
注意：选择器最终的优先级是变化，可以进行叠加的！但是只能在最高位的值，不能突破等级！
继承性：css规定一些通用的样式属性，不需要频繁的去写，通过继承性实现即可
注意：不是所有的css属性都能够被后代元素继承
可以被继承的css属性： 字体相关 、字体颜色、 列表相关的、文本相关的等
CSS将元素分为三大类
- 块元素
- 行内元素
- 行内块元素
但是，大多时候，我们在页面布局时会改变元素的特性！元素之间进行想互转换
CSS通过display属性，可以进行元素特性的转换！
- block 将元素转换为块元素
- inline 将元素转换为行内元素
- inline-block 将元素转换为行内块元素
- none 元素无任何状态，通常使用该方式对元素进行隐藏（不存在）
注意：除了display：none；可以隐藏元素、显示元素，css还提供了一个属性 visibility
元素的浮动
元素可以通过设置float属性，让一个子元素向其父元素的左侧或则右侧移动
- none 默认值 ，元素不浮动，正常状态
- left 元素向左浮动
- right 元素向右浮动
- float属性，最开始设计并不是为了水平布局排列的，最开始只是为了实现文字的环绕效果，但是在后续的使用过程
发现float可以使得块元素水平排列！但是也带来了很多的问题！
浮动元素的特点：
-1、元素一旦设置float后，它将会脱离文档流，不再占据文档流中的位置，以至于后续的正常元素会自动向上移动，填满空隙
-2、设置浮动以后，元素会向父元素的左侧或者右侧移动
-3、浮动元素默认情况下不会从父元素中移出，不会逃离父元素的掌控
-4、浮动元素向左或者向右移动时，不会超过它前边的浮动元素
-5、如果浮动元素的上边是一个没有浮动的正常块元素，则浮动元素会停止上移
-6、如果浮动元素的后边是一个正常没有浮动的块元素，则正常元素会自动上移
元素的定位
- 定位是一种更高级的布局手段
- 通过定位可以将元素摆放到页面的任意位置
- 通过css的属性 position 为元素设置定位
position：
- 可选值：
- static 默认值，元素是没有开启定位的，静止的
- relative 为元素开启相对定位
- absolute 为元素开启绝对定位
- fixed 为元素开启固定定位
- sticky 为元元素开启粘滞定位
- relative（相对定位）
- 当元素的position属性值设置为relative则为该元素开启了相对定位
- 相对定位的元素具备以下特点：
1、元素开启相对定位后，不设置偏移量元素是不会发生任何的位置变化
2、相对定位是参照元素自身在文档流中的位置进行定位的
3、相对定位会提升元素的层级关系
4、相对定位的元素不会脱离文档流，元素的特性不会被改变，块还是块，行内还是行内
- absolute(绝对定位)：
- 当元素的position属性值设置为absolute，则为该元素开启了绝对定位
- 绝对定位的特点：
1、开启绝对定位后，如果不设置偏移量元素的位置不会发生改变
2、开启绝对定位后，元素会脱离文档流，不再占据页面的实际位置，会影响其他正常元素的布局
3、绝对定位会改变元素的性质，不再区分行，块，行内块的概念
4、绝对定位会提高元素的层级
5、绝对定位的元素是相对于最近的开启了定位的包含块来进行定位的
- 一般会为子元素设置绝对定位，给他的父元素设置相对定位，（子绝父相）
- 包含块：正常情况下，包含块指的就是该元素的父元素（祖先元素）
2157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
