【前端】HTML&CSS

一、HTML

（一）简介

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

（二）模板解释

注释语句：注释语句，是不会影响代码的执行！只是为了方便调试和阅读！注释的内容是不会显示到网页中的
在html中注释的语法规则：
1、快速生成注释语句块， ctrl+/
2、注释语句中不能嵌套注释语句

（三）标签

（1）介绍（标签&属性）

• 标签(标记):
  就是由w3c提前制定好的一些针对于html文档的标记符号,这些符号是具备各自的含义的
  具体在html中的变现形式由 < > 括起来的对象 比如: html head body
• 注意:
  1.标签通常是成对出现的,但也有极少部分只有开始标签,没有结束标签 称作 单标签或者空标签 比如:meta
  2.一个标签完整组成部分是分为3个部分 开始标签 结束标签 内容部分
  <开始标签>内容部分
  3.标签是允许嵌套的,但是要符合嵌套的标准
  4.每一个标签都具备其对应含义
  通常,我们也会将标签称作为元素 根元素 head元素
• 属性:
  属性是额外的对标签进行描述的信息
• 属性的格式:
  通常格式是: key=value键值对的形式
  少部分情况下格式: 只有key没有value值 它的值是逻辑值 true 或者 false
  一个标签是可以拥有多个属性的, 多个属性之间通过空格分隔
  属性是写在开始标签的<>中
• 属性可以分成两大类:
  全局属性:任何元素都具备的属性,叫做全局属性。常见的全局属性:id 、 class 、 style、 hidden
  局部属性(特定属性):只能某一些元素能够使用

（2）常见语义化标签

语义化:对应标签做对应的事情,语义不被样式所影响的!
常见语义化标签：

• 标题标签：h1-h6
  标题有6个等级,通常是使用前三个就足够了
  便于搜索引擎检索,以及爬虫搜索
• 段落标签: p标签
  表示文档内容部分
• 斜体标签:i标签
  表示内容重要,不同
• 表示语义强调: em标签 语调加重 斜体
• 表示粗体: b标签
• 粗体:strong强调重要内容
• 表示引用的标签: blockquote长引用 q标签 段引用 通常浏览器会自动高加上引号
• 下标标签: sub
• 上标标签: sup
• 删除线: del
• 插入线: ins

空标签:

• br换行标签
• hr水平线

快捷键整理文档 shift+alt+F

实体字符:
格式:&编码;
html中有一些特殊的字符,无法被识别 比如空格 > <
对于这些特殊的字符,只能通过字符编码进行书写

• 空格:  
• 小于: <
• 大于: >
• 版权符号:©

（3）列表标签

列表：用于展示一项一项的内容。
在html中是可以创建列表的，列表有三种！

• 有序列表：使用ol标签来创建的
  列表中的每一项是通过li标签来代表
• 无序列表（用的多）：使用ul标签来创建的，它是无序的，没有顺序标号
  无序列表中的每一项也是通过li标签来代表的
• 定义列表：使用dl标签来创建的
  使用dt来表示定义的内容，小标题
  使用dd来对小标题解释说明

注意：

• ol和ul创建列表后，他们的子项应该是li元素，而不是其他的元素
• li元素中是可以嵌套任何类型的元素的！
• 列表是可以相互嵌套的

总结：
1.ul和ol都是块级元素，通常作为布局容器使用
2.ul和ol的子项应该是li元素
3.li元素是块级元素，可以嵌套任何其他元素

（4）超链接标签

超链接标签，就是 a 标签
作用：
1.可以访问到外部网络的资源
2.可以访问本地网页资源
3.可以作为锚点，在当前页面指定位置进行定位跳转
超链接就是让我们从一个页面跳转到其他页面，将各个单独的网页进行关联

html中使用a标签来定义超链接：
属性：

• href 指定跳转的目标资源路径
  值可以是外部网站地址
  值可以是内部页面的地址
• target 定义新网页的打开方式
  _blank 在一个新窗口中打开页面
  _self(默认值) 在当前窗口中打开该页面

a标签是一个行内元素
注意： a标签比较特殊，a标签中可以嵌套除自身以为的任何元素

a标签有三种跳转方式：
1、通过href属性跳转到外部网络资源 百度网站

<a href="http://www.baidu11111111.com"  >百度一下</a>

2、通过href属性跳转到内部，本地的网页资源

<a href="xxx.html">01_列表标签</a>

3、通过超链接跳转到当前页面的指定位置,该方式叫做锚点跳转
配合id属性，进行跳转，在指定元素的位置设置id值，通过href属性定位到该id值所在的元素

<a href="#my_x">跳转到id为my_x处</a>

4、特殊情况，通过javascript:;来进行占位使用，防止页面重刷

<a href="JavaScript:;">跳转</a>

文件路径
    绝对路径：与当前的文件是没有联系的，不是根据当前该文件所处的位置去访问对应的资源
    相对路径：从当前文件出发去寻找其他的资源，当前的位置为中心
        ./ 代表当前目录下的资源，如果访问同级目录资源./可以省略
        ../ 上一级目录的资源
        ../../上两级目录下的资源

（5）img标签

img标签：用于渲染，图片资源的标签
属性：
    src： 指定外部的图片资源路径，或者本地图片资源路径
    alt：对图片额外信息的描述，方便SEO检索到该图片
当图片无法加载时，显示alt中信息，提示用于，该图片的大致内容
    width：设置图片的宽度，单位px
    hight：设置图片的高度，单位px
    注意：一般只设置宽度或者高度，两者选一即可，另一个属性让它自适应
img元素是行内块元素（替换元素），空标签

_href和src的区别？
相同点：href和src都是指向外部资源地址或者本地资源地址
不同点：
href属性

• 1.通过该属性去关联另一份外部资源文件
• 2.如果被关联的资源文件，在页面渲染时需要用到该资源中的内容时，它会下载该资源，
• 3.如果需要下载资源文件内容时，并行下载的方式，不会阻塞页面的渲染

src属性：

• 1.通过该属性去访问到对应的外部资源，并替换掉该标签的内容
• 2.src属性肯定是会下载对应路劲的资源的
• 3.src的下载不是并行下载，在页面渲染时如果遇到src那么会将该资源全部下载完毕并且解析后，才会继续渲染页面后续的内容
  src会阻塞页面的渲染

（6）div&span标签

• div标签是块级元素：
  1、具备块级元素的特征
  2、典型的块级元素，可以嵌套任何元素
  3、div没有任何的语义
  4、通常作为页面布局的容器使用
• span标签是行内元素：
  1、具备行内元素的特征
  2、典型的行内元素，通常用存放文本，其他的行内元素
  3、span没有任何的语义
  4、作为行内容器使用

（四）元素

元素,通过在页面中的展示以及对于元素特性,可以分为三大类:

• 块元素(block element)
  特点:
  1.块元素具有布局特点,一般常用页面的整体布局
  2.块元素独占(其父元素)页面的一行
  3.块元素可以嵌套任何类型的元素(除p元素以外,p元素中不能嵌套任何的块元素)
  4.块元素可以设置宽,高 默认的宽度是其父元素的宽度
  5.块元素默认高度是由内容决定的
• 行内元素(inline element)
  特点:
  1.正常情况下,行内元素是不会换行的
  2.行内元素会在一行排不下时进行换行
  3.行内元素不能设置宽 高 行内元素的宽和高都是由其内容决定的
  4.行内元素一般不会嵌套块级元素,大多数是嵌套文本或者其他的行内元素
• 行内块元素(inline-block element)
  特点:
  1.行内块元素不会独占一行,在一行排列
  2.可以设置宽高(默认是内容的宽 高)

注意:以上各类元素的特点都是在页面正常情况下存在的!遵循的!

二、CSS

一个的网页是由三部分组成的

• HTML 结构
• CSS 样式
• avaScript 行为

CSS（层叠样式表）：主要用于设置网页整体的布局，以及元素的样式设置
负责网页的美观

（一）引入方式

行内式
每一个元素都具备style属性，通过该属性可以设置元素的相关样式
缺点：
1.复用性不高、样式更新麻烦
2.不符合网页标准 因为html是属性结构文件，负责的网页的结构
不推荐使用！

<div style="width: 100px; height:100px;  background-color: red;" ></div>

内联样式
通过style标签，在html中设置当前网页所需要的css样式内容
style标签不是用户所见的内容，通常放在 head标签中
缺点：
1.复用性不高
2.还是存在模块没有分离，相互耦合，并不独立
在学习阶段、教学阶段使用比较多

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

外联样式
将css的内容，保存为一份独立的文件
该文件可以被任何的页面进行引用
在html中通过 link标签去引入外部样式文件
该方式是最优的选择！

<link rel="stylesheet" href="./CSS/test.css">

（二）基础语法

css主要是两部分组成： 选择器 声明块

选择器1 {
    key:value;
    key:value;
    key:value;
}
选择器2 {
    key:value;
    key:value;
    key:value;
}

要为元素设置某种样式，前提是找到、选中这个元素，然后才能对其设置样式属性

（三）选择器

（1）基础选择器

元素选择器
通过元素的名字去选择对应的元素 如：div span p ul

div {
     width: 100px;
     height: 100px;
     background-color: pink;
     }       
span {
     color: red;
     }

id选择器
语法 #id值 每一个元素都具备id属性 id值是唯一的

#box01 {
            width: 200px;
            height: 100px;
            background-color: yellow;
        }

类选择器
语法 .类名 每一个元素都具备class属性 类名是可以重复的

.box {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

通配符选择器
语法： * 选中页面中所有的元素

* {
            color: red;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

（2）复合选择器

复合选择器：是由两个或多个基础选择器组成

复合选择器分为两种类型：
交集选择器： 选择器1选择器2选择器3
被选中的元素需要满足所有的选择器条件，才会被选中

div.box {
            width: 100px;
            height: 100px;
            background-color: red;
        }

并集选择器： 选择器1,选择器2,选择器3
被选中的元素只需要满足其中一个选择器条件，就会被选中

div,.box,.myspan {
            color: red;
        } 

（3）关系选择器

html元素与元素之间存在哪些关系：

• 父子关系
• 祖先后代关系
• 兄弟关系

父元素：直接含有被嵌套元素的元素，可以称作为父元素
子元素：被父元素包裹的元素，可以称作为子元素,子元素也是特殊的后代元素
兄弟元素：拥有同一个元素的元素，可以称作为兄弟元素
祖先元素：间接包含着后代的元素称为 祖先元素
后代元素：被某个元素间接包裹的，称为该元素的后代元素

子代选择器
选择器1>选择器2>选择器3

.box1>p {
            color: red;
        }

后代选择器
选择器1 选择2 选择3

.box1 span {
            color: yellow;
        } 

兄弟选择器
    选择器1+选择器2 选中某个元素后的第一个兄弟元素
    选择器1~选择器2 选中某个元素后的所有的兄弟元素

        #li+li {
            color: red;
        }

        #li1~p {
            color: red;
        }

（4）属性选择器

属性选择器，是通过元素的属性值来选择对应的元素
title属性 全局属性 额外对该元素的描述信息
属性选择器语法：
    [属性名] 只要拥有该属性的元素都会被选中
    [属性名=值] 只要拥有该属性并且值是一样的
    [属性名^=值] 拥有该属性，并且值是以某些字符开头的
    [属性名$=值] 拥有该属性，并且值是以某些字符结尾的
    [属性名*=值] 拥有该属性，并且值里面包含特定的字符

     <div title="test">123</div>
     <span title="test02">456</span>
     <p title="test03">789</p>
     <b title="test">xxxx</b>

（5）伪类（元素）选择器

伪类：不存在的类，假的
在css中可以将伪类分为两种：
①结构型伪类 （html元素结构有关）
②动态伪类（用户交互有关）
语法：:伪类名
注意：通常情况下，伪类选择器不会单独使用会和其他选择器配合使用，因为这样没意义

结构伪类
first-child 父元素下的第一个子元素
last-child 父元素下的最后一个子元素
nth-child 父元素下任意的顺序子元素
以上三个伪类，顺序的排列不是某个类型之间的排列，是将父元素下的所有不同类型的子元素进行排列的
:first-of-type
:last-of-type
:nth-of-type
这三个伪类就是在同类型之间进行排序
动态伪类
link 表示未被访问过的超链接 （只能用于a标签）
visited 表示已经被访问过的超链接 （只能用于a标签）
active 表示被用户点击的元素 （用于任何元素）
hover 鼠标移入到某个元素 (用于任何元素)

伪元素选择器
表示页面中一些特殊的元素，这些元素并不是 常规的标签元素 或者 元素中特别的位置等
伪元素通常使用 :: 开头
::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属性： 字体相关 、字体颜色、 列表相关的、文本相关的等

（五）文档流&盒模型

（1）文档流

网页是一个多层的结构，一层叠着一层的，在整个网页中有个最底层（原始层），最底层就是我们文档流，默认情况下，所有的元素都是在文档流中遵循其规则进行排列的

基于文档流概念，元素就会有两种状态：
1、元素在文档流中时（默认情况）：

• 块级元素：
  1.独占其父元素的一行
  2.可以设置宽高
  3.默认高度由内容决定，或者子元素决定
  4.默认宽度是其父元素的100%
  5.占据页面实际的位置
• 行内元素：
  1.不会独占一行，在一行水平依次排列，直到排不下自动换行
  2.不可以设置宽高
  3.默认高度和宽度都是由内容决定
  4.占据页面实际的位置

2、元素脱离文档流
①一旦元素脱离文档流，将不再占据文档流中的位置
②脱离文档流后，元素不再有任何的区分，统一视作一致的，没有区分
③脱离文档流的元素可以设置宽高，不会独占一行

（2）盒模型

盒模型：内容区 + 边框 + 内边距 + 外边距
①页面中所有的元素，其本质都是一个矩形盒子
②页面的本质就是一个一个的矩形盒子组成的
③写网页的布局就是把这些盒子摆放到正确的位置上

标准盒模型
内容区： 由width属性 和 hight属性决定
边框：border 属性可以设置盒子的边框 边框会影响可见框的大小。设定边框需要指定3部分： 边框的大小、 边框的样式 、 边框的颜色

border-width  边框的大小
border-style  边框的样式
border-color  边框的颜色

border 简写属性 ： 设置三个值   边框的大小、 边框的样式 、 边框的颜色

内边距（padding）：padding属性设置盒子的内边距，内容区到边框之间的距离就是内边距，内边距也会影响盒子可见框的大小

每一盒子具备4个方向的内边距
padding-top
padding-bottom
padding-left
padding-right

简写属性 padding 同时指定四个方向的padding  
4个值   上 右 下 左
3个值   上 左右 下
2个值   上下  左右
1个值    上下左右

外边距 （margin）：margin属性设置盒子与盒子之间的间隙，不属于盒子内部，它不会影响盒子可见框的大小，只会影响盒子实际占据位置

margin同padding用法一致
margin-top
margin-bottom
margin-left
margin-right

margin： 简写属性，4个值，3个值，2个值，1个值
（margin属性支持负数值）

margin: 0 auto;
可以通过该方式设置已知宽度的块元素，在父元素中水平居中

IE盒模型（怪异模型）
正常情况下都是标准盒模型，但是可以通过css的属性 box-sizing 更改盒模型的种类
IE盒模型下： 盒子可见框的大小 = widgth + hight

        .box1 {
            box-sizing: border-box;
            border: 10px solid black;
            padding: 20px;            
        }

（3）外边距折叠问题

（六）元素

（1）元素转换

CSS通过display属性，可以进行元素特性的转换！

display

• block 将元素转换为块元素
• inline 将元素转换为行内元素
• inline-block 将元素转换为行内块元素
• none 元素无任何状态，通常使用该方式对元素进行隐藏（不存在）

除了display：none；可以隐藏元素、显示元素，css还提供了一个属性 visibility visibility: hidden;

display:none 和 visibility: hidden 不同：
①display：none是直接让元素消失，不再占据文档流中的位置，该属性会影响其他元素的布局
②visibility: hidden 只是让元素隐藏，本身还是在文档流中占据着位置，并不会影响其他元素的布局

布局小技巧
需求1 ： 如何将一个块元素在父元素中水平居中？
margin：0 auto
需求2： 如何将行内元素在父元素中水平居中？
text-align: center;
需求3： 如何将行内元素在父元素中水平垂直居中？
line-height: 与父元素高度值一样;

（2）元素的浮动

元素可以通过设置float属性，让一个子元素向其父元素的左侧或则右侧移动

float：
- none 默认值 ，元素不浮动，正常状态
- left 元素向左浮动
- right 元素向右浮动

float属性，最开始设计并不是为了水平布局排列的，最开始只是为了实现文字的环绕效果，但是在后续的使用过程发现float可以使得块元素水平排列！但是也带来了很多的问题！

浮动元素的特点：
-1、元素一旦设置float后，它将会脱离文档流，不再占据文档流中的位置，以至于后续的正常元素会自动向上移动，填满空隙
-2、设置浮动以后，元素会向父元素的左侧或者右侧移动
-3、浮动元素默认情况下不会从父元素中移出，不会逃离父元素的掌控
-4、浮动元素向左或者向右移动时，不会超过它前边的浮动元素
-5、如果浮动元素的上边是一个没有浮动的正常块元素，则浮动元素会停止上移
-6、如果浮动元素的后边是一个正常没有浮动的块元素，则正常元素会自动上移

（3）浮动元素高度塌陷问题

（4）元素的背景相关属性

1、 background-color 设置背景颜色
2、background-image 设置背景图片
- url（） 引入背景图片的地址，可以网络地址也可以是本地地址
- 可以同时这种背景图片和背景颜色，背景颜色就会办成图片的背景色
- 如果背景的图片大小小于元素的大小，背景图片会自动平铺，填满整个元素
- 如果背景的图片大于元素，则背景无法全部显示，只能显示部分，其余部分被自动裁剪
- 如果背景图片和元素一样大，那么正常显示
3、background-repeat 用于设置背景的重复方式
- 可选值：
- repeat 默认值 背景会沿着x轴和y轴进行双向重复
- repeat-x 沿着x轴方向重复
- repeat-y 沿着y轴方向重复
- no-repeat 背景图片不重复
4、background-position 用来设置背景图片的位置
- 通过方位词 top left right bottom center
- 通过设置具体的数值 0px 0px
5、background-clip 设置背景的范围
- 可选值：
- border-box 默认值 ，背景会出现在边框的下方
- padding-box 背景不会出现在边框，只出现在内容去，内边距
- content-box
6、background-size 设置背景图片的大小
- 设置具体值 宽度 高度
- cover 图片的比例不变，将元素铺满
- contain 图片的比例不变，将图片在元素中完整显示

以上的属性都可以采用简写属性 background 设置

（七）定位

定位（position）：
- 定位是一种更高级的布局手段
- 通过定位可以将元素摆放到页面的任意位置
- 通过css的属性 position 为元素设置定位

position：
static 默认值，元素是没有开启定位的，静止的
relative 为元素开启相对定位
absolute 为元素开启绝对定位
fixed 为元素开启固定定位
sticky 为元元素开启粘滞定位

偏移量：
- 通过css提供的方位属性，对开启定位的元素设置，偏移量
- top left right bottom
- 注意：一般只需要设置两个方位即可对元素进行定位，偏移量也支持负数值

（1）相对定位

相对定位：元素相对于自身本身的位置！最开始占据文档流的位置来进行定位
relative（相对定位）：当元素的position属性值设置为relative则为该元素开启了相对定位

相对定位的元素具备以下特点：
1、元素开启相对定位后，不设置偏移量元素是不会发生任何的位置变化
2、相对定位是参照元素自身在文档流中的位置进行定位的
3、相对定位会提升元素的层级关系
4、相对定位的元素不会脱离文档流，元素的特性不会被改变，块还是块，行内还是行内

（2）绝对定位

绝对定位：元素相对于其最近的开启了定位的包含块元素为基准进行定位
absolute(绝对定位)：当元素的position属性值设置为absolute，则为该元素开启了绝对定位

绝对定位的特点：
1、开启绝对定位后，如果不设置偏移量元素的位置不会发生改变
2、开启绝对定位后，元素会脱离文档流，不再占据页面的实际位置，会影响其他正常元素的布局
3、绝对定位会改变元素的性质，不再区分行，块，行内块的概念
4、绝对定位会提高元素的层级
5、绝对定位的元素是相对于最近的开启了定位的包含块来进行定位的

一般会为子元素设置绝对定位，给他的父元素设置相对定位，（子绝父相）
包含块：正常情况下，包含块指的就是该元素的父元素（祖先元素）

（3）固定定位

将元素的position属性设置为fixed则开启了元素的固定定位
固定定位也是一种绝对定位，所有固定定位的大部分特点与绝对定位是一样的
唯一不同的是定位的参照基准不一样，并且固定定位的元素不会随着网页的滚动条进行滚动
固定定位是相对于浏览器的视口进行定位的

（4）粘滞定位

当元素的position属性设置位sticky则开启了 粘滞定位：
粘滞定位和相对定位的特点基本一致
不同点是粘滞定位可以在元素到达某个点时将其固定