快速上手HTML代码

杨DaB

已于 2022-11-20 15:57:26 修改

阅读量132

点赞数

分类专栏：前端学习文章标签： html 前端 css 开发语言

于 2022-10-22 22:53:09 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44896379/article/details/127468880

版权

前端学习专栏收录该内容

6 篇文章

订阅专栏

VS Code 迅捷开发HTML

使用VScode进行快速html生成

        <div>列表分布2</div>
        <div>列表分布1</div>
        <div>列表分布2</div>

首先将代码赋予下方，而后进行解释：

<!DOCTYPE html>
<html lang = :"en">
    <head>  //头
        <meta charset="UTF-8">
        <title>first index</title>//标题
    </head>
    <body>//主体
        <div>
            <p></p>
        </div>
        <div>
            <nav>
                <p>nav下建多个文本</p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </nav>
        </div>
        <div>
            <nav>
                <p></p>
                <p></p>
                <p></p>
            </nav>
        </div>
        <div>
            <p>标签文字</p>
        </div>
        <div>列表分布1</div>
        <div>列表分布2</div>
        <div>列表分布3</div>
        <div id="view">ID选择器</div>
        <div class="view">Class</div>
        <a href="#" id="aa">属性</a>
        <div class="nav">
            <div class="item">
                <img src="S.png" alt="">
                <p>菜单1</p>
                <p>菜单2</p>
                <p>菜单3</p>
                <p>菜单4</p>
                <p>菜单5</p>
                <p>菜单6</p>
                <p>菜单7</p>
                <p>菜单8</p>
                <p>菜单9</p>
                <p>菜单10</p>
            </div>
        </div>

    </body>
</html>

期间主要通过几部分进行分析陈述：
1.<body>的快速敲写
div：正常的结构都是依次来敲，

<div>
    <nav>
        <p></p>
    </nav>
</div>

然而在vs code中，有一种更为简单的方法，那就是：

div>nav>p

如此敲写，如果要创建多行的话，就在p后*行数，即子代的标签结构：

div>nav>p*3

这就是三行 <p> </p>
兄弟的标签结构：

div>nav>p+a

代码如下：

<div>
    <nav>
        <b>B</b>
        <a href="">A</a>
    </nav>
</div>

分类标签

<div>
    <p>标签文字</p>
</div>

div>(nav>p)*2 :

 <div>
     <p>标签文字</p>
     <p>标签文字</p>
 </div>

div{列表分布$}*3 /* 几个$值就会有几个字符 */

<div>列表分布1</div>
<div>列表分布2</div>
<div>列表分布3</div>

div{列表自3行开始$$@3}*2

 <div>列表分布3</div>

ID选择器#

#view
<div id="view">ID选择器</div>
CLASS.
.view
<div class="view">Class</div>

属性：
a[href=# id=aa class=bg]

<a href="#" id="aa" class="bg">
    属性 
</a>