HTML敲代码小技巧

所念皆星河73

于 2022-12-09 18:58:00 发布

阅读量460

点赞数 2

分类专栏： javaWeb 文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_60664694/article/details/128257785

版权

javaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webstorm快键键</title>
</head>
 
<body>
 
<!--
正常情况：
先输入：<h1
再输入:>
 -->
<h1></h1>
 
<!--
>：下一个子标签
*：多少个标签
$：标签的名称序号
{}:标签的内容
-->
 
<!--输入：h1,按tab键-->
<h1></h1>
<!--输入：h1{Hello,尚硅谷},按tab键-->
<h1>Hello,尚硅谷</h1>
<!--输入：div#abc,按Tab键-->
<div id="abc"></div>
 
 <!--输入：div#root>h1{Hello,尚硅谷},按tab键.注意光标要放到最左边(最外)-->
<div id="root">
       <h1>Hello,尚硅谷</h1>
</div>    
    
<!--输入：div.abc,按Tab键-->
<div class="abc"></div>
 
<!--输入: div>p*6 ,按Tab键。 补充：标签住Alt键点击多个标签，可以同时修改标签之间的内容,比如下面的aaa-->
<div>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p>aaa</p>
    <p></p>
    <p></p>
</div>
 
<!--输入 a[href=#] 按tab键-->
<a href="#"></a>
 <!--
>：下一个子标签
*：多少个标签
$：标签的名称序号
{}:标签的内容
-->
    <!--综合运用-->
<!--输入：ul.menu>li*6>a[href=#]{HTML} 按tab键-->
    <!--意思是:先创建一个class属性为menu的ul标签，他的子标签是6个li标签，而li标签的子标签是超链接a标签，a标签之间的内容是HTML字符串-->
<ul class="menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">HTML</a></li>
</ul>
 
<!--输入  ul>li*5>a[href=#]{我是第$个} 再按tab键-->
<ul>
    <li><a href="#">我是第1个</a></li>
    <li><a href="#">我是第2个</a></li>
    <li><a href="#">我是第3个</a></li>
    <li><a href="#">我是第4个</a></li>
    <li><a href="#">我是第5个</a></li>
</ul>
 
<!--输入 img[src='images/$.jpg']*3 再按tab键-->
<img src="images/1.jpg" alt="">     
<img src="images/2.jpg" alt="">     
<img src="images/3.jpg" alt="">
 
<!--输入 li*3>div.img>img[src='images/$.jpg'] 再按tab键-->
<li>
    <div class="img"><img src="images/1.jpg" alt=""></div>
</li>
<li>
    <div class="img"><img src="images/2.jpg" alt=""></div>
</li>
<li>
    <div class="img"><img src="images/3.jpg" alt=""></div>
</li>
 
</body>
</html>