一、HTML结构
通过代码编辑器新建一个HTML文件，会看到如下内容，网页要展示的内容全都在body标签内编辑
HTML页面结构如下：
二、HTML常用标签
| 标签 | 作用 | 属性 | 类型 | 是否闭合 |
| div | 一块区域 | 块级元素 | 闭合 | |
| span | 一块区域 | 内联元素（行内） | 闭合 | |
| p | 段落 | 块级元素 | 闭合 | |
| h1、h2、h3、h4、h5 | 标题 | 块级元素 | 闭合 | |
| a | 超链接 | herf、target | 内联元素 | 闭合 |
| img | 图片 | src、alt、width、height | 内联元素 | 非闭合（自闭和） |
| input | 输入框 | name、type、value、placeholder | 内联元素 | 非闭合 |
| lable | 标签 | 内联元素 | 闭合 | |
| select | 下拉框 | name | 内联元素 | 闭合 |
| radio | 单选框 | name | 内联元素 | 闭合 |
| textarea | 文本域 | name、cols、rows | 内联元素 | 闭合 |
| button | 按钮 | type | 内联元素 | 闭合 |
| br | 换行 | 非闭合 | ||
| | 空格 | |||
| > | 大于 | |||
| < | 小于 |
三、HTML表格
- <tr></tr>：表格的每一行
- <th></th>：代表表头
- <td></td>：表格里面的每一列
- <thead></thead>： 表格的头部
- <tbody></tbody>： 表格的中间部分
- <tfoot></tfoot>： 表示表格最下面的内容，用这种方式，就不用非得按照先后顺序了，tfoot就是在表格的最下面
实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--tr表格的每一行-->
<!--th是代表表头-->
<!--td是表格里面的每一列-->
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小马</td>
<td>18</td>
</tr>
<tr>
<td>小兰</td>
<td>19</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--下面这个就是更明了一些-->
<!--thead 是表格的头部-->
<!--tbody 是表格的中间部分-->
<!--tfoot 是表格最下面的-->
<!--用这种方式的话，就不用非得按照先后顺序了，tfoot就是在表格的最下面-->
<table border="1">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>price</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td>总价</td>
<td>100</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>苹果</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>西瓜</td>
<td>50</td>
</tr>
</tbody>
</table>
</body>
</html> 
四、form表单
form是用来向后端提交数据的
<!DOCTYPE html>
<!--声明html类型-->
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<!--enctype="multipart/form-data"-->
<!--aciton是调用后端的url-->
<!--method请求方式-->
<!--enctype提交类型，如果没有文件的话，不需要写它-->
<form action="index.html" method="post" >
用户名：<input name="username">
<br>
密 码：<input name="password" type="password">
<br>
性别：
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女
<br>
城市：
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<br>
自我介绍:
<textarea name="content"></textarea>
</br>
图片：<input type="file">
<br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<!-- 这里注意按钮必须是submit类型的话点击才会提交-->
</form>
</body>
</html>
五、列表
<!DOCTYPE html>
<!--声明html类型-->
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<!--有序列表-->
<ol type="1">
<!--type类型 1 A a i I-->
<li><a href="#">百度</a></li>
<li><a href="#">腾讯</a></li>
<li><a href="#">阿里</a></li>
</ol>
<!--无序列表 -->
<!--type disc square circle -->
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">腾讯</a></li>
<li><a href="#">阿里</a></li>
</ul>
<!--层级列表-->
<dl>
<dt>国内</dt>
<dd><a href="#">百度</a></dd>
<dd><a href="#">腾讯</a></dd>
<dd><a href="#">阿里</a></dd>
<dt>国外</dt>
<dd><a href="#">苹果</a></dd>
<dd><a href="#">谷歌</a></dd>
<dd><a href="#">推特</a></dd>
</dl>
</body>
</html>
六、iframe
iframe的作用是在本网页里面展示其他网页的内容
<!DOCTYPE html>
<!--声明html类型-->
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<br>
<br>
<br>
<iframe src="https://www.yuque.com/" frameborder="1" height="400px" width="400px">
</iframe>
<!--url的方式-->
<iframe src="列表.html" frameborder="1" height="400px" width="400px">
<!--打开html的方式-->
</iframe>
</body>
</html>
