目录
〇、准备工作
一、基础知识
1.标签
2.html文件结构
二、基本标签及属性
1.常用文本标签
2.标签属性
3.块元素与行内元素
4.表单标签
〇、准备工作
使用VSCode作为开发环境，安装以下辅助插件：
HTML CSS Support：帮助你快速编写CSS代码。
Live Server：帮助你在编写代码时，实时看到网页变化。
新建一个工作区，新建一个文件命名为demo.html
一、基础知识
1.标签
标签分为两种，一种是单标签，一种是双标签，双标签通常包含网页上需要显示的内容，如标题标签、段落标签等；单标签一般为配置信息，不包含具体内容，如换行标签、水平线标签等。
2.html文件结构
在新建的demo.html中输入一个英文的感叹号，再按下TAB按键，就会自动生成一个HTML的大致结构：
层级关系如下：
二、基本标签及属性
1.常用文本标签
注意：所有文本标签应该写在body标签中。
（1）标题标签和段落标签
写在body中的代码：
一级标题标签
二级标题标签
三级标题标签
四级标题标签
五级标题标签
六级标题标签
段落标签
显示效果（右键空白处选择“Open With Live Server”）：
（2）文本样式
在body标签中的代码：
下面是各种文本样式标签
这是加粗
这也是加粗
这是斜体
这也是斜体
这是下划线
这是删除线
这是小号字体
这是大号字体
这是下标
这是上标
这是高亮
显示效果：
（3）无序列表与有序列表
在body标签中的代码：
- 无序列表1
- 无序列表2
- 无序列表3
- 有序列表1
- 有序列表2
- 有序列表3
显示效果；
（4）表格：
在body标签中的代码：
| 表头1 | 表头2 | 表头3 |
|---|---|---|
| 单元格11 | 单元格12 | 单元格13 |
| 单元格21 | 单元格22 | 单元格23 |
表格标签的层级关系：
显示效果：
（5）两个常用的单标签：
：换行标签
：水平线标签
2.标签属性
标签的属性写在左标签中，格式如下：
<标签名 属性名1="属性值1" 属性名2="属性名2" ……>
其中属性名不区分大小写，属性值区分大小写。
每个标签都有许多属性，一篇文章难以言尽。以超链接标签和图片标签中的部分属性为例。
（1）超链接标签的属性
超链接标签是一个双标签。超链接标签要有href属性，这个属性的值为链接的地址，标签的内容为显示的链接名称：
超链接标签还有target属性，其值为_self时表示在当前标签页打开，其值为_blank时表示在新建标签页中打开：
（2）图像标签的属性
图像标签是一个单标签。src属性代表图片路径或地址，alt标签为图片无法显示时显示的字样，width和height分别代表图片的宽度和高度。
3.块元素与行内元素
标签除了分为单标签和双标签以外，还可以分为块元素与行内元素。
块元素单独占用一行，不能与其他元素占用同一行。行内元素可以共同使用一行。
（1）块元素
常见的块元素有
、