一、前期准备
1.新建文件夹
鼠标右键单机桌面，单机新建，单机文件夹，用来存放编辑的html文件。
2.使用vscode编辑器
双击打开vscode，单机左上角的资源管理器，单机打开文件并选择刚刚创建的文件夹。
3.再次新建文件夹
打开新建文件夹的下拉菜单，右键单机空白处新建文件夹；输入文件名.html后回车，此文件为编辑的文件。
二、了解HTML基本结构
获取基本框架
完成上述步骤后在编辑区输入！(英文)加回车即可显示基本框架。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>单标签与双标签
单标签 ：<meta>
双标签 ：<html> </html>
<!DOCTYPE html>
网页的必备部分，避免浏览器的怪异模式（同样的代码在不同的浏览器呈现不同的效果）。
html标签（双标签）
告诉浏览器这是一个html文件，所有的元素都要写在它里面。
<!DOCTYPE html>
<html>
</html>head标签（双标签）
定义文档的头部，文档的投标描述了文档的属性和信息。
<!DOCTYPE html>
<html>
<head>
</head>
</html>body标签（双标签）
定义文档的主体，用户能看到的内容。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
我会显示在浏览器中
</body>
</html>title标签（双标签）
定义文档的标题，显示在浏览器窗口的标题栏上。
<!DOCTYPE html>
<html>
<head>
<title>第一页</title>
</head>
<body>
我会显示在浏览器中
</body>
</html>meta标签（单标签）
定义文档的属性，charset="UTF-8"为编码格式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一页</title>
</head>
<body>
我会显示在浏览器中
</body>
</html>
三、标题标签
<h1>-<h6>（双标签）
<h1></h1>最大，<h6></h6>最小
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>调整标签位置
使用align，默认左侧
<h1>align="life"一级标题</h1>
<h2>align="center"二级标题</h2>
<h3>align="right"三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
四、标签的段落、换行、下划线
<p>标签（双标签）
用于将文本定义成段落
<p>这是一个段落</p><br>标签（单标签）
在不产生新段落的情况下换行
<p>这是一<br>个段落</p>输出结果为
这是一
个段落
<hr>标签（单标签）
在HTML页面中添加水平线
<hr color="" width="" size="" align=""/>color为水平线的颜色
width为水平线的长度
size为水平线的高度
align为水平线的对齐方式默认居中
五、图片标签
img标签（单标签）
<img src="" alt="" title="" width="" height="">src为添加图片的路径
alt为图片损坏时替代的文本
title为图片上悬停鼠标的提示
width为图片的宽度
height为图片的高度
六、超文本链接标签
<a>标签（双标签）
用于页面间的跳转，超链接可以是图片、文本等，通过href实现跳转，href中的内容为目标页面
未访问为蓝色，访问为紫色，点击为红色
<a href="">超链接文本</a>七、文本标签
<em>标签（双标签）
定义着重字
<em>文本</em><b>标签（双标签）
定义加粗字
<b>文本</b><del>标签（双标签）
定义删除字
<del>文本</del><i>标签（双标签）
定义斜体字
<i>文本</i><strong>标签（双标签）
定义加强着重字
<strong>文本</strong><span>标签（双标签）
无任何意义
<span>文本</span>八、列表标签
有序列表
定义列表使用<ol>标签（双标签），列表项使用<li>标签（双标签）,按顺序标记
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ol>type属性
- 1 表示列表项目用数字标号 (1,2,3...)
- a 表示列表项目用小写字母标号 (a,b,c...)
- A 表示列表项目用大写字母标号 (A,B,C...)
- i 表示列表项目用小写罗马数字标号 (i,ii,iii...)
- I 表示列表项目用大写罗马数字标号 (I,II,III...)
<ol type="">
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ol>
无序列表
定义列表使用<ul>标签（双标签），列表项使用<li>标签（双标签），用小圆点标记
<ul>
<li>无序</li>
<li>无序</li>
<li>无序</li>
</ul>
type属性
disc默认实心圆
circle空心圆
square小方块
none不显示
九、表格标签
table标签（双标签）
用来定义表格
<table>
</table>tr标签（双标签）
定义表格中的行
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
td标签（双标签）
定义表格中的单元格（列）
<table>
<tr>
<tb>单元格</tb>
</tr>
<tr>
<tb>单元格</tb>
</tr>
<tr>
<tb>单元格</tb>
</tr>
</table>
快速生成表格快捷键
tr后的数字为生成几行，td后的数字为每行几个单元格，大括号的内容为单元格里的内容
table>tr*3>td*3{内容}表格属性
border生成表格边框
width设置表格宽度
height设置表格高度
<table border="" width="" height="">
<tr>
<tb>单元格</tb>
<tb>单元格</tb>
<tb>单元格</tb>
</tr>
<tr>
<tb>单元格</tb>
<tb>单元格</tb>
<tb>单元格</tb>
</tr>
<tr>
<tb>单元格</tb>
<tb>单元格</tb>
<tb>单元格</tb>
</tr>
</table>
单元格合并
水平合并colspan，保左删右。
<table border="" width="" height="">
<tr>
<tb colspan="2">单元格</tb>
<tb>单元格</tb>
</tr>
<tr>
<tb>单元格</tb>
<tb>单元格</tb>
<tb>单元格</tb>
</tr>
<tr>
<tb>单元格</tb>
<tb>单元格</tb>
<tb>单元格</tb>
</tr>
</table>
垂直合并rowspan，保上删下。
<table border="" width="" height="">
<tr>
<tb colspan="2">单元格</tb>
<tb>单元格</tb>
</tr>
<tr>
<tb rowspan="2">单元格</tb>
<tb>单元格</tb>
<tb>单元格</tb>
</tr>
<tr>
<tb>单元格</tb>
<tb>单元格</tb>
</tr>
</table>
十、form表单
form标签（双标签）
定义一个容器
<form>
</form>表单属性
action为服务器地址
methof为发送的方式，get用于小文件，post用于大文件
name为表单的名称
<form action="" methof="get|post" name=""></form>文本框
使用<input type="text">创建文本框
<from>
<input type="text">
</from>密码框
使用<input type="password"创建密码框，框内的文本用小圆点代替
<from>
<input type="password">
</from>按钮
使用<input type="submit">创建按钮，将输入的内容发送给服务器
<from>
<input type="submit">
</from>
按钮名字通过value更改
<from>
<input type="submit" value="登录">
</from>
