30分钟过完html基础标签-优快云博客

本文链接：https://blog.youkuaiyun.com/liyunyang2000/article/details/126683352

本文介绍了如何在VSCode中使用英文感叹号快速补全HTML结构，包括doctype声明、头部元素、body部分、表单结构等，并展示了完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

# 1. HTML

1. 在VSCode输入一个英文感叹号，然后回车，就会补全HTML的基础语法格式

<!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>标题</title>
</head>
<body>
    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
    <p>段落</p>
    <span>块</span> <!--没有换行的p标签-->
    <a href="http://www.baidu.com" target="_blank">点我</a>
    <img src="./kun.png" alt="坤坤的图片" />

    <ol> <!-- order list -->
        <li>ddddd</li>
        <li>vvvvv</li>
        <li>bbbbb</li>
        <li>aaaaa</li>
    </ol>
    <ul> <!-- unorder list -->
        <li>ddddd</li>
        <li>vvvvv</li>
        <li>bbbbb</li>
        <li>aaaaa</li>
    </ul>

    <table border="1">
        <tr> <!-- table row -->
            <th>姓名</th> <!-- table head -->
            <th>性别</th>
            <th>出生年月</th>
            <th>家庭住址</th>
        </tr>
        <tr>
            <td>李xx</td> <!-- table data -->
            <td>男</td>
            <td>1996-01-03</td>
            <td>北京市西城区南锣鼓巷06号</td>
        </tr>
    </table>

    <form action=""> <!-- 表单都是可以提交的，action表示表单数据要提交给谁 -->
        文本：<input type="text"  /><br>
        密码类型：<input type="password" value="123456"/><br>
        日期类型：<input type="date"><br>
        数字类型：<input type="number"><br>
        颜色：<input type="color"><br>
        邮箱：<input type="email"><br>
        <select>
            <option value="hb">河北</option>
            <option value="hn">河南</option>
            <option value="bj">北京</option>
            <option value="tj">天津</option>
        </select><br>

        性别：<input type="radio" name="aaa" value="man">男 
        <input type="radio" name="aaa" value="woman">女<br>

        爱好：<input type="checkbox" name="hobby" value="basketball">篮球 
        <input type="checkbox" name="hobby" value="baseball">棒球 
        <input type="checkbox" name="hobby" value="football">足球 
        <input type="checkbox" name="hobby" value="chicken">只因<br>

        个人介绍：<textarea cols="30" rows="10"></textarea><br>

        <input type="button" value="点我提交"><br>
        
        <div class="div1">

        </div>

    </form>
</body>
<style>
    .div1 {
        
    }
</style>
</html>