如何创建html文件：
使用工具：VSCode
1.双击文件名显示区，可快速新建文件。
2.保存文件，文件名.html
3.输入！（必须是英文的！），按 Tab键，可自动生成html格式的文件，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
常见HTML元素介绍：
1.文本输入框和密码输入框（常见的登录页面，需要输入账号和密码）
<input type="text" name="loginname" value="请输入手机号"><br>
<input type="password" name="password" value="请输入密码">
其中 name是后台存储的变量名。<br>是换行
2.选择框
<label for="">已成年</label> <input type="checkbox" name="age" value="1">
<input type="checkbox" name="age" value="2">未成年
3.单选/复选按钮
name属性必须相同，才能保证是单选。该属性将单选框绑定为一组。
<input type="radio" name="option" value="1">A
<input type="radio" name="option" value="2">B
<input type="radio" name="option" value="3">C
<input type="radio" name="option" value="4">D
4.按钮
<input type="button" value="点我一下"><br>
5.文件上传
<!-- 该标签的value设置不生效 ，默认显示为“浏览”-->
<input type="file">
6.下拉框
<select name="" id="">
<option value="1">A.undefine</option>
<option value="1">B.error</option>
<option value="1">C.3</option>
</select>
7.超链接
<a href="http://www.baidu.com">百度链接</a>
8.表格
<table border="1">
<tr>
<td>111111111</td>
<td>222222222</td>
<td>3333333333</td>
</tr>
<tr>
<td>111111111</td>
<td>222222222</td>
<td>3333333333</td>
</tr>
</table>
9.图片
src中是图片的地址
<img src="https://XXXXXXX0.jpg" alt="">
10.有序列表
<ol>
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
</ol>
11.无序列表
<ul>
<li>444444444444444</li>
<li>555555555555555</li>
</ul>
12.文本域
<textarea name="" id="" cols="30" rows="10">文本域，请输入您的评论</textarea>
13.标题标签
标题共有6个等级h1,h2-h6
<h1>biaoti标题1</h1>
<h2>标题2</h2>
14.加粗标签
<b>hello everybody</b>
15.lable标签
<label for="">已成年</label> <input type="checkbox" name="age" value="1">
16.段落
<p>段落1</p>
<p>段落2</p>
17.iframe：在一个页面内嵌套另外一个页面
<iframe src="http://www.baidu.com" frameborder="0" height="500" width="600">
<p>lalalalla</p>
</iframe>
18.div:是块级元素，可以用于组合其他HTML的容器。l常用来对页面进行布局，可通过css对其进行定位。div写在body里面。
<div class="head">
<h1>页面顶部区域</h1>
</div>
<div class="left">
<h2>页面左边区域</h1>
</div>
<div class="middle">
<h3>中部区域</h1>
</div>
<div class="bottom">
<h1>底部区域</h1>
</div>
19.css：层级样式表，通过div的class的名称来定位具体作用的对象。如果直接写在html文件中，写在head里面
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.head{
background-color: aquamarine
}
</style>
</head>
<!-- 引入样式 -->
<link rel="stylesheet" href="./1.css">
下面是引入的具体css文件内容。单独存为css文件时，不需要stytle的标签。
.head就是指明对上述div中的class=head的层进行作用：
.head{
background-color:red;
color: blue;
text-align:right;
padding: 0em;
}