那些你不曾注意的HTML、CSS基础知识01
雪雯啊！
科技区音乐UP主 @BlibiliCSS高级选择器
要将下面代码中超链接文本呈现为红色，不可以使用的样式表是（ ）。
<div><a href="http://www.w3.org/">链接到W3C</a></div>
`a:link{color:red}`
`div a:link{color:red}`
`div>a:link{color:red}`
`div:first-child{color:red}`
1.div:first-child
要满足的条件，首先必须得是div元素，还得是第一个子元素，如果不满足 就不会被选中
2.div:first-of-type 要满足的条件，首先必须得是div元素，还得是第一个出现的div元素，如果不满足 就不会被选中
3.nth-child a:nth-child(5)： 必须是a元素 必须是第五个子元素
4.nth-of-type： a:nth-of-type:选中所有a元素中的第n个a元素
H5代码嵌套规范
- <a> 标签是行内元素，不可以嵌套块级元素 <p>
- <button> 是行内块元素，可以嵌套行内元素。但是，不推荐嵌套 <a> 元素！！！
- 在比较多的 UI 库中，都是 <a> 元素嵌套 <button> 元素的。（自己试一下就知道区别了）
- <dl>、<dt>、<dd> 、<h>这些 **标题****标签** 不推荐嵌套块级元素
CSS3 @media 查询
- 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
- @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
//如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
| 值 | 描述 |
|---|---|
| all | 用于所有设备 |
| aural | 已废弃。用于语音和声音合成器 |
| braille | 已废弃。 应用于盲文触摸式反馈设备 |
| embossed | 已废弃。 用于打印的盲人印刷设备 |
| handheld | 已废弃。 用于掌上设备或更小的装置，如PDA和小型电话 |
| 用于打印机和打印预览 | |
| projection | 已废弃。 用于投影设备 |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
| tty | 已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备 |
| tv | 已废弃。 用于电视和网络电视 |
媒体功能
| aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
|---|---|
| color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 |
| color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |
| device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
| device-height | 定义输出设备的屏幕可见高度。 |
| device-width | 定义输出设备的屏幕可见宽度。 |
| grid | 用来查询输出设备是否使用栅格或点阵。 |
| height | 定义输出设备中的页面可见区域高度。 |
| max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
| max-color | 定义输出设备每一组彩色原件的最大个数。 |
| max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
| max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
| max-device-height | 定义输出设备的屏幕可见的最大高度。 |
| max-device-width | 定义输出设备的屏幕最大可见宽度。 |
| max-height | 定义输出设备中的页面最大可见区域高度。 |
| max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
| max-resolution | 定义设备的最大分辨率。 |
| max-width | 定义输出设备中的页面最大可见区域宽度。 |
| min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
| min-color | 定义输出设备每一组彩色原件的最小个数。 |
| min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
| min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
| min-device-width | 定义输出设备的屏幕最小可见宽度。 |
| min-device-height | 定义输出设备的屏幕的最小可见高度。 |
| min-height | 定义输出设备中的页面最小可见区域高度。 |
| min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
| min-resolution | 定义设备的最小分辨率。 |
| min-width | 定义输出设备中的页面最小可见区域宽度。 |
| monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |
| orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
| resolution | 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 定义电视类设备的扫描工序。 |
| width | 定义输出设备中的页面可见区域宽度。 |
浏览器重排与重绘
- display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint （重排一定会发生重绘）
- visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件
- opacity=0：指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
<link>和@import区别
- 1.从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
- 2.加载顺序区别 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
- 3.兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
- 4.DOM可控性区别 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
- 5.权重区别 link引入的样式权重大于@import引入的样式。