前端-HTML基础

1.<p></p>段落标签

<p>别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！</p>

2.</b>换行

3.<h></h>标题标签

<h1>&lt;h1&gt;&lt;/h1&gt;标题标签h1</h1>
<h2>&lt;h2&gt;&lt;/h2&gt;标题标签h2</h2>
<h3>&lt;h3&gt;&lt;/h3&gt;标题标签h3</h3>
<h4>&lt;h4&gt;&lt;/h4&gt;标题标签h4</h4>
<h5>&lt;h5&gt;&lt;/h5&gt;标题标签h5</h5>
<h6>&lt;h6&gt;&lt;/h6&gt;标题标签h6</h6>

4.<div></div>块级标签 白板

块级标签，整满整行 div是HTML中出场率的标签，特点是没有任何属性，可以通过css进行装饰后成为任何一种标签

<div style="background-color: #F8AC59; 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>&lt;input /&gt;</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>&lt;select&gt;&lt;/select&gt; &lt;optgroup&gt;&lt;/optgroup&gt;</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>