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

why_su

墨衍会员 · AI 创作全网分发码龄10年

关注

原创最新推荐文章于 2026-06-20 12:42:28 发布 8.9k 阅读 AI 写同款· GEO 优化 ›

HTML5+CSS3笔记（尚硅谷） HTML5+CSS3笔记阅读详情

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

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> 标签可以包含任意元素，除了本身

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

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

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

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

<p class="p1"></p>
<span class="p1"></span>

如果使用

.p1{
   color: red;
}

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

span.p1{
  color: red;
}

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

<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. 伪元素，首先理解下啥事伪元素，如下

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

以前对于火狐浏览器，需要写成 ::-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="文字提示:这是第一行"> 文字内容 </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.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.

    <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>