学习WEB前端第四天（1）-生成HTML语法、格式化代码、选择器

本文链接：https://blog.csdn.net/qq_39449982/article/details/121531830

目标:

1.能使用emmet语法
2.能够使用CSS复合选择器
3.能够写出伪类选择器的使用规范
4.能够说出元素有几种显示模式
5.能够写出元素显示模式的转换代码
6.能够写出背景图片的设置方式
7.能够计算CSS的权重

快速生成HTML结构语法

1.生成标签直接翰入标签名按tab键即可比如div然后tab键，就可以生成 < div>< /div>
2. 如果想要生成多个相同标签加上就可以了比如div3就可以快速生成3个div
3. 如果有父子级关系的标签，可以用> 比如ul > li就可以了
4. 如果有兄弟关系的标签，用＋就可以了比如 div+p
5. 如果生成带有类名或者id名字的”直接写.demo或者 #two tab键就可以了
6. 如果生成的div类名是有顺序的，可以用自增符号$
7. 如果想要在生成的标签内部写内容可以使用{}表示

快速格式化代码

Vscode 快速格式化代码: shift+alt+f
也可以设置当我们保存页面的时候自动格式化代码:
1)文件------【首选项】----------【设置】;
2〕搜索emmet.include;
3 )在scttings.json下的【用户】中添加以下语句:

"editor.formatOnType": true,
"editor.formatOnSave": true

只需要设置一次即可，以后都可以自动保存格式化代码

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器

复合选择器

是建立在基础选择器之上，对基本选择器进行组合形成

复合选择器可以更准确、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器(重要)

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌衣时，内层标签就成为外层标签的后代。

并集选择器(重要)

并集选择器可以修多组标签，同时为他们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文逗号(，)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

    伪类选择器
    伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
    伪类选择器书写最大的特点是用冒号(:)表示，比如:hover 、 :first-child 。
    因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

链接伪类选择器

        a :link        /*选择所有未被访问的链接* /
        a : visited    /*选择所有已被访问的链接*/
        a : hover      /*选择鼠标指针位于其上的链接*/
        a : active     /*选择活动链接（鼠标按下未弹起的链妾）*/

focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格.nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于.nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号.nav, .header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover实际开发的写法
:focus 选择器	选择获得光标的表单	跟表单相关	较少	input:focus记住这个写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo{
            /* 首字母 */
            /* w200 tab */
            width: 200px;
            /* lh26 tab */
            line-height: 26;
            /* td */
            text-decoration: none;
        }
        /* 后代选择器 空格隔开 父亲 儿子(后代){样式}  元素1>元素2  选择的是亲儿子*/
        ul li{
            color: red;
        }
        ul li a{
            color: blue;
        }
        .nav li a{
            color: chartreuse;
        }
        /* 并集选择器 ","隔开 用于集体声明 任何形式都可以并集*/
        div,p{
            color: red;
        }
        div,p,.pig{
            color: rosybrown;
        }
        /* 伪类选择器 */
        /* 连接伪选择器 lvha */
        /* a:link 选择所有未被访问的链接 */
        a:link{
            color: salmon;
            text-decoration: none;
        }
        /* a:visited 选择所有已被访问的链接*/
        a:visited{
            color: sienna;
        }
        /* a:hover 选择鼠标指针位于其上的链接*/
        a:hover{
            color: skyblue;
        }
        /*选择活动链接（鼠标按下未弹起的链妾）*/
        a:active{
            color: slategrey;
        }

        /* :focus伪选择器 */
        input:focus{
            background-color: yellow;
        }

    </style>
</head>

<body>
   
     <!-- tab -->
        <div></div>
     <!--span*3  -->
     <span></span><span></span><span></span>
     <!-- ul>li -->
     <ul>
         <li></li>
     </ul>
     <!-- div+p -->
     <div></div>
     <p></p>
     <!-- .demo -->
     <div class="demo"></div>
     <!-- #change -->
     <div id="change"></div>
     <!-- .demo$*5 -->
     <div class="demo1"></div>
     <div class="demo2"></div>
     <div class="demo3"></div>
     <div class="demo4"></div>
     <div class="demo5"></div>
     <!-- p.demo -->
     <p class="demo"></p>
     <!-- div{hhaa}*3 -->
     <div>hhaa</div>
     <div>hhaa</div>
     <div>hhaa</div>
    

    <ul>
        <li>我是文杰他爸</li>
        <li>我是文杰他爸</li>
        <li>我是文杰他爸</li>
        <li><a href="#">我是文杰他爸</a></li>
    </ul>

    <ol>
        <li>文杰是我儿</li>
        <li>文杰是我儿</li>
        <li>文杰是我儿</li>
    </ol>
    <ol class="nav">
        <li>文杰是我儿</li>
        <li>文杰是我儿</li>
        <li>文杰是我儿</li>
        <li><a href="#">我是文杰他爸</a></li>
        <li><a href="#">我是文杰他爸</a></li>
    </ol>

    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul> 
    
    <a href="#">文杰是傻逼</a>

    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>