文章目录
HTML
什么是语义化？
每个元素都有特定的含义(所有元素表达表达效果无关)
一个元素只有HTML是根本不可能显示的，显示全部要靠CSS
例如：
a元素：超链接
h元素：标题
p元素；段落
不同元素
h元素可以表示标题
h1h6 表示一级标题六级标题
p元素可以表示段落
lorem乱数假文：可以用来写锚定位
span元素无语义，可以用来设置样式
以前某些元素在显示的时候会独占一行(块级元素)，某些元素不会(行级元素)
但是现在HTML5已经弃用这种说法
pre元素：原模原样的猪猪
存在空白折叠，若用pre元素可以取消空白折叠；最好在外面加上<code>来告诉计算机
HTML5实体
在HTML5中存在一些元素有意义，出现混淆，用其他的来替代
href属性
1 超链接
2 锚链接(利用id属性)
target属性
表示要跳转的窗口
_self表示在当前窗口(按住ctrl键可换个窗口)
_blank表示在另一个窗口打开
绝对路径和相对路径
绝对路径的格式：协议名：//主机名：端口号/路径
相对路径：./表示当前资源所在目录
…/表示返回上一级目录
img元素
src元素表示来自那里的资源
alt元素表示后面补充
选择器(CSS规则=选择器+声明块)
选择器：帮助你精准的选中你想要的元素
简单选择器
- ID选择器
选中的是对应id值的元素(范围太小)
- 元素选择器
选中所选择的的元素(范围太大)
- 类选择器
class=“xxx” .xxx——就可以选中
- 通配符选择器
*，表示选择所有的元素
- 属类选择器(不懂)
根据属性名和属性值选中元素[]
- 伪类选择器
选中某些元素的某种状态
1）link:超链接未访问时的状态
2）visited:超链接访问过后的状态
3）hover:鼠标悬停的状态
4）active:激活状态，鼠标按下状态
爱恨法则：love hate
- 伪元素选择器(content在before才可以使用)
before
after
选择器的组合
-
并且:多个选择器不加任何的东西写在一起。p.red(连着写)
-
后代元素：元素之间用空格联系起来
后代元素与子元素不同，后代元素包含子元素
p元素里面只可以放短语(可以去mdn中搜索是否满足)
- 子元素
使用>符号将子元素联系起来，切忌与后代元素分开
- 相邻兄弟元素
使用+符号将相邻兄弟元素联系起来
- 后面出现的所有兄弟元素
使用~符号将后面的所有兄弟元素
选择器的并列
多个选择器，用逗号分隔，统一进行设置，写代码方便(本质分开书写)
更多的选择器
更多的伪类选择器
- first-child
选择第一个子元素
first-of-type,选中子元素中第一个指定类型的元素
- last-child
选择最后一个子元素
last-of-type,选中指定类型的元素的最后一个子元素
- nth-child
选中指定的第几个子元素
even: 关键字，等同于2n
odd:关键字，等同于2n+1
- nth-of-type
选中指定的子元素中的第几个某类型的元素
更多的伪元素选择器
- first-letter
选中元素中的第一个字母
- first-line
选中元素中第一行的文字
- selection
选中被用户框选的文字
选择器的练习代码1：
<!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>
<style>
/* 选中a元素，并且a元素必须是第一个子元素 */
a:first-child{
color:red;
}
/* 选中的是子元素中第一个a元素 */
a:first-of-type{
color: red;
}
/* 必须是a元素，必须是最后一个子元素 */
a:last-child{
color:lightblue;
}
/* 选中子元素中最后一个a元素 */
a:last-of-type{
color:lightblue;
}
</style>
</head>
<body>
<div>
<nav>
<p>
Lorem.
</p>
<a href="">Lorem.</a>
<a href="">Velit.</a>
<a href="">Eaque.</a>
<a href="">Tempore!</a>
<a href="">Repellat.</a>
<a href="">Illum?</a>
<a href="">Adipisci!</a>
<a href="">Dolores.</a>
<a href="">Consequatur!</a>
<a href="">Sequi.</a>
</nav>
</div>
</body>
</html>
选择器的练习代码2：
<!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>
<style>
/* 必须是a元素，必须是第五个子元素 */
/* 必须是a元素，必须是第偶数个子元素 */
/* a:nth-child(2n){
color:lightblue;
} */
a:nth-of-type(even){
color:lightcoral;
}
</style>
</head>
<body>
<nav>
<p>
Lorem ipsum dolor sit.
</p>
<a href="">Lorem.</a>
<a href="">Corrupti.</a>
<a href="">Beatae!</a>
<a href="">Aliquam!</a>
<a href="">Dolores?</a>
<p>Lorem ipsum dolor sit.</p>
<a href="">Quae?</a>
<a href="">Ex!</a>
<a href="">Voluptatum.</a>
<a href="">Expedita.</a>
<p>Lorem ipsum dolor sit.</p>
<a href="">Itaque.</a>
</nav>
</body>
</html>
选择器的练习代码3：
<!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>
<style>
li{
background: #ccc;
margin: 1em 0;
}
li:nth-child(odd){
background: #008c8c;
color: #fff;
}
</style>
</head>
<body>
<ul>
<li>Lorem.</li>
<li>Ullam!</li>
<li>Architecto?</li>
<li>Nulla.</li>
<li>Aut.</li>
<li>Aspernatur!</li>
<li>Esse.</li>
<li>Perspiciatis.</li>
<li>Nisi?</li>
<li>Ratione.</li>
</ul>
</body>
</html>
选择器的练习代码4：
<!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>
<style>
/* p::first-letter{
color: lightcoral;
font-size: 2em;
font-weight: bold;
} */
/* p::first-line{
color: #008c8c;
font-size: 2em;
font-family: initial;
} */
p::selection{
background: lightcoral;
color: #fff;
font-size: 2em;
}
</style>
</head>
<body>
<P>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut temporibus perspiciatis, sapiente adipisci laboriosam natus, labore error eveniet pariatur fugiat quia nisi harum ad hic, laudantium sint itaque provident ratione!
</P>
</body>
</html>
盒模型
box:盒子，每个元素在页面中都会生成一个矩形区域(盒子)
盒子类型
-
行盒：dispiay等于inline的元素
-
块盒：display等于block的元素
行盒可以表示位内容
行盒在页面中不换行，块盒独占一行
display的默认值为inline
浏览器默认样式设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio
盒子的组成部分
无论是行盒，还是块盒，都由下面几个部分组成，从内到外分别是：
- 内容：content
width、height设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
- 填充(内边距)：padding
盒子边框到盒子内容的距离
padding-lrft、padding-right、padding-top、padding-bottom
padding:简写属性
padding：上，右，下，左(顺时针)
填充区+内容区=填充盒 padding-box
- 边框：border
边框=边框样式+边框宽度+边框颜色
边框样式：border-style
边框宽度：border-width
边框颜色：border-color
有边框的样式才会有宽度和颜色的效果
border:0px,soild,lightblue(魔法糖)
边框+填充区+内容区=边框盒 border-box
- 外边框：margin(魔法糖)
边框到其他盒子的距离：盒子与盒子之间的距离
margin-top,margin-left,margin-right,margin-bottom
盒模型的应用
改变宽高的范围
默认情况下，width 和 height 设置的是内容盒宽高
页面重构师：将psd文件(设计稿)制作成静态页面
衡量设计稿尺寸的时候，往往使用的是边框盒，但是width和height设置的是内容盒
- 精确计算
- CSS：box-sizing(可以改变默认的盒子，转换为边框盒)
改变背景覆盖范围
默认情况下，背景覆盖边框盒
使用background-clip去选择想要的盒子，从而改变背景覆盖的范围
溢出处理
overflow，控制内容溢出边框盒后的处理方式(可以设置滚动条scroll)
断词规则
word-break，会影响文字在什么位置被截断
normal: 普通。CJK字符(文字位置截断)，非CJK字符(单词位置截断)
break-all:截断所有，所有字符都在文字处截断
keep-all:保持所有，所有文字都在单词之间截断
空白处理
white-space:nowrap(空白折叠仍然存在但是不会换行)
空白折叠white-space：pre
white-space:nowrap;——存在空白折叠但是不会换行
overflow:hidden;——溢出的部分隐藏
text-overflow；ellipsis;——多余的部分用三个点点代替
行盒的盒模型
常见的行盒：包含具体内容的元素
span,strong,em,i,img,video,audio
行盒的特点；
- 盒子沿着内容延伸
- 行盒不能设置宽高
调整行盒的宽高，应该使用字体的大小、行高、字体的类型间接调整
- 内边距(填充区)
水平方向有效，垂直方向仅会影响背景，不会实际占据空间
- 边框
水平方向有效，垂直方向仅会影响背景，不会实际占据空间
- 外边框
水平方向有效，垂直方向仅会影响背景，不会实际占据空间
行块盒
display:inline-block的盒子
- 不会独占一行
- 盒模型中所有的尺寸都有效
空白折叠
空白折叠，发生在行盒(行块盒)内部或(行块盒)之间
可替换元素 和 非可替换元素
大部分元素，页面上显示的效果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素的属性，称为可替换元素
可替换元素：img,video,audio(object-fit)
绝大部分可替换元素均为行盒
可替换元素类似与行块盒，盒模型中所有尺寸都有效
扫一扫
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
