HTML_body标签

常用符号：空格：&nbsp 　　大于号：&gt 　　小于号： &lt 

块级标签：H标签(加大加粗)，P标签(段落间有间距)，DIV(白板)

行内标签：SPAN标签(白板)

<!--标题标签-->
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
<!--白板标签：没有任何css样式-->
<!--内联标签真白板标签：有多大占多大-->
<span>这是span标签</span>
<span>这是span标签</span>

<!--div标签：块级伪白板标签：无论多大占一行-->
<div>这是div标签</div>
<!--段落标签p：实现字与字之间的换行-->
<!--换行标签br：实现换行-->

<!--input标签：输入框-->

<!--name和value，是向后台以{key:value}向后台传递数据，name的值为key，value的值为value;-->
<input type="text" name="username" value="" placeholder="请输入用户名">

<!--密码框 type="password"-->
<input type="password" name="passwd">

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

<!--单选框 type="radio"，name必须相同才会互斥，实现单选-->
<div>
    <span>男</span><input type="radio" name="sex">
</div>
<div>
    <span>女</span><input type="radio" name="sex">
</div>


<!--form表单标签，表单提交会刷新页面，ajax不会刷新页面-->
<!--action请求路径，method请求方式-->
<form action="s.html" method="post">
    <input type="text" value="uuytr">
    <!--没有任何外加操作-->
    <input type="button" value="增加">
    <!--submit与form表单连用，会提交form表单中的数据-->
    <input type="submit" value="提交">
    <!--必须与from表单连用才能有重置的功能-->
    <input type="reset">
</form>



<!--label标签与input连用，通过for属性 映射到input的id属性，这样点击用户名，就可以获取输入框的焦点-->
<label for="i1">用户名：</label>
<!--id属性是选择器-->
<input id="i1" placeholder="请输入用户名" name="username" type="text">

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


<!--select 下拉框标签，在option上增加 selected 为默认选择-->
<!--要实现按住ctrl 可以多选的效果，需要使用multiple-->
<select name="city" size="1" multiple="multiple">
    <option value="1">黑龙江</option>
    selected="selected" 默认选中第二个
    <option value="2" selected="selected">河北</option>
    <option value="3">河南</option>
</select>


<!--选黑龙江后，再选第二级-->
<select size="7" multiple="multiple">
    <optgroup label="黑龙江">
        <option>牡丹江</option>
        <option>哈尔滨</option>
        <option>鸡西</option>
    </optgroup>
    <optgroup label="河北">
        <option>石家庄</option>
        <option>保定</option>
        <option>涞水</option>
    </optgroup>
</select>

<!--a标签：超链接-->
<a href="https://www.baidu.com/" target="_blank" style="text-decoration:none">百度一下</a>

<!--image标签：-->
<!--alt属性：当图片加载失败时所展示的文案-->
<img src="logo.jpg" alt="这是logo" title="logo">

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

<!--数字列表-->
<ol>
    <li>用例名称</li>
    <li>用例方法</li>
    <li>返回参数</li>
</ol>

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

<!--表格标签-->
<!--thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框
coslpan：td占几列 rowspan：tr占几列-->
<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 rowspan="3">post</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>2</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>3</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
    </tbody>
</table>