VC Code快速编写html5入门教程

最新推荐文章于 2021-07-03 03:01:54 发布

笍芪懿

最新推荐文章于 2021-07-03 03:01:54 发布

阅读量1.1k

点赞数 4

分类专栏：笔记文章标签： html html5 visual studio

本文链接：https://blog.csdn.net/weixin_45472872/article/details/105746698

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

VC Code快速入门教程

合理利用VC Code的代码提示，可以简化我们的网页开发工作
就比如打出 ! 键就可以快速写出网页模版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

以下经常会用到的生成代码模版

子代 >

  //ul>li>a 代码模版
  
生成效果 
<ul>
    <li>
        <a href="">
        </a>
     </li>
  </ul>

兄弟 +

 //div>ul+ol
<div>
        <ul></ul>
        <ol></ol>
    </div>

多个相同标签 *

    // div*6
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

分组（）

//(nav+a)*2
<nav></nav>
<a href=""></a>
<nav></nav>
<a href=""></a>

标签内容｛｝

//a{HTML}

<a href="">HTML</a>

顺序 $ 仅有数目>2有效

 ul>li{$}*3
   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

1 文字加顺序{ text $}

//p{text$}*5
<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>
<p>text5</p>

2 数字顺序
- a{0$}*10注意第10个是010

<a href="">01</a>
<a href="">02</a>
<a href="">03</a>
<a href="">04</a>
<a href="">05</a>
<a href="">06</a>
<a href="">07</a>
<a href="">08</a>
<a href="">09</a>
<a href="">010</a>

a{$$}*10

<a href="">01</a>
<a href="">02</a>
<a href="">03</a>
<a href="">04</a>
<a href="">05</a>
<a href="">06</a>
<a href="">07</a>
<a href="">08</a>
<a href="">09</a>
<a href="">10</a>

自定义顺序@

//p{$@8}*5

<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>

//p{$$@8}*8
<p>08</p>
<p>09</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>

ID #

#id
<div id="id"></div>

class .

.container
<div class="container"></div>

属性 [ ]

a[href=# id=a]
<a href="#" id="a"></a>

综合应用

 div>(.div>img[src=./image/$.jpg]+p{图片})*3

<div>
        <div class="div">
            <img src="./image/1.jpg" alt="">
            <p>图片</p>
        </div>
        <div class="div">
            <img src="./image/2.jpg" alt="">
            <p>图片</p>
        </div>
        <div class="div">
            <img src="./image/3.jpg" alt="">
            <p>图片</p>
        </div>
    </div>

笍芪懿

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
VC Code快速编写html5入门教程

VC Code快速入门教程子代 > //ul>li>a<ul> <li> <a href=""> </a> </li> </ul>兄弟 + //div>ul+ol<div> <ul>&l...
复制链接

扫一扫

专栏目录