一、HTML 概述：
1.HTML 是一种 “超文本‘’ 标记语言，‘超文本’ 就是指页面可以包含图片、链接，甚至音乐、程序等非文字元素。
2. html 不是一种编程语言；
3.html5 的新特性：
a.用于回话的 canvas 元素；
b.用于媒介回放的 video 和 audio 元素
c.对本地离线存储的更好支持
d.新的特殊内容元素，article、footer、header、nav、section
e.新的表单控件，calendar、date、time、email、url、search
4.html 的开发工具：
webStorm、notepad、Ecliipse、text sublime、Dreamweaver 等；
二、基本格式：
1.html5 的基本格式：
<!DOCTYPE html> 文档申明，告诉计算机这是一个 html5 文档
<html lang="en"> 表示文档的开始
<head> 存放文档的基本信息，不可见元素
<meta charset="UTF-8"> 申明字符编码
<title> Title </title> 申明文档标题
</head>
<body> 存放文档的可见内容
</body>
</html> 表示文档结束
2.开发工具的基本操作
a. 打开开发工具
b. 新建文件，注意事项：先将文件保存为以 .html 为后缀的文件，才能启动自动提示功能；
三、元素的概念及 3 个常用标签：
1.元素的概念：
html 元素指的就是 从开始标签到结束标签的所有代码。
2. 3 个常用标签：
| 开始标签 | 元素内容 | 结束标签 |
| <h1> | h 标签用来表示标题 | </h1> |
| <p> | p 标签表示一个段落 | </p> |
| <hr> | 单标签，给文档加一个横线 | 没有结束标签 |
四、元素的属性：
1.元素的属性：
a. 属性的作用就是为元素提供更多的信息；大多数元素都可以拥有属性；
b. 属性的用法：<开始标签 属性1=参数1> ..... </结束标签>
2.元素常用属性：
| 属性名 | 属性作用 | 属性值及其作用 |
| bgcolor | 给文档添加一个悲剧颜色 |
二进制颜色，英文单词颜色 |
| align | 指定内容的对齐方式 |
left：左对齐（默认值） right：右对齐 center：居中对齐 |
五、文本元素
掌握常用的文本元素：
| 元素名 | 元素作用 |
| b 元素 | 加粗文字 |
| br 元素 | 强制换行 |
| i 元素 | 让文字倾斜 |
| del 元素 | 删除文字，就是在文字上加一个横线，表示删除 |
| strong 元素 | 强调一段文本，实际作用也是加粗文字 |
| wbr 元素 | 安全换行 |
| em 元素 | 强调文本，实际作用也是倾斜文本 |
| s 元素 | 表示不准确的删除，实际作用就是删除线 |
| u 元素 | 给文字添加一个 下划线 |
| ins 元素 | 添加一段文字，起强调作用；实际作用也是给文字加下划线 |
| small 元素 | 用于声明，解释作用，实际就是添加一段小号字体 |
| sub 元素 | 添加下标 |
| sup 元素 | 添加上标 |
| dfn 元素 | 对一段词或短语的解释，实际作用就是倾斜文字 |
| abbr 元素 | 表示一段文本的缩写，再文本显示上没有实际作用 |
| q 元素 | 实际作用就是添加双引号 |
| code 元素 | 用来表示计算机代码片段 必须是 lang="en" |
| var 元素 | 表示编程语言的变量 必须是 lang="en" |
| samp 元素 | 表示程序或计算机的输出 你 没有权限浏览该网页 必须是 lang="en" |
| kbd 元素 | 表示部分内容是用户利用键盘输入， 必须是 lang="en" |
| ruby 元素 | 给文字添加注音符号 很多浏览器不支持 |
| cite 元素 | 表示引用其他作品的标题，实际效果就是加粗文字 |
| bdo 元素 | 设置文字方向，必须使用 dir 属性才可以设置；属性值 rtl （从右到左）， ltr（从左到右，默认值） |
| mark 元素 | 突出显示文本，作用就是给文本添加一个黄色背景 |
| time 元素 | 表示时间和日期 |
| span 元素 | 表示一般性文字，没有特殊效果 |
六、超链接
1.链接的五种形式：
a.链接外部文档
<a href="https://www.baidu.com">百度</a>
b.链接本地文档
<a href="本地地址">本地链接</a>
c.图片链接
<a href="跳转地址"> <img src="图片地址"> </a>
d.建立电子邮箱的超链接
<a href="mailto:823893482@qq.com">邮箱链接</a>
e.下载链接
<a href="文件名">下载链接</a>
2. target 属性：
a. _self：在当前窗口的位置
b. _blank：新窗口；
c. _top: 最顶层框架
d._parent：父框架；
3. id属性：通用属性，可以理解为元素的身份证；
4. name属性：可以理解为元素的名字；
5.锚点连接；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#1">锚点1</a>
<a href="#2">锚点2</a>
<a href="#3">锚点3</a>
<a id="1" href="">锚点1
<a id="2" href="">锚点2
<a id="3" href="">锚点3
</body>
</html>
七、img 元素嵌入图片
1.img 的属性：
a. src：必要属性，指定图片的来源路径；
b. alt属性：当图片无法正常显示时的替代文字；
c. width、height属性：指定图片的宽高；单位是像素 px 或是百分比；
2. title属性：
a. 属性值为：字符串；
b. 效果是当鼠标移动到该位置时显示出该内容；
八、绝对路径和相对路径
1.绝对路径：链接资源的绝对位置；与html文档无关；
2.相对路径：是相对于当前文件来对比的，与html 文档有关；
a. 同一路径：直接写文件名称，或 ./文件名
b. 在下级路径：路径名/资源名；
c. 下下级路径：路径1/路径2/资源名；
d. 在上级路径：../资源名；
e. 在上上级路径：../../资源名；
九、列表
1.无序列表
a.无序列表的基本格式：
<ul>
<li type="disc">列表项1</li>
<li type="circle">列表项2</li>
<li type="square">列表项3</li>
</ul>
b.无序列表的 type 属性：
disc（默认值）实心小圆；
circle 空心小圆；
square 实心小方块；
2.有序列表
a.有序类标的基本格式
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
b.有序列表的 type 属性
整数（默认值）
大小写字母
大小写罗马字母
c.有序列表的 start 属性：
定义列表的开始序号
d.有序列表的 value 属性：
定义某个单个列表项的序号
3.自定义列表
自定义列表项组成：
dl 定义列表； <dl>
dt 定义列表项目 <dt>列表项目1标题</dt>
dd 定义列表内容 <dd>列表项目1内容</dd>
</dl>
十、表格元素：
1.表格的基本构成
a. table 表格的范围，外框；用来定义表格，表格的其他元素包含在 table 标签里面
b. tr 表格的行；
c. td 表格的单元格；
2. th 元素：为表格添加标题行；
th 元素用来定义表格的标题单元格，他是tr的子元素，必须放在tr标签里面；tr元素里的内容会自动居中对齐并加粗文字；
3.colspan 元素：横向合并单元格
属性值为正整数，表示该单元格横向和并的列数
4.rowspan 元素：纵向合并单元格
属性值为正整数，表示该单元格纵向合并的行数
5.caption 元素：给表格添加标题
用来指定表格的标题或者说明；是 table 的子元素，必须放在 table 中使用
6.thead、tfoot、tbody 元素
thead 表示表头；
tfoot 表示表脚；
tbody 表示主体内容
7.colgroup 元素：
colgroup 元素用来组合列，它的 span 属性可以设置组合列的数目；它可以包含一个子元素 col；
colgroup 元素为 table 元素的子元素，必须放在 caption 元素之后，thead 元素之前；
8.col 元素：
col 元素用来设定列的属性，他也可以使用 span 属性
col 元素一般作为 colgroup 元素的子元素配合使用；
十一、特殊符号的使用
1.html 实体
a. 在 html 中，某些字符是预留的；
b. 在 html 中，不能使用小于、大于符号，这是应为浏览器会误认为他们是标签
c. 如果想正确的显示预留字符，我们必须在 html 源码中使用 字符实体
十二、 style 元素 与 HTML 样式基础
1.引入样式的三种方式：
a. 外部样式表：通过 link 元素引入外部样式表；
<link rel="stylesheet" type="text/css" herf="">
b.内部样式表：<style type="text/css"> </style>
c.内联样式表：<元素 style="属性：属性值"> </元素>
十三、内联框架
1. iframe 内联框架
a. iframe 元素用来在文档中添加一个内联框架。
b. iframe 为 body 元素的子元素，必须放置在 body 中使用
c. iframe 的主要 属性：src、name、id、width、height；
2. frameborder 属性 是用来规定 内联框架的边框 其属性值为 数字，0表示没有，数字越大边框与粗
3.iframe 内联框架 一般与 <a> 标签联合使用，
其中 <a> 标签的 target 属性的属性值
与iframe 标签的 name 的属性值相对应
<a href="https://www.tengxun.com" target="myframe">51自学网</a>
<a href="https://www.ifeng.com">凤凰网</a>
<a href="https://wwww.baidu.com">百度</a>
<iframe src="https://wwww.baidu.com" name="myframe" frameborder="1" width="50%" height="100%">
</iframe>
