1.表格标签
1.1表格的主要作用:展示数据
1.2表格的基本语法:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
1.<table></table>
是用于定义表格的标签
2.<tr></tr>
标签用于定义表格中的行,必须嵌套在<table></table>
标签中
3.<td></td>
用于定义表格中的单元格,必须嵌套在<tr></tr>
标签中
4.字母td指表格数据(table data),即数据单元格的内容
1.3表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
个人信息表
姓名 | 性别 |
---|---|
小王 | 男 |
小张 | 女 |
表头单元格也是单元格,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中显示。
1.4表格属性
表格标签的属性实际开发中不常用,后面通过CSS设置
属性名 | 属性值 | 描述 |
---|---|---|
align | left right center | 规定表格相对周围元素的对齐方式 |
border | “1"或”" | 规定表格单元是否拥有边框,默认为"",表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
1.5表格结构标签
1.<thead></thead>
:用于定义表格的头部,<thead>
内部必须拥有<tr>
标签,一般位于第一行
2.<tbody></tbody>
:用于定义表格的主体,主要用于放数据本体。
1.6合并单元格
合并单元格方式:
跨行合并:rowspan=“合并单元格个数”
跨列合并:colspan=“合并单元格的个数”
目标单元格:(写合并代码)
跨行:最上侧单元格为目标单元格,写合并代码
跨列:最左侧单元格为目标单元格,写合并代码
合并单元格三部曲:
1.先确定是跨行还是跨列合并
2.找到目标单元格,写上合并方式=合并的单元格数量,比如:<td colspan="2"></td>
3.删除多余单元格
1.7表格总结
1.表格的相关标签:
我们学习了 table 标签 tr 行标签 td 单元格标签 th 表头单元格标签 thead 表格头部区域标签 tbody 表格主体域标签
2.表格相关属性
属性名 | 描述 |
---|---|
align | 表格相对于周围元素的对齐方式 |
border | 表格的边框 |
cellspadding | 单元边沿与内容之间的空白 |
cellspacing | 单元格之间的空白 |
width | 表格的宽度 |
3.合并单元格
2.列表标签
列表用来布局,列表最大的特点就是整齐、整洁、有序
列表分为三类:有序列表、无序列表、自定义列表
2.1无序列表(重点)
<ul>
标签表示HTML页面中项目的无序列表,列表项用<li>
标签定义
无序列表的基本语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
1.无序列表中的各个列表项没有顺序级别之分,都是并列的
2.<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或文字的做法是不被允许的。
3.<li></li>
之间相当于一个容器,可以容纳所有元素
4.实际使用时无序列表的样式属性使用CSS来设置
2.2有序列表(理解)
有序列表的每个列表项会按照一定的顺序排列定义。
有序列表的基本语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
1.<ol></ol>
中只能嵌套<li></li>
,直接在<ol></ol>
标签中输入其他标签或文字是不被允许的
2.<li></li>
之间相当于一个容器,可以容纳所有元素
4.实际使用时有序列表的样式属性使用CSS来设置
2.3自定义列表(重点)
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号
2.4列表总结
标签名 | 定义 | 说明 |
---|---|---|
<ul></ul> | 无序标签 | 里面只能包含li 没有顺序,使用较多。li里面可以包含任何标签 |
<ol></ol> | 有序标签 | 里面只能包含li 有顺序,使用相对较少。li里面可以包含任何标签 |
<dl></dl> | 自定义列表 | 里面只能包含dt和dd。dt和dd里面可以放任何标签 |
3.表单标签
3.1为什么需要表单
为了收集用户信息
3.2表单的组成
在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息三部分组成
3.3表单域
表单域是一个包含表单元素的区域
在HTML标签中,<form>
标签用于定义表单域,以实现用户信息的收集和传递,<form>
会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单名称,以区分同一个页面中的多个表单域 |
3.4表单控件
3.4.1<input>
表单元素
在表单元素中<input>
标签用于收集用户信息
在<input>
标签中,包含一个type属性
<input type="属性值" />
<input/>
标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 定义input元素的名称 |
value | 由用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
1.name和value是每个表单元素都有的属性值,主要给后台人员使用
2.name表单元素的名字,要求单选按钮和复选框要有相同的name值
3.checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就默认选中某个表单元素
4.maxlength是用户可以在表单元素输入的最大字符数,一般较少使用
3.4.2<label>
标签
<label>
标签为input元素定义标签
<label>
标签用于绑定一个表单元素,当点击<label>
标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
语法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
核心:<label>
标签的for属性应当与相关元素的id属性相同
3.4.3<select>
表单元素
使用<select>
标签控件定义下拉列表,节约页面空间
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
1.<select>
中至少包含一对<option>
2.在<option>
中定义selected="selected"时,当前项就是默认选中项
3.4.4<textarea>
表单元素
在表单元素中,<textarea>
标签是用于定于多行文本输入的控件,常见于留言板、评论
语法:
<textarea rows="3" cols="20">
文本内容
</textarea>
1.通过<textarea>
标签可以轻松创建多行文本输入框
2.cols=“每行中的字符数” ,rows=“显示的行数”,实际开发中用CSS改变大小