1 HTML篇

HTML

Visual Studio Code关于写html的快捷键
这几天写html，找别人学了一些有趣的快捷键，作用不一定很大，但还是记录一下。

1多个平级标签
    输入 div*5 会有提示，按回车，出现下面的代码
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

2多个平级排序标签
    输入 div{$}*4 出现提示后，按回车，出现下面的代码
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

3给标签加id和class
    输入 div#tagId 提示，回车
    <div id="tagId"></div>

    输入 div.tagClass 提示，回车
    <div class="tagClass"></div>

4多层嵌套标签
多层嵌套标签用>右尖括号，还可以任意组合。

    span>div>section
    <span>
        <div>
            <section></section>
        </div>
    </span>

    span>div*3>section
    <span>
        <div>
            <section></section>
        </div>
        <div>
            <section></section>
        </div>
        <div>
            <section></section>
        </div>
    </span>

    span>div{$}*3>section
    <span>
        <div>
            1
            <section></section>
        </div>
        <div>
            2
            <section></section>
        </div>
        <div>
            3
            <section></section>
        </div>
    </span>

    span>div*3>section{$}*3
    <span>
        <div>
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </div>
        <div>
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </div>
        <div>
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </div>
    </span>

5 ! + 回车

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

6 Ctrl+/ （注释）

    <!--  -->
7 快速多次复制同一行代码
crtl +c  --->ctrl+v
快捷键
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div>头部</div>
    <div>身体</div>
    <div>脚</div>
</body>
</html>
01html结构
<!DOCTYPE html>
<html>
<head>
    <title>标题标签</title>
</head>
<body>
    <h2>女人越这样和男人说话，他就越<em>喜欢你</em></h2>    
    <h4>01</h4>

    <p>很多情侣或夫妻之所以很难走到最后，有时候是因为他们不懂得好好说话。换句话说，一段感情要想长久地维持下去，需要双方懂得用心交流和沟通。</p>

    <p>尤其是当你们生活在同一个屋檐下，低头不见抬头见，你们更要懂得好好说话。你不要小瞧语言的魅力和说话的力量。
    </p>
    <p>有时候，你可能只是随口一说，但是<strong>说者无心，听者有意</strong>，伴侣听了之后，可能会产生<em>各种各样</em>的联想。</p>

    <strong>02</strong>

</body>
</html>
02 p标签，h标题，srtong-em标签
<!DOCTYPE html>
<html>
<head>
    <title>body标签中常用标签</title>
</head>
<body>
    <h2>《&nbsp;&nbsp;琵琶行》</h2>
    一道&nbsp;&nbsp;&nbsp;&nbsp;残阳铺水中，<br>
    半江瑟瑟 半江红。<br>
    可怜九月初三夜，<br>
    露似珍珠月似弓。<br>
    &copy;CopyRight 2002-2019
    &clubs;7 &hearts;8
</body>
</html>
03 br换行，空格等特殊字符标签
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p>
    <hr>
    <p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。
    那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p>
</body>
</html>
04 hr横线
<!DOCTYPE html>
<html>
<head>
    <title>无序列表</title>
</head>
<body>
    <!-- unordered list -->
    <h2>热门要闻</h2>
    <ul>
        <li>政府工作报告极简版来了！只有600字 全程回放</li>
        <li>政府工作报告:继续推动中美经贸磋商 
    积极参与世贸组织改革</li>
        <li>新增高速铁路运营里程4100km 
    2年基本取消高速省界收费站</li>
        <li>高血压糖尿病门诊用药纳入医保 报销比例提高到60%</li>
    </ul>
    <h2>web前端课程排行榜</h2>
    <ol>
        <li>vue框架学习</li>
        <li>Javascript高级编程</li>
        <li>React全家桶</li>
    </ol>
    <!-- definition list:定义列表 -->
    <dl>
        <dt>帮助中心</dt>
        <!-- definition description -->
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>



    
</body>
</html>
05 ul,ol,dl(dt,dd)等列表标签
<!DOCTYPE html>
<html>
<head>
    <title>制作表格</title>
</head>
<body>
    <table border="1" cellspacing="0">
        <caption>商品清单</caption>
        <thead>
            <tr>
                <th>产品名称</th>
                <th>品牌</th>
                <!-- 横向合并：合并的列数 -->
                <th colspan='2'>数量和入库时间</th>
            </tr>    
        </thead>
        <tbody>
            <tr>
                <td>电冰箱</td>
                <td>海尔</td>
                <td>300</td>
                <td>2014-09</td>
            </tr>
    
            <tr>
                <td>电视机</td>
                <!-- 纵向合并： 合并的行数 -->
                <td rowspan="3">小米</td>
                <td>200</td>
                <td>2018-09</td>
            </tr>
            <tr>
                <td>电风扇</td>
                <td>400</td>
                <td>2017-09</td>
            </tr>
            <tr>
                <td>电脑</td>
                <td>400</td>
                <td>2017-09</td>
            </tr>
        </tbody>
        
        
    </table>

</body>
</html>
06 table标签-caption(表格标题)
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <a href="mailto:zhaoxu@tedu.cn">联系我们</a>
</body>
</html>
07 a标签-邮箱等
<!-- a    anchor  锚点  超链接 -->
<!DOCTYPE html>
<html>
<head>
    <title>超链接</title>
</head>
<body>
    <p id="top"></p>
    <a href="http://www.baidu.com" title="点击一下,了解更多" target="_blank">百度一下</a>
    <p>小猿圈</p>
    <p>小猿圈</p>
    <p>小猿圈</p>
    <p>小猿圈</p>
    <p>小猿圈222222</p>
    <p>小猿圈</p>
    <p>小猿圈</p>
    <p>小猿圈</p>
    <a href="#top">回到顶部</a>


</body>
</html>
07 a超链接标签-（返回顶部等）
<!DOCTYPE html>
<html>
<head>
    <title>img标签(行内块状标签)</title>
</head>
<body>
    <!-- 相对路径： 
        ./1.png =1.png
        ../1.png
        .../1.png

        绝对路径:
        file:///Users/majinju/Desktop/1.png
     -->
     <img src="file:///Users/majinju/Desktop/1.png" width="400" alt="一个耿直的微笑" title="瞅你的损色">
     <img src="https://i1.mifile.cn/a4/xmad_15516710851918_wMDAo.jpg" alt="小米9同名尊享版" width="100">
</body>
</html>
08 img标签
<!DOCTYPE html>
<html>
<head>
    <title>form标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
        <p>
            <input type="text" placeholder="请输入用户名">
        </p>
        
        <p>
            <input type="password" placeholder="请输入密码">
        </p>
        <p>
            男：<input type="radio" name="sex" checked="checked">
            女：<input type="radio" name="sex">
        </p>
        <h4>购买的课程：</h4>
        <p>
            web前端：<input type="checkbox" checked="checked">
            python开发：<input type="checkbox">
            Java编程：<input type="checkbox">
        </p>
        <p>
            <select name="class">
                <option value="a">HTML</option>
                <option value="b">CSS</option>
                <option selected="selected">JavaScript</option>
                <option>Vue</option>
            </select>
        </p>

        <!-- <h1>下拉列表实现单选 </h1> -->
        <p>
            <select name="class" >
                <option value="css" >html</option>
                <option value="python">css</option>
                <option value="vue" selected>python</option>
            </select>
        </p>
        <!-- <h2>下拉列表实现多选 --></h2> -->
        <p>
            <select name="class" id="" multiple>
                <option value="css" >html</option>
                <option value="python">css</option>
                <option value="vue" selected>python</option>
                <option value="go" selected>golang</option>
                <option value="go" selected>小程序</option>
                <option value="go" selected>java</option>
            </select>
        </p>
        <!-- <h3>个人描述(文本域)</h3> -->
        <textarea name="" id="" cols="20" rows="10"></textarea>
        
        <!-- 按钮 -->
        <p>
            <input type="submit" name="btnsbt" value="提交">
            <input type="reset" name="btnrst" value="重置">
            <input type="button" name="btnbtn" value="普通按钮">
        </p>

        <p>
            请上传文件：
            <input type="file" name="txtfile">
        </p>
        </form>

</body>
</html>
09 input框（单选，复选，上下拉列表，文本域等
<!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>

    <form action="">
        <p> 
            <label for="username">
            用户名：</label> <input type="text" name="" id="username" placeholder="请输入用户名" >
        </p>
        <p>
            <label for="pwd">
            密码： </label><input type="password" name="" id="pwd" placeholder="请输入密码"></p>
        <p><input type="submit" value="立即注册"></p>
        <p><input type="reset" name="" value="重置"> </p>
            <button>按钮</button>
        <p>
            男：<input type="radio" name="sex" id="" checked>
            女：<input type="radio" name="sex" id="">
        </p>
        <p>
           web前端 <input type="checkbox" name="" id="" checked>
           python <input type="checkbox" name="" id="">
           java <input type="checkbox" name="" id="">
        </p>
       
        
        <h1>下拉列表实现单选 </h1>
        <p>
            <select name="class" id="">
                <option value="css" >html</option>
                <option value="python">css</option>
                <option value="vue" selected>python</option>
            </select>
        </p>
        <h2>下拉列表实现多选 --></h2>
        <p>
            <select name="class" id="" multiple>
                <option value="css" >html</option>
                <option value="python">css</option>
                <option value="vue" selected>python</option>
                <option value="go" selected>golang</option>
                <option value="go" selected>小程序</option>
                <option value="go" selected>java</option>
            </select>
        </p>
        <h3>个人描述</h3>
        <textarea name="" id="" cols="20" rows="10"></textarea>

    </form>

    <form action="http://www.baidu.com" method="POST">
    <p>
        用户名称：
        <input type="text",name="txtUsename" value="请输入用户名称" readonly>
    </p>
    <p>
        用户密码：
        <input type="password" name="txtUsepwd">
    </p>
    <p>
        确认密码：
        <input type="password" name="txtcfmpwd" disabled>
    </p>
    <p>
        用户性别：
        <input type="radio" name="sexrdo" value="男">男
        <input type="radio" name="sexrdo" value="女" checked=''>女
        <input type="radio" name="" id="sba">
    </p>
    <p>
        用户爱好：吃
        <input type="checkbox" name="chkhobby" value="吃"> 喝
        <input type="checkbox" name="chkhobby" value="喝"> 玩
        <input type="checkbox" name="chkhobox" value="玩"> 乐
        <input type="checkbox" name="chkhobox" value="乐" checked>
    <!-- 按钮 -->
    <p>
        <input type="submit" name="btnsbt" value="提交">
        <input type="reset" name="btnrst" value="重置">
        <input type="button" name="btnbtn" value="普通按钮">
    </p>
    
    <p>
        请上传文件：
        <input type="file" name="txtfile">
    </p>
    <p>
        自我介绍：
        <textarea name="txt" cols="20" rows="5"></textarea>
    </p>
    <p>籍贯：
        <select name="sel" size="3" multiple>
            <option value="深圳">深圳</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州" selected>广州</option>
        </select>      
    </p>
    <p>意向工作城市：
        <select name="sel">
            <option value="深圳">深圳</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州" selected>广州</option>
        </select>
    </p>  
    <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,<span>金融分析</span>,<span>人工智能</span>等互联网最前沿技术,开启职业生涯新可能</p>      
</form>

</body>
</html>
10 input 表单
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form>
        <p>
            <label for="username">用户名：</label>
            <input type="text" id="username">
        </p>
        <p>
            <label for="pwd">密码：</label>
            <input type="password" id="pwd">
        </p>
    </form>

</body>
</html>
11 label标签
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        span{
            color: red;
        }
    </style>
</head>
<body>
    <div id="content">
        <p>
            女生眼中的男生：长得一般的<span">叫帅哥</span>，长得好看的<span">叫小哥哥</span>，长的超帅的<span">叫老公</span>，长的不好看的<span">叫那个男的</span>
        </p>
    </div>
</body>
</html>
12 div表签
 小米结构分析：
 <head></head>
 <body>
<div id="top">
        顶部栏
                  <div id="top_list">
                          left 顶部栏目
                           <a href="">链接*10   a</a>
                  </div>            
                <div id="top_shop">
                           right 购物车
                           <a href="">  链接*1     a</a>
                </div>
                <div id="top_user">
                         right 用户操作
                         <a href=""> 链接*3     a</a>
                </div>                 
</div>
      
<div id="nav">
        导航栏
       <div>
                left logo
                <a href="">
                        <img src="" alt="">
                </a>
       </div>
              
      <div>
                left 导航链接
                <ul>
                    <li>
                            <a href=""></a>
                    </li>
                    <li>
                            <a href=""></a>
                    </li>
                    <li>
                            <a href=""></a>
                    </li>
                    <li>
                            <a href=""></a>
                    </li>
                </ul>
                
      </div>
             
        <div>
                 right 搜索
                 <form>
                         <input type="text" name="">
                         <input type="submit">
                 </form>
        </div>
</div>
   
<div id="wrap">
        主体内容
</div>     

<div id="footer">
        脚部
</div>
</body>
小米官网结构划分
作者：华王 博客：https://www.cnblogs.com/huahuawang/
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/huahuawang/p/14879452.html