1.嵌套列表
列表之间可以相互嵌套形成嵌套列表。
示例:
图例中辽宁省和山东省位于第一层级,而底下的沈阳、济南等位于第二层级,如有需要,也可以添加第三第四第五层级。
2.表格标签
<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
注:它们之间有嵌套关系,要符合嵌套规范。
语义化标签:<tHead>、<tBody>、<tFood>
使用语义化标签会使程序更加符合Html规范,同时便于搜索引擎检索以及团队协作
,虽然看起来对程序没有作用,但是还是推荐在写程序的时候将其添加进去。
在一个Body中tBody是可以出现多次的,但是tHead、tFood只能出现一次。
示例:
3.表格属性
<border>:表格边框
<cellpadding>:单元格内的空间
<cellspacing>:单元格之内的空间
<rowspan>:合并行
<colsoan>:合并列
<align>:左右对齐方式
<valign>:上下对齐方式
border使用示例:
可以看到,表格有了边框。
cellpadding使用示例:
可以看到,表格内的距离变宽了。
cellspacing使用示例:
可以看到,表格之间的距离变宽了。
colspan使用示例:
"2"所代表的含义为包括这一列的两列。
可以看到,第一行的前两个单元格被合并在了一起。
rowspan使用示例:
align、valign的相关内容。
align:left、center、 right(依次分别是左、中、右)
valign:top、middle、bottom(依次分别是上、中、下)
示例:
4.表单标签
<form>:表单的最外层容器
<input>:标签用于搜索用户信息,根据不同的type属性值,知识不同的控件,如
输入框、密码框、复选框等。
imput(单标签)标签有一个type属性,决定是什么控件。
type属性 | 含义 |
---|---|
text | 普通的文本输入框 |
password | 密码输入框 |
checkbox | 复选框 |
radio | 单选框 |
file | 上传文件 |
submit | 提交按钮 |
reset | 重置按钮 |
示例:
图中划线处为表单的提交地址或路径
复选框的相关扩展
checked:默认选择。
disabled:禁止选择。
示例:
输入框以及密码框的相关扩展:
placeholder:提示语。
示例:
<textarea>:多行文本文档
<select>、<option>:下拉菜单
txetarea使用示例:
注:cols是行宽,rows是列宽。
select使用示例:
注:select默认会选择第一个选项。
想要select默认选择其他选项,可在该选项前添加selected来实现。
示例:
<select size="">:限制下拉菜单的选项数,引号内为几就显示几个选项。
<select multiple>:表示多选(通过鼠标划动或ctrl进行多选)同样适用于<input type>
<label>:辅助表单
5.表格表单组合
表格表单之间可以相互组合形成数据展示效果
示例:
div与spawn表示标签
div(块):
div全称为division,“分割、分区”的意思,<div>标签用来划分一个区域,
相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。
即HTML中大多数的标签都可以嵌套在<div>标签中,<div>中还可以嵌套多层
<div>,用来将网页分割成独立的、不同的部分,来实现王爷的规划和布局。
span(内联):
用来修饰文字,div与span都是没有任何默认样式的,必须配合CSS才行。
示例:
两者在看上去在输出上没有区别,其实是有的,其区别与CSS相关。