HTML5
HTML5基础
HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言（Markup Language）.
HTML由一套标记标签（Markup Tag）组成，在制作网页时，HTML使用标记标签来描述网页
HTML的发展史
(1)超文本标记语言——在1993年6月互联网工程小组工作草案发布（并非标准）
(2）HTML—— 1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之布过时。
(3) HTML3.2—— 1996年1月14日，W3C推荐标准。
(4) HTM4.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目前最新的版本， 于200 年被提出，2007年被W3C接纳并成立新的 HTML工作团队，2008年1月22日公布 HTML5第份正式草案， 2012年12月17日HML5 规范正式定稿2013年5月6日，HTML5.1 正式草案公布。
HTML5的优势
微软：2010年3月16日微软于拉斯维加斯市举行的MIX10技术大会上宣Explore (IE) 9浏览器开发者预览版此版本将更多地支持CSS3. SVG和浏览通用标准。
Gogle： 2010年2月19日. Goole Gers项目经理伊安.费特通过博客宣布，谷歌将放弃对Gears浏览器插件项目的支持，重点开发HTML5项目。
苹果: 2010年6月7日，苹果在开发老大会的会后发布了Safari 5。这款浏览器支持10个以上HTML5新技术，包括全屏播放、HTML5 视频. HTML5 地理位置、HTML5 的形式验证等功能。
Opera: 2010年5月5日，Opera 软件公司首席技术官Hakon Wium Lie先生在访华之际，接受中国软件资讯网等少数几家媒体采访，他认为HTML5和CSS3将是全球互联网发展的未来趋势。
Mozilla：2010年7月，Mozilla基金会发布了Firefox4浏览器的第一个测试版，从官方文档看，它对HTML5是完全级别的支持。
W3C标准介绍
W3C标准不是某一个标准，而是一系列的标准集合，一个网页由三部分组成，即结构(Structure),表现(Presentation)和行为(Behavior)
简单来说"结构"表现"行为"分别对应了三种非常常用的技术，即HTML,CSS,javaScript。也就是说HTML用来决定结构和内容，CSS用来设定网页的表现样式，javaScript用来控制网页的行为。
HTML5文件的基本结构
HTML是一种超文本标记语言，如网页中的一个标题，一个段落，一张图片等，这些都是利用一个个HTML标记完成的。最基本的语法就是<标记>内容</标记>。
网页的基本信息
1.DOCTYPE声明：
DOCTYPE声明必须位于HTML文档的第一行
<!DOCTYPE html>
使用
<title>搜狐—中国最大的门户网站</title>
打开页面后，将在浏览器窗口的标题栏显示标题
3.标签
使用该标签描述网页的摘要信息，包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能和服务的详细描述等。标签描述的内容并不显示，其目的是方便浏览器解析或利于搜索引擎，它采用"名称/值"对的方式描述摘要信息。
(1)文档内容类型，字符编码信息书写如下
<meta charset="UTF-8"/>
属性：charset表示字符集编码，常用的编码有以下几种。
(1) gd2312：简体中文，一般用于包含中文和英文的页面
(2) lSO—885901：纯英文，一般用于只包含英文的页面
(3) big5：繁体，一般用于带有繁体字的页面
(4) UTF—8：国际性通用的字符编码，同样适用于中文和英文的页面。和gd2312编码相比，国际通用性更好。
在保存文件时编码方式一定要与HTML5页面中标签中编码方式保持一致，否则，将会出现乱码
网页的基本标签
标题标签
标题标签表示一段文字的标题或主题，并且支持多层次的内容结构。比如一级标题采用
,二级标题则采用
,其他标题以此类推。HTML一共提供了六级标题
~~
,并赋予了标题一定的外观，所以字体加粗，
最大
字号最小
段落标签和换行标签
顾名思义，段落标签
…
表示一段文字等内容，列如"北京欢迎你"这首歌，包括歌名(标题)和歌词(段落)换行标签
表示强制换行显示，该标签比较特殊，没有结束标签，直接使用
表示标签的开始和结束
直接使用
表示标签的开始和结束的标签叫做单标签。成对出现的，如这样有开始标签和结束标签的标签叫双标签
水平线标签
水平线标签
表示一条水平线，注意该标签与
标签一样，比较特殊，没有结束标签
字体样式标签
在网页中，经常会遇到字体加粗或斜字体，可以使用标签来让字体变粗，标签让文字倾斜
注释和特殊符号
HTML中注释是为了方便代码阅读和调试。当浏览器遇到注释时会自动忽略注释内容
HTML注释的语法是，如下
<!--注释内容-->
有时候为了调试，需要暂时注释掉一些不必要HTML代码
由于大于号(>),小于号(<)等已作为HTML的语法符号，因此，如果要在页面中显示这些特殊符号，就必须使用相对的HTML代码表示，这些特殊符号对应的HTML代码被称为字体实体。
HTML中常用的特殊符号及其对应的字符实体如下图所示，这些实体符号都以"&“开头，以”；"结束。
| 特殊符号 | 字符实体 | 示例 |
|---|---|---|
| 空格 |  ； | <a href="#".>百度</a.> ；| ；<a href="#".>Google</a.> |
| 大于号(>) | >； | 如果时间>；晚上6点，就坐车回家 |
| 小于号(<) | <； | 如果时间<；早上7点，就走路去上学 |
| 引号(’’) | "； | W3C规范中，HTML的属性值必须用成对的"；引起来 |
| 版权符号 | ©； | ©；20013-2018北大青鸟 |
图像标签
图像标签的基本语法如下。
<img src="图片地址"alt="图像的替代文字"title="鼠标悬停提示文字"width="图片宽度"height="图片高度"/>
其中，src属性表示图片路径，alt属性指定的替代文本
超链接标签
超链接标签的基本用法
超链接包含两部分内容，一是链接地址，即链接目标，可以是某个网址或文件的路径，对应为标签的href属性；二是链接文本或图像文本或图像，单击该文本或图像，将跳转到href属性指定的链接地址，超链接的基本语法如下
<a href="链接地址"target="目标窗口位置">链接文本或图像</a>
绝对路径：指向目标地址的完整描述，一般指向本站点外的文件
相对路径：相对于当前页面的路径，一般指向本站点的文件，所以一般不需要一个完整的URL地址的形式
页面间链接：页面间链接就是从一个页面链接到另一个页面
功能性链接：功能性链接比较特殊，当单击该链接是不是打开某个网页，而是启动本机自带的某个应用程序，如网上常见的电子邮件，QQ等链接。
列表，表格与媒体元素
列表及其应用
1.无线列表及其应用
无序列表由
- 标签和
- 标签组成，使用
- 标签作为无序列表的声明，使用
- 标签作为每个列表项的起始，语法如下
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
W3C标准，
- 标签里只能嵌套
- 标签，不能嵌套其他标签
- 标签里面可以嵌套任意标签
无序列表特性如下
(1)没有顺序，每个
- 标签独占一行(块元素)
-
(2)默认
- 标签项前面有个实心小圆点
-
(3)一般用于无序类型的列表，如导航，侧边栏新闻，有规律的图片组合模板等
2.有序列表及其应用
有序列表由
- 标签和
- 标签组成，使用
- 标签作为有序列表声明，使用
- 标签作为每个列表项的起始，有序列表嵌套同无序列表一样，只能
- 标签里嵌套
- 标签，语法如下
<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>有序列表的特性如下
(1)有顺序，每个
- 标签独占一行(块元素)
-
(2)默认
- 标签项前面有顺序标记
-
(3)一般用于排序类型的列表，如试卷，问卷选项等
3.定义列表及其应用
定义列表是一种很特殊的列表形式，它是标题及列表的结合，定义列表的语法相对于无序和有序列表不太一样，它使用
-
标签作为列表的开始，使用
标签作为每个列表项的起始，而对于每个列表项的定义则使用
- 标签来完成，语法如下
<dl> <dt>标题一</dt> <dd>第一项</dd> <dd>第二项</dd> <dd>标题二</dd> <dd>第一项</dd> </dl>定义列表特性如下
(1)没有顺序，每个
标签，- 标签独占一行(块元素)
(2)默认没有标记
(3)一般用于(一个标题下有多个列表项)*n的情况
定义列表使用参考
(1)无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般来说都是相对简单的表提性质的网页内容。有序列表会根据列表项的顺序进行显示
(2)在实际的网页应用中，无序列表比有序列表应用得更加广泛，有序列表ol-li一般用于显示带有顺序编号的特定场合
(3)定义列表一般适用于带有标题和标题解释性内容的场合
表格
为什么要使用表格
1.简单通用：由于表格行列的简单结构，以及在生活的广泛使用，因此对它的理解和编写都很方便
2.结构稳定：表格通常每行的列数一致，同行单元格高度一致且水平对齐，同例单元格宽度一致且垂直对齐
表格的基本结构
1.单元格
单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格
2.行
由于表格单元格横向堆叠形成了行
3.列
由于表格单元格的宽度必须一致，因此单元格纵向排列形成了列
创建表格的基本语法如下
<table> <tr> <th>第一个单元格的内容</th> <th>第二个单元格的内容</th> ...... </tr> <th> <td>第一个单元格的内容</td> <td>第二个单元格的内容</td> ...... </th> </table>创建表格一般分为下面四步
第一步：创建表格标签
…第二步：在表格标签
…里创建标签…,可以有多行
第三步：在第一行标签…里创建单元格标签…,用于创建表格标题
第四步：在行标签…里创建单元格标签…,可以有多个单元格
表格的跨列与跨行
1.表格的跨列
跨列是指单元格的横向合并，语法如下
<table> <tr> <td colspan="所跨的列数">单元格内容</td> </tr> </table>col为column(列)的缩写，span为跨度，所以colspan的意思为跨列
2.表格的跨行
跨行是指单元格在垂直方向的合并，语法如下
<table> <tr> <td rowspan="所跨的行数">单元格内容</td> </tr> </table>row为行的意思，rowspan即跨行
视频元素
1.video元素的基本语法
HTML5中video元素是用来播放视频文件的，支持Ogg(Ogg Vorbis的简写)，MPEG4，WebM等视频格式，
语法如下
<video src="视频路径"controls="controls"></video>音频元素
HTML中的audio元素是用来播放音频文件的，支持Ogg，MP3，WSV等音频格式，其语法如下
<video src="音频路径"controls="controls"></video><iframe.>框架
<iframe.>的语法如下
<iframe src="引用页面地址"name="框架标识名"...></iframe><iframe.>属性的使用
内联框架的常用属性包括name,width,heigth,其中name属性可以和前面学过的锚链接结合起来实现页面间的相互跳转。具体步骤如下
(1)在被打开的框架上加name属性，代码如下
<iframe name="mainFrame"src="subframe/the_second.html"/>(2)在超链接上设置target目标窗口属性为希望显示的框架窗口名，代码如下
<a href="subfrane/the_second.html"target="mainFrame">下边显示第二页</a>表单
表单标签及表单属性
在HTML5中，使用标签来实现表单的创建，该标签用于在网页中创建表单区域，属于容器标签，其他表单标签需要在它的范围内才有效，便是其中的一个，用于设定各种输入资料的方法
属性 说明 action 此属性指示服务器上处理表单输出的程序，一般来说，当用户单击表单上的"提交"按钮后，信息发送到Web服务器上，由action属性所指定的程序处理。语法为action=“URL”。如果action属性的值为空，则默认表单提交到本页 method 此属性告诉浏览器如何将数据发送给服务器，它指向服务器发送数据的方法。语法为metod=(get|post) 表单元素及其格式
标签中有很多属性，下面对一些比较常用的属性进行整理，如下表格
属性 说明 type 此属性指定表单元素。可用的类型有text，password，checkbox，radio，submit，reset，file，email，number，url，hidden，image和button。默认为text name 此属性指定表单元素的名称 value 此属性是可选属性，它指定单元素的初始值，如果type为radio类型，则必须指定一个值 size 此属性指定单元素的初始宽度，如果type为text或password类型，则表单元素的大小以字符为单位，对于其他输出类型，宽度以像素为单位 maxlength 此属性用于指定可在text或password元素中输入最大字符数。默认值为无限大 checked 此属性用于指定按钮是否被选中的，当输入类型为radio或checbox时，使用此属性 文本框
在表单最常用，最常见的表单输入元素就是文本框(text),它用于输入单行文本信息，如用户民的输入文本框。若要在文档的表单里创建一个文本框，将表单元素type属性设为text类型就可以了
密码框
密码框与文本框类似，区别在于需要设置文本框控件的type属性为password。设置了type属性后，在输入密码时字符都由黑色实心点来显示，从而实现了对数据的处理
复选框
复选框与单选按钮有些类似，只不过复选框允许用户选择多个选项。复选框的类型是checkbox，即将表单元素的type属性设为checkbox就可以创建一个复选框了
按钮
按钮分为三种，分别是普通按钮(button),提交按钮(submit)和重置按钮(reset)。普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中一填信息。
多行文本域
当需要在网页中输入两行或两行以上的文本时，怎么办？显然，前面学过的文本框框及其他的表单元素都不能满足要求，这就应该使用多行文本框，他的标签是
语法
<textarea name="textarea"cols="显示的列数"rows="显示的行数"> 文本内容 </textarea>其中，cols属性用来指定多行文本框的列的宽度；rows属性用来指定多文本框的行数。在…标签中不能使用value属性的初始值
文本域
文本域的作用是用于实现文件的选择，在应用时只需要type属性设为file即可。在实际应用中，文件域通常应用于文件上传的操作，如选择需要上传的文本，图片等。
number类型使用表如下所示的属性来规定对数字的限定
属性 值 描述 value number 规定的默认值 min number 规定允许的最小值 max number 规定允许的最大值 step number 规定合法的数字间隔(如果step=“2”,则合法的数是-2，0，2，4等） 滑块
range类型的input元素提供用于输入包含一定范围内的数字值的文本框。在页面中显示为滑动条，我们还可以进行对所接收的数字进行限制，包括规定允许的最大值和最小值，合法的数字间隔或默认条。如果输出的数字不在限定范围之内，则会出现错误提示
搜索框
search类型的input元素提供用于输入搜索关键字的文本框。虽然外观看起来search类型和input的普通text类型差不多，但实现起来却并不那么容易。search类型提供的搜索框不只是Google或百度的搜索框，而是任意一个搜索框
6404
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
