前端：各式各样的标签（标签合集）

YY编程小白

于 2024-08-09 17:02:06 发布

阅读量105

点赞数 6

文章标签：前端 css javascript html

本文链接：https://blog.csdn.net/weixin_63708006/article/details/141065816

版权

标签的分类：

从使用的角度划分

1.用于显示的元素

2.用于收集用户信息的元素

从元素本身特征划分

1.块级元素（独占一行）

2.内联级元素

3.内联块级元素

HTML的标签：

<!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>
    <!--文本标签 span-->
    <span style="color: red;">hello</span>
    <span>demo</span><!--空格换行--空白符-->
    <!--标题标签 span-->
    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
    <!--竖着布局的标签div-->
    <div>文本</div>
    <!--段落标签-->
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <!--超链接标签 a-->
    <a href="" target="_blank"></a><!--href跳转资源 独有  target="_blank"新窗口打开 _self本窗口打开-- 窗口名：指定窗口打开>
    <!--所有元素共有的标签 id class style-->
    <!--锚点标签  用于做定位-->
    <a name="aaa">锚点</a>
    <a href="#aaa">跳转到锚点</a><!--#aaa跳转到定位点aaa-->

    <!--标签可以嵌套，效果叠加-->
    <!--图片标签 img  src用于引入资源，引入路径既可以是相对路径，也可以是绝对路径  alt图片显示有问题显示-->
    <img src="" alt="" width="" height="" style="object-fit: cover;"><!--如果只设置款或者只设置高 裁剪不变形  宽高同时设置会变形-- >>

    <br><!--用于换行-->
    <!--列表标签-->
    <ul>
        <li>列表</li>
    </ul>
    <!--表格标签table 行th 单元格td-->
    <table border="1px" cellpadding="10px" cellspacing="0">
        <!--表格加边框border   width="" height=""设置狂高  cellpadding单元格的填充度 cellspacing单元格之间的间距-->
        <tr>
            <td rowspan="2">22</td>  <!--行合并 rowspan  列合并 colspan 不能交叉-->
        </tr>
        <thead></thead><!--将单元格至于表头-->
        <tbody></tbody><!--将单元格至于表中-->
        <tfoot></tfoot><!--将单元格至于表尾-->
        <tr>
            <th></th><!--加粗文字居中-->
        </tr>
      
    </table>
    <!--框架标签/窗口标签 iframe 用于嵌套其他页面-->
    <iframe src="" frameborder="0" width="" height="" name="aaa"></iframe>
    <!--src嵌套资源 frameboder="0"去掉边框，更加融合  name窗口的名字-->

    <!--音频资源 MP3 MP4 audio  -->

    <audio src="" controls="true"></audio>
    <!--视频资源 video 设置宽高不变性-->
    <video src="" controls width="" height="" ></video>
    <!--controls手动控制 autoplay自动播放（背景音乐）loop循环播放-->
    <!--收集用户信息的标签-->
    <input type="text"><!--单行文本框-->
    <input type="password"><!--密码框-->
    
    <input type="radio" name="sex"><!--单选-->
    <input type="radio" name="sex"><!--name属性值一样，就会成为单选-->
    
    <input type="checkbox"><!--复选框-->

    <input type="file"><!--文件选择器-->
    <input type="date"><!--日期选择器-->
    <input type="datetime-local"><!--日期时间选择器-->
    <input type="week"><!--周选择器-->
    <input type="range" min="0" max="100" value="80"><!--滑块-->
    <input type="number" min="0" max="100" value="50" step="5"><!--数字选择器 step设置步长 value但前置-->

    <select> <!--下拉框-->
        <option ></option>
    </select>
    <textarea role="40" cols="40"></textarea><!--多行文本域-->

    <input type="button" value="普通">
    <input type="reset" value="重置">
    <input type="submit" value="提交"><!--必须放在form表单当中-->

</body>
</html>