这位老师讲解的是真心好 地址(｡◕ˇ∀ˇ◕)。
1，这里使用 UTF-8 编码。
使用谷歌欧朋浏览器显示正常
，但使用火狐，Edge，IE就是乱码
，使用Sarifi浏览器也是乱码
这是为神马呢？
因为谷歌欧朋浏览器默认解码是UTF-8，火狐IE（在中文系统）默认解码是GB2312，Sarifi浏览器默认解码是ISO-8859-1
解决方法：告诉浏览器编码格式
<meta charset="utf-8" />
2.<h1></h1>的重要性仅次于<title></title>, 搜索引擎检索完title标签就会去查询h1标签
在html中，多个空格/换行 会被当做一个空格解析。
<hr/> 是水平线
<img src="1.jpg" alt="图片" /> 这里的alt会被搜索引擎检索到
图片格式： JPEG(和JPG是同一个东西)，支持颜色多，不支持透明，但压缩率高，
GIF 支持颜色少，支持简单的透明效果，支持动态图
PNG 支持颜色多，支持复杂的透明效果
3. meta
<meta name="keywords" content="关键字内容"/>
<meta name="description" content="描述内容"/>
<!--表示5秒后跳转到另一个url地址-->
<meta http-equiv="refresh" content="5;http://www.baidu.com"/>
4. 内联标签 iframe
<a href="http://www.sogou.com" target="iframe_a">搜狗</a>
<iframe src="http://www.baidu.com" name="iframe_a"></iframe>
<a></a> target="_self" 本标签打开 target="_blank" 新窗口打开 target="name" 在名字为"name"的 iframe 中打开
5. 引用外部css，浏览器可以缓存下来，提高速度
<link rel="stylesheet" type="text/css" href="1.css"/>
6. 块元素主要用来做页面布局，内联元素主要用来选中文本设置样式
一般使用块元素 包裹内联元素，而不会使用内联元素包裹快元素，例如
<div>
<span></span>
</div>
注意，<a></a> 标签可以包含任意元素，除了本身
<p></p> 元素里面不能放任何的块元素
7.
#id{
background-color: yellow;
}
.className{
background-color: yellow;
}
h1{
background-color: yellow;
}
以上三个的 样式都一样的，可以使用 逗号, 来分组：
#id , .className, h1{
background-color: yellow;
}
8.
<p class="p1"></p>
<span class="p1"></span>
如果使用
.p1{
color: red;
}
p,span都能满足，如果使用
span.p1{
color: red;
}
则必须满足是 span标签，且className为p1
9.
<div>
<span></span>
<p><span></span></p>
</div>
后代选择器，使用 空格
div p span{
color: red;
}
子元素选择器，使用 > （注意 IE6以下不支持这种写法）
div > span{
color: red;
}
10 伪类
a:link { } 就是 未访问过的链接
div::selection{
color: red;
}
div::-moz-selection{
color: red;
}
11. 伪元素，首先理解下啥事伪元素，如下
要使首字变红色，需将第一个字用元素圈起来 <p><span>正</span>文内容<p>
以前对于火狐浏览器，需要写成 ::-moz-seleionct ，但现在火狐浏览器也支持 ::selection 写法了。
p > span{
color: red;
}
我们可以使用伪元素： <p>正文内容</p>
p:first-letter{
color: red;
}
还有：
p:first-line{
background-color: lightblue;
}
p:before{
content: '文字前的位置 ';
}
p:after{
content: '文字后的位置';
}
12. title 属性可以给任意标签添加，鼠标移到上面会有“文字提示”
<p title="文字提示:这是第一行"> 文字内容 </p>
使用 中括号 [ ] 表示属性
p[title]{
background-color: lightblue;
}
p[title=hello]{
background-color: yellow;
}
13.
<body>
<span>
我是相对于body标签的第一个子元素
</span>
<p>我是相对于body标签的第二个子元素</p>
<div>
我是相对于body标签的第三个子元素
<p>我是相对于div标签的第一个子元素</p>
</div>
</body>
使用 p:first-child 表示匹配p元素，且该p元素必须是第一个子元素
p:first-child{
background-color: lightcoral;
}
使用 :last-child 匹配最后一个子元素
使用 :nth-child(n) 匹配第n个子元素
p:nth-child(2){
background-color: lightcoral;
}
使用 :nth-child(even) 匹配偶数位的子元素， 使用 :nth-child(odd) 匹配奇数位的子元素
记法： even 4个字， odd 3个字
p:first-of-type 表示在当前类型 p 中的第一个
p:first-of-type{
background-color: yellow;
}
p:last-of-type{
background-color: yellow;
}
p:nth-of-type(2){
background-color: yellow;
}
14， + 和 ~ 都是选则兄弟元素，但 + 是之后紧挨着的那一个兄弟元素，~是之后所有的兄弟元素
span + p{
background-color: lightcoral;
}
span ~ p{
background-color: lightcoral;
}
15，现在我要匹配所有class不是hello的p元素
<p>第一个</p>
<p class="hello">第二个</p>
<p>第三个</p>
<p>第四个</p>
使用 :not( )
p:not(.hello){
background-color: black;
}
16，子元素会继承 祖先元素的样式， 但是 背景 background 不会继承，
<div style="background-color: red;">
<span>我是why_su</span>
</div>
因为 背景颜色默认是 transparent 透明的，所以看起来像是继承了一样。此问题在于，如果背景是图片，继承的话会出乱子：
17. 优先级
<p class="good bye"></p>
.good{
}
.bye{
}
级别一样的，看排列顺序，.bye 在 .good 之后，所以 .bye
对于 <p class="hellp"></p>
p.hello{
background-color: black;
}
.hello{
background-color: green;
}
p.hello{ } 因为有两个级别 相加，所以优先级更高
写在 html中的 <p style="background-color: red;"></p> 优先级别最高，可以在css中使用 !important 来改变这个优先级
.bye{
background-color: black !important;
}
18，关于a 的伪类的 优先级顺序
a:link{
color: cornflowerblue;
}
a:visited{
color: red;
}
a:hover{
color: orange;
}
a:active{
color: black;
}
这样子写是没错的， 但因为 a:active 鼠标点击 其实同时满足 :active和a:hover 这两个状态，所以鼠标点击的时候会找最后面的一个样式来展现，如果 调下顺序：当鼠标点击时，显示的是 orange 而不是 black
a:active{
color: black;
}
a:hover{
color: orange;
}
此外，如果把 a:link 和 a:visited 写在了 a:hover 和 a:active 后面，则不会有鼠标点击 和 移入 的效果。
19.
<em> 斜体 </em>
<strong> 加粗</strong>
上标： 2<sup>2</sup>
上标带链接： 周杰伦<sup><a href="http://www.sogou.com">[1]</a></sup>
下标: H<sub>2</sub>O
<pre>
pre 保存代码中的格式，保留多个空行
code 用来存代码，和pre一起用
<code>
window.onload = function(){
alert("hello why_su!");
}
</code>
</pre>
