本文深入讲解HTML和CSS的基础知识，包括HTML元素、属性、文档结构、超链接、图像及多媒体处理，以及CSS的选择器、样式声明、盒模型、布局规则等内容，是前端开发者的必备指南。
HTML 笔记
注释
可用ctrl+?生成
<!-- 注释内容 -->
元素
<a>内容</a>
超链接
<a href="https://www.baidu.com" title="baidu">百度</a>
属性的种类
全局属性：title
局部属性:
元素的种类
空元素：没有结束标记
<meta charset="UTF-8">
根元素
<html lang="en">
元素的嵌套
父元素
子元素
祖先元素
后代元素
兄弟元素
标准文档结构
当前文档使用最新的HTML标准（目前是HTML5）
<!DOCTYPE html>
在HTML5中根元素可以不写
lang属性：全局属性，表示元素内容使用自然语言的类别
<html lang="cmn-hans">
文档头：不会显示到页面上
<head>
</head>
文档元数据
charset:指定网页编码信息
name & content:视窗相关设置
title:标题
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0">
<title>Document</title>
文档体
<body>
</body>
语义化
-
每个标签都有独特的含义
a元素：超链接
p元素：段落
h1元素：一级标题 -
标签与展示效果无关
元素展示的效果只由css决定
浏览器会根据标签类型使用默认css效果
元素的选择只取决于内容的含义
文本元素
html5元素周期表：http://www.xuanfengge.com/funny/html5/element/
h
h1~h6快速生成
h$*6>{$级标题} + tab
p
表示段落（paragraphs）
span[无语义]
包裹容器的元素，仅用于设置样式
span和某些元素不会独占一行
pre
预格式化文本元素
空白折叠：在源码中连续出现的空白字符（tab，space，enter）只会折叠为一个空格
在pre元素中的内容会按源码格式显示
通常用于显示代码
HTML实体
实体字符(HTML Entity)
用于在页面中显示特殊符号
- $单词
- $#数字
- &it <
- > >
-   空格
- & &
超链接
a元素
herf属性
- 跳转到某个页面
<a herf="https://www.baidu.com">百度</a>
- 跳转到某个锚点(锚链接)
<a herf="#233">233</a>
<h1 id="233">233</h1>
<a herf="#">回到顶部</a>
id:全局属性，表示元素的标号
- 功能链接(要有对应软件支持)
- 执行js代码
- 发送邮件
- 打电话
target属性
表示窗口跳转位置
target的值:
_self:当前窗口打开(默认)
_blank:新建窗口打开
路径(url地址)
协议名://主机名:端口号/路径
相同的可以省略
相对路径用./开头(可省略)
./表示当前位置
…/表示上一级路径
图片元素(img)
src属性：图片的地址
alt属性：图片失效时显示的文字
和a元素连用
<a herf="">
<img src="" alt="">
</a>
利用map链接图片的局部
<img usingmap="233" src="" alt="">
<map name="233">
<area shape="区域形状" coords="关键点坐标" herf="" alt="" targe="">
</map>
利用figure描述图片
figcaption表示标题
<figure>
<a>
<img src="">
</a>
<figcaption>
<h1>233</h1>
</figcaption>
<p>
23333
</p>
</figure>
多媒体元素(html5特有)
video和audio几乎一样
<video>
<source src="233.mp4">
<source src="233.webm">
</video>
<audio controls="controls" autoplay></audio>
- 布尔属性：只有不写和取值为属性名两种选择
controls：控制是否显示播放控件
autoplay：自动播放
muted：静音播放
loop：循环播放
列表元素
有序列表
ol：order list
li：list item
<ol>
<li>表项1</li>
<li>表项2</li>
<li>表项3</li>
</ol>
type属性:编号类型
1 表示阿拉伯数字
i 表示罗马数字
a 表示字母(小写)
reversed属性：布尔属性，是否颠倒显示
无序列表
<ul>
<li>表项1</li>
<li>表项2</li>
<li>表项3</li>
</ul>
定义列表
dl：definition list
dt：definition title
dd: definition description
<dl>
<dt>HTML</dt>
<dd>
超文本标记语言，XXXXXX
</dd>
</dl>
容器元素
容器元素：该元素代表一个块区域，内部用于放置其他元素
div元素(没有语义)
语义化容器：
header: 通常用于表示页头，也可以用于表示文章的头部
footer: 通常用于表示页脚，也可以用于表示文章的尾部
article: 通常用于表示整篇文章
section: 通常用于表示文章的章节
aside: 通常用于表示侧边栏或附加信息
CSS笔记
css规则
css规则 = 选择器 + 声明块
简单选择器
用于选中元素
- id选择器
<style>
#test{
color：red
}
</style>
<h1 id="test"></h1>
- 元素选择器
<style>
h1{
color：red
}
</style>
<h1 class="sub"></h1>
PS:
::first-letter:选中内容中第一个字符
h1::first-letter
- 类选择器
<style>
.sub{
color：red
}
</style>
<h1 class="sub"></h1>
声明块
出现在大括号中
声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。
css书写位置
- 内部样式表
- 书写在style元素中
- 一般放在head里面
- 内联样式表，元素样式表
- 直接书写在元素的style属性中
- 外部样式表
- 将样式书写到独立的css文件中。
- 一般放在head里面
<link rel="stylesheet" herf="css的地址">
常见样式声明
- color
元素内部的文字颜色
-
预设值：定义好的单词
-
色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达。
rgb表示法：
rgb(0, 255, 0)
hex（16进制）表示法：
#红绿蓝
橙 | #ff4400 | #f40
黑 | #000000 | #000
白 | #ffffff | #fff
红 | #ff0000 | #f00
绿 | #00ff00 | #0f0
蓝 | #0000ff | #00f
紫 | #f0f
青 | #0ff
黄 | #ff0
灰 | #ccc
- background-color
元素背景颜色
- font-size
元素内部文字的尺寸大小
px：像素，绝对单位，简单的理解为文字的高度占多少个像素
em：相对单位，相对于父元素的字体大小
- 每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。
- font-weight
文字粗细程度，可以取值数字，可以取值为预设值
不加粗：nomal
加粗:blod
strong元素是默认加粗
- font-family
文字类型
必须用户计算机中存在的字体才会有效。
使用多个字体，以匹配不同环境
sans-serif，非衬线字体(写在最后保险)
- font-style
字体样式，通常用它设置斜体
i元素，em元素，默认样式是倾斜字体
- text-decoration
文本修饰，给文本加线。
a元素默认下划线
s元素(过期的内容)和del元素(错误的内容)默认中划线
- text-indent
首行文本缩进
值可以是px或em
- line-height
每行文本的高度
该值越大，每行文本的距离越大。
设置行高为容器的高度，可以让单行文本垂直居中
值可为纯数字，表示相对于当前元素的字体大小
- width
宽度(px&em)
- height
高度(px&em)
- letter-space
文字间隙(px&em)
- text-align
元素内部文字的水平排列方式
left:靠左
center:居中
right：靠右
- min-width
最小宽度：min-width
最大宽度：max-width
选择器plus
- 通配符选择器
选择所有元素
*{
}
- 属性选择器
根据属性名和属性值选中元素
[herf]{
}
[href="https://www.baidu.com"]{
}
- 伪类选择器
选中某些元素的某种状态
hover：鼠标指向元素时的状态
div:hover{
}
avtive：鼠标点击元素时的状态
p:active{
}
link:超链接为访问过时的状态
a:link{
}
visited:超链接访问过后的状态
a:visited{
}
由于优先级的原因，书写顺序为link->visited->hover->active
nth-child(x):第x个子元素
{
a:nth-child(6){
}
x可以为数字,也可以为2n+1,表示3、5、7...
}
4. 伪元素选择器
```css
span::before{
content:添加的内容
}
span::after{
content:添加的内容
}
<p>3333<span>222</span>3333</p>
选择器的组合
- 并且 p.red 选中有class为red的p元素
.red即表示class=“red”
- 后代元素 —— 空格
- 子元素 —— >
- 相邻兄弟元素 —— +
- 后面出现的所有兄弟元素 —— ~
选择器的并列
多个选择器, 用逗号分隔
a,p,div{
}
层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）
1. 比较重要性
- 作者样式表中的!important样式
color: red !important
- 作者样式表中的普通样式
- 浏览器默认样式表中的样式
重要性 1 > 2 > 3
2. 比较特殊性
看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数
- 千位：如果是内联样式，记1，否则记0
- 百位：等于选择器中所有id选择器的数量
- 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位：等于选择器中所有元素选择器、伪元素选择器的数量
3. 比较源次序
代码书写靠后的胜出
应用
重置样式表
书写一些作者样式，覆盖浏览器的默认样式
常见的重置样式表：normalize.css、reset.css、meyer.css
继承
子元素会继承父元素的某些css属性
通常关于文字样式的都可继承
属性值的计算过程
一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件：该元素的所有CSS属性必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程
-
确定声明值：参考样式表中没有冲突的声明，作为css的属性值
-
层叠冲突：确定声明冲突的属性值
-
对仍然没有值的属性，若有可继承的值，则继承父元素的属性
-
使用css的默认值
特殊的两个CSS取值：
-
inherit：手动（强制）继承，将父元素的值取出应用到该元素
-
initial：初始值，将该属性设置为默认值
盒模型
box：每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
- 行盒，display等于inline的元素
- 块盒，display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio
盒子的组成部分
无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：
- 内容 content
width、height，设置的是盒子内容的宽高
- 填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding: 简写属性
上 右 下 左/上 左右 下/上下 左右/上下左右
- 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style
边框宽度：border-width
边框颜色：border-color
上面四个都是语法糖，每个都控制4个方向
- 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
margin: 简写属性
改变宽高范围
可用box-sizing设置
border-box:边框+填充+内容的总宽高
content-box:单独设置内容(默认)
改变背景覆盖范围
可以background-clip设置
border-box(默认)
content-box
padding-box
内容溢出边框盒后的处理方式
可以overflow设置(或overflow-y和overflow-x分别设置)
visiable:可见
hidden:隐藏
scroll:生成滚动条
auto:需要时出现滚动条
可用text-overflow=ellipsis将单行溢出文本变为省略状态(abc…)
断词规则
可以word-break设置
会影响文字在什么位置被截断换行
normal:CJK字符(文字位置截断)，非CJK字符(单词位置截断)(默认)
break-all:所有字符都在文字处截断
keep-all:所有文字都在单词之间截断(在空格的地方截断)
空白处理
white-space: nowrap
强制不换行
行盒特点
-
盒子沿着内容沿伸
-
行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
- 内边距(填充区) & 边框 & 外边距
水平方向占据空间，垂直方向不会占据空间。
行块盒
display：inline-block 的盒子
-
不独占一行
-
盒模型中所有尺寸都有效
- 空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间
可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img、video、audio
绝大部分可替换元素均为行盒,但盒模型中所有尺寸都有效。
可用object-fit设置可替换元素填充比例
fill：填充满
contain：等比例填充，多余的地方为空白
常规流
盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
常规流布局
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
绝大部分情况下：盒子的包含块，为其父元素的内容盒
块盒
- 每个块盒的总宽度，必须刚好等于包含块的宽度
width的默认值是auto
margin的取值也可以是auto，默认值0
auto：将剩余空间吸收掉
width吸收能力强于margin:当margin和width都为auto时,margin为0
若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收
margin-left吸收能力等于margin-right:在常规流中，块盒在其包含快中居中，可以先定宽、然后左右margin设置为auto。
- 每个块盒垂直方向上的auto值
height:auto(适应内容的高度)
margin:auto(表示0)
- 百分比取值
padding、width、margin可以取值为百分比
以上的所有百分比相对于包含块的宽度。
高度的百分比：
1） 包含块的高度是否取决于子元素的高度，设置百分比无效
2） 包含块的高度不取决于子元素的高度，百分比相对于父元素高度
- 上下外边距的合并
两个常规流块盒，上下外边距相邻，会进行合并。实际外边距为两个外边距取最大值。
浮动
修改float属性值为：
left:左浮动，元素靠上靠左
right:右浮动，元素靠上靠右
none:默认值，不浮动
- 当一个元素浮动后，元素必定为块盒(更改display属性为block)
- 浮动元素的包含块，和常规流一样，为父元素的内容盒
盒子尺寸
- width为auto时，适应内容宽度
- height为auto时，与常规流一致，适应内容的高度
- margin为auto，为0.
- 边框、内边距、百分比设置与常规流一样
盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子考上靠右排列
- 浮动盒子在包含块中排列时，会前面的避开常规流块盒
- 常规流块盒在排列时，无视前面的浮动盒子
- 行盒在排列时，会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。
高度坍塌
高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
清除浮动，涉及css属性：clear
默认值：none
left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
div::after{
content: "";
display: block;
clear: both;
定位
定位：手动控制元素在包含块中的精准位置
涉及的CSS属性：position
position属性
static，静态定位（不定位,默认）
relative：相对定位
absolute：绝对定位
fixed：固定定位
一个元素，只要position的取值不是static，认为该元素是一个定位元素。
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档流中的元素摆放时，会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时，会忽略脱离了文档流的元素
相对定位
不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。
可以通过四个CSS属性对设置其位置：
left
right
top
bottom
盒子的偏移不会对其他盒子造成任何影响。
当有矛盾时，只执行left和top
绝对定位
宽高为auto，适应内容
包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）
固定定位
其他情况和绝对定位完全一样。
包含块不同：固定为视口（浏览器的可视窗口）
定位下的居中
某个方向居中：
- 定宽（高）
- 将左右（上下）距离设置为0
- 将左右（上下）margin设置为auto
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖
补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 没有外边距合并
更多的选择器
更多伪类选择器
- first-child
选择第一个子元素
first-of-type，选中子元素中第一个指定类型的元素
<div>
<a>2</a>
<li>3</li>
</div>
li:first-child 选不到li
li:first-of-type 可以选到li
- last-child
选择最后一个子元素
- nth-child
选中指定的第几个子元素
even：关键字，等同于2n
odd: 关键字，等同于2n+1
- nth-of-type
选中指定的子元素中第几个某类型的元素
更多的伪元素选择器
- first-letter
选中元素中的第一个字母
- first-line
选中元素中第一行的文字
- selection
选中被用户框选的文字
更多的样式
透明度
-
opacity，它设置的是整个元素的透明，它的取值是0 ~ 1
-
在颜色位置设置alpha通道(rgba)
鼠标
使用cursor设置
改变光标样式
cursor: url("233.ico"),auto;
盒子隐藏
-
display:none，不生成盒子
-
visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。
背景图
- 和img元素的区别
img元素是属于HTML的概念
背景图属于css的概念
当图片属于网页内容时，必须使用img元素
当图片仅用于美化页面时，必须使用背景图
- 涉及的css属性
- background-image
background-image: url("233.img");
- background-repeat
默认情况下，背景图会在横坐标和纵坐标中进行重复
no-repeat:不重复
repeat-x:x方向重复
repeat-y:y方向重复
- background-size
设置背景图尺寸
contain:完整显示，不改变图片比例，也许不会填满盒子
cover:填满盒子，不改变图片比例，也许不会完整显示
数值或百分比:横向比例，纵向比例
background-size:100% 20px
- background-position
设置背景图的位置。
left/right/center + top/bottom/center
也可以只写一个center
数值或百分比
- background-attachment
控制背景图是否固定
fixed:将背景图固定于视口
- 背景图和背景颜色混用
设置了background-color时，没有背景图的地方用颜色填充
- 速写（简写）background
background: url("img.jpg") no-repeat center 50%/100% fixed #000;
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
