html标签
表格标签
1.表头单元格标签<th>
表头单元格位于表格的第一行第一列，表头单元格里面的文本内容加粗居中显示
<th>为html表格中table head的缩写
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="300">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>张三</td> <td>男</td> <td>23</td></tr>
<tr><td>李四</td> <td>男</td> <td>22</td></tr>
<tr><td>王五</td> <td>男</td> <td>22</td></tr>
</table>
</body>
</html>
显示如下
``
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 张三 | 男 | 23 |
| 李四 | 男 | 22 |
| 王五 | 男 | 22 |
表头单元格也是单元格，常用于表头第一行突出重要性，表头单元格里的文字会加粗居中显示(th加粗居中,tel正常显示)
2.表格属性
1.align：规定表格相对周围元素的对齐方式，属性值有：left,center,right
2.border:规定表格单元是否拥有边框，默认值为“”，表示没有边框，属性值有：1或“”
3.cellpadding:规定单元边沿与其内容之间的空白，默认1像素，属性值为像素值
4.cellspacing:规定单元格之间的空白，默认2像素
5.width:规定表格的宽度，属性值为像素值或百分比
3.表格结构标签
<thead>表格的头部区域
<tbody> 表格的主体区域
| 排名 | 关键词 | 趋势 | 今日搜索 | 最近七日 | 相关链接 |
|---|---|---|---|---|---|
| 1 | 盗墓笔记 | ↓ | 345 | 123 | 贴吧 图片 百科 |
| 2 | 鬼吹灯 | ↓ | 124 | 6574 | 贴吧 图片 百科 |
| 3 | 西游记 | ↑ | 212 | 786 | 贴吧 图片 百科 |
| 4 | 东游记 | ↑ | 345 | 123 | 贴吧 图片 百科 |
| 5 | 甄嬛传 | ↓ | 348 | 5234 | 贴吧 图片 百科 |
| 6 | 水浒传 | ↑ | 345 | 1223 | 贴吧 图片 百科 |
| 7 | 三国演义 | ↑ | 234 | 7650 | 贴吧 图片 百科 |
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
table {
width: 500px;
height: 250px;
}
table ,
td {
border: 1px solid pink;
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>盗墓笔记</td>
<td>↓</td>
<td>345</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>鬼吹灯</td>
<td>↓</td>
<td>124</td>
<td>6574</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td>↑</td>
<td>212</td>
<td>786</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td>↑</td>
<td>345</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td>↓</td>
<td>348</td>
<td>5234</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td>↑</td>
<td>345</td>
<td>1223</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td>↑</td>
<td>234</td>
<td>7650</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</tbody>
</table>
</body>
</html>
小说排行榜代码的案例如上，注意，<thead>内部必须有<tr>标签，一般位于第一行。<tbody>用于定义表格的主体，主要用于放数据本体，以上标签都放在<table></table>标签中
4.合并单元格
1.合并单元格方式
跨行合并：rowspan="合并单元格个数"最上侧单元格为目标单元格，写合并代码
跨列合并：colspan=“合并单元格个数”，最左侧单元格为目标单元格，写合并代码
2.合并单元格个数
1.先确定跨行合并还是跨列合并
2.找到目标单元格，写合并方式=“合并的单元格数量”
3.删除多余单元格
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table width="500" align="center" border="1" cellspacing="0"height="250">
<tr>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
以上代码合并单元格的效果图
列表标签
1.无序列表
<ul>标签表示HTML中的无序列表，一般以项目符号呈现列表项，列表项使用<li>标签定义
使用方式如下：
``<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
``
显示效果如下
``
- 列表项1
- 列表项2
- 列表项3
…
说明：
1.无序列表的各个项没有顺序级别之分，是并列的
2.<ul></ul>中只能嵌套<li></li>，在<ul></ul>标签中输入其他标签或文字是不允许的
3.<li></li>之间相当于一个容器，可以放各种元素
4.无序列表会带有自己的样式属性，实际使用时用CSS来设置样式
2.有序列表
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
<ol>标签定义有序列表，列表排序以数字来表示。<li>表示列表项。
有序列表基本使用方式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
以上代码实现效果如下
``
- 列表项1
- 列表项2
- 列表项3
说明：
1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中嵌套其他标签或者文字的做法是不允许的。
2.<li>和</li>之间相当于一个容器，可以容纳任何元素。
3.有序列表会自带样式属性，实际使用中，使用CSS更改样式
3.自定义列表
<dl>标签用于定义描述列表，该标签与<dt>（定义项目或文字）和<dd>（描述每一个项目、名字）一起使用
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
以上代码显示效果如下
``
-
名词1
- 名词1解释1
- 名词1解释2
说明：
1.<dl></dl>里面只能包含<dt>和<dd>
2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
表单标签
在HTML中，一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3部分组成
1.表单域
表单域是一个包含表单元素的区域，在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提示交给服务器。
<form action="url地址" method="提交方式" name="表单域名称">
表单元素控件
</form>
说明：在写表单元素之前，需要用<form>标签将其全部包含。
1.action——url地址——用于指定接收并处理表单数据的服务器程序的url地址
2.method——get/post——用于设置表单数据的提交方式，其取值为get/post
3.name——名称——用于指定表单的名称，以区分同一页面中的多个表单域
2.表单控件（表单元素）
1.input表单元素
在表单元素中，<input>标签用于收集用户信息。
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）
<input type="属性值" />
说明：<input />标签为单标签。
type属性设置的不同属性值用来指定不同的控件类型。
type属性的属性值及其描述如下：
1.button——定义可点击按钮（多数情况下使用JavaScript启动脚本）
<input type="button" value="获取短信验证码">
显示如下
2.checkbox——定义复选框
爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"/> 睡觉<input type="checkbox" name="hobby" value="睡觉"/> 追星<input type="checkbox" name="hobby" value="追星" checked="checked"/>
显示如下
3.file——定义输入字段和浏览按钮，供文件上传
上传头像：<input type="file">
显示如下
4.hidden——定义隐藏的输入字段
5.image——定义图像形式的提交按钮
6.password（常用）——定义密码字段，该字段中的字符被掩码
密码：<input type="password" name="password" />
显示如下
7.radio（常用）——定义单选按钮
性别：男<input type="radio" name="sex" value="男"/>女<input type="radio" name="sex" value="女" checked="checked"/>
显示如下
8.reset——定义重置按钮。重置按钮可以清除表单里所有数据。
<input type="reset" value="重新填写">
显示如下
9.submit——定义提交按钮，提交按钮会把表单数据发送给服务器。
<input type="submit" value="免费注册">
显示如下
10.text（常用）——定义单行的输入字符，用户可在其中输入文本，默认宽度为20个字符
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/>
显示如下
除type属性外，<input>标签还有其他很多属性，其常用属性如下：
1.name——由用户自定义——定义input元素的名称
2.value——由用户自定义——规定input元素的值
3.checked——checked——规定此input元素首次加载时应当被选中
4.maxlength——正整数——规定输入字段中的字符最大长度
说明：
1.name和value是每个表单元素都有的属性值，主要给后台人员使用
2.name表单元素的名字要求单选按钮button和复选按钮checkbox有相同的属性值
3.checked属性主要针对于单选按钮和复选框，一打开页面则默认勾选元素
2.label标签
<label>标签为input元素定义标注（标签）。
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将光标转到或者选择对应的表单元素上，用来增加用户体验。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
注意：<label>标签的for属性应当与相关元素的id属性相同。
3.select表单元素
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
说明：
1.<select>中至少包含一对<option>
2.在<option>中定义selected="selected"时，当前项即为默认选中项。
以上代码显示效果如下
4.textarea表单元素
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。
在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
<textarea rows="3" col="20">
文本内容
</textarea>
说明：1.通过``标签可以轻松创建多行文本框。
2.cols=“每行中的字符数”，rows=“显示的行数”，实际开发中不常用，都是用CSS 来改变大小。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
