HTML常用标签 

<!--常见标签-->

<!--注释 ctrl+/  pycharm中输入标签名+tab键自动补全-->
<!DOCTYPE html>     <!-- 文件类型声明-->
<html lang="en">    <!--lang == language 语种 英语en-->
<head>
    <meta charset="UTF-8">   <!--指定字符编码-->
    <title>常见标签</title>    <!--指定网页标题-->
</head>
<body>      <!--网页内容-->
    这是一个网页
    <!--字体放大、加粗，1级到6级，字体逐渐变小-->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

    <!--段落前后都有换行符-->
    <p>段落1</p>
    <p>段落2</p>

    <!--内联标签，不换行，可以对行内文本进行多重样式设置-->
    这是<span>一个</span><span>网页</span>

    <!--超链接标签，点击其内容，可跳转至指定网址，#代表本网页或翻到顶部-->
    <a href="#">回到顶部</a>
    <a href="https:\\www.baidu.com\">百度首页</a>

    <!--单标签，图片标签，用于展示图片，src属性指定图片来源，alt指定图片找不到时要显示的内容-->
    <img src="狐妖小红娘.jpg" alt="图片找不到">
    <img src="狐妖小红娘1.jpg" alt="图片找不到">

    <!--单标签，换行标签-->
    <p>白日依山尽，<br>黄河入海流。</p>

    <!--字体格式标签-->
    <b>加粗</b>
    <strong>加粗</strong>
    <i>倾斜</i>
    <em>倾斜</em>
    <sub>上标</sub>
    <sup>下标</sup>
    <big>变大</big>
    <small>变小</small>
    <ins>插入或加下划线</ins>
    <del>删除线</del>

    <!--列表 type属性设置序号样式-->
    <!--无序列表，type默认dics实心圆，circle空心圆，square黑心方块-->
    <ul type="square">
        <li>水滴石穿</li>
        <li>一日千里</li>
        <li>聚流成河</li>
    </ul>
    <!--有序列表, type=1,A,a,I,i-->
    <ol type="i">
        <li>第一点</li>
        <li>第二点</li>
        <li>第三点</li>
    </ol>
    <!--表格-->   <!--border绘制边框线， cellspace设置单元格间距 style设置整个表格的大小-->
    <table border="1px" cellspacing="0" style="width: 400px; height: 20px">
        <tr>    <!--行-->
            <th width="50px" height="40px">姓名</th>  <!--列标题，可设置单个单元格宽和高及对其方式，标题默认中心对其-->
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td align="center">王伟</td>
            <td align="center">42</td>
            <td align="center">男</td>
        </tr>
    </table>

    <!--输入框-->
    <p>用户名<input type="text" name="用户名"></p>
    <p>密  码<input type="password" name="密码"></p>
    <input type="button" name="btn" value="按钮">
    <input type="file" >    <!--上传文件-->
    <input type="radio" >男   <!--选中后不可取消-->
    <input type="radio" >女
    <input type="checkbox" >女   <!--选中后可取消-->

    <!--form表单：用于提交数据。action请求网址，method请求方法-->
    <form action="http:\\www.baidu.com" method="post">
        <p>用户名<input type="text" name="用户名"></p>
        <p>密  码<input type="password" name="密码"></p>
    </form>

    <!--网页布局-->
    <div style="height: 100px; width: 100px; display:flex;">
        <div style="height: 100px; width: 20px; background-color: chartreuse"></div>
        <div style="height: 100px; width: 60px; background-color: #ff464b;">
            <div style="height: 10px; width: 60px; background-color: #ff61f9"></div>
            <div style="height: 10px; width: 60px; background-color: #2ff2ff"></div>
            <div style="height: 70px; width: 60px; background-color: #3d92ff; display:flex;">
                <div style="height: 70px; width: 30px; background-color: #1a7bff"></div>
                <div style="height: 70px; width: 30px; background-color: #8749ff"></div>
            </div>
            <div style="height: 10px; width: 60px; background-color: #43ff34"></div>
        </div>
        <div style="height: 100px; width: 20px; background-color: #88ffe6"></div>
    </div>
</body>
</html>
posted @   流水自净  阅读(92)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示