常用符号:空格:  大于号:> 小于号: <
块级标签:H标签(加大加粗),P标签(段落间有间距),DIV(白板)
行内标签:SPAN标签(白板)
1 <!--标题标签--> 2 <h1>h1标签</h1> 3 <h2>h2标签</h2> 4 <h3>h3标签</h3> 5 <h4>h4标签</h4> 6 <h5>h5标签</h5> 7 <h6>h6标签</h6> 8 <!--白板标签:没有任何css样式--> 9 <!--内联标签真白板标签:有多大占多大-->10 <span>这是span标签</span>11 <span>这是span标签</span>12 13 <!--div标签:块级伪白板标签:无论多大占一行-->14 <div>这是div标签</div>15 <!--段落标签p:实现字与字之间的换行-->16 <!--换行标签br:实现换行-->
1 <!--input标签:输入框--> 2 ?3 <!--name和value,是向后台以{key:value}向后台传递数据,name的值为key,value的值为value;--> 4 <input type="text" name="username" value="" placeholder="请输入用户名"> 5 ?6 <!--密码框 type="password"--> 7 <input type="password" name="passwd"> 8 ?9 <!--多选框 type="checkbox",checked 默认勾选-->10 <input type="checkbox" name="" checked="checked">11 12 <!--单选框 type="radio",name必须相同才会互斥,实现单选-->13 <div>14 ????<span>男</span><input type="radio" name="sex">15 </div>16 <div>17 ????<span>女</span><input type="radio" name="sex">18 </div>19 20 21 <!--form表单标签,表单提交会刷新页面,ajax不会刷新页面-->22 <!--action请求路径,method请求方式-->23 <form action="s.html" method="post">24 ????<input type="text" value="uuytr">25 ????<!--没有任何外加操作-->26 ????<input type="button" value="增加">27 ????<!--submit与form表单连用,会提交form表单中的数据-->28 ????<input type="submit" value="提交">29 ????<!--必须与from表单连用才能有重置的功能-->30 ????<input type="reset">31 </form>32 33 34 35 <!--label标签与input连用,通过for属性 映射到input的id属性,这样点击用户名,就可以获取输入框的焦点-->36 <label for="i1">用户名:</label>37 <!--id属性是选择器-->38 <input id="i1" placeholder="请输入用户名" name="username" type="text">
1 <!--多行文本--> 2 <textarea name="content">这是textarea的内容</textarea> 3 ?4 ?5 <!--select 下拉框标签,在option上增加 selected 为默认选择--> 6 <!--要实现按住ctrl 可以多选的效果,需要使用multiple--> 7 <select name="city" size="1" multiple="multiple"> 8 ????<option value="1">黑龙江</option> 9 ????selected="selected" 默认选中第二个10 ????<option value="2" selected="selected">河北</option>11 ????<option value="3">河南</option>12 </select>13 14 15 <!--选黑龙江后,再选第二级-->16 <select size="7" multiple="multiple">17 ????<optgroup label="黑龙江">18 ????????<option>牡丹江</option>19 ????????<option>哈尔滨</option>20 ????????<option>鸡西</option>21 ????</optgroup>22 ????<optgroup label="河北">23 ????????<option>石家庄</option>24 ????????<option>保定</option>25 ????????<option>涞水</option>26 ????</optgroup>27 </select>
1 <!--a标签:超链接-->2 <a href="https://www.baidu.com/" target="_blank" style="text-decoration:none">百度一下</a>3 4 <!--image标签:-->5 <!--alt属性:当图片加载失败时所展示的文案-->6 <img src="logo.jpg" alt="这是logo" title="logo">
1 <!--列表标签--> 2 <ul> 3 ????<li>用例名称</li> 4 ????<li>用例方法</li> 5 ????<li>返回参数</li> 6 </ul> 7 ?8 <!--数字列表--> 9 <ol>10 ????<li>用例名称</li>11 ????<li>用例方法</li>12 ????<li>返回参数</li>13 </ol>14 15 <!--分层列表-->16 <dl>17 ????<dt>黑龙江</dt>18 ????<dd>牡丹江</dd>19 </dl>20 <dl>21 ????<dt>河北</dt>22 ????<dd>保定</dd>23 </dl>
1 <!--表格标签--> 2 <!--thead:表头 th:表头行 tbody:内容 tr:行 td:列 boder:表格的边框 3 coslpan:td占几列 rowspan:tr占几列--> 4 <table border="1"> 5 ????<thead> 6 ????????<tr> 7 ????????????<th>id</th> 8 ????????????<th>caseName</th> 9 ????????????<th>method</th>10 ????????????<th colspan="2">操作</th> ?<!--列合并-->11 ????????</tr>12 ????</thead>13 ????<tbody>14 ????????<tr>15 ????????????<td>1</td>16 ????????????<td rowspan="3">抽奖</td> ?<!--行合并-->17 ????????????<td rowspan="3">post</td>18 ????????????<td>编辑</td>19 ????????????<td>删除</td>20 ????????</tr>21 ????????<tr>22 ????????????<td>2</td>23 ????????????<td>编辑</td>24 ????????????<td>删除</td>25 ????????</tr>26 ????????<tr>27 ????????????<td>3</td>28 ????????????<td>编辑</td>29 ????????????<td>删除</td>30 ????????</tr>31 ????</tbody>32 </table>
HTML_body标签
原文地址:https://www.cnblogs.com/testfan/p/8922344.html