这通过一周的学习，我对前端的内容有了更加深入的了解，同时也学会了许多新知识以及应用，下面时我对知识的分享。
文章目录
一. 网页内容理解
html和css
html作用：网页中有什么东西，这个东西有什么含义
css：描述页面内东西的样式，决定页面长什么样子
执行：由浏览器内核执行代码
元素
整体 :起始标记 + 结束标记+元素内容+元素属性
- 起始标记中的a or title 表示该元素的名称，
- 元素内容往往为要显示的东西
- 元素属性描述该元素的额外信息 属性(可有多个)：属性名+属性值
- 局部属性：某些元素特有的属性 eg：herf 表示一个超链接
全局属性：全部元素都可以使用的属性 eg：title - 有些元素没有结束标记，这样的元素叫做：空元素
标准的文档结构
HTML:页面、HTML文档
1.
<!DOCTYPE html>
文档声明，告诉浏览器，当前文档使用HTML标准是HTML5.
不写文档说明，将导致浏览器进入怪异渲染模式
<html lang="en">
</html>
根元素，一个页面最多只能一个，并且该元素是其他所有元素的父元素或祖先元素。
HTML5没有强制要求书写
lang属性;language,全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。
书写英语lang=“en”
书写汉语lang=“zh-CN”(过时) lang=“cmn-hans”(现在用法)
文档头，文档头内部的内容，不会显示在页面上。
<meta>
文档的元数据：附加信息。
charmet:指定网页内容编码。(局部属性)
<title>Document</title>
网页的标题
4.
<body>
</body>
文档体，页面上所有要参与显示的元素，都应放置在文档体中
语义化
每个元素所代表的语义是为了浏览器更好的理解，而其样式应用css来改变
二. 元素了解
1. 文本元素
h元素
- h 1~6 表示1~6级标题
- h1*6>{一级标题} +tab 输出6个hi元素并且内容为花括号的内容
hKaTeX parse error: Expected '}', got 'EOF' at end of input: *6>{级标题}依次为 1 2 3 ··· - h1>{yyy}+ p>lorem 和 (h1>{yyy})+p>lorem 不同的原理类似于（）的优先级，前者表示h1的内容为{yyy}+
;后者为元素h1+
p元素
- 段落
- lorem 乱数假文 用于测试排版
<p>lorem + tab </p> p*6>lorem（可修改乱码字符长度） 不用打{} - 不可以放列表元素
span(无语义)
- 没有语义 仅用于设计样式 添加属性或css代码
- 某些元素会独占一行(p 称为块级元素)，某些元素不会(span 称为行级元素)，html5有语义化已经弃用（可用css属性更改）
pre元素
预格式化文本元素
- 空白折叠：在源代码中连续的空白字符（空格 换行 制表），在网页显示时，会被折叠成一个空白
- pre元素的内容中不会出现空白折叠，按照源代码格式显示，通常用于在网页中显示一些代码
显示代码通常外边套code元素 - 功能的本质：有默认的css属性（语义化）
- 浏览器默认有white-space:pre;属性
html实体
实体字符，HTML Entity
作用：通常用于在页面中显示一些特殊符号
格式 ：&单词; &#数字;
常用 ：小于 < 大于 > 空格 & &
a元素(超链接)
href属性
- 普通链接 http://www.yuanshen.com 跳转到另一个网站
- 锚链接 #+id 跳转到相应页面的某个位置 常用于一个页面的目录
id属性
全局属性 ：表示元素在文档中唯一的编号
定义id时要保证没有重复 <h1 id="ch1">章节1</h1>
a链接使用 <a herf="#ch1">hhhhh</a>
多个id定义：((h[id=“chKaTeX parse error: Expected '}', got 'EOF' at end of input: "]>{第章})+p>lorem1000)*6
多个a链接定义 (a[href=”#chKaTeX parse error: Expected '}', got 'EOF' at end of input: "]>{第章})*6
添加属性使用[]
id不能为纯数字
3. 功能链接
执行JS代码 hhhhh
发送邮件 mailto: 要有相应的应用程序
拨号 tel: 要有相应的应用程序
target属性
表示跳转窗口的位置
取值：
_self ：覆盖当前窗口(默认值)
_blank：打开一个新的窗口
i元素 em元素
文本内容默认为倾斜字体；
i 实际使用它表示一个图标
em 表示强调的内容
strong 元素
默认对文本有加粗
strong 表示重要，不可忽略的内容
s元素
过期的内容
2. 媒体元素
img元素
- imge的缩写，空元素
- src属性：source 其中写资源链接
alt属性：图片资源失效时 将使用该属性的文字替代图片
<img src="资源链接" alt="">
- 使用: 站内资源 和 站外资源
1）和a元素连用
点击图片跳转
2）和map元素连用
- map中name的命名：中间有一个大写字母[solarMap]（驼峰）or 用短线相连[solar-map]
- usemap属性，写在被使用的元素属性中,写法 #+name
<img usemap="#wsMap" src="" alt="">
<map name="wsMap"> </map>
map元素唯一的子元素:area
<area shape="" coords="" href="" alt="">
- shape
表示该点击区域的形状 - coords
表示该点击区域的中心坐标
如果usemap的使用对象为图片，则图片的左上角为坐标原点，向右x增加，向下y增加
测量下x，y时，两个比例都为100
圆形circle (原点坐标,半径)
矩形rect (左上角坐标，右下角坐标)
多边形poly (每个角的坐标)
3. href 点击区域后，跳转到该链接
3）和figure元素
指代，定义
作用：把图片，图片标题，文字包裹在一起，当浏览器读到图片时，就清楚他是和文字一起的
子元素:figcaption 表示指代的东西的标题
video 元素
src资源格式:后缀MP4，webm
和图片使用方式类似
controls属性:控制控件的显示，取值只有一个且为controls
某些属性只有两种状态：1为不写，2为写但内容为属性名,把这种属性叫布尔属性
在HTML5中可以不用写属性值，光写属性名
<video controls src="资源链接"></video>
audio
和video基本一致
src资源格式:后缀MP3
兼容性
- 旧版可能需要flash才能使用
- 不同浏览器支持的音视频格式可能不同
解决办法：
去掉src属性
在video中添加source这个子元素
<source src=".mp4">
<source src=".webm">
布尔属性 某些属性只有两种状态：1为不写，2为写但内容为属性名,在HTML5中可以不用写属性值，光写属性名
- controls 显示控件
- autoplay 自动播放
- muted 静音播放
- loop 循环播放
三. 元素的包含关系
以前: 块级元素可以包含行级元素，行级不可包含块级，除了a元素
现在: 包含关系由元素的内容类别决定
页面出错 可能是元素包含关系有误
总结
- 容器元素可以包含任何元素
- a元素中几乎可以包含任何元素
- 某些元素有固定的子元素
- 标题元素和段落元素不能相互嵌套，也不能包含容器元素
四.对于文件or网址的引用 我们有了对路径写法的学习
站内资源和站外资源
网站内外
绝对路径和相对路径
站内资源：相对路径or绝对路径
站外资源：绝对路径
- 绝对路径书写格式
协议名://主机名:端口号/路径
http://127.0.0.1:5500/code/test10_24.html
https://www.bilibili.com
协议名：http，https，files
主机名：域名，ip地址
端口号：http默认为80，https默认为443(默认不显示)
- 相对路径的书写
以./开头，表示当前资源所在目录
书写…/,表示返回上一目录
相对路径中./可以省略
五. 用css为网页添加样式
1. 术语解释
h1{
color: aquamarine;
background-color: antiquewhite;
text-align: center;
}
css规则= 选择器(h1) + 声明块(花括号及内部)
声明块
包含很多声明（属性），每个声明表达了某一方面的样式
2. CSS代码书写位置
- 内部样式表(类选择器)
书写在style元素中，style尽量放在head中，以便提前加载,也可放在body和head中间 - 内联样式表（与js连用）
书写在元素里面 用style属性 - 外部样式表(推荐使用)
将样式表书写到独立的css文件中
书写方式和内部样式表相同
使用这个css文件在head中添加link元素(空元素)，后使用路径写法- 可解决多页面样式重复问题
- 有利于浏览器缓存，提高响应速度
- 有利于代码分离 html和css分开
3. 选择器
- 元素选择器
- id选择器
- 类选择器
- 通配符选择器
- 表示选中所有元素，包括不显示的元素
- 属性选择器
根据 属性名 和 属性值 来选中元素
1.选中具有href属性的元素
[href]{
color:red;
font-weight:100;
}
2.选中属性值为多少的元素
[href="https://www.douyin.com"]{
color:red;
font-weight:100;
}
mdn *~+用法
6. 伪类选择器
选中某些元素的某种状态
以下为书写时应按照的顺序：
link 超链接未访问的状态
a:link{}
visited 超链接访问过后的状态
只有a链接可以使用
hover 鼠标悬停时选择
写法：a:hover{}
active 鼠标按下状态（激活状态）时选择
写法：a:active{}
都可以使用
- 伪元素选择器
before after
使用时在选择器前添加两个:
a::before
相当于在选中元素前后添加一个可以改变内容和样式的子元素
span::before{
content:"sdawda";
css属性;
}
选择器的组合
- 并且
p.red{}
选中为p元素并且类名有red的元素
a[href=···]
选中为a元素并且href=···的元素 - 后代元素加空格
祖先元素的选择器 后代元素的选择器{}
.red li{}
可以多个嵌套 后代的后代的后代
3. 子元素加>
父元素选择器>子元素选择器
.red>li{}
也可以多个嵌套
4. 相邻兄弟元素加+
兄弟元素1+下一个兄弟元素2{}
.red+.green{}
5. 兄弟元素~
选择后面所有的兄弟元素
.red~li{}
选择器的并列
多个选择器用,分隔
六. 常见的样式声明
-
color 元素内部文字的颜色
预设值：css定义好的单词
三原色 色值 ：每个颜色可以使用0-255的数字来表示- rgb表示法
rgb(红，绿，蓝) - hex(16进制表示法)
#红绿蓝（各占两位）
eg：淘宝红#ff4400 相同可简写为#f40
- rgb表示法
-
background-color
元素背景颜色 -
font-size
文字的尺寸大小
1.px 像素 文字高度占多少个像素 绝对单位
2.em 是父元素像素大小的几倍 没有设置则会继承父元素的字体大小，如果没有父元素（html），则会使用基准字号16px
3.浏览器自动为文字设置了样式 -
font-weight
文字的粗细程度，可以取值数字，也可以为单词（同颜色）
strong 默认有加粗 -
font-family
字体
必须用户计算机中存在才有效
可使用多个字体来匹配不同的环境
写法： font-family:1,2,3，···;没有1，就用2，以此类推
如果都没有则sans-serif,非衬线字体，让电脑自己选
-
font-style
字体样式，用于设置斜体
i元素 默认为倾斜字体；实际使用它表示一个图标
em元素 强调内容 -
text-decoration
文本修饰，给文本加线
del元素 废弃的内容，自动加中划线
s元素 过期的内容， 自动加中划线 -
text-indent
首行文本缩进
px 缩进几个像素
em 缩进几个当前文字 -
line-height
行高，每行文本高度，该值越大，行距越大
设置行高为容器的高度，可以让单行文本垂直居中
有多行文字尽量不使用px值
行高可以设置为纯数字，表示相对当前元素文字的大小
-
width
宽度 设置盒子的内容 -
height
高度 设置盒子的内容 -
letter-spacing
文字间隙 -
text-align
文字在水平方向的位置
可以用font简写代替font类型的css属性，可同时设置 用空格隔开
- display
设置该元素为行盒还是块盒
display默认值为inline
七 .属性值计算
属性值的计算
浏览器渲染时，依次渲染元素，顺序按照页面文档的树形目录结构进行
渲染的前提条件是：该元素的每个css属性都得有值
一个元素从所有css属性都没有值，到都有值的计算过程叫属性值的计算过程
过程：
- 确定声明值：参考样式表(浏览器默认样式表 和 作者样式表)中没有声明冲突的值作为css值
- 层叠冲突：对有冲突的属性进行层叠，确定css属性
- 继承：仍然没有值的属性，若可以继承（和文字相关的属性）则继承父元素的值
- 使用默认值：对仍没有的，使用默认值
initial ：将该属性的值设置成默认值
inherit ：强制继承父元素的属性值
1.层叠
声明冲突：同一个样式多次运用到了同一个元素
层叠：解决声明冲突的过程 浏览器自动处理（权重计算）
1).比较重要性
从高到底
- 开发者的样式表中的!important样式
- 普通样式表
- 浏览器
2).比较特殊性
几个样式重要性相同时进行
总体规则：选择器选择的范围 越窄 越特殊
具体规则：通过选择器计算出一个4位数
- 千位：如果时内联样式记作1 否则为0；
- 百位：将选择器中所有id选择器的数量
- 十位：等于选择器中类，伪，属性选择器的数量
- 个位：等于元素，伪元素选择器的数量
逢256进1
3) .比较原次序
有几个特殊性还相同
谁写的靠后 用谁
4).应用
- 重置样式
覆盖浏览器样式，之后在写一些更重要的更改 - link>visited>hover>active
2.继承
子元素会继承父元素的某些css属性
给父元素定义的css属性某些继承
通常，跟文字相关的属性都能被继承
强制继承：inherit
color:inherit;
一些不能自动继承的值也可以强制继承
八 . 盒模型
1. 盒子类型：
- 行盒 display值为inline的元素 在页面中不换行
- 块盒 display值为block的元素 在页面中独占一行
display默认值为inline
浏览器默认为块盒元素：容器元素 h1~h6 p div 行盒：span a img 媒体元素
2.盒子的组成部分
盒子都由以下内容组成，从内到外：
-
内容 content
width,height,设置盒子内容的宽高
内容 叫做 内容盒
没有设置高度时，高度会自动增加 -
填充（内边距） padding
盒子边框到盒子内容的距离
padding-left,padding-right,padding-top,padding-bottom，默认值为0；
padding速写属性：padding:上 右 下 左 （顺时针 空格隔开） ；
上下相同 左右相同时只写上 右；四个都相同只写一个值；
padding：10px 20px 30px 20px;
填充盒：填充区+内容区； -
边框 border
边框= 边框 样式(-style) + 边框厚度(-width )+ 边框颜色
默认边框样式为none，不显示；厚度为0px；没有设置颜色则为字体颜色
以上三种属性均为速写属性 可给4个方向以顺时针定义；
简写：border:10px style color;
边框盒 border-box=边框+填充盒； -
外边距 margin
边框到其他盒子的距离
margin-left,-right,-top,-bottom，默认值为0；
速写属性；
3. 行盒盒模型
常见的行盒：包含具体内容的元素 span a img video i em strong
特点
行盒沿着内容延伸，随着内容结束而结束，两个行盒会尾对头相连
- 内容改变大小
- 无法通过css改变宽高
调整行盒的宽高，应该调整字体的大小 行高 类型，间接调整行盒； - 内边距
水平边距的改变是有效的会占据空间 其他和本身行级元素内容位置会变化；竖直仅会改变背景or边框展示效果，其他和本身元素内容位置不会变化； - 边框 同 内边距
- 外边距 同 内边距
行块盒
display:inline-block;
- 不独占一行
- 所有尺寸改变都有效占据空间
空白折叠
发生在行盒（包含行块盒）内部 or 行盒之间，会折叠成一个空格
可替换元素和非可替换元素
- 页面上显示的结果就是其元素内容，这样的元素称为 非可替换元素
- 页面上显示的结果被属性值替代，这样的称为 可替换元素(部分空元素)
绝大部分为行盒 - 可替换元素类似行块盒，尺寸改变都有效
没有手动设置高度 其会以比例自适应增加
object-fit 属性对图片 视频比例 范围的改变
4. 应用
改变宽高范围
width 和 height 通常设置的是内容盒
- 计算
测量的是边框盒的长 宽 ，应用边框盒—内边距 - css3
box-sizing属性 width 和 height的影响范围可由该属性改变
eg：box-sizing:border-box;这设置的是边框盒
改变背景覆盖范围
默认下，背景覆盖边框盒
通过属性 background-clip 可对背景覆盖的范围修改
溢出处理
overflow属性，控制内容溢出边框盒后的处理方式 默认为显示
hidden visited scroll（生成滚动条 -y scroll 生成y方向的滚条 -x scroll 生成x方向的滚条 -y auto自动出现
断词规则
word-break 影响文字在什么位置被截断换行
值：
normal：普通 一个字一个字的 在一个字结束时截断；单词 在一个单词结束截断
break-all:所有字符都在结束处截断 英文变成两半
keep-all：所有都在单词间截断 中文没有空格视为一个单词
空白处理
不换行:white-space:nowrap;
溢出隐藏:overflow:hidden;
文字时溢出text-overflow:ellipsis(圆点);
只能控制单行文本；多行文本js
九.视觉格式化模型
1. 常规流布局
叫法：文档流，常规文档流，普通文档流
所有元素 默认情况下 都属于常规流布局
总体规则：块盒独占一行 行盒水平依次排列
包含块：每个盒子都有包含块 其决定了盒子的排列区域，活动范围。盒子的相对于谁的位置取决于它的包含块，相当是个坐标系左上角为原点。
绝大部分情况下，盒子的包含块为其父元素的内容盒
块盒
- 每个块盒总宽度，必须刚好等于包含块的宽度
默认情况下 width 的值为 auto（将剩余的空间吸收掉）
margin也可以是auto（将剩余的空间吸收掉），默认值为0；
当俩个都为auto时，width会优先将剩余的空间吸收掉
若规定后 宽度 边框 内边距 外边距使用后仍有剩余空间 则被margin—right默认吸收掉
margin—left margin—right 都为auto 剩余空间各占一半 边框盒居中
常规流中，块盒在其包含块中居中 可以定宽 margin—left margin—right 都为auto
-
每个块盒垂直方向上的auto值
height：auto，适应内容的高度
margin：auto，表示0 -
百分比取值
width （padding margin）（包括其高） 所有百分比相对的是包含块的宽度
height：
1）. 包含块的高度取决于子元素的总高度（没有定，根据子元素内容变化而变化），此时百分比无效
2）. 包含块的高度不取决于子元素的高度（自己给定），百分比相对于父元素的高度 -
上下外边距的合并
两个常规流块盒，上下外边距相邻，会进行合并 ，两个外边距取最大值
视频 47:49
父子元素也会合并 只要相邻。 不合并（有个东西隔开就行） 也可写成父元素的padding
2. 浮动布局
兼容性很好
修改float属性值：
- -left:左浮动 元素在包含块 靠上 再靠左 排列
- -right:右浮动 元素在包含块 靠上 再靠右 排列
- 默认值：none 就是常规流
应用
- 文字环绕
- 将元素，盒子横向排列 可以使用行块盒 也可使用浮动
浮动的基本特点
-
当一个元素浮动后，元素必定为块盒（更改display属性为block）
-
浮动元素的包含块和常规流一样 也为 父元素的内容盒
盒子尺寸
- 宽度为auto时， 表示适应内容宽度 ，而不是吸收剩余宽度
- 高度为auto时， 无论D是在什么排列方式下都是适应内容宽度
- margin为auto时，为0
- 边框 内边距，百分比设置与常规流一样
盒子排列
- 左浮动盒子：先靠上 再靠左排列 排列不下一整个重起一行
- 右浮动盒子：先靠上 再靠右排列
- 浮动盒子在包含块中排列时，会避开常规流盒子（先有常规流盒子 再有浮动盒子）；常规流盒子在排列时无视浮动盒子 无论写在哪里 都会以常规流形式排列 而浮动盒子会浮在上方（现有浮动盒子 后有常规流盒子）；排列时 按代码写的顺序来排
- 行盒排列时 会避开浮动盒子
如果文字没有在行盒中（文字在块盒），浏览器会自动生成一个行盒包裹文字 将其叫做匿名行盒
5.外边距合并不会发生在浮动盒子中
高度坍塌(常见 造成网页布局出现问题的根源)
原因：常规流盒子的自动高度 在计算时 不会考虑浮动盒子
解决方法
清除浮动，涉及css属性，（可以给没有使用float属性的元素使用 用于撑大常规流盒子） ：clear
-默认值：none
-left:清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
-right:清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
-both:清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
- 设置一个专门的内容为空元素 clear=both 解决高度坍塌
- 伪元素选择器 利用after 创建一个 content=“” clear=both display=block 的伪元素
div::after{
content:"";
display:block;
clear:both;
}
- 哪个常规流元素出现坍塌 给其加上类样式"clearfix" 使用伪元素选择器
扫一扫
761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
