文章目录
目录
一、HTML简介
二、建立HTML文件
1.页面基本结构
2.HTML的基本标记
2.1 标题文本标记
2.2 段落标记和换行标记
2.3 水平线、英文空格和全角空格
2.4 注释标记
2.5 块标记
2.6 列表标记
2.7 HTML5新增的结构元素
3.超链接标记
3.1 超链接标记
3.2 超链接类型
3.3超链接路径
4.多媒体标记
5.表格
5.1 表格常用标记
6.表单
6.1 表单定义标记
6.2 输入标记、列表框标记和文本域输入标记及常用属性
一、HTML简介
HTML是英文Hyper Text Markup Language的缩写，即超文本标记语言，是用于描述网页文档的一种标记语言。
超文本：超文本文件就是指具有超链接功能的文件。
二、建立HTML文件
1.页面基本结构
打开vscode，新建后缀名为.html的文件，搭建页面基本结构的快捷键：①英文感叹号＋回车，②html:5+回车 。
Document
此代码为一个页面的基本结构， 解析如下表：
| 标签 | 定义 | 内容 |
|---|---|---|
| 文档声明 | 声明这是一个HTML文档 | |
| HTML标签 | 告诉网页浏览器，整个网页是从这里开始的，然后到结束 | |
| 文档的头部 | 网页的标题、网页的logo、网页的解析格式 | |
| 文档的标题 | 显示在搜索引擎结果中的页面标题 | |
| 文档的主体 | 网页内容 |
乱码问题：
charset="UTF-8"表示当前文档的字符集是采用utf-8的字符，也就是我们常说英文字符集。
一般包含中文字符的时候用gb2312，用到一些特殊字符，例如西欧字符的时候应该用utf-8，以防出现乱码。
GB2312是简体中文编码，当文章/网页中包含繁体中文、日文、韩文时，这些内容可能无法被正确编码。
2.HTML的基本标记
2.1 标题文本标记~：
：
一级标签
二级标签
三级标签
四级标签
五级标签
六级标签
字体大小从大到小，独占一行，字体加粗
2.2 段落标记
和换行标记
：
段落标签
段落标签
另起一行
包含在
标记对中的内容会显示在一个段落里，当内容超过一行的显示区域会自动换行，段落之间存在间隔。如果想另起一行，可使用换行标记。
必须为单个标签。
字体大小问题：
谷歌浏览器：最小字体限制为12px
2.3 水平线
、英文空格" "和全角空格" "：
style用于定义该元素的属性。
字符串" "、" "用于在正文中插入空格。
2.4 注释标记：
注释的快捷键是： ctrl + / 或者 ctrl +shift + /
程序不执行这段代码，注释是为了更好地解释这段代码，方便自己或他人查看。
2.5 块标记和：
独占一行
一行可放多个占据行的长短由内容的多少决定作用都是用于定义页面内容的容器，用于编排页面布局，本身没有具体的显示效果。
一行只能放一个，一行可以放多个。
2.6 列表标记：
共有三种列表标记，在列表标记之间使用成对的
标记可添加列表项目。2.6.1 有序列表
- 列表信息
- 列表信息
- 列表信息
默认情况下，有序列表的列表项目前显示 1、2、3……序号，从数字1开始计数。可以使用type属性修改有序列表序号的样式，也可以定义start 属性设置列表序号的起始值。type 属性的具体取值及说明如下表：
| 属性值 | 说明 |
|---|---|
| 1 | 数字1、2……（默认） |
| a | 小写字母a、b…… |
| A | 大写字母A、B…… |
| ⅰ | 小写罗马数字ⅰ、ⅱ、ⅲ…… |
| Ⅰ | 大写罗马数字Ⅰ、Ⅱ、Ⅲ…… |
2.6.2 无序列表
- 列表信息
- 列表信息
- 列表信息
默认情况下，无序列表的列表项目前显示黑色实心圆点。可以使用type属性修改无序列表序号的样式，type 属性的具体取值及说明如下表所示，其中，type属性值必须小写。
| 属性值 | 说明 |
|---|---|
| disc | 实心圆点（默认） |
| circle | 空心圆圈 |
| square | 方形 |
2.6.3 自定义列表
- 名称
- 说明
- 即 “definition list（定义列表）”，
- 即 “definition term（定义名词）”，
- 即 “definition description（定义描述）”。
自定义列表以
- 标记开始，自定义列表项目以
- 标记开始，自定义列表的解释以
- 标记开始。
2.7 HTML5新增的结构元素：
如下代码包含了HTML5新增的结构元素：
标题
