列表标签
无序列表
<ul>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
....
</ul>
ul里面只能包含li标签
li标签可以包含任意元素
无序列表有默认的小圆点 后续css处理
有序列表
<ol>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
....
</ol>
ol里面只能包含li标签
li标签可以包含任意元素
有序列表有默认的样式 后续css处理.
自定义列表
<dl>
<dt>列表主体</dt>
<dd>列表每一项内容</dd>
<dd>列表每一项内容</dd>
<dd>列表每一项内容</dd>
....
</dl>
dl里面只能包含dt/dd
dt/dd里面可以包含任意元素
自定义列表有默认缩进效果 后续css处理.
表格标签
表格基本语法
<table>
<tr>
<td></td>
<td></td>
...
</tr>
...
</table>
table 表格整体
tr 表格的每一行
td 单元格
表格属性
table属性
border:边框
width:宽度
height:高度
align:对齐方式(left|center|right)
rules:all(细线表格)
cellspacing:设置单元格与单元格之间的距离 默认 2 像素
cellpadding:设置内容到单元格的距离 默认 1 像素
tr属性
align:表格的对齐方式(left(左)|center(居中)|right(右))
bgcolor:设置背景颜色
bg:background(背景)
color:颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
table属性
border:表格边框
width:宽度
height:高度
align:表格的对齐方式(left(左)|center(居中)|right(右))
rules:all(细线表格)
cellspacing:设置单元格与单元格之间的距离
cellpadding:设置内容到单元格的距离
tr属性
align:表格的对齐方式(left(左)|center(居中)|right(右))
bgcolor:设置背景颜色
bg:background(背景)
color:颜色
-->
<table border="1" width="600" height="200" align="center" cellspacing="0" cellpadding="0">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr align="center" bgcolor="red">
<td>强</td>
<td>17</td>
<td>0</td>
</tr>
<tr>
<td>波</td>
<td>18</td>
<td>1</td>
</tr>
<tr bgcolor="green">
<td>小</td>
<td>21</td>
<td>女</td>
</tr>
</table>
</body>
</html>
表头单元格
<th>表头单元格</th> 默认加粗居中效果
<caption>学生信息管理表</caption> 表格的大标题
<!-- 表格的标题标签 -->
<!-- caption 表示表格的大标题 放在table标签里面 -->
<caption><strong>学生信息管理表</strong></caption>
<tr>
<!-- th 表头单元格 放在表格第一行 默认文字加粗居中显示 -->
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
表格结构标签(了解)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="600" height="200" align="center" cellspacing="0" cellpadding="0">
<caption><strong>学生信息管理表</strong></caption>
<!-- thead 表格的头部-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<!--tbody 表格的主体 -->
<tbody>
<tr>
<td>强哥</td>
<td>17</td>
<td>人妖</td>
</tr>
<tr>
<td>波哥</td>
<td>18</td>
<td>待定</td>
</tr>
<tr>
<td>小美</td>
<td>21</td>
<td>女</td>
</tr>
</tbody>
<!-- tfoot 表格的尾部 -->
<tfoot>
<tr>
<td>总结</td>
<td>嘻嘻</td>
<td>呵呵</td>
</tr>
</tfoot>
</table>
</body>
</html>
表格合并
跨行合并(垂直合并)
rowspan
跨列合并(水平合并)
colspan
合并步骤:
1. 明确合并方式(跨行/跨列)
2. 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他单元格
• 左右合并→只保留最左的，删除其他单元格
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
• `rowspan`：跨行合并→垂直方向合并
• `colspan`：跨列合并→水平方向合并
删除的单元格个数= 合并的个数-1
示例代码
<table border="1" width="800" height="200" rules="all" align="center">
<tr>
<td></td>
<td></td>
<!-- 跨行合并 -->
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<!-- 跨列合并 -->
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
表单标签
input系列
文本框
<input type="text" placeholder="">
密码框
<input type="password" placeholder="">
单选框
<input type="radio" checked name="sex">男
<input type="radio" checked name="sex">女
多选框
<input type="checkbox" checked >
文件上传
multiple:多文件上传
<input type="file" multiple>
提交按钮
<input type="submit" value="提交">
重置按钮
<input type="reset" value="重置" >
普通按钮
<input type="button"value="普通按钮">
搜索框
<input type="search">
图像提交按钮
<input type="image" src="./img/btn.png" alt="">
placeholder:占位符
单选框设置相同的name属性值才可以实现多选一效果
checked 默认被选中
button按钮
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
后期配合js一起使用-
<button type="button">普通按钮</button>
select下拉菜单
<select>
<option value="">--请选择所在城市--</option>
<option value="" selected>武汉</option>
<option value="">北京</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
select 下拉列表整体
option 每一项内容
selected:默认选中
文本域
应用场景: 留言板 评论
留言板:<textarea placeholder="请您留言"></textarea>
label标签
使用方法一：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
<label for="nan">男</label>
<input type="radio" name="sex" id="nan">
<label for="nv">女</label>
<input type="radio" name="sex" id="nv">
使用方法二：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
<label>文本框:<input type="text"></label>
语义化标签
无语义化标签
<div>独占一行</div>
<span>一行显示多个</span>
//div标签，称为区隔标记。作用是设定 页面内容 的摆放位置。
div标签的特性是 独占一行 又被叫做 块级元素。
//span作用是包裹一些可能要自定义样式的。
span标签 不独占一行 又被叫做 行内元素。
//1. div标签和span标签都没有自带的效果。
//2. div标签是用来做区域划分的，就是一个布局标签，并且独占一行。
//3. span标签是在某一行中加入的，是一个行内标签所以不是独占一行。
有语义化标签
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
字符实体
空格
大于号 >
小于号 <
写pc端网页比较多的标签
<p>段落标签<p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<strong>加粗</strong>
<em>倾斜</em>
<img src="图片的路径" title="提示文本" alt="替换文本">
<a href="链接地址" target="_blank">链接文本</a>
<ul>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
....
</ul>
<dl>
<dt>列表主体</dt>
<dd>列表每一项内容</dd>
<dd>列表每一项内容</dd>
<dd>列表每一项内容</dd>
....
</dl>
<div>独占一行</div>
<span>一行显示多个</span>
表格基本语法
<table boder="1" width="600" height="200" align="center">
<tr>
<td></td>
<td></td>
...
</tr>
...
</table>
文本框
placeholder 占位符
<input type="text" placeholder="占位符" >
密码框
<input type="password" placeholder="占位符">
单选框
需要设置相同的name属性 实现多选一的效果
checked 默认选中
<input type="radio">
复选框
checked 默认选中
<input type="checkbox">
<input type="search">
待续
