表格标签的主要作用
1.表格主要用于显示、展示数据。
表格的基本语法结构
1.<table> </table> 定义表格的标签
2.<tr> </tr> 表格中的行,必须嵌套在<table> </table> 中
3.<td> </td> 表格单元格,必须嵌套在<tr> </tr>中
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
表格标签
1.表头标签 <th> </th>
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
2.表格的属性
属性名 | 属性值 | 描述 |
align | left、center、right | 表格对齐,靠左靠头居中 |
border | 1或“” | 表格边框 |
cellpadding | 像素值 | 单元格与文字的距离 |
cellspacing | 像素值 | 单元格与单元格之间的距离 |
width | 像素值或百分比 | 规定表格的宽度 |
可以用table>tr*>td*3快速生成三行三列表格
用table>(tr>th*3)+(tr*2>td*3)快速生成第一行是表头的三行三列表格
3.合并单元格
跨行合并:
<td rowspan="合并单元格的个数"> </td>
跨列合并:
<td colspan="合并单元格个数"> </td>
合并单元格三部曲:
1. 先确定是跨行还是跨列合并。
2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如:。
3. 删除多余的单元格
列表标签
1.无序列表<ul>(重点)
无序列表的基本格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
1.无序列表的各个列表项之间没有顺序等级之分,关系是并列的。
2.<ul> </ul>中只能有<li> </li>,不能有其他的标签。
3.<li> </li>中可以放任何的标签。
4.无序列表会带有自己的样式属性,但在实际的使用的时候,我们会使用css来设置。
2.有序列表<ol>(理解)
有序列表的基本格式:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
1.<ol> </ol>中只能有<li>标签,和无序列表是一样的。
2.<li> </li>之间相当于一个容器,可以容纳所有的标签。
3.有序列表和无序列表一样,都带有自己的样式属性,在实际使用的时候,会用css来设置。
3.自定义列表<dl>(重点)
自定义标签的基本格式:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
1.<dl> </dl>中只能包含<dt>和<dd>。
2.<dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>。
表单标签
1.使用表单的目的就是为了收集用户信息。
2.在html中,一个完整的表单通常由表单域、表单控件(表单元素)和提示信息3个部分组成。
3.表单域(<form>标签)
在html中,<form>标签用于定义表单域,以实现用户信息的收集和传递。<form>会把它范围内的表单元素提交给服务器。
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>
属性 | 属性值 | 作用 |
action | url地址 | 用于指定接收并处理表单数据的服务器的URL地址 |
method | get/post | 用于设置表单数据的提交方式,其值取为ge或post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
4.表单控件(表单元素):input 输入表单元素
select 下拉表单元素
textarea 文本域元素
5.input 输入表单元素
<input> 标签用于收集用户信息。其中包含一个type属性极为重要。格式为:
<input type="属性值">
<input>为单标签。
type属性:
属性 | 描述 |
button | 按钮(实现后期一大堆功能,能够启动JavaScript脚本) |
checkbox | 复选框 |
file | 上传文件 |
hidden | 隐藏输入字段 |
image | 图像形式提交按钮 |
radio | 单元按钮 |
reset | 重置按钮 |
submit | 提交按钮 |
password | 密码框 |
text | 定义单行输入字段,用户可在其中输入文本,默认宽度为20字符 |
<input>标签的其他属性:
属性 | 属性值 | 描述 |
name | 用户自定义 | 定义input元素名称 |
value | 用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时对应的被选中 |
maxlength | 正整数 | 规定输入的字符最大长度 |
1.name表单元素的名字,要求单元按钮和复选框有相同的name值。
2.checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素。
3.maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用。
6.<label>标签
<label>标签为 input 元素定义标注(标签)。
<label>标签用于绑定一个表单元素, 当点击 标签内的文本时,浏览器就会自动将焦点(光标)转到或者 选择对应的表单元素上,用来增加用户体验。
语法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心:<label>标签的for 属性应当与相关元素id属性相同。
7.<select> 表单元素(下拉菜单)
在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用< >标签控件定义下拉列表。
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
1.<select>中至少包含一对<option>。
2.在中定义 selected =“ selected " 时,当前项即为默认选中项。
8.<textarea> 表单元素(留言板)
语法:
<textarea rows="3" cols="20">
文本内容
</textarea>
1.通过 标签可以轻松地创建多行文本输入框。
2.cols=“每行中的字符数” ,rows=“显示的行数”,我们在实际开发中不会使用,都是用 CSS 来改变大小。
查阅文档
1.W3C : http://www.w3school.com.cn/
2.MDN: https://developer.mozilla.org/zh-CN/