HTML、CSS知识点汇总_html、css核心考点-CSDN博客

本文链接：https://blog.csdn.net/m0_68054161/article/details/141095360

HTML：Hyper Text Markup Language 超文本标记语言；定义网页中有什么，结构。
CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子，样式。
文件名：名称.扩展名(后缀名)。
扩展名：决定了文件被什么应用程序打开。
元素展示到页面中的效果，应该由CSS决定。所有元素与展示效果无关。
语义化的作用：为了搜索引擎优化（SEO）。为了让浏览器理解网页，阅读模式、语音模式。
空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格。（特例，在pre元素中的内容不会出现空白折叠，它有一个默认的css属性。）
实体字符：< >   © &
绝对路径：当跳转目标和当前页面的协议相同时，可以省略协议（例如：href=“//www.baidu.com”）。
相对路径：以./开头，./表示当前资源所在的目录，可以书写../表示返回上一级目录，相对路径中./可以省略。
布尔属性，在HTML5中，可以不用书写属性值。

video标签的兼容性写法(部分浏览器，只有静音情况下可以自动播放)。

<video controls autoplay muted loop style="width:500px;">
    <source src="media/open.mp4">
    <source src="media/open.webm">
    <p>
        对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器
    </p>
</video>

语义化容器元素

header: 通常用于表示页头，也可以用于表示文章的头部
footer: 通常用于表示页脚，也可以用于表示文章的尾部
article: 通常用于表示整篇文章
section: 通常用于表示文章的章节
aside: 通常用于表示侧边栏
nav: 通常用于表示导航

元素包含关系

版本一
1. 容器元素中可以包含任何元素
2. a元素中几乎可以包含任何元素
3. 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素
版本二
块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

外部样式表的优势：外部样式可以解决多页面样式重复的问题，便于复用。有利于浏览器缓存，从而提高页面响应速度。利于代码分离（HTML和CSS），更容易阅读和维护。
em：相对单位，相对于父元素的字体大小。rem：相对单位，相对于根元素的字体大小。

伪类选择器，选中某些元素的某种状态。

1）link: 超链接未访问时的状态
2）visited: 超链接访问过后的状态
3）hover: 鼠标悬停状态
4）active：激活状态，鼠标按下状态
爱恨法则：love hate

声明冲突：同一个样式，多次应用到同一个元素。

层叠：解决声明冲突的过程，浏览器自动处理（权重计算）。

一、比较重要性（重要性从高到底）
1.作者样式表中的!important样式
2.作者样式表中的普通样式
3.浏览器默认样式表中的样式

二、比较特殊性
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（x x x x）
1. 千位：如果是内联样式，记1，否则记0
2. 百位：等于选择器中所有id选择器的数量
3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量

三、比较源次序
代码书写靠后的胜出

继承：子元素会继承父元素的某些CSS属性。通常，跟文字内容相关的属性都能被继承。
渲染某个元素的前提条件：该元素的所有CSS属性必须有值。
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程。

特殊的两个CSS取值。

inherit：手动（强制）继承，将父元素的值取出应用到该元素
initial：初始值，将该属性设置为默认值

例：background: initial;

属性值计算过程:

一、确定声明值
参考样式表（作者样式表、浏览器默认样式表）中没有冲突的声明，作为CSS属性值

二、层叠冲突
对样式表有冲突的声明使用层叠规则（比较重要性、比较特殊性、比较源次序），确定CSS属性值

三、使用继承
对仍然没有值的属性，若可以继承，则继承父元素的值

四、使用默认值
对仍然没有值的属性，使用默认值

浏览器默认样式表和css属性默认值不是一回事。

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

1. 行盒，display等于inline的元素，行盒在页面中不换行。
2. 块盒，display等于block的元素，块盒独占一行。

浏览器默认样式表设置的块盒：容器元素、h1~h6、p
浏览器默认样式表设置的行盒：span、a、img、video、audio

盒子的组成部分，无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：

1.内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒(content-box)

2.填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding: 简写属性
padding: 上 右 下 左
填充区 + 内容区 = 填充盒(padding-box)

3.边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style
边框宽度：border-width
边框颜色：border-color
边框 + 填充区 + 内容区 = 边框盒(border-box)

4.外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin

box-sizing: border-box;

行盒的盒模型显著特点

1.盒子沿着内容沿伸

2.行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。

3.内边距（填充区）
水平方向有效，垂直方向不会实际占据空间。

4.边框
水平方向有效，垂直方向不会实际占据空间。

5.外边距
水平方向有效，垂直方向不会实际占据空间。

6.display：inline;

行块盒的盒模型显著特点

1.不独占一行

2.盒模型中所有尺寸都有效

3.display：inline-block;

空白折叠，发生在行盒（行块盒）内部