HTML基础知识

# 列表

无序列表

<ul>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
    ...
</ul>

一组类似的内容排列在一起适合使用无序列表，如新闻列表、文章列表、导航条 等等

有序列表

<ol>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
    ...
</ol>

一组类似的内容排列在一起且列表项有顺序 适合使用有序列表，如各种排行榜。

定义列表

<!-- 一个dt对应一个dd -->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>JavaScript</dt>
    <dd>一种浏览器脚本语言</dd>
</dl>

<!-- 一个dt对应多个dd-->
<dl>
    <dt>如何掌握一个 HTML 标签？</dt>
    <dd>掌握该标签的语义</dd>
    <dd>掌握该标签具有那些属性以及属性的值如何设置</dd>
    <dd>掌握该标签是单标签还是双标签</dd>
</dl>

# 列表标签总结

标签名	功能和语义	属性	单标签还是双标签
li	列表项		双标签
ul	无序列表包裹标签		双标签
ol	有序列表包裹标签		双标签
dl	定义列表包裹标签		双标签
dt	定义列表包裹标签		双标签
dd	定义列表项描述		双标签

                        列表项（li标签）只能被 ul 或者 ol 直接包裹！

# 表格标签

表格的结构

<!--表格包裹标签-->
<table>
    <!-- 表格标题 -->
    <caption>表格标题</caption>
    
    <!--表格头部-->
    <thead>
        <!-- 行 -->
        <tr>
            <!-- 单元格 -->
            <th>单元格内容</th>
            ....
        </tr>
        ...
    </thead>
    
    <!--表格主体-->
    <tbody>
        <!-- 行 -->
        <tr>
            <!--单元格-->
            <td>单元格内容</td>
            ...
        </tr>
        ...
    </tbody>
    
    <!--表格脚-->
    <tfoot>
        <!-- 行 -->
        <tr>
             <!--单元格-->
            <td>单元格内容</td>
            ...
        </tr>
        ...
    </tfoot>
</table>

1. 如果 table 的里面直接写 tr，浏览器会自动添加一个 tbody； 建议自己写 thead、tbody、tfoot
2. 表格相关的标签必须严格按照规定进行包裹 table > caption、tbody、thead、tfoot > tr > th、td
3. td 和 th 的里面可以包裹任意标签

表格整体样式设置

width            设置表格的宽度
height            设置表格的高度
border            设置表格的边框
cellspacing        设置单元格之间的间距
cellpadding        设置单元格边框与内容的间距

单元格样式设置

给 td 或者 th 设置如下属性:

align    用于设置单元格内容水平对齐方式，值: left（默认值）、center、right
valign  用于设置单元格内容垂直对齐方式，值： top、middle（默认值）、bottom

设置单元格宽高

给 td 或者 th 设置如下属性：

width     用于设置单元格宽度，同一列的单元格都会生效
height   用于设置单元格高度，同一行的单元格都会生效

单元格跨行和跨列（重要）

给 td 或者 th 设置如下属性：

rowspan        设置该单元格跨多少行
colspan        设置该单元格跨多少列

表格标签总结

标签名	功能和语义	属性	单标签还是双标签
table	表格包裹标签	cellpadding cellspacing border height width	双标签
caption	表格标题		双标签
thead	表格头		双标签
tbody	表格主体		双标签
tfoot	表格脚		双标签
tr	行		双标签
td	单元格	rowspan colspan valign align height width	双标签
th	表头单元格	rowspan colspan valign align height width	双标签

# 表单

表单总体设置

<form action="http://www.baidu.com/s" target="_blank">
    <input type="text" name="wd">
    <input type="submit">
</form>

表单控件

文本输入框

<!-- 文本输入框 -->
<input type="text">

<!-- input 标签的type 属性默认值是 text ,默认就是文本输入框-->
<input>

<!-- 限制文本输入框的最大输入长度 -->
<input type="text" maxlength="10">

密码输入框

<!-- 密码输入框 -->
<input type="password">

<!-- 限制密码输入框的最大输入长度  --->
<input type="password" maxlength="6">

单选框

<input type="radio" name="gender"> 男   
<input type="radio" name="gender"> 女		
<input type="radio" name="gender" checked> 其他

1. 多个单选框要实现单选的功能，必须设置相同 name 属性值。
2. 设置 checked 属性可以实现默认被选中，checked 属性不需要设置值。

复选框

<input type="checkbox" checked> 吃饭 
<input type="checkbox"> 睡觉 
<input type="checkbox"> 发呆 
<input type="checkbox" checked> 敲代码 

设置 checked 属性可以实现默认被选中，checked 属性不需要设置值。

提交按钮

<input type="submit">
<input type="submit" value="百度一下">
<button type="submit">登录</button>
<button>注册</button>

1. input 实现的提交按钮，按钮上文字默认是“提交”，通过 value 属性进行设置。
2. button 标签的type属性默认值就是 submit，默认就是提交按钮

重置按钮

<input type="reset">
<input type="reset" value="RESET">
<button type="reset">重置</button>

普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

文本域

<textarea cols="60" rows="10"></textarea>

rows 属性设置文本域默认显示多少行文字，影响文本域的高度
cols 属性设置文本域一行默认显示多少个字，影响文本域的宽度

下拉选项

<select>
    <option>上海</option>
    <option>北京</option>
    <option>天津</option>
    <option>重庆</option>
    <option selected>乌鲁木齐</option>
    <option>呼和浩特</option>
    <option>伊犁哈萨克自治州</option>
</select>

给 option 设置 selected 属性实现该选项默认选中，selected 属性无需设置值。

表单控件的属性

name 属性

1. 给表单控件设置 name，后端根据 name 的名称获取对应的数据
2. 提交按钮、重置按钮、普通按钮不需要设置 name 属性
3. 多个单选框必须设置相同的 name 才可以实现单选效果

value 属性

1. 文本输入框、密码输入框，通过 value 属性可以设置输入框中默认显示的文字
2. 单选框、复选框，value 属性可以设置提交到后端的数据内容
3. input 标签实现提交按钮、重置按钮、普通按钮，value 属性可以设置按钮上显示的文字
4. option 选项设置 value，设置向后端提交的数据内容
   注意：如果 option 没有设置 value 属性，会把标签包裹的文字作为提交的数据内容
5. button、textarea、select 没有value属性

disabled 属性

1. disabled 属性设置之后，表单控件会不可用； 该属性无需设置值
2. select 设置 disabled 属性整个下拉选项不可用； option 设置disabled 属性，只有该选项不可用。

label 标签的使用

1. label 标签可以将描述文字与表单控件进行关联，实现点击描述文字，对应的表单控件获取焦点
2. 与文本输入框、密码输入框、文本域、下拉选项 通过设置 lable 的for属性值与表单控件的id值一致
3. 与单选框、复选框 将label把表单控件与文字包裹起来
4. 提交按钮、重置按钮、普通按钮不需要使用 label 关联。

<label for="usernameInp">用户名：</label>
<input type="text" id="usernameInp"> <br>


<label>
    <input type="radio" name="gender" value="male"> 男 
</label>
<label>
    <input type="radio" name="gender" value="female"> 女		
</label>
<label>
    <input type="radio" name="gender" value="else" checked> 其他
</label>

表单标签总结

标签名	语义和功能	属性	单标签和双标签
form	表格包裹标签	action：设置提交地址。 method：设置提交方式，值:get（默认值）、post target：提交地址在哪个窗口打开，值: _self、_blank	双标签
input	各种类型的表单控件	type：设置表单控件的类型 maxlength: 设置最大可输入长度，用于text、password checked：默认选中，用于 radio、checkbox name: 设置名字。 value：设置表单控件的值。 disalbed：设置不可用。	单标签
button	设置按钮	type: 设置按钮的类型。 disalbed：设置不可用。	双标签
textarea	文本域	rows：设置显示的行数。 cols：设置显示的列数。 name: 设置名字。 disalbed：设置不可用。	双标签
select	下拉选项包裹标签	name: 设置名字。 disalbed：设置不可用。	双标签
option	下拉选项的选项	value：设置表单控件的值。 disalbed：设置不可用。	双标签
label	关联表单控件	for：关联表单控件，与表单控件id对应	双标签

        

 1. input 标签的type 属性的值： text、password、radio、checkbox、submit、reset、button，默认值是 text
2. button 标签的type 属性的值： submit、reset、button，默认值是 submit