前端自学整理——HTML篇（三）

表格标签

（思维导图附在文章末尾）

为什么要使用表格标签

• 使数据的展示更加清晰，更有条理

表格标签的基本语法

• 还是从基础代码入手分析含义：

<table border="1">
<tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
</tr>
<tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
</tr>
</table>

1.  <tr></tr>标签用于定义表格中的行，<td> </td> 用于定义表格中的单元格。
2. <td></td>标签必须嵌套在<tr></tr>标签中。<tr></tr>标签必须嵌套在 <table> </table>标签中。
3. <table></table>标签用于定义表格域，其中的border代表边框属性。 

举例如下：

 

 表头单元格

举例如下：

<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
		<tr> 
			<th>姓名</th>  
			<th>年龄</th>  
			<th>性别</th>  
		</tr>
		<tr> 
			<td>李四</td>  
			<td>12</td>  
			<td>男</td>  
		</tr>
		<tr> 
			<td>张三</td>  
			<td>19</td>  
			<td>女</td>  
		</tr>
		<tr> 
			<td>王五</td>  
			<td>29</td>  
			<td>男</td>  
		</tr>
</table>

效果图：

 其中：th是用于定义表头标题的单元格，它的效果是将文字强调、居中显示

表格属性（可归纳于基本标签的属性）

属性是以键值对的形式出现的，不加逗号，以空格隔开

构成方式：<标签  属性1="值1" 属性2="值2"  属性3="值3" >   内容   <标签/>

 

合并单元格

我们先看效果，再上代码

效果如下：

可以看到照片单元格、武功秘籍单元格分别进行了竖向、横向合并。

合并单元格的步骤

1. 先确定是跨行还是跨列合并
2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。
3. 跨行合并：rowspan="合并单元格的个数" ；跨列合并：colspan="合并单元格的个数" ；
4. 删除多余的单元格

上面图的代码实现：

<table border="1" width="500" height="240" align="center" cellspacing="0">
		<caption> 个人简历 </caption>
		<tr>
			<td>猪猪侠</td>
			<td>男</td>
			<td>3</td>
			<!-- 目标单元格  先上后下 -->
			<td rowspan="2">照片</td>
		</tr>
		<tr>
			<td>身高 100cm</td>
			<td>猪猪侠族</td>
			<td>已婚</td>
			<!-- <td>照片</td> 这个单元格是多余的 -->
		</tr>
		<tr>
			<td>亲属关系</td>
			<!-- 第二个单元格是目标单元格 -->
			<td colspan="3">小菲菲</td>
			
		</tr>
		<tr>
			<td>武功秘籍</td>
			<td colspan="3">武功秘籍</td>
		</tr>
	</table>

 

 

列表标签

为什么要使用列表标签

• 表格：展示数据
• 列表：整齐、有序、方便地布局

列表标签的分类

有序列表

顾名思义，有序列表就是带有序号的列表

语法：

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

无序列表

语法：

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

自定义列表

语法：

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

 

表单标签

为什么需要表单

• 需要向后台提交数据，如填写完某个信息点击“提交”。

 表单的组成

• 表单域：包含表单元素元素的区域，使用<form></form>标签
• 表单控件：如文本框、按钮、选择按钮等
• 提示信息：提示用户该表单应该输入哪些内容

常见的表单标签

input标签

1. TYPE属性

 <input type="text" value="请输入用户名" name="username" />

说明：type用以定义表单的属性，取值可以是button、checkbox、radio

input表单的重要属性

属性值	描述
button	按钮
radio	单选按钮
checkbox	多选按钮
reset	重置按钮
submit	提交按钮
file	提交文件按钮

上才艺（代码）：

<form action="">
		<!-- type text  是一个文本框 -->
		用户名： <input type="text" value="请输入用户名" name="username" /> <br />
		昵 称： <input type="text" value="请输入昵称" name="nicheng" /> <br />
		<!-- type text  是一个密码框 -->
		密码： <input type="password" name="pwd" /> <br />
		性别：
		男 <input type="radio" name="sex" />
		女 <input type="radio" name="sex" checked="checked" />
		未知 <input type="radio" name="sex" /> <br />
		爱好:
		睡觉 <input type="checkbox" name="hobby" checked="checked" />
		爬山 <input type="checkbox" name="hobby" />
		篮球 <input type="checkbox" name="hobby" />
		足球 <input type="checkbox" name="hobby" /> <br />
		<!-- 普通按钮需要些value值 -->
		<input type="button" value="获取短信验证码" />
		<input type="submit" value="提交所填" />
		<input type="reset" value="重置所填" />

		上传头像:
		<!-- 文件域 上传文件用的-->
		<input type="file" />
</form>

 

VALUE属性：用以描述提示信息

NAME属性：用以标识这条input标签，方便后端人员获取数据

 

select标签

说明：用来定义选择框

 

上才艺：

<select>
		<option>--请选择省份--</option>
		<option selected="selected">北京</option>
		<option>天津</option>
		<option>上海</option>
		<option>山东</option>
</select>

<select>
		<option>--请选择城市--</option>
		<option>海淀区</option>
		<option>昌平区</option>
		<option>通州区</option>
		<option>雄安区</option>
</select>

说明：<option></option>用以定义选项

 

textarea 标签

语法：

<textarea rows="3" cols="3">

</textarea>

 

查阅资料

• 前端开发中需要掌握的属性较多，不需要每个都记忆，知道使用方法即可

推荐的网址：

• http://www.w3school.com.cn/
• https://developer.mozilla.org/zh-CN/

附：思维导图

 

个人向总结整理，如有疏漏，尽情指正！