HTML-进阶-常用

一、HTML进阶-列表

1.无序列表(常用)

<ul>：定义无序列表，并且只能包含<li>子元素。

<li>：定义列表项，可以包含与<div>完全类似的内容，所以可以包含较多类型的子元素。

辅助记忆:

ul是unordered lists的缩写 (无序列表)

li是list item的缩写 （列表项目）

<ul>
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul> 

注意：

1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。

2.序列表

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

辅助记忆:

ol是ordered lists的缩写（有序列表）

li是list item的缩写 （列表项目）

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

• 有序列表中默认的type类型是数字，而且是从1开始的。它有两个属性：type、start。

• **type：**有五个属性值：1、a、A、i、I(罗马数字)，表示列表前缀的格式；

• **start：**属性值位数字， 表示从type类型的第几个数字开始，比如当你选的type=“a”,start=“3”。

3. 自定义列表

<img src="小米官网有" style="zoom: 33%;" />

<dl>：定义列表

<dt>：定义 标签定义了定义列表中的项目(术语)

<dd>：定义描述

辅助记忆:

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表项)

dd是definition description的缩写（自定义列表描述）

<dl>
    <dt>支付方式</dt>
    <dd>货到付款</dd>
    <dd>在线支付</dd>
    <dd>分期付账</dd>
</dl>

4. 列表总结

标签名	定义	说明
<ul></ul>	无序标签	里面只能包含li 没有顺序，我们以后布局中最常用的列表
<ol></ol>	有序标签	里面只能包含li 有顺序， 使用情况较少
<dl></dl>	自定义列表	里面有2个兄弟， dt 和 dd

二、HTML进阶-表格

1. 表格结构

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用: thead, tbody, tfoot 来标注， 这样更好的分清表格结构。

元素	描述
<caption>	定义表格标题。
<thead>	定义表格的页眉，用于定义表格的头部。用来放标题之类的东西
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚，放表格的脚注之类
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元格。

2. 表格属性

属性	值	描述
border	px	宽度。 (边框)
cellpadding	px	规定单元边沿与其内容之间的空白。
cellspacing	px	规定单元格之间的空白。
width	px	规定表格的宽度。
align	left center right	不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。

3. 合并单元格(难点)

跨行合并：rowspan（竖着）=“合并单元格的个数”

跨列合并：colspan（横着）=“合并单元格的个数”

合并单元格的思想：

• 将多个内容合并的时候，就会有多余的东西，把它删除。

• 合并的顺序 先上、先左 。

• thead、tfoot里的单元格不可以与tbody单元格进行合并。

4. 总结表格

标签名	定义	说明
<table></table>	表格标签	就是一个四方的盒子
<caption></caption>	表格标题标签	表格的标题，跟着表格一起走，和表格居中对齐
<tr></tr>	表格行标签	行标签要再table标签内部才有意义
<td></td>	单元格标签	单元格标签是个容器级元素，可以放任何东西
<th></th>	表头单元格标签	它还是一个单元格，但是里面的文字会居中且加粗
colspan和 rowspan	合并属性	用来合并单元格的

三、HTML进阶-表单(难点)

1.表单域和控件

1.1表单域

<form action="url地址" method="提交方式">
  各种表单控件
</form>

常用属性：

1. Action
   在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method
   用于设置表单数据的提交方式，其取值为get或post。

1.2控件input

• 语法：

  <input type="属性值" value="你好">
  

1.3 textarea控件

属性	值	描述
cols	number	规定文本区域内可见的宽度。
rows	number	规定文本区域内可见的行数。
disabled	disabled	规定禁用文本区域。
maxlength	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

2. input的type属性值

通过改变值type 属性值，可以决定了你属于那种input表单。

值	描述
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）

3. label标签(理解)

label 标签为 input 元素定义标注（标签）。

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male">

4.下拉菜单

4.1 select标签的属性

属性	值	描述
name	text	定义下拉列表的名称。
multiple	multiple	当该属性为 true 时，可选择多个选项。

<select></select>中至少应包含一对<option></option>。

4.2 option的标签属性

属性	值	描述
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。

共有的属性

属性	描述
checkbox	选中(选框)
selected	下拉列表选中
disabled	禁用文本域
maxlength	规定文本域的长度
readonly	只能读该字段

扩展

<fieldset>	定义一组相关的表单元素，并使用外框包含起来
<legend>	定义了 元素的标题