HTML网页三要素：文本、图片、链接
HTML结构： 1.<html>...</html> 整个网页前端的大框架
2.<head>...</head> 头部标签，内容为整个页面的源信息部分
3.<body>...</body> 网页主体显示内容部分
1.<html>...</html> 整个网页前端的大框架
2.<head>...</head> 头部标签，内容为整个页面的源信息部分
3.<body>...</body> 网页主体显示内容部分
元素（标签以及标签中的内容和标签的属性）： 元素的常见属性：
id属性 —— 标签的唯一标识
class属性 —— 样式类
style属性 —— 行内样式
元素的常见属性：
id属性 —— 标签的唯一标识
class属性 —— 样式类
style属性 —— 行内样式
块元素和行内元素： 1.块元素：自成一行，后面的元素都会自动换行
2.行内元素：不用自动换行，会自动跟在行内元素的后面
3.块级元素与行内元素的切换，使用display属性进行切换，block代表块级元素，inline代表行内元素
1.块元素：自成一行，后面的元素都会自动换行
2.行内元素：不用自动换行，会自动跟在行内元素的后面
3.块级元素与行内元素的切换，使用display属性进行切换，block代表块级元素，inline代表行内元素
头部标记： 1.<title>...</title> 浏览器标题标签 浏览器标签页上的名字
2.<meta>...</meta> 元信息标签
（1） 改变整个网页的字符集
（2） 标记网页的相关信息 name和content属性
（3） 用来适配移动端设备
3.<style>...</style> 内联样式表
4.<link>...</link> 引入外联样式表
5.<script>...</script> 脚本标签/脚本引入标签
1.<title>...</title> 浏览器标题标签 浏览器标签页上的名字
2.<meta>...</meta> 元信息标签
（1） 改变整个网页的字符集
（2） 标记网页的相关信息 name和content属性
（3） 用来适配移动端设备
3.<style>...</style> 内联样式表
4.<link>...</link> 引入外联样式表
5.<script>...</script> 脚本标签/脚本引入标签
主体标记：
（1）文本标记：
1.标题标签
h1 —— 一级标签（半粗体 36px）
h2 —— 二级标签（半粗体 30px）
h3 —— 三级标签（半粗体 24px）
h4 —— 四级标签（半粗体 18px）
h5 —— 五级标签（半粗体 14px）
h6 —— 六级标签（半粗体 12px）
2.span标签——普通文本标签
3.small标签——小文本标签
4.del标签——删除线，表示被删除的文本
5.s标签——删除线，表示无用的或不准确的文本
6.ins标签——下划线，表示被插入的文本
7.u标签——下划线，表示专有名词
8.strong标签——加粗，表示强调语义
9.b标签——加粗
10.em标签——斜体，表示强调语义
11.i标签——斜体
12.sub标签——下标 H2O
13.sup标签——上标 X2
（2）文本对齐：
可使用文本的align属性来进行对齐
left——左对齐
right——右对齐
center——居中对齐
（3）段落标记：
1.p标签——段落标签
2.pre标签——保持排版标签
3.blockquote——向右缩进段落标签
（4）div标签：
区域标签，将网页可以使用div标签进行总体布局
（5）a标签：
超链接标签，进行页面跳转的标签
href属性：
(1)要跳转的目标页面
(2)锚点：使用锚点时，在href属性中填写目标位置上的id，用#开头
（6）img标签：图像标签
src属性：图片资源
（7）列表标签：
1.无序列表——ul 和<li>标签结合使用，每个<li>标签都是一个条目，条目前使用点来进行标注
2.有序列表——ol 和<li>标签结合使用，每个<li>标签都是一个条目，条目前使用序号进行标注
3.自定义列表（注释列表）——dl <dd><dt>
表格标记 1.<table> 定义表格
border —— 外边框
cellspacing —— 单元格之间的间距
cellpadding —— 单元格和其中内容的间距
2.<caption> 定义表名
3.<th> 定义表格的表头 table_head
4.<tr> 定义表格的行 table_row
5.<td> 定义表格单元 table_data
6.<thead> 定义表格的页眉
7.<tbody> 定义表格的主体
8.<tfoot> 定义表格的页脚
1.<table> 定义表格
border —— 外边框
cellspacing —— 单元格之间的间距
cellpadding —— 单元格和其中内容的间距
2.<caption> 定义表名
3.<th> 定义表格的表头 table_head
4.<tr> 定义表格的行 table_row
5.<td> 定义表格单元 table_data
6.<thead> 定义表格的页眉
7.<tbody> 定义表格的主体
8.<tfoot> 定义表格的页脚
表单标记 1.<form> 定义表单
action: 提交的动作，决定表单提交到后台哪段代码中
method:
(1)post 将表单信息打包，通过密文的方式传递给后端，安全性高，但速度慢
(2)get 将表单元素中的id与value拼成键值对，然后拼接在url地址的后面，属于明文传递，信息不安全，传输速度快
2.<input> 定义表单元素
type：
(1)text 普通文本框
(2)password 密码文本框
(3)number 数字文本框
(4)email 邮箱文本框（没有效果）
(5)date 日期文本框
(6)datetime-local 日期时间文本框
(7)button 普通按钮，按下去没有效果
(8)submit 提交按钮，按下去提交表单到后端
(9)reset 重置按钮，按下去将整个表单内容清空
(10)radio 单选按钮，两个相关联的单选按钮，通过设置相同的name属性形成一个组
(11)checkBox 复选按钮
(12)hidden 隐藏域，将要向后台传输，但却不想在前端显示的内容，设置在隐藏域中
id: 传输到后端的键
value: 传输到后端的值
name: 单选按钮设置相同name时，为一个按钮组
placeholder： 文本框中的灰色提示字，当输入内容时消失
3.<textarea> 定义文本域
rows: 文本域可以显示的行
cols: 文本域可以显示的列
4.<select> 定义下拉菜单 与<option>连用设置下列菜单当中的选项
1.<form> 定义表单
action: 提交的动作，决定表单提交到后台哪段代码中
method:
(1)post 将表单信息打包，通过密文的方式传递给后端，安全性高，但速度慢
(2)get 将表单元素中的id与value拼成键值对，然后拼接在url地址的后面，属于明文传递，信息不安全，传输速度快
2.<input> 定义表单元素
type：
(1)text 普通文本框
(2)password 密码文本框
(3)number 数字文本框
(4)email 邮箱文本框（没有效果）
(5)date 日期文本框
(6)datetime-local 日期时间文本框
(7)button 普通按钮，按下去没有效果
(8)submit 提交按钮，按下去提交表单到后端
(9)reset 重置按钮，按下去将整个表单内容清空
(10)radio 单选按钮，两个相关联的单选按钮，通过设置相同的name属性形成一个组
(11)checkBox 复选按钮
(12)hidden 隐藏域，将要向后台传输，但却不想在前端显示的内容，设置在隐藏域中
id: 传输到后端的键
value: 传输到后端的值
name: 单选按钮设置相同name时，为一个按钮组
placeholder： 文本框中的灰色提示字，当输入内容时消失
3.<textarea> 定义文本域
rows: 文本域可以显示的行
cols: 文本域可以显示的列
4.<select> 定义下拉菜单 与<option>连用设置下列菜单当中的选项
媒体标签 1.视频
<video> 视频播放的窗口，可以控制窗口的宽高
controls: 视频窗口会出现控制按钮（播放按钮，进度条...）
autoplay: 在网页加载即自动播放，谷歌浏览器屏蔽此功能
muted: 静音播放
loop: 循环播放
<source> 视频加载的资源标签，可以提供多个视频格式的资源
src: 视频资源
type: 视频格式
2.音频
<audio> 同<video>标签用法
1.视频
<video> 视频播放的窗口，可以控制窗口的宽高
controls: 视频窗口会出现控制按钮（播放按钮，进度条...）
autoplay: 在网页加载即自动播放，谷歌浏览器屏蔽此功能
muted: 静音播放
loop: 循环播放
<source> 视频加载的资源标签，可以提供多个视频格式的资源
src: 视频资源
type: 视频格式
2.音频
<audio> 同<video>标签用法
框架 <iframe> 在当前页面中加载另一个页面
src:加载另一个页面的url
<iframe> 在当前页面中加载另一个页面
src:加载另一个页面的url
语义标签 一个语义元素能够清楚的描述其意义给浏览器和开发者。
例如：
无语义 元素实例: <div> 和 <span> - 无需考虑内容.
语义 元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.
HTML5 提供了新的语义元素来明确一个Web页面的不同部分:
<header> 用来包裹头部内容的
<nav> 用来包裹导航栏
<section> 用来给正文内容分版块的
<article> 用来包裹与正文不相关的独立内容
<aside> 用来包裹侧边栏
<footer> 用来包裹页面尾部
一个语义元素能够清楚的描述其意义给浏览器和开发者。
例如：
无语义 元素实例: <div> 和 <span> - 无需考虑内容.
语义 元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.
HTML5 提供了新的语义元素来明确一个Web页面的不同部分:
<header> 用来包裹头部内容的
<nav> 用来包裹导航栏
<section> 用来给正文内容分版块的
<article> 用来包裹与正文不相关的独立内容
<aside> 用来包裹侧边栏
<footer> 用来包裹页面尾部
HTML版本标签 <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
HTML 5写法：
<!DOCTYPE html>
HTML 4.01 Strict写法：
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional写法：
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
HTML 5写法：
<!DOCTYPE html>
HTML 4.01 Strict写法：
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional写法：
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
4415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
