作者的话：仅记录学习过程中容易忘记的特性，要了解更多官方信息最好去往MDN
1. html元素参考
HTML 元素参考 - HTML（超文本标记语言） | MDN
html元素常用的就几个，不会的直接去MDN搜索。
2. 相对路径
.
代表当前文件夹（1个
.
），可以省略 ./img
..
代表上级文件夹（2个
.
） ../上层文件夹/img
3. 跳转元素：<a>
◼
在网页中我们经常需要
跳转到另外一个链接
，这个时候我们使用
a元素
；
◼
HTML <a> 元素
（或称锚（anchor）元素）：
定义
超链接
，用于
打开新的URL
；
◼
a元素有两个常见的属性：
href
：Hypertext Reference的简称
✓ 指定要打开的URL地址；
✓ 也可以是一个本地地址；
target
：
该属性指定在何处显示链接的资源。
✓ _self：默认值，在当前窗口打开URL；
✓ _blank：在一个新的窗口中打开URL；
✓
a元素target的其他值，
不常用
_parent：在父窗口中打开URL
_top：在顶层窗口中打开URL
锚点链接可以实现：跳转到
网页中的具体位置
◼
锚点链接有两个重要步骤：
在要跳到的元素上
定义一个id属性
；
定义
a元素
，并且a元素的
href指向对应的id
；
实现点击图片跳转 ：
4. iframe元素
利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档
◼
frameborder属性
用于规定是否显示边框
✓
1：显示
✓
0：不显示
<body>
<iframe src="https://www.taobao.com" frameborder="1"></iframe>
<iframe src="http://www.baidu.com" frameborder="1"></iframe>
<iframe src="http://www.kaola.com" frameborder="1"></iframe>
</body>
5. 全局属性
有很多，参考MDN：
6. 字符编码
计算机是干什么的?
计算机一开始发明出来时是用来
解决数字计算
问题的，后来人们发现，计算机还可以做更多的事，例如
文本处理
。
但计算机其实挺笨的，它只“认识”010110111000…这样由
0和1两个数字组成的二进制
数字；
这是因为
计算机的底层硬件实现就是用电路的开和闭
两种状态来表示0和1两个数字的。
因此，计算机只可以直接存储和处理二进制数字。
◼
为了在计算机上也
能表示、存储和处理像文字、符号等等之类的字符
，就必须将这些
字符转换成二进制
数字。
当然，肯定不是我们想怎么转换就怎么转换，否则就会造成同一段二进制数字在不同计算机上显示出来的字符不一样的情况，
因此必须得定一个统一的、标准的转换规则
（先输入再输出）
7. CSS样式应用到元素上
CSS提供了3种方法，可以将CSS样式应用到元素上：
内联
样式（inline style）
内部
样式表（internal style sheet）、
文档
样式表（document style sheet）、
内嵌
样式表（embed style sheet）
外部
样式表（external style sheet）
//1. 内联样式
<div style="color:aliceblue;font-size:20px;"></div>
//2. 内部样式
<style>
.box {
margin: 20px;
}
</style>
//3. 外部样式
<link rel="stylesheet" gref="./css/styles.css">
可以在style元素或者CSS文件中使用@import导入其他的CSS文件
8. CSS官方文档
All Standards and Drafts - W3C
推荐文档地址：
9. 颜色RGB的表达方式
RGB颜色可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示。
◼
方式一：十六进制符号：
#RRGGBB[AA]
R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；A是可选的。
✓
比如，#ff0000等价于#ff0000ff；
◼
方式二：十六进制符号：
#RGB[A]
R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；
三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。
✓
比如，#f09和#ff0099表示同一颜色。
四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。
✓
比如，#0f38和#00ff3388表示相同颜色。
◼
方式三：函数符：
rgb[a](R, G, B[, A])
R（红）、G（绿）、B （蓝）可以是<number>（数字），或者<percentage>（百分比），255相当于100%。
A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。
10. line-height
行高的严格定义是：两行文字基线（baseline）之间的间距
基线（baseline）：
与小写字母x最底部对齐的线
注意区分height和line-height的区别
height
：元素的整体高度
line-height
：元素中每一行文字所占据的高度
◼
应用实例：假设div中只有一行文字，如何让这行文字
在div内部垂直居中
让line-height等同于height
11. CSS选择器
1）通用选择器（universal selector）
所有的元素都会被选中;
◼
一般用来给所有元素作一些通用性的设置
比如内边距、外边距;
比如重置一些内容;
2）简单选择器
简单选择器是开发中用的最多的选择器:
元素选择器（type selectors）
, 使用
元素的名称
;
类选择器（class selectors）
, 使用
.类名
;
id选择器（id selectors）
, 使用
#id
;
一个HTML文档里面的id值
是唯一的，不能重复
id值如果由多个单词组成，单词之间可以用
中划线-、下划线_连接
，也可以使用
驼峰标识
最好
不要用标签名作为id值
3）后代选择器
后代选择器一: 所有的后代(直接/间接的后代)
选择器之间以
空格
分割
后代选择器二: 直接子代选择器(必须是直接自带)
选择器之间以
>
分割;
4）兄弟选择器
兄弟选择器一:相邻兄弟选择器
使用符号
+
连接
兄弟选择器二: 普遍兄弟选择器 ~
使用符号
~
连接
5）交集选择器
交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)
在开发中通常为了
精准的选择某一个元素;
6）并集选择器
并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)
在开发中通常为了
给多个元素设置相同的样式
;
12. 伪类
所有伪类：
◼ 1.动态伪类（dynamic pseudo-classes）
:link、:visited、:hover、:active、:focus
◼
2.目标伪类
（target pseudo-classes）
:target
◼
3.语言伪类
（language pseudo-classes）
:lang( )
◼
4.元素状态伪类
（UI element states pseudo-classes）
:enabled、:disabled、:checked
◼ 5.结构伪类（structural pseudo-classes）(后续学习)
:nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last
of-type( )
:first-child、:last-child、:first-of-type、:last-of-type
:root、:only-child、:only-of-type、:empty
◼
6.否定伪类
（negation pseudo-classes）(后续学习)
:not()
13. 伪元素
常用的伪元素有
:first-line、::first-line
:first-letter、::first-letter
:before、
::before
:after、
::after
::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)，常通过 content 属性来为一个元素添加修饰性的内容。
14. 选择器的权重
CSS的翻译是层叠样式表, 什么是层叠呢?
- 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
- 那么属性会被一层层覆盖上去;
- 但是最终只有一个会生效;
那么多个样式属性覆盖上去, 哪一个会生效呢?
- 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
- 判断二: 先后顺序, 权重相同时, 后面设置的生效;
按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）
- !important：10000
- 内联样式：1000
- id选择器：100
- 类选择器、属性选择器、伪类：10
- 元素选择器、伪元素：1
- 通配符：0
15. display属性
CSS中有个display属性，能修改元素的显示类型，有4个常用值
block
：让元素显示为块级元素
inline
：让元素显示为行内级元素
inline-block
：让元素同时具备行内级、块级元素的特征
none
：隐藏元素
16. overflow属性
用于控制内容溢出时的行为
visible
：溢出的内容照样可见
hidden
：溢出的内容直接裁剪
scroll
：溢出的内容被裁剪，但可以通过滚动机制查看
会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto
：自动根据内容是否溢出来决定是否提供滚动机制
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
