2020-08-02

新人第一周知识点总结
1.HTML：
根据w3c定义，全称Hyper Text Markup Language 。 用于定义文档的内容结构。 中文全称：超文本标记语言。
2.CSS：
根据w3c定义，全称Cascading Style Sheets。 页面表现的基础，可以控制布局，控制元素的渲染。 用于定义HTML文档的样式（外观）。 中文全称：层叠样式表。

3.HTML和CSS之间的关系：        根据w3c定义，前者用于定义文档的内容结构。后者用于定义前者文档的样式外观，页面表现的基础，可以控制布局，控制元素的渲染。
4.HTML元素的组成部分：
    标记名，属性，元素内容共同决定了一个元素的显示内容和行为

5.HTML注释：
HTML注释的书写格式： 浏览器解析HTML代码时会忽略注释内容

6.空元素：
没有元素内容、结束标记
img
也称之为自闭合元素
书写方式：<标记名 属性>
<标记名 属性 />

绝对路径和相对路径：
A.绝对路径----当网站部署到服务器后，网站中的所有资源都可以通过一个地址
（路径）访问
该地址（路径）的书写格式为：协议：//域名/目录
这种格式书写的路径，叫做绝对路径
绝对路径使用场景：
访问站外资源时，只能使用绝对路径
访问站内资源时，若网站已部署到服务器，可以使用绝对路径，并可以省略
协议和域名
例：
http：//www.baidu.com/zhidao
省略协议和域名：/zhidao

B.相对路径----相对路径是相当于当前资源的位置，只能用于访问站内资源
相对路径的书写格式：./路径
注：./表示当前目录
.//表示上一级目录
例：…/F70/C.html
注：相对路径的简写，可以省略./

超链接
元素书写格式：<ahref=“目标”>内容
锚点的操作步骤：
1.添加a
2.添加跳转标签
3.给跳转标签添加id的属性值
4.给a标签添加href的值
跳转标签添加id的属性值，前面再加
emmet插件批量生成标签和内容操作：
输入：lorem个数
批量生成单词（又不是单词，只是乱序英文）

功能链接
Mailto：邮箱地址
Tel：电话号码（设备具备电话拨打功能）

因为用户体验而禁用
Targrt页面的打开方式
_self（默认值）当前窗口打开新页面
_blank新建一个窗口打开页面

段落标签
p标签快捷公式：
article>section3>h1{第$章}+p3>lorem50
1.不能嵌套p
2.不能嵌套划分区域标签
3.不能嵌套标题h1到h6
a标签不能互相嵌套

引用标签
大段引用：blockquote
适用场景：引用文章段落或者整个段落
默认样式：左侧缩进（2个汉字）

小段引用：q标签
适用场景：名人名言

Cite标签：既可以当标签，又可以当属性名
当为标签时：元素内容斜体（代表引用）
当为属性名时：表示引用的内容来自于哪里
Title标签：既可以当标签，又可以当属性名

Abbr标签：缩写，专业术语
例：<abbrtitle=“hyperTextMarkupLanguage”>html

强调文本
strong标签：文本加粗
b标签：文本加粗
em标签：斜体
i标签：斜体
注：在常规浏览器下没有区别，阅读浏览器下，strong标签会加重
读音b标签不会加重（元素内容）同理情况下em标签会加重读音i标签不会
加重

无语义标签
Div标签：无语义，表示页面中的一块区域
Span标签：无语义，仅用于一小段文本添加样式
Br标签：无语义，空元素，用于在页面中换行（含有不确定因素，禁用）
Pre标签：无语义，预格式化元素（保留文字在原代码中的格式）
Hr标签：无语义，空元素，用于在页面中制造一个分割线（含有不确定因素，禁用）

空白折叠
一个空格或多个空格，一个回车或多个回车，都会合并成一个空格

实体字符
书写格式：&实体字符；
&开始；结束
例子：
&nbsp；空格
&gt；大于号
&lt；小于号
&copy；版权符号
&amp；&符号

CSS
引用方式：外部，内部，内嵌

使用外部样式表：
css代码在一个独立的文件中，html通过link元素引入到页面中。

使用外部样式表的特点：
1.实现了内容结构和表现形式代码分离，方便复用和维护
2.使html代码更加纯净，有利于程序员和搜索引擎的阅读
3.是开发页面的常见做法

使用内部样式表
将css代码写到HTML文档的style标签中
使用内部样式表的特点：
1.没有了样式表文件，在某些时候可以提升效率
2.多个页面难以共享样式，不利于代码复用
3.html和css代码混杂，不利于程序员和搜索引擎的阅读
4.javescript操作的使行内样式

CSS注释
css注释的书写格式：/注释内容/
css注释主要用于描述代码功能
浏览器解析css代码时会忽略注释内容

CSS规则
css代码由一个一个的规则组成
每个规则指定了：对那些元素应用什么样式

css规则----选择器
css选择器决定了样式规则适用于哪些元素
1.元素选择器
书写格式：标签名{声明块}
适用范围：所有html匹配的标签都会被选中
2.类选择器
书写格式：.类名{声明块}
适用范围：选中所有class属性值相同的标签
3.ID选择器（预留给JS用）
书写格式：（井号）id值{/声明块/}
属性id为指定值的元素，将应用声明块中的规则
适用范围：在同一个html文档中，元素的id值必须唯一
4.子级选择器
书写格式：父元素+“>”+子元素{声明块}
5.后代选择器
书写格式：父元素+空格+子元素
常见css属性
color：设置元素内容的颜色
text-align：设置元素内容的对齐方式
tont-size：设置元素内容的文字大小
font-weight：设置元素内容的文字粗细
background-color：设置元素的背景颜色

声明冲突
多个选择器选中同一个标签，若属性名相同，属性值不同，则产生“声明冲突”
例:
p{color:red;}
p{color:bule;}
如果发生声明冲突，浏览器会自动触发“层叠机制”
什么是层叠：
层叠是一种机制，用于解决css声明冲突
层叠的过程：
1比较优先级
2比较特殊性
3比较源次序
比较优先级：
每一个声明都有一个优先级
当发生冲突时，优先级高的会保留，优先级低的会淘汰
一个声明的优先级，与它的来源与重要性有关：
1浏览器默认样式表的声明
2作者样式表的普通声明
3用户样式表的普通声明
4作者样式表的重要声明
5用户样式表的重要声明

比较特殊性：
每一个声明都有一个特殊性
当发生冲突时，特殊性高的会保留，特殊性低的会被淘汰
一个声明的特殊性，取决于规则适用范围的大小
规则适用范围越大，特殊性越低，规则范围越小，特殊性越高

比较特殊性-具体规则：
在比较特殊性，每一个冲突的声明,会生成4个数字（a，b，c，d），以比较特殊
性a越大，特殊性越高，若a相同，比较b，b越大，特殊性越高，以此类推…
a若声明是行内样式，则为1，否则为0
b规则中ID选择器的个数
c规则中类选择器，伪类选择器，属性选择器的个数
d规则中元素选择器，伪元素选择器的个数
当计算选择器分组的时候，要分开计算

比较源次序：
当发生冲突时，谁后写谁胜出

继承（inherit）
继承（inherit）是指子元素会自动拥有父元素的某些css属性
注：并不是所有的css属性都会被继承
例：background-color（背景色）就不会被继承
继承需有传递性
有些属性在页面的某些区域中具有通用性
若没有继承，则必需
继承发生的场景：
1.该属性是可以继承的
2.该属性没有被声明（定义）
强制继承：
强制继承，也叫显示继承，是指将css属性值设置为inherit
子级的属性值写inherit
这样做，通常有两个原因：
1为了继承有些不可继承的属性
2为了继承已被声明过的属性

检查器当中css样式
删除线：
1层叠机制权重低淘汰（被干掉）
2样式被注释
禁用（灰色，既无法选中）：
表示该样式无法继承

基础选择器：
1.元素
2.类
3.Id
4.通配符
5.组合选择器，并集选择器：
书写方式：用一个分号隔开标签section;div;p;

层次选择器：
1.子级选择器
2.后代选择器
3.兄弟选择器（相邻兄弟）
书写格式：兄弟元素a+“+”+兄弟元素b
注：ab两个元素之间没有其他任何标签
例：p+div{color：red}
注：兄弟选择器只能选中当前元素后面的兄弟元素
4.通用选择器（不相邻兄弟）
书写格式：兄弟元素a+“~”+兄弟元素b
注：选中a元素后面的所有兄弟元素b
例：p~div{color：red}
5.伪类选择器

结构伪类选择器
选中第n个元素
元素名：nth-child（第几位置）
适用场景：所有兄弟元素都是相同标签名
例：p:nth-child（5）

选中第n个元素
元素名nth-of-type(第几位置)
适用场景：兄弟元素的标签名可以不同
例：p：nth-of-type（3）

选中第一个元素
元素名:first-child

选中最后一个元素
元素名:last-child

选中偶数项元素
格式1:元素名:nth-child(2n)
格式2:元素名:nth-child(even)

选中奇数项元素
格式1:元素名:nth-child(2n+1)
格式2:元素名:nth-child(odd)

选中前N个元素
元素:nth-child(-n+个数)
例子：选中前3个元素
p:nth-child(-n+3){color:red;}

属性选择器
书写格式：元素名[name=”box”]
表示以XXX为属性名的属性值
书写格式：元素名[name^=”部分属性值”]
表示以XXX开头的属性值
书写格式：元素名[name$=”部分属性值”]
表示以XXX结束的属性值