HTML基础知识

7.29总结
1.

一般是指AD或者相关信息，若为AD则靠近

书写
2.target：页面打开方式，（为了优化界面，增强用户体验感已经不常用）有_self：当前界面（默认值），_blank：新界面，两个属性值
3.绝对路径：协议号：//域名/目录，可以省略协议号和域名
 访问站外资源（第三方）只能使用绝对路径，并且不能省略协议号和域名
 当网站部署到服务器上后，网站中的所有资源都可以使用绝对路径访问
4.相对路径：相对于当前资源的位置，只能访问站内资源
 书写格式 ./ （可以省略）

 当前workspace.xml，访问modules.xml：./ modules.xml ， 访问one.js : …/one.js ， 访问two.html : …/…/ two.html
5.emmet插件:lorem+个数，生成乱序铭文
6.文本是文字加标点符号
7. 跳转到button1实现锚点跳转，将拥有id值为button1 的元素放在左上角
8.功能链接：mailto:邮箱，tel:电话号码（设备具有拨打电话功能）
9.自动生成相应嵌套的语句eg: article>section3>h1{第$章}>p3>lorem50 ,
10．严格遵守嵌套规则：
11.无语义标签：
span：给一小段文本添加样式
div：划分区域
pre：预格式化元素，保留文字在源代码的格式，仅限公式
hr:水平线（不建议使用）
br:换行（不建议使用）
12. ：“”，小段引用，适用于名人名言
blockquote ：左侧缩进2字符，大段引用，适用于文章段落或整篇文章
abbr ：对缩写词的引用
13.表现为斜体：
cite：对参考文献的引用，既可以做标签也可做属性，作为属性名时，cite=” www.baidu.com”，是在告诉搜索引擎从哪引用，title既做标签也可做属性，
em :强调的文本
i :因区别对待的文本
14.空白折叠：针对所有标签，一个空白或多个空白，一个回车或者多个回车，只显示为一个空格
15.实体字符：解决需要多个空格，以 &开始；结束，实现特殊字符
空格： 

:>
<:<
版权符号:©
&:&
7.30总结
1.CSS三种使用方式：外部样式表，内部样式表，行内样式表（内嵌，内联），不建议使用内嵌样式表，因为会预留给JS，推荐使用外部样式表，将HTML与CSS分开写，实现结构与表现相分离，方便维护和服用。
2.CSS分CSS注释与CSS规则，CSS代码由一个个CSS规则组成，规则制定了元素使用什么样式
理解规则，选择器，声明块的具体内容
3.CSS选择器
元素选择器：标签名 {}
类选择器：.类名 {}，类名命名规范：以字母开头，包含字母，数字，下划线
ID选择器：#ID名 {} （不建议使用，会预留给JS）
子级选择器：父元素 > 子元素
后代选择器：父元素 子元素
4.声明冲突：多个选择器选择同一个标签，属性名相同，属性值不同，会自动触发 “层叠机制”
5.层叠机制：
层叠过程：
 比较优先级：与来源和重要性有关。
作者样式表中的重要声明—》作者样式表中的普通声明—》浏览器默认样式表
 比较特殊性：规则适用范围越大，特殊性越小
具体规则：
行内样式—》ID选择器—》类 /伪类 /属性选择器>—》元素 /伪元素选择器—》通配符选择器
当计算选择器分组时，要分开计算
 比较源次序：越后面显示
6.CSS继承（inherit）：子元素会自动拥有父元素的某些css 属性，文本类的都会被继承，背景色不能被继承 ，继承具有传递性
继承发生的场景：A属性可以继承 B该属性没有被声明（定义）
强制继承（显式继承）：将css属性值设为inherit

7.31总结
1.基础选择器：
 元素选择器
 类选择器
 ID选择器
 通配符选择器
 组合选择器/并集选择器：当计算选择器分组时，要分开计算
2.层次选择器：
 子级选择器：父元素 > 子元素
 后代选择器：父元素 子元素
 兄弟选择器（相邻选择器）：兄弟元素A + 兄弟元素B，A与B中间没有其他标签
 通用选择器：元素A ~ 元素B，A与B没有相邻
3.伪类选择器
 结构伪类选择器：元素名：nth-child（位置），适用场景：所有兄弟元素都是相同标签名
nth-of-type（位置），适用场景：兄弟元素的标签名可以不同
元素名：first-child，选中第一个元素
元素名：last-child，选中最后一个元素
元素名：nth-child（2n）/ nth-child（even）:选中偶数项
元素名：nth-child（2n+1）/ nth-child（odd）:选中奇数项
元素名：nth-child（-n+个数）：选中前 个数 项
元素名：nth-last-child（位置）：选中倒数 位置 项
 否定伪类选择器
元素名：not（：nth-child（位置））：除了位置都选
元素名：not（：nth-child（位置））：not（：nth-child（位置））：除了这两个位置都选
4.动态伪类选择器
 未访问
：link
 鼠标悬停（移入）
：hover
 点击
：active
 已访问
:visited
书写顺序：link与visited顺序可换，但hover之后才能active，link与visited只适用为a标签
 Focus（获取焦点）：当a标签被激活时（tab），即获取到焦点框，类似于鼠标移入
5.伪元素选择器
 元素A：：before
before是元素A的第一个子元素
 元素A：：after
after是元素A的最后一个子元素
这里的：：可以写成：
 元素A：：first-line
before是元素A的第一行
 元素A：：first-letter
before是元素A的第一个字
 选中内容的样式添加书写格式：：selection，只能设置背景颜色和字体颜色
：：selection { color: gainsboro; background-color: lightblue; }
6.属性选择器
元素名[属性名=“属性值”]
元素名[属性名^=“开头部分属性值”]
元素名[属性名$=“结尾部分属性值”]

在这里插入代码片
7.29总结
1.<aside>一般是指AD或者相关信息，若为AD则靠近</aside>书写
2.target：页面打开方式，（为了优化界面，增强用户体验感已经不常用）有_self：当前界面（默认值），_blank：新界面，两个属性值
3.绝对路径：协议号：//域名/目录，可以省略协议号和域名
	访问站外资源（第三方）只能使用绝对路径，并且不能省略协议号和域名
	当网站部署到服务器上后，网站中的所有资源都可以使用绝对路径访问
4.相对路径：相对于当前资源的位置，只能访问站内资源
	书写格式 ./ （可以省略）
 
	当前workspace.xml，访问modules.xml：./ modules.xml ， 访问one.js : ../one.js ， 访问two.html : ../../ two.html
5.emmet插件:lorem+个数，生成乱序铭文
6.文本是文字加标点符号
7. <a href="#button1">跳转到button1</a>实现锚点跳转，将拥有id值为button1 的元素放在左上角
8.功能链接：mailto:邮箱，tel:电话号码（设备具有拨打电话功能）
9.自动生成相应嵌套的语句eg:  article>section*3>h1{第$章}>p*3>lorem50 ,
10．严格遵守嵌套规则：
11.无语义标签：
span：给一小段文本添加样式
div：划分区域
pre：预格式化元素，保留文字在源代码的格式，仅限公式
hr:水平线（不建议使用）
br:换行（不建议使用）
12.<q> ：“”，小段引用，适用于名人名言
blockquote ：左侧缩进2字符，大段引用，适用于文章段落或整篇文章
abbr ：对缩写词的引用
13.表现为斜体：
cite：对参考文献的引用，既可以做标签也可做属性，作为属性名时，cite=” www.baidu.com”，是在告诉搜索引擎从哪引用，title既做标签也可做属性，
em :强调的文本
i :因区别对待的文本
14.空白折叠：针对所有标签，一个空白或多个空白，一个回车或者多个回车，只显示为一个空格
15.实体字符：解决需要多个空格，以 &开始；结束，实现特殊字符
空格：&nbsp;
>:&gt;
<:&lt;
版权符号:&copy;
&:&amp;
7.30总结
1.CSS三种使用方式：外部样式表，内部样式表，行内样式表（内嵌，内联），不建议使用内嵌样式表，因为会预留给JS，推荐使用外部样式表，将HTML与CSS分开写，实现结构与表现相分离，方便维护和服用。
2.CSS分CSS注释与CSS规则，CSS代码由一个个CSS规则组成，规则制定了元素使用什么样式
理解规则，选择器，声明块的具体内容
3.CSS选择器
元素选择器：标签名 {}
类选择器：.类名 {}，类名命名规范：以字母开头，包含字母，数字，下划线
ID选择器：#ID名 {}  （不建议使用，会预留给JS）
子级选择器：父元素 > 子元素
后代选择器：父元素  子元素
4.声明冲突：多个选择器选择同一个标签，属性名相同，属性值不同，会自动触发 “层叠机制”
5.层叠机制：
层叠过程：
	比较优先级：与来源和重要性有关。
作者样式表中的重要声明—》作者样式表中的普通声明—》浏览器默认样式表
	比较特殊性：规则适用范围越大，特殊性越小
具体规则：
行内样式—》ID选择器—》类 /伪类 /属性选择器>—》元素 /伪元素选择器—》通配符选择器
当计算选择器分组时，要分开计算
	比较源次序：越后面显示
6.CSS继承（inherit）：子元素会自动拥有父元素的某些css 属性，文本类的都会被继承，背景色不能被继承 ，继承具有传递性
继承发生的场景：A属性可以继承  B该属性没有被声明（定义）
强制继承（显式继承）：将css属性值设为inherit

7.31总结
1.基础选择器：
	元素选择器
	类选择器
	ID选择器
	通配符选择器
	组合选择器/并集选择器：当计算选择器分组时，要分开计算
2.层次选择器：
	子级选择器：父元素 > 子元素
	后代选择器：父元素  子元素
	兄弟选择器（相邻选择器）：兄弟元素A + 兄弟元素B，A与B中间没有其他标签
	通用选择器：元素A  ~ 元素B，A与B没有相邻
3.伪类选择器
	结构伪类选择器：元素名：nth-child（位置），适用场景：所有兄弟元素都是相同标签名
nth-of-type（位置），适用场景：兄弟元素的标签名可以不同
元素名：first-child，选中第一个元素
元素名：last-child，选中最后一个元素
元素名：nth-child（2n）/ nth-child（even）:选中偶数项
元素名：nth-child（2n+1）/ nth-child（odd）:选中奇数项
元素名：nth-child（-n+个数）：选中前 个数 项
元素名：nth-last-child（位置）：选中倒数 位置 项
	否定伪类选择器
元素名：not（：nth-child（位置））：除了位置都选
元素名：not（：nth-child（位置））：not（：nth-child（位置））：除了这两个位置都选
4.动态伪类选择器
	未访问
：link
	鼠标悬停（移入）
：hover
	点击
：active
	已访问
:visited
书写顺序：link与visited顺序可换，但hover之后才能active，link与visited只适用为a标签
	Focus（获取焦点）：当a标签被激活时（tab），即获取到焦点框，类似于鼠标移入
5.伪元素选择器
	元素A：：before
before是元素A的第一个子元素
	元素A：：after
after是元素A的最后一个子元素
这里的：：可以写成：
	元素A：：first-line
before是元素A的第一行
	元素A：：first-letter
before是元素A的第一个字
	选中内容的样式添加书写格式：：selection，只能设置背景颜色和字体颜色
：：selection {      color: gainsboro;      background-color: lightblue; }
6.属性选择器
元素名[属性名=“属性值”]
元素名[属性名^=“开头部分属性值”]
元素名[属性名$=“结尾部分属性值”]