目 录
一、语义
1.说明
- 有利于阅读，代码可读性更好；
- 语义可以让网络搜索，检索到关键信息，并进行记录；
- 语义化可以让屏幕阅读器，针对这些标签有特殊操作；
- 该语义下，会默认提供该语义化标签的效果。
2.强调标签
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<em>语义化标签</em><br>
<i>只表示斜体效果</i><br>
<strong>语义化标签</strong><br>
<b>只表示加粗效果</b>
</body>
</html>
二、插入图片
1.实例
<!-- 插入本地图片 -->
<img src="本地路径">
<!-- 插入网络图片 -->
<img src="网络地址">2.相关属性
- 图片无法展示提示信息：alt；
- 鼠标悬停提示信息：title；
- 图片大小：宽度（width）、高度（height）。
三、表格
1.实例
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="20px" align="center">
<caption>表标题</caption>
<tr bgcolor="#cccccc">
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
<tr>
<td>内容1.1</td>
<td>内容1.2</td>
<td>内容1.3</td>
<td>内容1.4</td>
</tr>
<tr>
<td>内容2.1</td>
<td>内容2.2</td>
<td>内容2.3</td>
<td>内容2.4</td>
</tr>
<tr>
<td>内容3.1</td>
<td>内容3.2</td>
<td>内容3.3</td>
<td>内容3.4</td>
</tr>
</table>
</body>
</html>
2.跨行跨列
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<!-- 跨列 -->
<table border="1px" cellspacing="0" cellpadding="20px" align="center">
<caption>表1</caption>
<tr>
<th>姓名</th>
<th colspan="2">联系方式</th>
</tr>
<tr align="center">
<td>张建国</td>
<td>19122307895</td>
<td>223098731@qq.com</td>
</tr>
<tr align="center">
<td>王川</td>
<td>17455023819</td>
<td>9812621901@qq.com</td>
</tr>
</table>
<!-- 跨行 -->
<table border="1px" cellspacing="0" cellpadding="20px" align="center">
<caption>表2</caption>
<tr align="center">
<th>姓名</th>
<td>张建国</td>
<td>王川</td>
</tr>
<tr align="center">
<th rowspan="2">联系方式</th>
<td>19122307895</td>
<td>17455023819</td>
</tr>
<tr align="center">
<td>223098731@qq.com</td>
<td>9812621901@qq.com</td>
</tr>
</table>
</body>
</html>
四、表单
- 表单用于采集信息；
- action：请求数据发给服务器的服务器地址；
- method：请求发送方式。
- get：请求内容会在地址栏中显示；
- post：请求内容隐藏在请求体中。
- value：表单项输入数据；
- name：给每一个表单提供一个 name 属性，让 name 和 value 进行绑定；
- 服务器接收前端表单发出的请求数据，然后进行业务处理。
1.输入控件
（1）文本框
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<form action="#" method="get">
用户名 <input type="text" name="username"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
（2）密码框
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<form action="#" method="post">
密码 <input type="password" name="password"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
（3）文本域
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<form action="#" method="post">
备注 <textarea name="desc" cols="30" rows="5"></textarea><br>
<input type="submit" value="提交"></input>
</form>
</body>
</html>
2.单选控件
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<form action="#" method="post">
<!-- checked 默认选中，加上 name 属性，则只能选择一个 -->
性别：男 <input type="radio" name="gender" checked>
女 <input type="radio" name="gender"><br>
<input type="submit" value="提交"></input>
</form>
</body>
</html>
3.多选控件
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<form action="#" method="post">
兴趣：摄影<input type="checkbox" name="interest" value="1">
旅行<input type="checkbox" name="interest" value="2">
阅读<input type="checkbox" name="interest" value="3">
音乐<input type="checkbox" name="interest" value="4">
绘画<input type="checkbox" name="interest" value="5">
游泳<input type="checkbox" name="interest" value="6">
跑步<input type="checkbox" name="interest" value="7"><br>
<input type="submit" value="提交"></input>
</form>
</body>
</html>
4.下拉控件
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<form action="#" method="post">
<!-- 单选 -->
性别：
<select name="gender">
<option value="1">男</option>
<option value="2">女</option>
</select><br>
<!-- 多选 -->
兴趣：
<select name="interest" multiple>
<option value="a">摄影</option>
<option value="b">旅行</option>
<option value="c">阅读</option>
<option value="d">音乐</option>
<option value="e">绘画</option>
<option value="f">游泳</option>
<option value="g">跑步</option>
</select><br>
<input type="submit" value="提交"></input>
</form>
</body>
</html>
5.文件上传控件
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
<input type="file" name="file"><br>
<input type="submit" value="提交"></input>
</form>
</body>
</html>
6.隐藏域控件
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<form action="#" method="get">
搜索 <input type="text" name="key"><br>
<input type="hidden" name="act" value="input">
<input type="submit" value="提交"></input>
</form>
</body>
</html>
7.按钮控件
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<form action="#" method="get">
<input type="text" name="name"><br>
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
</form>
</body>
</html>
8.控件禁用
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<form action="#" method="get">
账户 <input type="text" name="name" value="admin" disabled><br>
密码 <input type="password" name="password"><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
9.lable 标签
可以在点击 label 标签内容时，也可以让输入框内获得对应焦点。
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<form action="#" method="get">
<label for="username">账户</label>
<input type="text" name="name" id="username"><br>
<label for="password">密码</label>
<input type="password" name="password" id="password"><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>