html基本篇 02 表格 列表 表单 标签

02 html基本内容 table ul ol dl form input select textarea label

表格标签<table>

嵌套标签

<tr>

table row 表格中的一行

<th>

table head 表头

属性

rowspan 跨行合并
colspan 跨列合并

<td>

table data 表格数据

属性

rowspan 跨行合并
colspan 跨列合并

属性

align

表格相对周围元素的对齐方式

属性值

left

靠左

center

靠中间

right

靠右边

border

规定表格单元是否拥有边框,默认为"",表示没有边框

cellpadding

规定单元边沿与其内容之间的空白 默认1像素

cellspacing

规定单元格之间的空白 默认2像素

width

表格的宽度

例子

第一行第一列 th	第一行第二列 th
第二行第一列 td	第二行第二列 td

第一行第一列 th	第一行第二列 th
第二行第一列 td	第二行第二列 td

第一行第一列 th	第一行第二列 th
第二行第一列 td	第二行第二列 td

第一行第一列 th	第一行第二列 th
第二行第一列 td	第二行第二列 td

第一行第一列 th	第一行第二列 th
第二行第一列 td	第二行第二列 td

第一行第一列 th	第一行第二列 th
第二行第一列 td	第二行第二列 td

练习，完成下面综合案例

试用图片

排名	关键词	趋势	今天搜索	最近七日	相关链接
1	鬼吹灯		345	123	贴吧 图片 百科
2	盗墓笔记		124	675432	贴吧 图片 百科
3	西游记		212	7654	贴吧 图片 百科
4	东游记		23	75645	贴吧 图片 百科
5	甄嬛传		121	7676	贴吧 图片 百科
6	水浒传		576576	1231421	贴吧 图片 百科
7	三国演义		234	7686	贴吧 图片 百科

第一行第一二列 th
第二三行第一列 td	第二行第二列 td
	第三行第二列 td

无序列表标签<ul>

unorder list

嵌套标签

<li>

list item列表项(ul中只允许嵌套li，而li中可以容纳所有元素)

例子

• 列表项1
• 列表项2
• 列表项3

有序列表标签<ol>

order list

嵌套标签

<li>

list item 列表项(ol中只允许嵌套li，而li中可以容纳所有元素)

例子

1. 列表项1
2. 列表项2
3. 列表项3

自定义列表标签<dl>

definition list

嵌套标签

<dt>

definition (list)title 列表头 定义项目/名字(dl中只允许嵌套dt、dd，而dt中可以容纳所有元素）

<dd>

definition (list)data 列表项 描述每一个项目/名字(dl中只允许嵌套dt、dd，而dd中可以容纳所有元素）

例子

名词1

名词1解释1

名词1解释2

表单标签 表单域<form>

属性

action

接受并处理表单数据的服务器程序url地址

method

用于设置表单数据的提交方式 取值是get或者post

name

用于指定表单名称，以区分同一个界面中的多个表单域

例子

表单域

表单控件 input标签<input/>

属性

type

设置不同属性值用来指定不同的控件类型

属性值

button

定义可点击按钮

checkbox

定义复选框

file

定义输入字段和"浏览"按钮，供文件上传

hidden

定义隐藏的输入字段

image

定义图像形式的提交按钮

password

定义密码字段。该字段中的字符被掩码

radio

定义单选按钮

reset

定义重置按钮(清空表单数据)

submit

定义提交按钮。提交按钮会把表单数据发送给服务器

text

定义单行输入字段 用户可在其中输入字符，默认长度是20个字符

name

定义input元素的名称

value

规定input元素的值

id

定义input元素的id

checked

规定此input元素首次加载时应当被选中

maxlength

规定输入字段中的字符的最大长度

例子

<form action="02test.html" method="GET" name="form_test">
    <input type="button" value="按钮"/><br/>
    <input type="checkbox" value="checkbox1" name="checkbox_test" checked/>复选框1<br/>
    <input type="checkbox" value="checkbox2" name="checkbox_test"/>复选框2<br/>
    <input type="file"/><br/>
    <input type="hidden"/>
    <input type="image" src="./images/原神图标.jpg"/><br/>
    <input type="password"/><br/>
    <input type="radio" value="radio1" name="radio_test" checked/>单选框1<br/>
    <input type="radio" value="radio2" name="radio_test" />单选框2<br/>
    <input type="reset" id="reset_test"/><br/>
    <input type="submit"/><br/>
    <input type="text" value="value" id="text_test" maxlength="20"/><br/>
</form>

表单控件 选项框标签<select>

嵌套标签

<option>

选项

例子

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

表单控件 文本域标签<textarea>

属性：

rows

行数

cols

列数

例子

<textarea rows="3" cols="30">文本框</textarea>

表单控件 label标签<label>

当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验

属性：

for

绑定一个表单元素的id

例子

<form action="02test.html" method="GET" name="form_test">
    <input type="text" id="text_test"/><br/>
	<label for="text_test">text_test</label>
</form>