学习【尚硅谷HTML5前端视频】主讲人李立超（上篇）

这位老师讲解的是真心好 地址(｡◕ˇ∀ˇ◕)。

1，这里使用 UTF-8 编码。

使用谷歌欧朋浏览器显示正常，但使用火狐，Edge，IE就是乱码，使用Sarifi浏览器也是乱码

这是为神马呢？

因为谷歌欧朋浏览器默认解码是UTF-8，火狐IE（在中文系统）默认解码是GB2312，Sarifi浏览器默认解码是ISO-8859-1

解决方法：告诉浏览器编码格式

2.

的重要性仅次于, 搜索引擎检索完title标签就会去查询h1标签

在html中，多个空格/换行 会被当做一个空格解析。

---

是水平线

这里的alt会被搜索引擎检索到

图片格式： JPEG(和JPG是同一个东西)，支持颜色多，不支持透明，但压缩率高，

GIF 支持颜色少，支持简单的透明效果，支持动态图

PNG 支持颜色多，支持复杂的透明效果

3. meta

4. 内联标签 iframe

搜狗

  target="_self" 本标签打开  target="_blank" 新窗口打开  target="name" 在名字为"name"的 iframe 中打开

5. 引用外部css，浏览器可以缓存下来，提高速度

6. 块元素主要用来做页面布局，内联元素主要用来选中文本设置样式

一般使用块元素 包裹内联元素，而不会使用内联元素包裹快元素，例如

注意， 标签可以包含任意元素，除了本身

元素里面不能放任何的块元素

7. 

#id{
  background-color: yellow;
}
.className{
  background-color: yellow;
}
h1{
  background-color: yellow;
}

以上三个的 样式都一样的，可以使用 逗号,  来分组：

#id , .className, h1{
  background-color: yellow;
}

8. 

如果使用

.p1{
   color: red;
}

p,span都能满足，如果使用

span.p1{
  color: red;
}

则必须满足是 span标签，且className为p1

9.

后代选择器，使用 空格

div p span{
   color: red;
}

子元素选择器，使用 >   （注意 IE6以下不支持这种写法）

div > span{
  color: red;
}

10 伪类    

a:link {  }  就是 未访问过的链接

div::selection{
   color: red;
}
div::-moz-selection{
   color: red;
}

11. 伪元素，首先理解下啥事伪元素，如下

要使首字变红色，需将第一个字用元素圈起来   

正文内容

以前对于火狐浏览器，需要写成 ::-moz-seleionct ，但现在火狐浏览器也支持 ::selection 写法了。

p > span{
  color: red;
}

我们可以使用伪元素： 

正文内容

  

p:first-letter{
   color: red;
}

还有：

        p:first-line{
            background-color: lightblue;
        }
        p:before{
            content: '文字前的位置  ';
        }
        p:after{
            content: '文字后的位置';
        }

12.  title 属性可以给任意标签添加，鼠标移到上面会有“文字提示”

 文字内容 

使用 中括号 [ ]  表示属性 

p[title]{ 
   background-color: lightblue;
}
p[title=hello]{
   background-color: yellow;
}

13.

    
        我是相对于body标签的第一个子元素
    
    
我是相对于body标签的第二个子元素
    

       我是相对于body标签的第三个子元素
       
我是相对于div标签的第一个子元素
    

使用 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元素

    
第一个
    
第二个
    
第三个
    
第四个

使用  :not( ) 

p:not(.hello){
  background-color: black;
}

16，子元素会继承 祖先元素的样式， 但是 背景 background 不会继承，

    

        我是why_su
    

因为 背景颜色默认是 transparent 透明的，所以看起来像是继承了一样。此问题在于，如果背景是图片，继承的话会出乱子：

17. 优先级

.good{
   
}
.bye{

}

级别一样的，看排列顺序，.bye 在 .good 之后，所以  .bye

对于

p.hello{
  background-color: black;
}
.hello{
  background-color: green;
}

p.hello{  }  因为有两个级别 相加，所以优先级更高

写在 html中的

优先级别最高，可以在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.

     斜体 
      加粗
    上标：  22
    上标带链接：  周杰伦[1]
    下标:   H2O
    
        pre 保存代码中的格式，保留多个空行
        code 用来存代码，和pre一起用
        
            window.onload = function(){
               alert("hello why_su!");
            }