- 图片标签：
- img：展示图片
- 属性
- src：指定图片的位置
- align：对齐方式
- alt：当图片加载错误或加载不出来时显示的文字
- width：宽度
- height：高度
- 列表标签：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
早上起床干的事情
<ol type="A" start="5">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ol>
早上起床干的事情
<ul>
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
早上起床干的事情
<ul type="square">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
早上起床干的事情
<ul type="circle">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
</body>
</html>
- 链接标签：
- a：定义一个超链接
- 属性：
- href：指定访问资源的URL（统一资源定位符）
- target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开
- 举例：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<a href="https://www.baidu.com/">点我搜索</a>
<br>
<a href="https://www.baidu.com/" target="_self">点我</a>
<br>
<a href="https://www.baidu.com/"target="_blank">点我</a>
<br>
<a href="mailto:47******[email protected]">
联系我们
</a>
<br>
<a href="https://www.baidu.com/">
<img src="TIM图片20200207173443.png">
</a>
</body>
</html>
- 块标签：
- div：每一个div占满一整行。块级标签
- span：文本信息在一行展示。行内标签（内联标签）
- 举例：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<span>史迪仔仔仔</span>
<span>嘤嘤嘤QAQ</span>
<hr>
<div>史迪仔仔仔</div>
<div>嘤嘤嘤QAQ</div>
</body>
</html>
- 语义化标签： html5中为了提高程序的可读性，提供了一些标签
- < header>：页眉
- < footer>：页脚
- …
- 表格标签：
- table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
- bgcolor：背景色
- align：对齐方式
- tr：定义行
- td：定义单元格
- th：定义表头单元格
- < caption>：表格标题
- < thead>：表示表格的头部分
- < tbody>：表示表格的体部分
- < tfoot>：表示表格的脚部分
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<tr>
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>1</td>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>杨过</td>
<td>80</td>
</tr>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<thead>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>杨过</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3</td>
<td>学渣</td>
<td>50</td>
</tr>
</tfoot>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<tr>
<th rowspan="2">编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">杨过</td>
</tr>
</table>
<hr>
</body>
</html>
- 表单标签：
- 表单：
- 概念：用于采集用户输入的数据的，用于和服务器进行交互。
- form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。
- 属性：
- action：指定提交数据的URL
- method：指定提交方式
- 分类：一共7种，2种比较常用
- get：
- 请求参数在地址栏中显示。会封装到请求行中（HTTP协议后讲）
- 请求参数大小是有限制的
- 不太安全
- post：
- 请求参数不会在地址栏中显示。会封装到请求体中（HTTP协议后讲）
- 请求参数大小没有限制
- 较为安全
- 表单项中的数据要想被提交，必须指定其name属性。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="get">
用户名：<input name="username"><br>
密码：<input name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
- 表单项标签：
- input：可以通过type属性值，改变元素展示的样式
- type属性：
- text：文本输入框，默认值
- placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
- password：密码输入框
- radio：单选框
- 注意：
1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
3.checked属性可以指定默认值
- checkbox：复选框
- 注意：
1.一般会给每一个单选框提供value属性，指定其被选中后提交的值
2.checked属性可以指定默认值
- file：文件选择框
- hidden：隐藏域，用于提交一些信息。
- 按钮：
1.submit：提交按钮，可以提交表单
2.button：普通按钮
3.image：图片提交按钮（src属性指定图片的路径）
- label：指定输入项的文字描述信息
- 注意：label的for属性一般会和 input 的 id 属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
- select：下拉列表
- textarea：文本域
- cols：指定列数，每行有多少个字符
- rows：默认多少行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="get">
<label for="username">用户名：</label> <input type="text" name="username" placeholder="请输入用户名" id="username"><br>
<label for="password">密码：</label> <input type="password" name="password" placeholder="请输入密码" id="password"><br>
性别：<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female" checked> 女
<br>
爱好：<input type="checkbox" name="hobby" value="shopping" checked> 逛街
<input type="checkbox" name="hobby" value="singing"> 唱歌
<input type="checkbox" name="hobby" value="gem"> 运动
<br>
图片：<input type="file" name="file"><br>
隐藏域：<input type="hidden" name="id" value="aaa"><br>
取色器：<input type="color" name="color"><br>
生日：<input type="date" name="birthday"><br>
生日：<input type="datetime-local" name="birthday"><br>
邮箱：<input type="email" name="email"><br>
年龄：<input type="number" name="age"><br>
省份：<select name="province">
<option>--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">河北</option>
</select><br>
自我描述：<textarea cols="20" rows="5" name="des"></textarea><br>
<input type="submit" value="登录"><br>
<input type="button" value="按钮"><br>
<input type="image" src="">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="get">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="tel">手机号</label></td>
<td><input type="text" name="tel" id="tel"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td>
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td><label for="birthday">出生日期</label></td>
<td><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td><label for="checkcode">验证码</label></td>
<td>
<input type="text" name="checkcode" id="checkcode">
<img src="u=1502676338,3772310299&fm=26&gp=0.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
