您的位置: 首页  >  文章  >  HTML标签

HTML标签

分类: 文章 • 2025-02-28 12:35:04



一、标题、div、span、p、br、a、img、textarea标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>
<body>
<!-- 标题标签 h1最大 h6最小 只需要记住先出生最大 自带属性 -->

<h1>jamie</h1>

<h2>jamie</h2>

<h3>jamie</h3>

<h4>jamie</h4>

<h5>jamie</h5>

<h6>jamie</h6>

<!--div标签-->
<!--块级伪白板标签-->
<div>这是div标签</div>


<!--span标签-->
<!--内联标签真白板标签-->
<span>这是span标签</span>


<!--p标签，段落标签 自动换行-->
<!--一个p标签，是一个段落-->
<p>这是关于Chrome浏览器的介绍：Chrome浏览器是google旗下的浏览器。
    Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。
    最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，
    开始使用webkit的分支内核Blink。</p>
<p>这是关于Chrome浏览器的介绍：Chrome浏览器是google旗下的浏览器。
    Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。
    最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，
    开始使用webkit的分支内核Blink。</p>


<!--br标签，换行标签-->
<br>
<br>


<!--a标签 超链接标签-->
<a href="https://www.baidu.com">百度</a>
<!--_blank 新建标签页打开，text-decoration为none去除下划线 -->
<a href="https://www.baidu.com" target="_blank" style="text-decoration: none ">百度</a>


<!--img标签 图片标签-->
<img src="tubiao.ico">
<!--alt属性代表当图片加载失败时展示的文案-->
<!--title属性为鼠标悬浮时的文案-->
<img src="tubiao.ico" alt="这是图片" title="logo">
</body>
</html>

<!--textarea标签 多行文本-->
<textarea name="content">这是textarea的内容</textarea>



二、input标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>

<body>


<!--input标签，输入框-->
<input type="text" name="" value="请输入用户名">
<!--鼠标移入输入框后，请输入用户名消失，使用属性placeholder-->
<input type="text" name="" placeholder="请输入用户名">
<!--以key value的形式传递给后台 value可以不写，不写时value取input框中输入的内容{'username':'输入的内容'}-->
<input type="text" name="username" placeholder="请输入用户名">


<!--密码为隐藏格式-->
<input type="password" name="password">


<!--上传文件 -->
<!--文件类 file 如果上传文件一定要在form中添加特殊属性 enctype="multipart/form-data" 意思是一点一点的发给服务器-->
<input type="file" name="file"/>


<!--多选框checkbox  默认勾选使用checked-->
<input type="checkbox" name="" checked="checked">


<!--单选框radio -->
<input type="radio" name="">


<!--radio name字段相同时，单选框互斥 -->
<!--男 女只能选一个-->
<div>
    <span>男</span> <input type="radio" name="sex">
</div>
<div>
    <span>女</span> <input type="radio" name="sex">
</div>


<!--form与input联用-->
<!--button、submit 的区别-->
<!--button只是个按钮，点击后没有任何的附加操作；实际工作中button用的比较多，可以联合onclick进行ajax提交，不刷新页面-->
<!--submit与form表单连用，点击后，会提交form表单中的数据，刷新页面-->
<!--form表单提交会刷新页面，ajax不会刷新页面-->
<form action="s.html" method="post">

    <input type="button" value="增加">
    <input type="submit" value="提交">
    <!--点击重置按钮，会将内容重置为value的内容-->
    <input type="text" value="已经被重置了">
    <input type="reset">
</form>


<!--label 与 input连用 通过for属性 映射到input的id属性-->
<!--扩展可点击范围，点击用户名输入框也会进入可编辑状态-->
<label for="i1">用户名：</label>
<!--id属性选择器-->
<input id="i1" placeholder="请输入用户名" name="username" type="text">




</body>
</html>

HTML标签


三、select、列表、表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>
<body>


<!--select标签 下拉框标签 size表示下拉框展示多少个 mutiple表示可以多选，摁住ctrl selected表示默认选中-->
<select name="city" size="1" multiple="multiple">
    <option value="1">北京</option>
    <option value="2" selected="selected">河南</option>
    <option value="3">河北</option>
</select>

<!--下拉框 分组-->
<select>
    <optgroup label="黑龙江">
        <option>牡丹江</option>
        <option>哈尔滨</option>
        <option>鸡西</option>
    </optgroup>
    <optgroup label="河北">
        <option>保定</option>
        <option>石家庄</option>
        <option>廊坊</option>
    </optgroup>
</select>



<!--无序列表标签 ul-->
<ul>
    <li>用例名称</li>
    <li>用例方法</li>
    <li>返回参数</li>
</ul>


<!--有序列表标签 ol 即带数字-->
<ol>
    <li>用例名称</li>
    <li>用例方法</li>
    <li>返回参数</li>
</ol>


<!--列表 分组-->
<dl>
    <dt>黑龙江</dt>
    <dd>牡丹江</dd>
</dl>
<dl>
    <dt>河北</dt>
    <dd>保定</dd>
</dl>



<!--表格标签 table-->
<!--thead为表头，tr代表行，th代表列-->
<!--tbody为表体，tr代表行，td代表列-->
<!--colspan，占n列，即横向合并单元格-->
<!--rowspan，占n行，即纵向合并单元格-->
<table border="1">
    <thead>
        <tr>
            <th>id</th>
            <th>caseName</th>
            <th>Method</th>
            <th colspan="2">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="3">抽奖</td>
            <td>post</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
            <tr>
            <td>2</td>
            <td>post</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
            <tr>
            <td>3</td>
            <td>post</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
</body>
</html>

HTML标签



四、比较重要的标签

  1. 出场率最高的标签：div标签；
  2. form与input联用；
  3. select标签；

相关推荐