前端-HTML基础
1.<p></p>段落标签
<p>别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！</p>
2.</b>换行
3.<h></h>标题标签
<h1><h1></h1>标题标签h1</h1> <h2><h2></h2>标题标签h2</h2> <h3><h3></h3>标题标签h3</h3> <h4><h4></h4>标题标签h4</h4> <h5><h5></h5>标题标签h5</h5> <h6><h6></h6>标题标签h6</h6>
4.<div></div>块级标签 白板
块级标签，整满整行 div是HTML中出场率的标签，特点是没有任何属性，可以通过css进行装饰后成为任何一种标签
<div style="background-color: #F8AC59;width: 100%;height: 30px"></div>
5.<span></span>行内标签 白板
行内标签的代表，什么属性都不带，可以通过css进行装饰后成为任何一种标签
<span style="border: red 1px solid">冰你写作业了吗？</span>
6.<input /> 文本框标签
文本框标签，包含多个属性，text、password、button、checkbox、radio、file、submit、reset
<div class="content-inner content-margin"> <form action="https://www.baidu.com"> <h3><input /></h3> <h3>文本框标签，包含多个属性，text、password、button、checkbox、radio、file、submit、reset</h3> <input type="text" value="默认值"/> <input type="text"/> <input type="button" value="登录"> <p>兴趣爱好</p> <input type="checkbox" value="1" name="interest" checked="checked">篮球 <input type="checkbox" value="2" name="interest" >羽毛球 <input type="checkbox" value="3" name="interest" >排球 <input type="radio" name="sex" value="1" checked="checked">男 <input type="radio" name="sex" value="1">女 <p>上传文件</p> <input type="file"> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </div>
7.<form></form> 表单标签
表单标签可以理解为载体，承载着所有要像后端提交的数据，通常与input连用,表单提交数据分为get提交和post提交，get提交在url上挂参数，post提交在body中
<form action="https://www.baidu.com" method="post"> <input type="text" name="username"> <input type="password" name="password"> <input type="button" value="登录"> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
8.<label></label> 标题标签
label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id
<label>用户名</label><input type="text" placeholder="placeholder属性">
9.<textarea></textarea> 多行文本标签
多行文本 textarea 默认值在标签之间
<textarea>默认值</textarea>
10.<select></select> 下拉选择框标签
select option 下拉框标签 默认选择在option上增加selected size属性显示多少个 多选属性：multiple
<h5>单选</h5> <select name="city"> <option>黑龙江</option> <option selected="selected">辽宁</option> <option>北京</option> <option>四川</option> </select> <h5>多选</h5> <select name="city" multiple="multiple"> <option>黑龙江</option> <option selected="selected">辽宁</option> <option>北京</option> <option>四川</option> </select> <h5>超过4个就出滚动条</h5> <select name="city" size="4"> <option>黑龙江</option> <option selected="selected">辽宁</option> <option>北京</option> <option>四川</option> <option>吉林</option> <option>陕西</option> </select> <h3><select></select> <optgroup></optgroup></h3> <div><h4>对下拉选项进行分组optgroup 分组，label属性是组的名字，不可选择</h4></div> <select name="city" size="4"> <optgroup label="黑龙江省"> <option>哈尔滨</option> <option>牡丹江</option> <option>宁安</option> </optgroup> <optgroup label="北京市"> <option>北京</option> </optgroup> </select>
11.<a></a> 超链接标签
超链接 href属性为跳转的地址，target属性为以什么方式跳转"_blank"新tab跳转，a标签还可以做锚点，通过id进行对应关系的映射 去掉a标签的下划线通过属性text-decoration:none
<a href="https://www.cnblogs.com/cjxxl1213/" style="text-decoration: underline">小林博客</a> <a href="https://www.cnblogs.com/cjxxl1213/" target="_blank" style="text-decoration: none">小林博客</a>
12.<img /> 图片标签
img 图片标签 src：图片的位置 图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字
<img src="dsx.jpg">
13.<ul></ul> 列表标签
列表 ul li · 形式的列表
<ul> <li>第一列</li> <li>第二列</li> </ul>
列表 ol li 数字形式的列表
<ol> <li>第一列</li> <li>第二列</li> </ol>
分层列表 dl dd内层 dt外层
<dl> <dt>黑龙江</dt> <dd>哈尔滨</dd> <dd>牡丹江</dd> </dl> <dl> <dt>北京</dt> <dd>北京</dd> </dl>
14.<table></table> 表格标签
table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列
<table border="1"> <thead> <th>ID</th> <th>用例名称</th> <th>执行人</th> <th colspan="2">编辑</th> </thead> <tbody> <tr> <td>1</td> <td>table表格测试</td> <td>xiaolin</td> <td>详情</td> <td>编辑</td> </tr> <tr> <td>2</td> <td colspan="2">table表格测试</td> <td>详情</td> <td>编辑</td> </tr> <tr> <td>3</td> <td rowspan="2">table表格测试</td> <td>xiaolin</td> <td>详情</td> <td>编辑</td> </tr> <tr> <td>4</td> <td>xiaolin</td> <td>详情</td> <td>编辑</td> </tr> </tbody> </table>
