HTML5基础
HTML5基础
HTML5文件的基本结构和W3C标准
HTML简称及发展史
什么HTML？HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。
在明白了什么是HTML之后，简单介绍一下HTML的发展史以及目前最新版本的HTML。
(1)超文本标记语言——在1993年6月互联网工程工作小组工作草稿发布(并非标准)。
(2)HTML2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布过时。
(3)HTML3.2——1996年1月14日，W3C推荐标准。
(4)HTML4.0——1997年12月18日，W3C推荐标准。
(5)HTML4.01(微小改进)——1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国际标准化组织和国际电工委员会的标准。
(6)XHTML1.0——2000年1月26日发布，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。
(7)XHTML1.1——2001年5月31日发布。
(8)XHTML2.0——W3C的工作草稿，由于改动过大，学习者项新技术的成本过高而最终失败，因此现在最常用的还是XHTML1.0标准。
(9)HTML5——目前最新的版本，于2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，2008年1月22日发布HTML5第一份正式草案，2012年12月17日HTML5规范正式定稿2013年5月6日，HTML5.1正式草案公布。
HTML5的优势
1.世界知名浏览器厂商对HTML5的支持
2.市场的需求
3.跨平台
HTML5文件的基本结构
最基本的语法是<标记>内容<标记>。
标记在有的地方也称标记为标签或者元素，它们都是指同一种东西，标签都是成双成对出现的，有一个开头标记相应的也有一个结束标记，以<>开始，以结束。
网页的基本信息
1.DOCTYPE声明
DOCTYPE文档类型的声明，约束HTML文件结构，检查是否符合相关Web标准，同时也是告诉浏览器，使用哪个规范来解释这个文件中的代码，DOCTYPE声明必须位于HTML文档的第一行。
2.标签
使用标签描述网页的标题，类似一篇文章的标题，一般为一个简洁的主题，并能使用使读者有兴趣读下去。例如：
阿里巴巴 打开网页后，将会到浏览器窗口的标题栏显示网页标题。3.标签
使用该标签描述网页的信息，标签的描述内容不显示，其目的是为了方便浏览器解析或利于搜索引擎搜索。
属性：charset表示字符集编码，常用的有几种.
gb2312:简体中文，一般用于包含中文和英文页面。
ISO-885901：纯英文，一般用于英文的页面。
big5:繁体，一般用于带有繁体字的页面。
UTF-8：国际通用字符编码，和gb2312对比国际通用性更好。
网页的基本标签
标题标签表示一段文字的标题或主题，并且支持多层次的内容结构。
段落标签和换行标签
段落标签
…
表示一段文字等内容。例如如下：
段落标签的应用北京欢迎你
北京欢迎你，有梦想谁都了不起
有勇气就是会有奇迹
上面使用了
标签来表示标题，使用
标签表示一片段落。
换行标签
表示强制换行显示，该标签比较特殊，没有结束标签，直接使用
表示标签的开始和结束。
水平线标签
水平线标签
表示一条水平线，它和
标签一样，比较特殊，没有结束标签。
字体样式标签
在网页中经常会遇到加粗或者斜体字，可以使用标签加粗，标签让文字倾斜。
注释和特殊符号
HTML中注释是方便阅读和调试，当浏览器遇到注释会自动忽略注释内容。HTML注释如下。
HTML中常用的特殊符号及对应的字符实体
| 特殊符号 | 字符实体 | 示例 |
|---|---|---|
| 空格 | 百度互联网h2> |
|
| 大于号（>） | > | 如果时间>晚上6点，就坐车回家。 |
| 小于号（<） | < | 如果时间<早上7点，就去上学。 |
| 引号（”） | " | W3C规范中,HTML的属性值必须用成对的"引起来。 |
| 版权符号© | © | ©2013-2019阿里巴巴 |
图像标签
常见的图像格式
1.JPG格式
JPG格式采用的是有损压缩，会造成图像画面失真，不过压缩之后的体积会很小适合网页中使用。
2.GIF
GIF格式文件支持透明色，使得GIF格式在网页背景和一些多层特效的显示上用得非常多，还支持动画。
3.BMP格式
BMP格式图像在Windows操作系统中使用较多，它不支持压缩，也不适合Web页。
4.PNG格式
PNG格式是20世纪90年代中期开始开发的图像文件存储格式，它兼有GIF格式和JPG格式的优势，同时具备GIF不具备的特性。
语法
超链接标签
超链接的基本用法
超链接分为两个部分，一是链接地址，二是链接文本或图像，将跳转到href属性指定的链接地址，超链接的基本语法如下；
链接文本或图像
href：表示链接地址的路径。
target：指定链接在哪个窗口打开。
超链接的应用场合
1.页面间链接
页面间链接就是从一个页面到另一个页面，例如如下：
页面间链接YL在线学习平台
在浏览器中打开页面显示两个超链接，打击两个超链接分别在两个新的窗口打开页面。
2.锚链接
锚链接常用于目标内容很多，需定位到目标内容中的某个具体位置，当点击某个超链接时，将跳转到对应的内容介绍处，将A页面的甲位置跳转到页面中的乙位置，做起来很简单。
目标位置乙
name为标签的属性，marker为标记名，由于有的标签没有name属性，因此可以用id来标记。
设置甲位置链接路径href属性为"#标记名的"语法如下
当前位置甲
3.功能链接
功能链接比较特殊，当点击该链接时不慎打开网页，而是启动本机自带的某个程序，如网上常见的电子邮件，QQ等链接。
行内元素和块元素
不管自身内容多少，都独占一行，这样的元素称之为块元素，可如strong元素，a元素等这样的元素，宽度由自己内容的决定，其他元素可以排在它后面，这样的元素称之为行内元素。
列表、表格于媒体元素
列表
什么是列表，简单来说就是信息资源的一种展示形式，它可以使信息结构化和调理化，并以列表的样式显现出来，以便浏览者能快捷获得相应信息。
列表及其应用
1.无序列表及其应用
无序列表由
-
并且和
- 标签组成，使用
-
标签作为无序列表的声明，使用
- 标签为每个列表项的起始，其结构语法如下：
- 1
- 2
- 3
注意
循环W3C标准，
-
标签里面只能嵌套
- 标签，不能嵌套其它标签。
无序标签特性如下：
(1)没有顺序，每个
(2)默认
(3)一般用于无序类型的列表，如导航，侧边栏新闻，有规律的图文组合模块等。
2.有序列表及其应用
有序列表由
-
标签和
- 标签组成，使用
-
标签作为有序列表的声明，使用
- 标签作为每个列表项的起始，有序列表嵌套同无序列表一样，只能
-
标签里嵌套
- 标签。其结构语法如下：
- 标签作为每个列表项的起始，有序列表嵌套同无序列表一样，只能
- 1
- 2
- 3
- 4
有序列表的特性如下.
(1)有顺序，每个
(2)默认
(3)一般用于标签类型的列表，如试卷。问卷选项等。
3.定义列表及其应用
定义列表是一种很特殊的列表形式，它是标题即列表项的结合，定义列表的语法相对于无序和有序列表不太一样，它使用
-
标签作为列表的开始，使用标签作为每个列表的起始，而对于每个列表项的定义则使用
- 标签来完成。其结构语法如下：
- 1
- 2
- 3
- 4
定义列表的特性如下：
(1)没有顺序，每个
(2)默认没有标记。
(3)一般用于一个标题下有一个或多个列表项。
总结：
(1)无序列表中的每个项都是平级的，没有级别之分，并且列表中的内容一般都是
(2)在实际的网页应用中，无序列表比有序列表应用得到更加广泛，有序列表ol-li一般用于显示带有顺序编号的特定场合。
(3)定义列表一般用于带有标题和标题解释性内容的场合。
表格
为什么使用表格
1.简单通用
由于列表行列的简单构造，以及在生活中的广泛使用，因此对它的理解和编写都很方便。
2.结构稳定
表格通常每行的列数一致，同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐，这种严格的约束形成了一个不易变形的长方形盒子结构。堆叠排列起来结构很稳定。
列表的基本结构
1.单元格
单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格。
2.行
一个或多个单元格横向堆叠形成了行。
3.列
由于表格单元的宽度必须一致，因此单元格纵向排列形成了列。
表格的基本语法
创建表格的基本语法如下：
....| 1 | 2 |
|---|
创建表格一般分为下面四步。
第一步：创建表格标签
…第二步：在表格标签
…第三步：在第一行标签…里创建单元格标签…，用于创建表格标题。
第四步：在行标签…里创建单元格标签…，可以有多个单元格为了显示 表格的轮廓，一般还需要设置
标签的border边框属性，指定边框亮度。表格的跨列于跨行
1.表格的跨列
跨列是指单元的横向合并，语法如下：
| 单元格内容 |
col为column(列)的缩写，span为跨度，所以colspan的意思为跨列。
2.表格的跨行
跨行是指单元格在垂直方向上的合并，语法如下：
| 单元格内容 |
row为行的意思，rowspan即跨行。
3.表格跨行与跨列的综合应用
有时表格中既有跨列又有跨行的情况，从而形成了相对复杂的表格显示，代码如下：
| 学生资料 | ||
| 张三 | 语文 | 98 |
| 数学 | 89 | |
| 李四 | 语文 | 88 |
| 数学 | 91 | |
跨行和跨列以后，并不改变表格的特点，同行的总高度一致，同列的总宽一致。因此表格中各单元格的宽度或高度互相影响，结构相对稳定，但缺点是不能灵活地进行布局控制。
HTML5的媒体元素
媒体元素概述
网络发展越来越快了，用计算机，平板，手机打开网页就可以浏览视频，听歌，就是常见的视频播放，音频播放的网页。
在HTML5问世之前，页面展示视频，音频，动画等，除了使用第三方自主开发的播放器外，使用最多的工具就是Flash了，但它需要在浏览器上安装各种插件才能使用，有的时候速度会非常慢，HTML5的出现改变了这一状况。
视频元素
Web上的视频播放从来都没有一个固定的标准，大多数视频都是通过Flash这样的插件来显示的，不同的浏览器往往拥有不同的插件。HTML5中的video元素是现在播放视频的一种标准方法。
1.video元素的基本语法
HTML5中的video元素是用来播放视频的文件，支持Ogg(Ogg vorbis的简写)、MPEG4、WebM等视频格式，其用语法如下：
其中src属性用于指定要播放的视频文件的路径，controls属性用于提供播放、暂停和音量控件，此外，还可以使用width和height设置视频的宽度和高度。
如果浏览器不支持video元素，可以在video元素中插入一段文字用于提示，这样，旧的浏览器就可以显示这段文字给用户。
2.video元素的应用
使用了source元素来链接到不同的视频文件，浏览器会自动选择第一个可以识别的格式。
主流浏览器支持的视频格式
| 视频格式 浏览器 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| ogg | 不支持 | 3.5+ | 10.5+ | 5.0+ | 不支持 |
| MPEG4 | 9.0+ | 不支持 | 不支持 | 5.0+ | 3.0+ |
| WebM | 不支持 | 4.0+ | 10.6+ | 6.0+ | 不支持 |
在video元素中指定controls属性可以在页面上以默认的方式进行播放控制。如果不加这个具体代码如下：
音乐播放设置autoplay属性后，不需要于用户进行任何交互，就可以让视频文件加载完成后自动播放。使用大部分用户对这个功能很反感，应慎用。
音频元素
Web上的音频播放从来都没有一个固定的标准，在访问相关网站时会遇到各种插件，如Windows Media Player、Real Player等。HTML5问世后，终于可以使音频播放领域实现统一的标准，让用户告别插件的繁琐。
1.audio元素的基本语法
HTML5中的audio元素是用来播放音频文件的，支持Ogg、MP3，WAV等音频格式，其语法如下：
其中src属性用于指定要播放的音频文件的路径，controls属性用于提供播放，暂停和音量控制，此外，还可以用width和height设置音频的宽度和高度。
如果浏览器不正常audio元素，可以在audio元素中间插入一段文字用于提示，这样，旧的浏览器就可以显示着段文字给用户。具体操作如下：
2.audio元素的应用
下面通过一个完整的示例来演示如何在页面内播放音频，具体如下：
音乐示例在浏览器中运行可以看到一个比较简单的音频播放器，包含暂停，播放，播放进度条，时间显示，声音大小等常用控件。
主流浏览器对音频格式的支持情况
| 音频模式 浏览器 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| ogg | 不支持 | 3.5+ | 10.5+ | 3.0+ | 不支持 |
| mp3 | 9.0+ | 不支持 | 不支持 | 3.0+ | 3.0+ |
| wav | 不支持 | 4.0+ | 10.6+ | 不支持 | 3.0+ |
HTML5的结构元素
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容(用于页面或页面中的一块区域) |
| footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
| section | Web页面中的一块独立区域 |
| article | 独立的文字内容 |
| aside | 相关内容或应用(常用于侧边栏) |
| nav | 导航类辅助内容 |
框架
框架的主要主要作用是使页面中的部分内容用框架实现，一般用于页面中的引用站外的页面内容，使用比较方便，灵活。的语法
的语法如下 属性的使用 (1)在被打开的框架上加name属性，关键代码如下。(2)在超链接上设置target目标窗口属性为希望显示的框架窗口名，关键代码如下。
总结
无序列表由
-
和
- 标签组成，使用无序列表组成，使用无序列表排列的内容没有顺序之分，每个列表项独占一行，列表默认有实心小黑圆点。
有序列表由
-
和
- 标签组成，使用有序列表排列的内容通常显示顺序编写，每个列表项独占一行。
定义列表由
-
、
- 和
- 标签组成，通常用于带有标题和标题解释性内容的场合，
- 表示标题，
- 表示标题注释性的内容。
掌握表格的基本使用方法。
使用
、、| 创建表格。 |
制作跨列、跨行的表格。
跨列：colspan=“横向跨的单元格数”。
跨行：rowspan=“纵向跨的单元格数”。
网页中的媒体元素包括video视频元素和audio音频元素。
媒体元素共有的属性：src(链接地址)、controls(控制播放控件)。
可以让媒体元素在不同浏览器下都支持播放的元素(source)。
语义化结构元素(header、section、article、nav、aside、footer)的使用。
常用的框架技术内联框架。
配合使用标签的target属性及标签的name属性，可以实现窗口间的关联。
表单
表单概述
表单在网页中应用比较广泛，如申请电子邮件，用户需要首先填写注册信息，然后才能提交申请，又如希望登录邮箱收发电子邮件，也必须在登录页面中输入用户名密码才能进入邮箱，这就是典型的表单应用。
表单的应用比较常见，典型的应用场景如下。
登录、注册：登录是填写用户名、密码、注册是填写用户名】电话等个人信息。
网上订单：在网上购买商品，一般要求填写姓名、联系方式、付款方式等信息。
调查问卷：回答对某些问题的看法，以便形成统计数据，方便分析。
网上搜索：输入关键字，搜索想要的可用信息。
表单的内容
创建表单后，就可以在表单中放置控件以接收用户的输入。这些控件通常放在…标签对之间，也可以在表单之外用来创建用户界面。
表单标签及表单属性
在HTML5中，使用标签来实现表单的创建，该标签用于在网页中创建表单区域，属于容器标签，其他表单标签需要在它的范围内才有效，便是其中的一个，用以设定各种输入资格的方法。标签有两个常用的属性
| 属性 | 说明 |
|---|---|
| action | 此属性指示服务器上处理表单输出的程序。一般来说，当用户单击表单上的提交按钮后，信息发送到Web服务器上，由action属性所指的程序处理。语法为action =“url”。如果action属性的值为空，则默认表单提交到本页 |
| method | 此属性告诉浏览器如何将数据发送服务器，它指定向服务器发送数据的方法。语法为method=（get|post） |
表单元素及其格式
标签中有很多属性，下面对一些比较常用的属性进行整理，如下所示
元素的常用属性
| 属性 | 说明 |
|---|---|
| type | 此属性指定表单元素的类型。可用的类型有text、password、checkbox、radio、submit、reset、file、email、number、url、hidden、image和button。默认为txt |
| name | 此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按名称来标识他们。 |
| value | 此属性是可选属性，它指定表单元素的初始值。 |
| size | 此属性指表单元素的初始宽。 |
| maxlength | 此属性用于text或password元素输入的最大字符数。 |
| checked | 此属性用于指定按钮是否是被选中的。 |
文本框
在表单中常用、最常见的表单输入元素就是文本框，它用于输入单行文字信息，如用户名的输入文本框。若要在文档的表单里创建一个文本框，将表单元素type属性设为text类型就可以了。
密码框
在一些特殊情况下，用户希望输入的数据被处理，以免被让他人得到，如密码。这时候使用文本框就无法满足要求，需要使用密码框来完成。
密码框与文本框类似，区别在于需要设置文本框控件的type属性为password。设置了type属性后，在密码框输入的字符全都以黑色实心的圆点来显示，从而实现了对数据的处理。
单选按钮
单选按钮控件用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称，用户一次只能选中一个单选按钮。只有从组中选中的单选按钮才会在提交的数据中提交对应的数值，在使用单选按钮时，需要一个显示的value属性。
复选框
复选框与单选按钮有些类似，只不过复选框允许用户选择多个选项。复选框的类型是checkbox，即将表单元素的type属性设为checkbox就可以创建一个复选框了。复选框的命名与单选按钮有些区别，既可以多个复选框选用相同的名称，也可以各自具有不同的名称，关键是看如何使用复选框，在表单提交时，会将该复选框的name值和对应的value值一起提交。
列表框
列表框的目的主要是使用户快速、方便、正确地选择一些选项，并且节省页面空间。它是通过
按钮
按钮在表单中经常用到，在HTML5按钮分为三种，分别是普通按钮(button)、提交按钮(submit)、重置按钮(reset)。普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填的信息。语法如下：
其中，type="button"表示普通按钮；type="submit"表示提交按钮；type="reset"表示是重置按钮。name用来给按钮命名，value用来设置显示在按钮上的文字。
(1)reset按钮：用户单击该按钮后，无论表单中是否已经填写或输入数据，表单中各个表单元素都会被重置到最初状态，而填写或输入的数据将被清空。
(2)submit按钮：用户单击该按钮后，表单将会提交到action属性所指定的URL,并传递表单数据。
(3)button：属于普通按钮，需要与事件关联使用。
多行文本域
当需要在网页中输入两行或两行以上的文本时，怎么办？显然，前面学过的文本框及其他表单元素都不能满足要求，这就应该使用多行文本框，它的标签是