HTML常用标签下

6.表格标签

6.1表格的基本语法

<table>
	<tr>
		<td>单元格中的文字</td>
	</tr>
</table>

1.table是用于定义表格的标签

2.tr用于定义表格中的行必须嵌套在table标签中

3.td用于定义表格中的单元格,必须嵌套在tr标签中

6.2 表头单元格标签

一般表头单元格位于表格的第一行或第一列,表头单元个里面的文本内容加粗居中显示

<table>
	<tr>
		<th>表头</th>
	</tr>
</table>

6.3 表格属性

属性名	属性值	描述
align	left,center,right	规定表格相对于周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框,默认为"",表示没有边框
cellpadding	像素值	规定单元边沿预期内容之间的空白,默认1像素(单元格的内边距)
cellspacing	像素值	规定单元个之间的空白,默认2像素(单元格的外边距)
width	像素值或百分比	规定表格的宽度

6.4 表格结构标签

1.表格头部区域标签

<thead></thead>

内部必须拥有tr标签

2.表格主体区域标签

<tbody></tbody>

主要放数据本体

6.5 合并单元格

合并单元格方式

• 跨行合并:rowspan=“合并单元格的个数”
• 跨列合并:colspan=“合并单元格的个数”

目标单元格:(写合并代码)

• 跨行:最上侧单元格为目标单元格,写合并代码
• 跨列:最左侧单元格为目标单元格,写合并代码

合并单元格三部曲:

1. 先确定是跨行还是跨列合并
2. 找到目标单元格,写合并代码
3. 删除多余单元格

7.列表标签

7.1 无序列表

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

1.无序列表的各个列表项之间是没有顺序级别之分的,是并列的

2.ul中只能嵌套li,直接在ul标签中输入其他标签或者文字的做法是不被允许的

3.li之间相当与一个容器,可以容纳所有元素

4.无序列表会带有自己的样式属性,但在实际使用时,我们会使用css样式来设置

7.2 有序列表

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

1.ol中只能嵌套li

2.li相当于一个容器,可以容纳所有元素

3.有序列表会带有自己的样式属性,但在实际使用时,我们会用CSS来设置

7.3 自定义列表

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

1.dl里面只能包含dt和dd

2.dt和dd个数没有限制,经常是一个dt和多个dd

8.表单标签

8.1 表单的组成

在HTML中,一个完整的表单通常由表单域,表单控件和提示信息组成

8.2 表单域

表单域时一个包含表单元素的区域

在HTML标签中,form标签用户定义表单域,以实现用户信息的收集和传递

form会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
	各种表单元素控件
</form>

常用属性:

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于是指表单数据的提交方式,取值为get或post
name	名称	用于指定表单的名称,以区分同一个页面中的多个表单域

GET 和 POST 的区别

• GET在浏览器回退时是无害的，而POST会再次提交请求。
• GET请求会被浏览器主动cache，而POST不会，除非手动设置。
• GET请求只能进行url编码，而POST支持多种编码方式。
• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
• GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

8.3 表单控件

8.3.1 input表单元素

<input type="属性值" name="" value="" />

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

1.name和value时给个表单元素都有的属性值,主要给后台人员使用

2.name表单元素的名字,要求单选按钮和复选框要有相同的name值

3.checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就要可以默认选中某个表单元素

4.maxlength是用户可以在表单元素输入的最大字符数,一般较少使用

type的属性值:

type属性值	描述
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和"浏览"按钮,供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段,该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮,会清楚表单中的所有数据
submit	定义提交按钮,会把表单数据发送到服务器
text	定义单行输入的字段,用户可在其中输入文本,默认宽度为20个字符

8.3.2 label标签

label标签为input元素定义标注

label标签用于绑定一个表单元素当点击label标签内的文本时,浏览器就会自动将焦点转到或者选择对应的表单元素上,用来增加用户体验

语法:

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

核心:label标签中的for属性应当与相关元素的id属性相同

8.3.3 select表单元素

下拉列表

语法:

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

1.select中至少包含一对option

2.在option中定义selected="selected"时,当前项即为默认选中项

8.3.4 textarea表单元素

定义多行文本输入的控件

语法:

<textarea rows="3" cols="20">
文本内容
</textarea>

1.通过textarea标签可以轻松地创建多行文本输入框

2.cols=每行中的字符数,rows=显示的行数,我们在实际开发中不会使用,都是用css来改变大小