标签
表格标签
1.表格的作用
用于显示,展示数据,增强数据可读性。
2.表格的语法
<table>
<tr>//行
<td>单元格内文字</td>//一行中的单元格
...
</tr>
...
<table>
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>name</td>
<td>age</td>
<td>sex</td>
</tr>
<tr>
<td>tom</td>
<td>18</td>
<td>boy</td>
</tr>
<tr>
<td>jerry</td>
<td>20</td>
<td>boy</td>
</tr>
</table>
</body>
</html>
表头单元格标签
tablehead 标签:加粗居中显示
将上述代码中的标签改成
效果:
表格属性
要写到表格标签table中去
<table align="left" border="1" cellpadding="20" cellspacing="0" width="500" hight="250">
...
</table>
align:单元格在网页中的位置
border:是否拥有边框,“1”有,“ ”没有
cellsapcing :单元格之间的空隙
cellpadding:内部文字与单元格之间的空隙
表格结构标签
表格:头部+主体
合并单元格
两种方式:跨行合并(rowspan),跨列合并(colspan)
目标单元格:
跨行:最上测单元格为目标单元格
跨列:最左侧
步骤:
1.找到目标单元格,在中添加合并格数:
2.删除被合并的单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border = "1" cellspacing = "0">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>tom</td>
<td colspan="2">18</td>
</tr>
<tr>
<td>jerry</td>
<td>20</td>
<td>boy</td>
</tr>
<tr>
<td>bob</td>
<td>24</td>
<td>girl</td>
</tr>
</tbody>
</table>
</body>
</html>
列表标签
列表分为三类:无序列表,自定义列表,有序列表
无序列表
<ul>
<li>内容1</li>
<li>内容2</li>
...
</ul>
1.无序列表中的内容没有顺序
2.< u l>中只有< li >
3.< li >中可以放其他元素
<ul>
<li>
小狼
</li>
<li>
小樱
</li>
<li>
知事
</li>
</ul>
自定义列表
-
自定义列表标签
<dl>
<dt>名词0</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
...
</dl>
< dl >中只能由< dt >,< dd >
有序列表
- 有序列表标签
<ol>
<li>
小狼
</li>
<li>
小樱
</li>
<li>
知事
</li>
</ol>
效果:
表单标签
表单的目的:收集用户信息
构成:表单域,表单控件,提示信息
表单域
包含表单元素的区域
<form action="url地址" method="提交方式" name="表单域的名字">
</form>
表单控件(表单元素)
< input >标签
单标签
<form target="www.baidu.com" method="GET">
用户名:<input type="text" name="username" value="请输入用户名" maxlength="9"> <br >
密码:<input type="password" name="password"><br>
性别:男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <br >
兴趣爱好:睡觉<input type="checkbox" checked="checked"> 吃饭<input type="checkbox"> 玩游戏<input type="checkbox"> <br >
<input type="submit" value="免费注册">
<input type="reset" value="重置"><br >
<input type="file" value="上传头像">
</form>
属性:
name:表单元素的名字,要求单选按钮和复选框有相同的名字。
value:规定input元素的名称。
value和name主要是给后台人员使用。
checked:单选按钮和复选框可以设置此属性,打开时默认选中。
submit:把表单数据发送到服务器
reset:恢复表单默认设置
button:点击按钮
file:提供文件上传
< label >标签
为input元素定义标注
与input一起使用
<label for="关联词">选中的文字</label> <input type="" id="关联词">
< select >标签
select中至少包含一对选项
在option中属性select=“”selected“,打开页面默认选中。
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
< textarea >标签
输入文本的区域
<textarea>默认文字</textarea>
困死我了!!!!总算是把HTML学下来了。。。虽然简单,但也太琐碎了吧。。
我们CSS见!