HTML自学笔记（从零开始）

最新推荐文章于 2024-04-18 05:00:00 发布

orange_idea

最新推荐文章于 2024-04-18 05:00:00 发布

阅读量376

点赞数 2

文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_43326874/article/details/107016261

版权

HTML+CSS网页设计自学课程笔记

>HTML<

URL拆分：
1. http://URL协议类型
2. 127.0.0.1 服务器IP地址
3. :80 服务器的端口号
4. index.html 需要访问的资源名称（当我们通过IP地址和端口号找到对应的服务器之后，需要通过资源名称告诉服务器，我们需要获取服务器上的哪个资源）
能用记事本打开并且正常显示的都是纯文本文件
HTML的作用：专门描述文本语义的。（命名文件时千万不要用中文，要用英文或者拼音）
虽然我们利用<h1>描述一段文本之后，这段文本在浏览器中显示出来会被放大和加粗，看上去我们是利用HTML的标签修改了被描述的那段文本的样式，但是一定要记住，HTML的作用只有一个，它是专门用来给文本添加语义的，而不是用来修改文本的样式的。
编写网页的步骤：
1. 新建一个文本文件
2. 利用记事本打开
3. 编写HTML代码
4. 保存并且修改为纯文本文档的扩展名为.html
5. 利用浏览器打开编写好的文档
基本重要代码结构：
<!DOCTYPE html> (<!doctype html>)
//仅仅是告诉浏览器用的是HTML5的版本，这一行必须要写
<html>

<head>

<meta charset=”GBK”/> //防止出现乱码的情况

<title></title>

</head>

<body>

</body>

</html>

一致性，否则还是会出现乱码：

DTD文档的相关信息：
注意：DTD文档声明不是一个标签（即第一行代码）
更多的参考文档登陆http://www.w3school.com.cn/ //这是一个W3C的中国网站
在webstorm中快捷创建一个新的.html文件àCtrl+Alt+Insert键
在webstorm中移动光标到当前行的末尾/最前àEnd键/Home键

在webstorm中快速复制粘贴/删除光标所在的那一行：Ctrl+D/Ctrl+X
在webstorm中让标签包裹一级内容，也就是自动在一段内容前后加上标签：选中文字后，Ctrl+Atl+T，然后按下回车，再输入相应标签即可

H系列标签的注意点：

Hr标签：’<hr />’ =>作用是在浏览器中显示一条分割线（这是一个单标签）

注释的格式：<!—xxxxx-->（快捷键：Ctrl + /）
1. 插入图片：
  img标签：img是image的缩写，，作用是告诉浏览器我们需要显示一张图片
  格式：<img src=””>
  其中src’是source的缩写，src作用是改速img标签，选哟显示的托哎名称

注意点：
img标签不会独占一行

1. 参数：

Width / height：

如果我们手动指定了img标签显示的图片的宽度和高度，有可能会导致图片变形，如果想要等比例缩放，则只需要该表width / height 中的其中一个即可（height=”456”）

图片的查找位置：
1. 相对位置（从.html文件的位置开始查找）:
  1. 同级（在同一个文件夹）
    格式：<img src=“QRCode.jpg”>
  2. 下级（存储图片的文件夹在.html文件夹的下一层文件夹中）
    格式：<img src=“images/ARCode.jpg”>
  3. 上级（存储图片的文件夹在.html文件夹的上一层文件夹中）

格式：<img src=“../QRCode.jpg”>

1. 绝对路径：就是平时C:\Users\Pesistencer\Desktop\#Study\寒假作业等顺序
2. 注意点：
  以后企业开发中如果需要编写路径，统一使用反斜杠/，不要适用正斜杠，因为将来我们开发的程序可能会部署到其他操作系统的服务器上，而在其他操作系统中路径都是/，所以如果你写的不是/，可能会引发问题。

在企业开发中一般不会使用绝对路径，因为可移植性不好。

a标签：
1. a标签的作用：用于控制页面与页面之间的跳转
2. a标签的格式：<a href=“指定需要跳转的目标界面” target=”_blank”>需要展现给用户看的内容</a>
3. a标签的注意点：
  1. a标签不仅可以让文字点击，还可以让图片被点击
  2. 一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方
  3. 如果通过a标签的href属性指定一个URL地址，那么必须在地址前面加上
    http://或者https://
4. a标签中有一个叫做target属性，这个属性专门用于控制如何跳转
  1. _self：用于当前选项卡中跳转，也就是不新建界面跳转，默认就是_self
  2. _blank：用于在新的选项卡中跳转，也就是新建界面跳转
5. a标签中还有一个属性，叫做titlt，a标签中的title和img标签中title一样，都是用来控制鼠标悬停显示的提示文本的
base标签
专门用来统一的指定的当前网页中所有哦的超链接（a标签）需要如何打开

注意点：
1.base标签必须写在head标签的开始标签和结束标签之间
2.如果即在base中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行。
假链接：
点击后不会跳转的链接
存在的意义：在企业开发前期，其他界面都没有写出来，那么我们就不知道应该转到什么地方，所以就只能使用假链接来代替，当后期其他界面都已经完成时再将假链接替换为真链接
假链接的格式为：1.# 2.javascript：
1. #的假链接会自动回到网页的顶部
2. Javascript：的假链接不会跳转到网页顶部
想要跳转到同一个界面的某一个部分时，要用到id
格式：
<a href=”#center”>跳转到中部</a>
<h2 id=”center”>我是中部</h2>

注意点：
1.通过我们的a标签跳转到指定位置，是没有过渡动画的，是一下子直接就跳转到了指定位置
2.a标签除了可以跳转到当前界面的指定位置以外，还可以在跳转其他位置的时候直接跳转到其他界面的指定位置（锚点）
格式：<a href=”13-锚点测试界面.html#bottom” target=”_blank”>跳转到锚点测试界面</a>

<h2 id=”bottom”>我是锚点测试界面333</h2>

列表标签
作用：给一堆数据体哦那家列表语，也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体
HTML中列表标签的分类：
1. 无序列表（最多）（unordered list）
2. 有序列表（最少）（ordered list）
3. 定义列表（其次）（definition list）
无序列表格式：
<ul>

<li>需要显示的条目内容</li>

</ul>

li：list item的缩写
list：列表的意思
item：条目的意思
结合起来就是列表条目的意思

注意点：

一定记住al标签是用来给一堆数据添加列表语义的，而不是用来给他们添加小圆点的
ul标签和li标签是一个整体，是一个组合，所以一般情况下ul标签和li标签是一起出现的
由于ul标签和li标签是一个组合，所以ul标签内一般不会有其他的标签，所以以后ul标签中只会看到li标签（但是li标签里面可以放h标签、p标签等）
无序列表中li标签中出来可以添加其他标签来丰富我们的界面以外，还可以调价ul标签来丰富我们的界面，也就是ul中有li，li中又可以有ul

在webstorm中快速编写一个ul的格式：

ul>li(*1) （生成一对ul标签，然后在这对ul标签中再生成一对li标签，只有一对的时候可以不写）

ul>li*N （生成一对ul标签，然后在这对ul标签中再生成N对li标签）

有序列表：给一堆数据添加列表语义，并且对一堆数据中所有的数据都有先后之分
格式：ulàol，其他的点都基本和ul一样
效果：自动添加序号
定义列表：

1.给一堆数据添加列表语义
2.先通过dt标签定义列表中的所有标题，然后再通过dd标签给每个标题添加描述信息
格式：
<dl>
    <dt></dt>
    <dd></dd>
</dl>
dt是英文definition title的缩写，所以dt的含义就是用来定义列表中的标题
dd是英文definition description的缩写，所以dd的含义就是用来定义标题对应的描述的

定义列表的应用场景

做网站尾部的相关信息
做图文混排

注意点：

和ul/ol一样，dl和dt/dd是一个整体，所以他们一般情况下不会单独出现，都是一起出现
和ul/ol一样，由于dl和dt/dd是一个组合标签，所以dl中建议脂肪dt和dd标签
一个dt可以没有对应的dd，也可以有多个对应的dd，但是无论有或者没有dd都不推荐使用（推荐一个dt对应一个dd）
快速创建一对dl标签：dl>dt+dd

表格标签：
作用：用来给一堆数据添加表格语义（其实表格是数据的展现形式，当数据量非常大时，表格是最为清晰的展现形式）
格式：
<table border=”2”>

<tr>

<td>需要显示的内容</td>

</tr>

</table>

table：代表整个表格

tr：代表整个表格中的一行数据

td：一行中的一个单元格

注意点：

表格标签有一个边框属性，这个属性决定了边框的宽度，默认情况下这个属性的值是0，所以看不到边框

表格标签和列表标签一样，它是一个组合标签，所以table/tr/td要么一起出现，要么不出现，不会单个出现

表格标签的属性：

1. 宽度和高度：可以给table和td标签使用
  1. 默认是按照内容来调整，也可以自定义设置
  2. 如果给td标签设置width/height属性，会修改当前单元格的宽度和高度，不会影响整个表格的宽度和高度
2. 水平对齐和垂直对齐：水平对齐可以给table标签和tr标签使用，垂直标签只能给tr和td标签使用
  1. 给table标签设置align属性，可以控制表格在水平方向的对齐方向
  2. 给tr标签设置align/valign属性，可以控制当前行中所有单元格中的水平方向的对齐方式
  3. 给td标签设置align/valign属性，可以控制当前单元格中的水平方向的对齐方式

注意点：如果td中设置了align/valign属性，tr中也设置了align/valign属性，那么单元格中的内容会按照td中设置的来对齐

1. 外边距和内边距：只能给table标签使用
  1. 外边距：单元格之间的距离（cellspacing=”N”）,N默认是2px
  2. 内边距：单元格内的内容距离单元格边框之间的间隙（cellpadding=”N”）,N默认是1 px

注意点：以后企业修改样式将通过css

1. 背景颜色：bgcolor=”black”，都可支持

表格标签：在表格标签中提供了一个标签专门用来设置表格的标题，这个标签叫做caption，只要将标题写在caption中，标题就会相对于表格居中

格式：
<caption>

<h2>XXXX</h2>

</caption>

注意点：
1.caption一定哟啊写在table标签中，否则无效

2.caption一定要紧跟在table标签后面

标题单元格标签：在表格标签中提供一个标签专门用来存储每一列的标题，这个标签叫做th标签，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字。
到此为止，我们发现，表格中有两种单元格：1.td 2.th。 td是专门用来存储数据的，th是专门用来存储当前列的标题的
caption：指定表格标题
thead：指定表格的表头信息
tbody：指定表格主体信息
tfoot：指定表格的附加信息
单元格合并：
1. 水平合并：给td标签添加一个colspan属性，来指定一个单元格向后看成N个单元格
  如：<td colspan=”2”></td> 含义：把当前单元格当作两个单元格看待（向后）
2. 垂直合并：给td标签添加一个rowspan属性，来指定一个单元格向后看成N个单元格
  如：<td rowspan=”2”></td> 含义：把当前单元格当作两个单元格看待（向下）
3. 注意点：
  1. 由于把某一个单元格当作了多个单元格来看待，所以会多处一些单元格，所以需要删除一些单元格才能够正常显示
  2. 一定要记住单元格合并永远都是向后或者向下合并的
快速移动选中的代码：
上下移动：Ctrl + Shift + 方向键
快速合并和展开：Ctrl + -/+
快速新齐一行：Shift +Enter
表单标签：
1. 表单：用来收集用户信息
2. 表单元素：在html中，标签/标记/元素都是指HTML中的标签
3. 表单格式：

<form>

<表单元素>

</form>

1. 常见的表单元素：input标签，input标签有一个type属性，这个属性有很多类型的取值，取值的不同决定了input标签的功能和外观
  1. 明文框：账号：<input type=”text” value=”XXX”> （value是初始值，可以不设置）
  2. 暗文框：密码：<input type=”password” value=”XXX”> （value是初始值，可以不设置）
  3. 单选框：<input type=”radio” name=”XX” checked=”checked”>sex
    1. 注意点：默认情况下单选框不会互斥，要想单选框互斥必须给每一个单选框标签都设置一个name属性，然后name属性还必须设置相同的值，哪个选在后面就哪个选中
    2. 要想让单选框默认选中某一个框子，就可以给input标签添加一个checked属性
    3. 在html中如果属性的取值和属性的名称一样，可以只写一个，但是在XHTML中必须写上取值，所以在企业开发中我们推荐大家不要省略取值
  4. 多选框：<input type=”checkbox” checked=”checked”>something
按钮：
1. 定义一个普通按钮à配合js完成一些操作
2. 格式：
  1. <input type=”botton” value=”需要输入的内容” οnclick=”alert(‘显示的东西’)”> (文字按钮)
  2. <input type=”image” src=”images/asd.jpg” οnclick=”alert(‘显示的东西’)”> （图片按钮）
  3. <input type=”reset” value=”XX”> （重置按钮：清空表单数据）
    1. 注意点：value：用户自定义文字，默认是：“重置”
  4. <input type=”submit” value=”XX”> (提交按钮：提交到远程服务器)
    1. 注意点：
      1. <form action=”http://baidu.com”>
      2. 要想把表单的数据提交到远程服务器，必须满足两个条件
        告诉表单需要提交到哪个服务器：可以通过form标签的action属性来告诉表单，需要提交到哪个服务器（如：<form action=”http://baidu.com”>
        告诉表单，表单中哪些数据需要提交：在输入行中加入name=”XX” 即可。
  5. 隐藏域：悄悄地收集用户的一些数据，不会出现在界面中的，但是会悄悄地提交
    格式：<input type=”hidden” name=”cc” value=”it666”> （value是提交的值）
  6. Label标签：输入框与文字绑定起来，实现聚焦

默认情况下文字和输入框是没有关系的，不会聚焦

格式：

将文字利用label标签报果起来
给输入框添加一个id属性
在label标签中通过for属性和输入框中的id进行绑定即可

Datakist标签：给输入框绑定待选项（仅作了解）

格式：

<option>待选项内容</option>

</datalist>

如何给输入框绑定待选列表

搞一个输入框
搞一个datalist列表
给datalist列表添加一个id
给输入框添加一个list属性，将datalist的id对应的值赋给list属性即可

非input标签
1. Select标签：用于定义下拉列表
  1. 格式：

</select>

1. 1. 注意点：
    1. 下拉列表不能输入数据，只能下拉选择
    2. 可以通过给option添加一个selectled属性来指定列表的默认值
    3. 可以通过给option标签包裹一层optgroup标签来给列表中的数据分类
2. Textarea标签
  1. 格式：

内容

</textarea>

1. 1. 注意点：
    1. 默认情况下输入框可以无限换行
    2. 默认情况下输入框有自己的高度和宽度
    3. 可以通过cols和row来指定输入框的宽度和高度，但是虽然指定了列表和行数，但是还是可以无限往下输入
    4. 默认情况下输入框可以手动拉伸
2. 注意点：
  1. 在单选框和多选框中所有的项目的name都必须一致
  2. 在表单标签中，除了按钮标签以外的标签，都可以通过value来指定需要提交到服务器的数据
3. 边框标签：<fieldset>标签

<form>

</fieldset>

</form>

注意点：在form标签里面

video标签
1. 格式：

</video>

src：视频播放地址

autoplay：告诉video标签是否需要自动播放视频（autoplay=”autoplay”）

controls：用于告诉video标签是否需要显示控制条（control=”control”）

poster：用于告诉video标签视频没有播放之前插入一张占位图片（poster=”images/asd.jpg”）

loop:一般用于做广告视频，用于告诉video标签视频播放完毕之后是否需要循环播放（lool=”loop”）

preload：预加载视频，但是注意preload和autoplay相冲，如果设置autoplay属性就不能设置preload

muted：静音（muted=”muted”）

width：

height：

1. 第二种格式：

<video>

</video>

Video标签的第二种格式存在的意义就是为了解决浏览器适配的问题，video元素支持三种视频格式，我们可以把这三种格式都通过source标签指定video标签，以后当浏览器播放视频他就会从这三种选择一种自己支持的格式播放

audio标签：播放音频
1. 格式：

</audio>

同video标签相似（除了长度和宽度）

1. 注意点：audio标签的使用和video标签的使用的属性在audio标签中大部分都能够使用，并且功能都一样只不过有3个属性不能用，height/width/poster

详情和概要标签：利用summary标签来描述概要信息，后面的就是详细信息
1. 格式：

详细信息

</details>

Marquee标签：跑马灯
1. 格式：

<marquee direction=”right”> （从左往右滚动）（或者上下）

内容(有点像弹幕滚动)

</marquee>

scrollamount：设置滚动速度，值越大，越快

loop：设置滚动次数，默认是-1（即无限循环）

behavior：设置滚动类型，slide滚动到边界就停止，alternate滚动到边界就弹回

注意点：还可以让图片滚动，images标签

Html中被废弃的标签
1. 原因：因为html中的标签只有一个作用，就是用来添加语义而早期的html中有一部分是没有意义的，有一部分修改样式的，就被淘汰了
2. <br> <hr> <font> <b> <u> <i> <s>以上的标签都是没有语义的，都是用来修改样式的
3. 注意点：企业开发不到万不得已不要用这些标签，如果一定要用，则一般被用来作为CSS的钩子来使用
4. strong语义：定义重要性强调的文字

ins语义(inseted)：定义插入的文字

em语义(emphasized)：定义强调的文字

del语义(deleted)：定义被删除的文字

字符实体
1. 在html中对空格/回车/tab不敏感，会把多个当作一个空格来处理
2. &nbsp：空格，一个&nbsp，就是一个空格，有多少&nbsp，就有多少个空格
3. &lt：小于符号
4. &gt：大于符号

>CSS<

CSS
1. 格式：

标签名称（h、p……）{

属性名称：属性对应的值;

}

</style>

1. 注意点：
  1. Style标签必须写在head标签里面，和title是兄弟关系
  2. Style标签中的type属性可以不用写，默认就是type=”text/css”
  3. 设置样式时必须按照固定的格式来设置。冒号和分号都不能省略

文字属性
1. 规定文字样式
  1. 格式：font-style:italic;
  2. 取值：
    normal：正常，默认；
    italic：倾斜的；
  3. 快捷键：
    fs font-style：italic;
    fsn font-style：normal；
2. 规定文字粗细
  1. 格式：font-weight：bold；
  2. 取值：
    1. 单词取值：
      bold：加粗
      bolder：比加粗还要粗
      lighter：细线，默认
    2. 数字取值：
      100~900之间取值
  3. 快捷键：与a中相似
3. 规定文字大小
  1. 格式：font-size：30px;
  2. 单位：px（像素 pixel）
  3. 注意点：一定要带单位（px）
  4. 快捷键：fz30：font-size：30px；
4. 规定文字字体
  1. 格式：font-family：”宋体”,”备选方案1”,”备选方案”……
  2. 注意点：
    1. 如果取值是中文，需要用到单/双引号
    2. 设置的字体必须是用户电脑安装的字体
    3. 如果设置的字体不存在，那么用备选方案字体，或者用用户系统封默认的字体。
    4. 中文字体可以处理英文，但是英文字体不可以处理中文
    5. 中英文分别设置字体时，则英文字体写前面，中文字体写后面
    6. 企业开发中的普遍字体
      1. 中文：宋体 / 黑体 / 微软雅黑
      2. 英文：Times New Roman / Arial
  3. 快捷键：与c中相似

文字属性简写：
1. 格式：font：style weight size family；

如：italic bold 10px “楷体”

1. 注意点：
  1. Style可以删除，weight可以删除，位置可以互换
  2. Size和family则不可以，且两者一定要放在所有属性的最后

文本属性：
1. 文本装饰
  1. 格式：text-decoration：underline；
  2. 取值：
    1. Underline：下划线
    2. Overline：上划线
    3. Line-through：删除线
  3. 快捷键：
    1. Td：none
    2. Tdu；underline
    3. Tdo：overline
    4. Tdl：line-through
2. 文本水平对齐
  1. 格式：text-align：center
  2. 取值：
    1. Left/ right/ center
3. 文本缩进
  1. 格式：text-indent：2em
  2. 取值：
    1. 2em（em是单位，1em代表缩进一个文字）
    2. 1Px（但是不工整）
颜色属性：
1. 格式：
  1. Color：值
2. 取值：
  1. 英文单词
    一般情况下常见颜色都有对应的英文单词，但不是所有颜色都有对应的英文单词来表达
  2. Rgb
    rgb其实是三原色，格式：rgb（0，0，0），格式中的第1/2/3来设置三原色中红/绿/蓝光源中的亮度，255是最大的
    在前端开发中其实并不常用黑色，因为很刺眼，而常用的是灰色
  3. Rgba（透明度）
    1. 格式：rgba（255，0，0，0.1）
    2. 注意点：
      1. 最后一个取值0~1
      2. 0是完全透明，1就完全不透明了
  4. 十六进制
    1. 格式：color：#FF0000
    2. 注意点：
      1. 本质是rgb，通过每两位来表示rgb中的一个值
      2. 转换公式：用十六进制的第一位*16+十六进制的第二位=十进制
  5. 十六进制缩写

标签选择器：根据指定标签名称，在当前界面中找到该名称的标签，然后设置属性
1. 格式：
  标签名称{ 属性：值 }
2. 注意点：
  1. 标签选择器中的是当前界面中所有的标签，而不能单独选中某一个标签
  2. 标签选择器无论标签藏地多深都能选中
  3. 只要是HTML中的标签就可以作为标签
Id选择器：根据指定id名称，找到对应标签，然后设置属性
1. 格式：

#id名称{

属性：值；

}

1. 注意点：
  1. 每个html都有一个属性叫做id，也就是每个标签都可以设置id
  2. 在同一个界面中id名称是不可以重复的
  3. 在编写id选择器时一定要在id名称前面加上#号
  4. Id名称是有一定的规范的
  5. Id名称只能由字幕/数字，下划线组成
  6. Id名称不能以数字开头，不能时html白哦前的名称，不能是a/ h1/ img,/ input….
  7. 在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用id，因为在前端开发中id是留给js使用的.

类选择器
1. 根据指定的类名称找到对应的标签，然后设置属性
2. 格式：

<标签名称 class=”类名1 类名2 . . .”>

.类名{

属性：值;

}

1. 注意点：
  1. 每个html标签都有一个属性叫做class，也就是每个标签都可以设置类名
  2. 在同一个界面中的class的名称是可以重复的
  3. 在编写class选择器时一定要在id名称前面加0上”.”号
  4. 类名的命名规范和id名称的命名规范一样
  5. 类名就是专门用来给某个特定的标签设置样式的
  6. 在html中每个标签可以同时绑定多个类名
Id和class的区别
1. Id相当于人的身份证不可以重复
  class相当于人的名称可以重复
2. Id选择器和class选择器区别？
  id选择器以#为开头的
  class选择器是以.为开头的
3. 在企业开发中到底用id选择器还是用class选择器？
  id一般情况下是给js使用的，所以的除非特殊情况，否则不要使用id去设置样式
4. 在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平

后代选择器：找到指定标签的所有后代标签，设置属性
1. 格式：

标签名称1 标签名称2{

属性：值；

}

先找到名称叫标签名称1，然后再在这个标签下面去查找所有的名称叫做标签名称2的表亲啊，然后在设置属性

div ul li p{ color：red；} =》一个空格代表一个后代

1. 注意点：
  1. 后代选择器必须用空格隔开
  2. 后代不仅仅是儿子，也包括孙子/重孙子，只要最终是放到指定的标签中的都是后代
  3. 后代选择器不仅仅可以使用标签名称，还可以使用其它选择器
子元素选择器：找到指定标签中所有特定的直接子元素，然后设置属性
1. 格式：

标签名称1 >标签名称2{

属性：值；

}

先找到名称叫做“标签名称1”的标签，然后在这个标签中直接查找所有直接子元素名称叫做“标签名称2”的元素

1. 注意点：
  1. 子元素选择器只会查找儿子，不会查找其他被嵌套的标签
  2. 子元素选择器之间需要用>符号链接，并且不能有空格
  3. 子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器
  4. 子元素选择器可以通过>符号一直延续下去
后代选择器和子元素选择器
1. 后代选择器和子元素选择器的区别
  1. 后：使用空格作连接符
    子：使用>符号作连接符
  2. 后代选择器会选中指定标签中，所有的特定后代标签，也就是会选中儿子/孙子……，只要是被放到指定标签中的特定标签都会被选中
    子元素选择器只会选中指定标签中所有的特定直接标签，也就是只会特定选中特定的儿子标签
2. 共同点：
  1. 后代和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
  2. 后代和子元素选择器都可以通过各自的连接符号一只延续下去
    选择器1 选择器2 选择器3 选择器4{}
3. 企业开发中如何选择
  1. 如果想选中指定标签中的所有特定的标签，那么就使用后代选择器，如果只想选中指定标签中的所有特定儿子标签，那么就用子元素选择器

交集选择器：给所有选择器选中的标签中，相交的那部分标签设置属性
1. 格式：

选择器1选择器2{

属性：值；

}

1. 注意点：
  1. 格式那里-选择器之间不要加任何符号
  2. 选择器可以使用标签名称/ id名称/ class名称
  3. 企业开发中并不多用，仅作了解

并集选择器：给所有选择器选中的标签设置属性
1. 格式：

选择器1，选择器2{

属性：值；

}

1. 注意点：
  1. 选择器之间用逗号
  2. 选择器可以使用标签名称/ id名称/ class名称
兄弟选择器：
1. 相邻兄弟选择器：给指定选择器后面紧跟的那个选择器选中的标签设置属性
  1. 格式：

选择器1+选择器2{

属性：值；

}

1. 1. 注意点：
    1. 相邻兄弟选择器必须用+号连接
    2. 相邻兄弟选择器只能选中紧跟其后的那个标签
2. 通用兄弟选择器：
  1. 格式：

选择器1~选择器2{

属性：值；

}

1. 1. 注意点：
    1. 通用兄弟选择器必须用~连接
    2. 通用兄弟选择器选中的指定选择器后面某个选择器选中的所有标签，无论有没有被隔开都可以选中
序选择器：
1. 同级别的第几个
  1. :first-child 选中同级别的第一个标签（不区分类型）
  2. :last-child 选中同级别的最后一个标签
  3. :nth-child(n) 选中同级别的第n个标签
  4. :nth-last-child(n) 选中同级别的倒数第n个标签
  5. :only-child 选中父元素中唯一的元素
2. 同类型的第几个
  1. :first-of-type 选中同级别同类型的第一个标签
  2. :last-of-type 选中同级别同类型的最后一个标签
  3. :nth-of-type(n) 选中同级别同类型的第n个标签
  4. :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
  5. :only-of-type 选中父元素中唯一类型的某个标签
3. 补充：
  1. :nth-child(odd) 选中同级别中的所有奇数
  2. :nth-child(even) 选中同级别中的所有偶数
  3. :nth-child(xn+y) x和y用户自定义的，而n是一个计数器，从0开始递增

属性选择器：根据指定的属性名称找到对应的标签，然后设置属性
1. 格式：

[attribute]

作用：根据指定的属性名称找到对应的标签，然后设置属性

[attribute=value]

作用：找到有指定属性，并且属性的取值等于value的标签，然后设置属性

最常见的应用场景，就是用于区分input属性

Input[type=password]{}

1. 属性取值是以什么开头的
  1. [attribute|=value]CSS2
  2. [attribute^=value] CSS3
  3. 两者间的区别：
    1. CSS2中的只能找到value开头，并且value是被-和其他内容隔开的
    2. CSS3中的只要是以value开头都可以找到，无论有没有被-隔开
2. 属性取值是是以什么结尾的
  1. [attribute$=value] CSS3
3. 属性取值是否包含某个特定的值得
  1. [attribute~=value] CSS2
  2. [attribute*=value] CSS3
  3. 区别：
    1. CSS2中只能找到独立的单词，也就是包含value，并且value是被空格隔开的
    2. CSS3的只要包含value就可以找到

通配符选择器：给当前界面上所有的标签设置属性
1. 格式：

属性：值；

}

1. 注意点：
  1. 由于通配符选择器是设置界面上的所有的标签属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差，所以在企业开发中一般不会使用通配符选择器
CSS三大特性
1. 继承性：给父元素设置一些属性，子元素也可以使用
  1. 注意点：
    1. 并不是所有的属性都可以继承，只有以color/font-/text-/line开头的属性才可以继承
    2. 在CSS继承中不仅仅是儿子可以继承，只要是后代都可以继承
    3. CSS继承性中的特殊性
      1. a标签中文字颜色和下划线不能继承的
      2. h标签的文字大小是不能继承的
  2. 应用场景：设置网页上的一些共性信息，例如：网页文字颜色、字体、文字大小等内容 body{ }
2. 层叠性：CSS处理冲突的能力（覆盖）
  1. 注意点：
    1. 只有在多个选择器选中“同一个标签”然后又设置了“相同属性”，才会发生层叠性
3. 优先性：当多个选择器选中同一个标签，并且给同一个标签设置相同属性时，如何层叠就由优先级来确定
  1. 优先级判断三种方式：
    1. 间接选中就是继承：如果时间接选中，那么谁离目标标签近就听谁的
    2. 相同选择器（直接）：如果都是直接选中，并且都是同类型选择器，那么谁写在后面就听谁的
    3. 不同选择器（直接）：如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层检
      id > 类 > 标签 > 通配符 > 继承 > 浏览器默认
  2. ！important：用于提升某个直接选中的标签的选择器中的某个属性的优先级，可以将被指定的属性的优先级提升为最高
    1. 注意点：
      1. 只能用于直接选中，不能用于间接选中
      2. 通配符选中的标签也是直接选中
      3. ！important只能提升被标记指定属性的优先级，不能扩散
      4. ！important必须写在属性值的分号前面
      5. ！important前面的感叹号不能省略
  3. 权重问题：当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高
    1. 计算规则：
      1. 首先计算选择器中有多少个id，id多的选择器优先级最高
      2. 如果id的个数一样，再看类名的个数，类名个数多的优先级更高
      3. 如果类名个数一样，再看标签名称个数，标签名称多的优先级更高
      4. 如果 id、类名个数、标签名称都一样，那么就不会往下计算了，此时谁写在后面就听谁的
    2. 注意点：
      1. 权重只有在直接选中的才需要计算权重
Div和span标签：
1. Div：一般用于配合CSS完成网页的基本布局
2. Span：一般用于配合CSS修改网页中的一些布局信息
3. Div和span的区别
  1. Div会单独占领一行，而span不会
  2. Div是容器级别的标签，而span是文本级的标签
  3. 容器级的标签与文本级的区别
    1. 容器级的中可以嵌套其他所有标签
    2. 文本级的中给只能嵌套文字/超链接/图片
    3. 容器级的：div h ul ol dl li ……
    4. 文本级的：span p buis stong em ins del ……
    5. 注意点：那些是文本级的，哪些是容器级的，在企业开发中一般情况下要嵌套的都是嵌套到div中，或者按照组标签嵌套的
CSS元素显示模式：
HTML中HTML将所有标签分为两类，分别是容器级和文本级
CSS中CSS将所有标签分为两类，分别是块级元素和行内元素
1. 块级元素：会独占一行（div h ul ol dl li）
  1. 如果没有设置宽度，则默认与父元素（body）一样宽
  2. 如果设置了高度，就按照设置的来显示
2. 行内元素：不会独占一行（span buis stong em ins del）没有p
  1. 如果没有设置宽度，那么默认和内容一样宽
  2. 行内元素不可以设置宽度和高度
3. 行内块级元素：为了能够让元素既不独占一行，又能设置宽度和高度
CSS元素显示模式转换：
1. 格式：
  div{ display: inline ; }                 转换为行内
  div{ display: block ; }                  转换为块级
  div{ display: inline-block ; }      转换为行内块级
2. 快捷键：
  1. Di display: inline；
  2. Db display：block；
  3. Dib display：inline-block；
背景属性：
1. 背景颜色：Background-color：red；
2. 背景图片：background-image：url（）；
  1. 注意点：
    1. 图片地址必须放在圆括号中，可以是本地可以是网络地址
    2. 如果图片大小没有标签大小大，那么它就会自动拷贝补全
    3. 如果网页上出现了图片，那么浏览器会再次发送请求获取图片
3. 背景平铺：background-repeat：repeat/ no-repeat/ repeat-x /repeat-y ；
  1. 水平和垂直都平埔 / 不平埔 / 水平平埔 / 垂直平埔
  2. 应用场景：通过背景图片的平埔来降低图片的大小，来提升网页的访问速度
4. 背景定位：background-position：0 0；（x y）（水平方向垂直方向）
  1. 取值：
    1. 水平方向：left right cemter 例：background-position：left center；
    2. 垂直方向：top bottom center
    3. 具体像素：例如：background-position：100px 20px；
  2. 注意点：
    1. 同一个标签可以同时设置背景颜色和图片，但是图片会覆盖颜色
    2. 像素单位一定要写（px）
    3. 像素可以接受负数（-100px）
  3. 应用场景：
    1. 企业开发中为适应不同电脑的分辨率而设计一些很大的图片，但是主要信息在中间或者其他地方，而用到背景图片定位
5. 背景关联和缩写
  1. 背景属性缩写：
    1. 格式：background：背景颜色背景图片平埔方式关联方式定位方式
    2. 注意点：background中，任何一个属性都可以忽略
  2. 背景属性的关联方式：默认情况下背景图片会随着滚动条的滚动而滚动，如果不想让背景图片随着滚动条的滚动而滚动，那么我们就可以修改背景图片和滚动条的关联方式
    1. 格式：background-attachment：scroll；
    2. 取值：
      1. scroll 随着滚动条的滚动而滚动
      2. fixed 不会随着滚动条的滚动而滚动
6. 背景图片与插入图片的区别：
  1. 背景图片不会占用位置，但是插入图片会
  2. 背景图片有定位属性，但是插入图片暂时没有
  3. 插入图片的语义比背景图片的语义强，如果想要被搜索引擎收录，则建议用插入图片
7. CSS精灵图：
  1. 含义：是一种图像的合成技术
  2. 作用：可以减少请求的次数，以及可以降低服务器处理压力
  3. 使用：CSS精灵图需要配合背景图片和背景定位来设置

边框属性：
1. 边框：环绕在标签宽度和高度周围的线条
2. 格式：
  1. 同时设置四条边的边框
    1. border：边框宽度 边框样式 边框颜色
      border: 5px soild blue;
    2. 快捷键：bd+
    3. 注意点：
      1. 连写格式中颜色属性可以省略，省略之后默认就是黑色
      2. 连写格式中样式不能省略，省略之后就看不到边框了
      3. 连写格式中宽度可以省略，省略之后还是可以看到边框
  2. 分别设置四条边的边框
    1. border-top：边框宽度边框样式边框颜色
      border-right：边框宽度边框样式边框颜色
      border-bottom：边框宽度边框样式边框颜色
      border-left：边框宽度边框样式边框颜色
    2. 快捷键：bt+ / br+ / bb+ / bl+
  3. 分别设置四条边的边框
    1. Border-width：上右下左；
      Border-style：上右下左；
      Border-color：上右下左；
    2. 注意点：
      1. 三个的取值一定是要按照上右下左来赋值，而不是日常的上下左右
      2. 取值省略时的规律
        省略左》左的取值与右边一样
        省略下》下的取值与上边一样
        只有上》全都和上边一样
  4. 非连写（方向+要素）
    1. Border-left-width：20px；
      border-left-style：double；
      border-left-color：pink；
内边距属性：边框与内容的距离
1. 格式：
  1. 非连写：
    1. Padding-top: ;
      padding-right: ;
      padding-bottom: ;
      padding-left: ;
  2. 连写：
    1. Padding：上右下左；
    2. 取值省略与边框属性相似
2. 注意点：
  1. 给标签设置内边距之后，标签占有的宽度和高度会发生变化
  2. 内边距也会有背景颜色
外边距属性：标签与标签之间的距离
1. 格式
  1. 非连写
    1. margin-top: ;
      margin -right: ;
      margin -bottom: ;
      margin -left: ;
  2. 连写
    1. margin：上右下左；
2. 注意点：外边距那部分是没有背景颜色的
3. 外边距合并现象：
  1. 在垂直方向上，默认情况下外边框=距不会叠加，会合并，谁比较大就听谁的
盒子模型：
1. CSS盒子模型：仅仅是一个形象的比喻，html所有的标签都是盒子
2. 结论：
  1. 在HTML中所有的标签都可以设置
    宽度/高度==可以存放内容的区域
    内边距==填充物
    外边距==盒子与盒子之间的间隙
    边框+=手机盒子自己
3. 宽度和高度：
  1. 内容宽度和高度
    1. 通过标签的width/height设置的宽度和高度
  2. 元素的宽度和高度
    1. 宽度=左边框+左内边距+width+右内边距+右边框
    2. 高度同理
  3. 元素空间的宽度和高度
    1. 宽度 = 左外边距 + 左边距 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
    2. 高度同理
  4. 规律：
    1. 增加了padding/border之后元素的宽高也会发生变化
    2. 如果增加了padding/border之后还想保持元素的宽高，那么必须减去内容的宽高
4. 盒子box-sizing属性：
  1. 格式：box-sizing：border-box
  2. CSS3中新增了一个box-sizing属性，这个属性可以保证我们给盒子新增padding和border之后，盒子元素的宽度和高度不变
  3. Box-sizing属性是如何保证增加padding和border之后，盒子元素的宽度和高度不变：和我们前面学习的原理一样，增加padding和border之后想保证盒子元素和宽高不变，那么就必须减去一部分内容的宽度和高度
  4. box-sizing取值：
    1. lcontent-box
      元素宽高 = 边框 + 内边距 + 内容宽高
    2. border-box
      元素的宽高 = width属性
    3. 注意点：
      1. 如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，外面一个盒子也会被顶下来
      2. 如果外面的盒子不想被一起顶下来，那么可以给外面的盒子添加一个边框属性
      3. 在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离，应该首先考虑padding，其次再考虑margin
        margin本质上是用于控制兄弟关系之间的间隙的
    4. 另外注意点：
      1. 在嵌套关系的盒子中，我们可以利用margin：0 auto；的方式让里面的盒子在外面的盒子中水平居中
      2. margin：0 auto；只对水平方向有效，对垂直方向无效
5. 盒子居中和内容居中：
  1. Text-align：center和margin：0 auto；的区别
    1. Text-align：center；设置盒子中的文字/图片水平居中
    2. Margin：0 auto；让盒子自己水平居中
6. 清空默认边距：地址
  1. 为甚么：企业开发中，为了更好的控制盒子的宽高和计算盒子的默认宽高，首先要做的事就是清空默认边距
  2. 格式：
    1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{

margin:0;

padding:0

}

1. 1. 注意点：
    1. 通配符选择器会找（遍历）当前界面中所有的标签，所以性能不好，企业开发中可以从这个网址中拷贝
      http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
    2. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td

{

margin:0;

padding:0

}

1. 行高和字号
  1. 格式：line-height：100px；
  2. 注意点：
    1. 盒子高和行高不是同一个概念
  3. 规律
    1. 默认情况下文字是垂直居中的
    2. 在企业开发中我们经常将盒子的高度和行高设置为一样，那么这样就可以保证一行文字在盒子中是垂直居中的（只是一行的时候）
    3. 在企业开发中，如果一个盒子中有多行文字，那么就不可以通过行高等于盒子高来实现文字垂直居中给，只能通过设置padding来让文字居中
2. 还原字号和字号
  1. 注意点：
    1. 在企业开发中，如果一个盒子中存储的是文字，那么一般情况下会以盒子左边的内边距为基准，不会以右边的内边距为基准，因为这个右边的内边距有误差
    2. 右边的内边距的误差从何而来，因为右边如果放不下一个文字，那么文字就hi换行显示，所以文字和内边距之间的距离就会有误差
    3. 顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离
3. 文字界面：
  1. 清空所有的边距

1. 1. 从外向内，从上至下的编写网页
浮动：
1. 网页布局方式：浏览器如何对网页中的元素进行排版
  1. 标准流（文档流/普通流）排版方式
    1. 浏览器默认的排版方式
    2. CSS中将元素分为三类，分别是块级元素/行内元素/行内块级元素
    3. 在标准流中有两种排版方式
      1. 垂直排版：如果元素是块级元素，那么就会垂直排版
      2. 水平排版：如果元素是行内元素/行内块级元素，那么就会水平排版

1. 1. 浮动流排版方式：让两个元素在同一行显示
    1. 格式：float：left / right；（和父元素（body）的最左边/最右边对齐）
    2. 浮动流是一种“半脱离标准流”的排版方式
    3. 浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐
    4. 注意点：
      1. 浮动流中没有居中对齐，也就是没有center这个值
      2. 在浮动流中是不可以使用margin：0 auto；的
    5. 特点：
      1. 在浮动流中是不区分块级元素/行内元素/行内块级元素的，无论是啥都可以设置 水平排版 / 宽高
      2. 综上，浮动流元素和标准流的相似
2. 浮动元素脱标：脱离标准流
  1. 当某一个元素浮动之后，那么这个元看上去就像从标准流中删除了一样，这个就是浮动元素的脱标

1. 1. 有什么影响
    如果前面一个元素浮动了，而后面的一个元素没有浮动，那么这个时候的一个元素就会盖住后面的一个元素
2. 浮动元素的排序规则
  1. 规则：
    1. 相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的显示在后面（同是浮动不会盖住彼此）
    2. 不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
    3. 浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定
3. 浮动元素贴靠现象：
  1. 当父元素的空间足够时，则按照正常的排序

1. 1. 不够时则自动找上一个元素进行贴靠
2. 浮动元素字围现象：
  1. 文字会围住浮动元素，不会被浮动元素盖住
3. 拿到一个很复杂的界面如何入手
  1. 从上至下布局

1. 1. 从外到内布局
  2. 水平方向可以先划分为一左一右再对左边或者右边进行进一步布局
2. 浮动元素高度问题
  1. 在标准流中内容的高度可以撑起父元素的高度

1. 1. 在浮动流中浮动的元素是不可以撑起父元素的高度的
2. 清除浮动方式：
  1. 方式一：给前面一个父元素设置高度
    注意点：在企业开发中，我们能不写高度就不写，所以这种方式用得很少

1. 1. 方式二：给后面的盒子添加clear属性
    1. 属性取值：
      1. none：默认取值，按照浮动元素的排序规则来排序（左浮动找左浮动，右浮动找右浮动）
      2. left：不要找前面的左浮动元素
      3. right：不要找前面的右浮动元素
      4. both：不要找前面的左浮动和右浮动元素
    2. 注意点：
      当我们给某个元素添加clear属性之后，那么这个属性的margin属性就会失效
  2. Margin失效的原因：
  3. 方式三：隔墙法
    1. 外墙法：
      1. 在两个盒子中间添加一个额外的块级元素
      2. 给这个额外添加的块级元素设置clear：both；属性
      3. 注意点：
        外墙法它可以让第二个盒子使用margin-top属性

1. 1. 1. 1. 外墙法不可以让第一个盒子使用margin-bottom属性
    2. 内墙法：
      1. 在第一个盒子所有子元素最后添加一个额外的块级元素
      2. 给这个额外添加的块级元素设置clear：both；属性
      3. 注意点：
        外墙法它可以让第二个盒子使用margin-top属性

1. 1. 1. 1. 外墙法它可以让第一个盒子使用margin-bottom属性
    2. 区别：
      1. 外墙法不能撑起第一个盒子的高度，而内墙法可以
    3. 在企业开发中不常用隔墙法来清楚浮动
  2. 方式六：
    1. 格式：overflow：hidden；作用
    2. 可以将超出标准范围的内容裁剪掉
    3. 清除浮动
    4. 可以通过overflow：hidden；让里面的盒子设置margin-top之后，外面的盒子不被顶下来
2. 伪元素选择器：给指定标签的内容前面添加一个子元素或者给指定标签的、内容后面添加一个子元素
  1. 格式：

标签名称::before/after {

属性名称：值；

};

补充：
1. list-style：none；（把自动添加的样式去掉）
2. 在企业开发中想让多个盒子的顶部对齐，我们可以让多个盒子同时浮动
3. 注意要写一定的有好处的注释
4. 利用body设置整个界面的文字信息：文字大小文字字体文字颜色
定位流：
1. 分类
  1. 相对定位：
    1. 声明：
      position：relative；
      top：；
      left：；
      bottom：；
      right：；
    2. 定义：相对于自己之前原先在标准流中的位置进行移动
    3. 注意点：
      1. 弊端：相对定位不脱离标准流，会继续在标准流中占用一份空间
      2. 在同一个方向上的定位属性只能使用一个
      3. 由于是不脱离标准流的，所以在相对定位中是区分块级元素 /行内元素 /行内块级元素
      4. 由于是不脱离标准流的，并且相对定位的元设置margin /padding等属性的时候会影响到标准流的布局
    4. 应用场景：
      1. 用于对元素进行微调
  2. 绝对定位：
    1. 声明：
      position：absolute；
    2. 定义：相对于某些定位流的祖先元素来定位
    3. 注意点：
      1. 绝对定位的元素是脱离标准流的
      2. 绝对定位的元素是不区分块级 /行内 /行内块级元素的
      3. 如果一个绝对定位的元素以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点（随着拉伸而拉伸）
      4. 绝对定位的元素会忽略祖先元素的padding
      5. 弊端：默认情况下绝对定位的元素以body作为参考点，会因网页变化而变化
    4. 规律：
      1. 默认情况下，所有的绝对定位的元素，无论有无祖先元素都会以body为参考点
      2. 如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的这个祖先作为参考点
        只要是绝对定位的祖先元素都可以
        只要是相对 /绝对 /固定定位的都可以
        静态定位不可以
      3. 多个祖先元素时，会以离它最近的祖先元素为参考点
  3. 子绝父相：
    1. 子元素为绝对定位，父元素为相对定位
  4. 水平居中
    1. 做法：只需要设置绝对定位元素的left：50%；，然后再设置绝对定位元素的margin-left：负的元素宽度的一半px；
  5. 固定定位：
    1. 声明：position：fixed；
    2. 注意点：
      1. 固定定位的元素是脱离标准流的，不会占用标准流的空间
      2. 固定定位和绝对定位一样，不区分块级 /行内 /块级行内
      3. 不会随着滚动条的滚动而滚动
  6. 静态定位：默认情况下，元素就是静态
  7. 定位流-z-index属性：
    1. 格式：z-index：n；（n为数字）
    2. 默认情况下所有的元素都有一个默认的z-index属性，取值是0。z-index属性的作用是专门用于控制定位流元素的覆盖关系的
    3. 注意点：
      1. 默认下定位流的元素会覆盖标准流的元素
      2. 后面编写的会覆盖前面编写的
      3. 如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就是显示在上面
      4. 从父现象
      5. 如果父元素设置了z-index属性，那么子元素的就会失效，父元素设置的z-index谁大，那么它的子元素也会相应覆盖谁
a标签伪类选择器
1. 通过观察发现a标签存在一定的状态
  1. 默认状态未访问过
  2. 被访问过状态
  3. 鼠标长按状态
  4. 鼠标悬停的状态
2. 含义：a标签的伪类选择器是专门用来修改a标签不同状态的样式的
3. 格式：
  1. a：link{ } 修改从未被访问过状态下的样式
  2. a：visited{ } 修改被访问过状态下的样式
  3. a：active{ } 修改长按状态的样式
  4. a：hover{ } 修改鼠标悬停的样式
4. 注意点：
  1. a标签伪类选择器可以单独出现，也可以一起出现
  2. a标签伪类选择器如果一起出现，那么有严格的顺序，编写的顺序必须要遵守爱恨原则 love hate
  3. 如果默认状态样式和被访问样式一样，那么可以缩写，特别写的那个一样生效
5. 应用：
  1. 在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
  2. 在企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式/宽度/高度/padding/margin）
  3. 在企业开发中和a标签文字/背景相关的都写在伪类选择器中
过渡模块
1. 告诉系统哪个属性需要执行过渡效果
  1. transition-property：属性；过渡效果
  2. transition-duration：5s；过渡效果持续时间
  3. transition-delay：2s；过渡效果延迟时间（鼠标悬停几秒才开始动画）
  4. transition-timing-function：取值；告诉系统过渡效果的速度
    1. 取值：linear /ease /ease-in /ease-out /ease-in-out
2. 过渡三要素
  1. 要有属性发生变化
  2. 告诉系统哪个属性需要执行过渡效果
  3. 告诉系统过渡效果持续时长
3. 注意点：
  1. 有多个属性执行过渡效果时，只需用逗号作间隔，不要另起一个
  2. 谁更具体就谁覆盖
4. 过渡连写
  1. 格式：transition：过渡属性过渡时长运动速度延迟时间；
  2. 注意点：
    1. 和分开写一样，如果有多个效果时，同样用逗号隔开
    2. 连写时可以省略后面的两个参数，只要编写了前面的两个要素，即满足三要素
    3. 可以用all 5s；来表示多个属性运动速度/ 延迟时间 /持续时间一样
5. 弹性效果
  1. margin ns；
6. 编写套路：
  1. 不管过渡，先编写基本界面
  2. 修改我们认为需要修改的属性
  3. 再回过头去给被修改属性的那个元素添加过渡即可
2D转换模块
1. 格式：
  1. transform：rotate（45deg）； //deg是单位，代表多少度
2. 取值：
  1. rotate（n deg） //旋转：度数
  2. translate（x px，y px） //平移：水平、垂直
  3. scale（X，Y） //缩放：等于1à不变；大于1à放大；小于1à缩小
3. 注意点：
  1. 如果要进行多个转换，则用空格隔开
  2. 旋转之后本身的坐标轴方向也变了
2D转换模块-形变中心点：
1. 总结：
  1. 格式：transform-origin：center bottom； //改变旋转中心
  2. 想要围绕哪个轴旋转，那么只需要在rptate后面加上哪个轴即可
    如：transform：rotateX（45deg）； X为绕X轴旋转
2. 取值：
  1. 具体像素
  2. 百分比
  3. 特殊关键字（center……）
3. 注意点：
  1. 默认情况下，所有元素旋转都是以自己的中心点作为参考点
2D转换模块-透视属性：
1. 含义：近大远小
2. perspective：10px；
3. 注意点：
  1. 值越小，近大远小的效果越明显
  2. 透视属性必须添加倒需要呈现近大远小效果的元素的父元素上面
阴影：
1. 盒子阴影：
  1. 格式：box-shadow：水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影；
    如：box-shadow：10px 10px 10px 10px skyblue inset；
  2. 注意点：
    1. 盒子阴影有内外阴影，默认是外阴影
    2. 快速添加阴影只需编写三个参数即可
      box-shadow：水平偏移垂直偏移模糊度；
      默认情况下阴影颜色和盒子内容的颜色一致
2. 文字阴影：
  1. 格式：text-shadow：：水平偏移垂直偏移模糊度阴影颜色；
  2. 注意点：
    1. 快速添加阴影只需编写三个参数即可
      text-shadow：水平偏移垂直偏移模糊度；
      默认情况下阴影颜色和盒子内容的颜色一致
动画模块
1. 过渡和动画之间的异同：
  1. 过渡必须人为的触发才会动画
  2. 动画不需要人为的触发就看看执行动画
2. 相同点
  1. 过渡和动画都是用来给元素添加动画的
  2. 过渡和动画都是系统新增的一些属性
  3. 过渡和动画都是要满足三要素才行的
3. 三要素：
  1. 告诉系统需要执行的动画：animation-name：动画名称；
  2. 告诉系统我们需要自己创建一个名称叫做***的动画
    @keyframes 动画名称{
       from{
            margin-left：0；
       }
       to{
          margin-left：100px；
       }
    }
  3. 告诉系统动画持续时间：animation-duration：ns；
4. 其他属性：
  1. 执行动画延迟的时间：animation-delay：ns；
  2. 执行动画的速度：animation-timing-function：linear；
  3. 动画需要执行的次数：animation-iteration-count：3；
  4. 动画是否需要执行往返动画：animation-direction：normal （默认，执行一次后回到起点）/alternate（执行一次后往返回去）；
  5. 当前动画是否需要暂停：animation-play-state：paused /running；
  6. 指定动画等待状态和结束状态的样式：animation-fill-mode：none；
    none：不作改变
    backwards ：让元素等待状态的时候显示动画的第一帧的样式
    forwards ：让元素结束状态保持动画最后一帧的样式
    both：上两者的结合
5. 动画是有一定的状态的
  1. 等待状态
  2. 执行状态
  3. 结束状态
6. 动画连写格式：
  animation：动画名称动画时长动画运动速度延长时间执行次数往返动画；
7. 动画简写：animation：动画名称动画时间；
3D模块
1. 格式： transform-style：preserve-3d；
2. 注意点：
  1. 默认情况下元素都是2D展现的，想要让某个元素呈3D效果，只需要给他的父元素添加一个transform-style属性，然后设置为preserve-3d即可
  2. 只要父元素被拉伸了子元素也会被拉伸
  3. 动画中如果有和默认样式中同名的属性，会覆盖默认样式中同名的属性
  4. 在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面
背景
1. 背景尺寸属性：
  1. 背景尺寸属性是CSS3中新增的一个属性，专门用于设置背景图片大小
  2. 格式：background-size：宽度高度；
  3. 取值：
    1. 具体像素：100px 100px
    2. 百分比：50% 50%（当前背景图片的参数所占的比例）
    3. 等比拉伸：auto 100px / 100px auto
    4. cover：告诉系统需要等比拉伸，直到拉伸到高度和宽度都填满
    5. contain：告诉系统需要等比拉伸，直到高度或者宽度拉伸到填满
2. 背景图片定位区域属性：
  1. 告诉系统背景图片从什么区域开始显示，默认情况下是从padding区域开始显示
  2. 格式：background-origin：
  3. 取值：
    1. border-box：边缘
    2. content-box：内容
3. 背景绘制区域属性：
  1. 专门用于指定从哪个区域开始绘制背景的，默认情况下回从border区域开始绘制
  2. 格式：background-clip：
  3. 取值：
    1. padding-box
    2. border-box
    3. content-box
4. 多重背景图片
  1. 注意点：
    1. 多张背景图片用逗号隔开就好
    2. 先添加的背景图片会覆盖后添加的图片
    3. 建议在编写多重背景时拆开编写
CSS书写格式：
1. 位置：
  1. 行内样式：可以直接将CSS代码写到开始标签中
  2. 内嵌样式：可以写在head标签中的style标签中
  3. 外链样式：可以单独新建一个.css文件，把CSS代码写到这个文件中，然后通过link标签把这个文件和.html文件关联起来
  4. 导入样式：可以单独新建一个.css文件，把CSS代码写到这个文件中，然后通过@import把这个文件和.html文件关联起来
2. 注意点：
  1. 企业开发中一般都用外链样式，为了方便阅读，代码简便
  2. @import有兼容问题
    外链样式在显示界面的时候，先会加载CSS样式，再加载结构，所以用户看到界面时一定已经设置了样式
    导入样式显示时，会先加载结构，影响用户的第一感觉
创建网页：
1. 步骤：
  1. 创建站点文件夹，并且创建一些子文件夹和子文件
  2. 重置所有默认样式和设置一些全局样式，并且将设置样式的css文件和对应的界面关联起来
2. 注意点：
  1. 不要出现中文
  2. 注释：选中文字然后ctrl+shift+/
  3. 当子元素图片宽度大于父元素时，不能用margin：0 auto；或者text-align：center；让图片居中，
  4. 可以使用定位流来让图片居中，但是定位流的弊端也很明显，需要写三行代码，还要知道宽度
  5. 可以使用奇淫技巧——》（父元素）text-align：center；和（自己）margin：0 -100%；两者结合起来
  6. 把正方形变圆：border-radius：50%
  7. opacity：0 或者1；设置元素的透明度，子元素也会透明
  8. 符号“>”àà&gt
  9. 清除超链接下划线：text-decoration：none；
  10. 自定义光标样式标签：
    cursor：url（‘样式‘），default；
    取值：point…

以上便是个人自学一个月的HTML的笔记，可能有一些地方理解不到位，欢迎指出！

orange_idea

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML自学笔记（从零开始）

HTML+CSS网页设计自学课程笔记>HTML<URL拆分： http://URL协议类型 127.0.0.1 服务器IP地址 :80 服务器的端口号 index.html 需要访问的资源名称（当我们通过IP地址和端口号找到对应的服务器之后，需要通过资源名称告诉服务器，我们需要获取服务器上的哪个资源）能用记事本打开并且正常显示的都是纯文本文件 HTML的作用：专门描述文本语义的。（命名文件时千万不要用中文，要用英文或者拼音）虽然我们利用<h..
复制链接

扫一扫