一、前导知识
1.网页由三部分组成：
结构（html 用于描述页面的结构），表现（css 用于控制页面中元素的样式），行为（javascript 用于响应用户操作，实现各种交互功能）
2.网页开发基础
<!DOCTYPE html> //文档类型声明标签，告诉浏览器这个页面采用html5版本来显示页面
<html lang="en"> //告诉浏览器或搜索引擎这是一个英文网站，本页面采取英文来显示
// zh-CN定义语言为中文
<meta charset="UTF-8"> //必须写，采取UTF-8来保存文字，如果不写就会乱码
二、HTML（超文本标记语言）的各种标签及其使用方法
1.h（headline）标签：
h1-h6代表文档中不同级别的内容(重要性递减)，其中h1为主标题（重要性仅次于tittle标签，一般情况下一个页面只会有一个h1），主要使用h1-h3
2.p(paragraph)标签：
用于创建段落
3.a(anchor)标签：
既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能跳转。（在a标签中可以嵌套除它自身以外的任何标签）
<a href="https://www.baidu.com">超链接</a>
4.img标签(见下十)
5.meta标签：
用来设置网页的元数据
//keywords 表示网站的关键字
<meta name="keywords" content="HTML5,前端，css3"
//description用于指定网站的描述
<meta name="description" content="HTML5,前端，css3"
6.title标签：
用来定义html文档的标题
7.hgroup标签：
用来标题分组，可以将一组相关的标题同时放入hgroup中
8.em,i,strong,b,q,blockquote,del,ins标签
9.结构标签
- section:标记定义一个区域
- aside:标记定义页面内容部分的侧边栏
- footer:标记定义一个页面或一个区域的底部
- header:表示网页的头部
- main:表示网页的主体部分
- nav:表示网页中的导航
- article:表示一个独立的文章
10.div:
没有语义，用来表示一个区块
11.span:
行内元素，没有任何语义，一般用于在网页中选中文字
三、特殊符号的书写
html 中的实体（转义字符）实体的语法：&实体的名字;，如：
| 实体名称 | 显示结果 | 描述 |
|---|---|---|
  ； | ' ' | 空格 |
| > ； | 大于号 | |
| < ； | < | 小于号 |
& ； | & | 与 |
| © ； | © | 版权符号 |
| ® ； | ® | 注册商标 |
| &trade ； | ™ | 商标 |
| × ； | × | 乘号 |
| ÷ ； | ÷ | 除号 |
| ¿ ； | ¿ | 倒问号 |
<p>a<b<c</p> //小于号的使用实例，实际效果为：a<b<c
四、文档声明
//文档声明用来告诉浏览器当前页面的版本
<!doctype html> //html5的文档声明
五、字符集（charset）
<meta charset="UTF-8"> //编码和解码所采用的规则称为字符集
六、将网页定向到其他网站
//三秒后跳转到百度网站
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
七、元素
-
块元素：在页面中独占一行的是块元素
-
行内元素（内联元素）的特点：
1、和其他元素都在一行上；
2、高度、行高和顶以及底边距都不可改变；
3、宽度就是它的文字或图片的宽度，不可改变。
-
p元素中不能放任何块元素
常见的行内元素
| < a(小写) > | 锚点 |
|---|---|
| < b > | 字体加粗 |
| < big > | 大号字体 |
| < br > | 换行 |
| < em > | 定义为强调的内容 |
| < i > | 斜体文本效果 |
| < img src=" " alt=""> | 图像 |
| < input > | 输入框 |
| < label > | 标签为input元素的标注 |
| < select > | 单选或多选菜单 |
| < small > | 小号字体 |
| < span > | 组合文档的行内元素 |
| < strong > | 强调内容 |
| < sub > | 定义下标 |
| < sup > | 定义上标 |
| < textarea > | 多行文本输入框 |
八、列表
1.无序列表：
使用ul标签来创建,使用li表示列表项
<ul>
<li></li>
<li></li>
</ul>
2.有序列表：
使用ol标签来创建，使用li表示列表项
<ol>
<li><li>
<li><li>
</ol>
3.定义列表：
使用dt表示定义的内容，使用dd来对内容进行解释说明
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
列表之间可以相互嵌套
九、超链接
1.超链接可以让我们从一个页面跳转到其他页面，或者跳转到当前页面的其他位置
//跳转到百度页面，href指定跳转到目标路径（可以是一个外部网站的地址，也可以是一个内部页面的地址）
<a href="https://www.baidu.com">超链接</a>
2.当我们需要跳转到一个内部页面时，一般会用相对路径
相对路径使用./或../开头，./表示当前文件所在的目录，../表示当前文件所在目录的上一级目录
3.target属性：
用来指定超链接打开的位置
- _self 默认值，在当前页面打开超链接
- _blank 在一个新的页面中打开超链接
<a href ="https:www.baidu.com" target="_self">超链接</a>
<a href ="https:www.baidu.com" target="_blank">超链接</a>
4.id 属性：
id属性是元素的唯一标识，同一个页面中不能够出现重复的id
5.javascript属性：
使用javascript：;来作为href的属性，此时点击这个超链接什么也不会发生。
ps:在开发中可以将#作为超链接的路径作为展位符使用
5.a标签中放#
除了可以作为空链接，还可以表示回到最顶部；与javascript的区别是：javascript不会回到顶部，且在ie中会引起动画停止播放等问题；而使用#又有可能发生页面滚动，可以使用两个或多个#就不会发生页面的滚动了
十、图片
1.img标签：
用于向当前页面引入一个外部图片（img是一个自结束标签；img元素属于替换元素）
2.src属性：
指的是外部图片的路径
3.alt：
图片的描述，搜索引擎会根据alt中的内容来识别图片;当图片无法显示时会显示到页面上
4.title：
提示文本，鼠标放到图像上显示的文字
5.width:
图片的宽度（单位是像素）
6.height:
图片的高度
7.不同后缀的图像的区别
- jpeg(jpg):支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片
- gif:支持的颜色比较少，支持简单透明，支持动图，一般用于显示颜色单一的图片和动图
- png：支持的颜色丰富，支持复杂透明，不支持地图，一般用于显示颜色丰富，不咋透明图片（网页中用的最多）
- webp：谷歌新推出的专门用来表示网页中的图片的一种格式，具备其他图片格式的所有优点，但兼容性不好
- base64：将图片使用base64编码，这样可以使图片转换为字符，通过字符的形式来引入图片（一般都是一些需要和网页一起加载的图片才会使用base64）
十三、内联框架
内联框架用于向当前页面引入一个其他页面，src指定要引入的页面的路径，frameborder指定内联框架的边框
十四、音视频播放
1.audio标签：
用来向页面中引入一个外部的音频文件
2.controls：
是否允许用户控制播放
3.autoplay:
音频文件是否自动播放
4.loop:
音乐是否循环播放
