HTML5基础
在这个互联网时代中，大家的学习、工作和生活基本上都离不开网络。大家经常浏览的新闻页面、微博和微信等各种从网上获得信息的途径，无论是个人计算机(Personal Computer, PC)终端，还是移动客户端，基本上都是以Web为基础来呈现的，因此Web页面呈现信息已成为各种信息共享和发布的主要形式。
**超文本标记语言(Hyper Text Markup Language, HTML)**是创建Web页面的基础。
什么是HTML? HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言(Markup Language)。HTML由一套标记标签(Markup Tag)组成，在制作网页时，HTML使用标记标签来描述网页。
HTML5的优势
世界知名浏览器厂商对HTML的支持
通过对Internet Explorer、Google、firfox、Safari 、Opera等主要的Web浏览器发展策略调查发现他们都在支持HTML5。
市场的需求
现在的市场已经迫不及待的要求有一个统一的互联网常用标准。HTML5之前的情况是由于各浏览器之前的不统一，仅是修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量时间。而HTML5的目标就是将Web带入一个成熟的应用平台，在HTML5平台上，视频，音频，图像，动画及计算机分交换被标准化。
跨平台
HTML5可以做到跨平台开发，用户只用打开浏览器即可访问应用，pc网站，各种移动设备，插件等核心代码就可以不需要重新编译，极大的减少了开发人员的工作量。
W3C标准
W3C标准不是某一个标准，而是一系列标准集合，一个网页主要由三部分组成，即结构，表现和行为。其中，W3C标准包括结构化标准语言（HTML）。
在一个网页中，包括各级标题、正文、图片、列表等，构成了网页的“结构”，每个组成部分的字体、颜色、间距等属性就构成了它的“表现”。用户通过单击然某个页面中某个元素移动、消失等动画交互就称它为“行为”。
结构、表现、行为分别对应三种常用的技术，既HTML、CSS、JavaScript。也就是说HTML用来决定结构和内容，CSS用来设定网页的表现样式。JavaScript用来控制网页的行为。
HTML5文件的基本结构
<html>
<head>
<title>我的第一个网页</title>
<body>
我的第一个网页
</body>
</head>
</html>整个html包括头部（head）、和主体两部分（body），头部包括网页标题title等基本信息，主体包括网页的内容信息、如图片、文字等。
网页的基本信息
DOCTYPE声明：
DOCTYPE声明必须位于HTML文档的第一行。
<!DOCTYPE html>title标签
使用title标签描述网页的标题，类似一篇文章的标题，一般为一个简洁的主题，并能使读者有兴趣读下去。比如：搜狐网站的主页，如下：
<title>搜狐—中国最大的门户网站</title>打开页面后，将在浏览器窗口的标题栏显示标题。
标签
使用该标签描述网页的摘要信息，包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能和服务的详细描述等。标签描述的内容并不显示，其目的是方便浏览器解析或利于搜索引擎，它采用"名称/值"对的方式描述摘要信息。
(1)文档内容类型，字符编码信息书写如下：
<meta charset="UTF-8"/>属性：charset表示字符集编码，常用的编码有以下几种：
(1) gd2312：简体中文，一般用于包含中文和英文的页面
(2) lSO—885901：纯英文，一般用于只包含英文的页面
(3) big5：繁体，一般用于带有繁体字的页面
(4) UTF—8：国际性通用的字符编码，同样适用于中文和英文的页面。和gd2312编码相比，国际通用性更好。
在保存文件时编码方式一定要与HTML5页面中标签中编码方式保持一致，否则，将会出现乱码
网页的基本标签
标题标签
<h1>一级标题 </h1>
<h2>二级标题 </h2>
<h3>三级标题 </h3>
<h4>四级标题 </h4>
<h5>五级标题 </h5>
<h6>六级标题 </h6>标题标签表示一段文字的标题或主题，并且支持多层次的内容结构。比如一级标题采用<h1>,二级标题则采用<h2>,其他标题以此类推。HTML一共提供了六级标题<h1>~<h6>,并赋予了标题一定的外观，所以字体加粗，其中<h1>标签最大，<h6>标签最小。
段落标签和换行标签
顾名思义，段落标签<p>表示一段文字等内容，列如"北京欢迎你"这首歌，包括歌名(标题)和歌词(段落)。
换行标签<br>表示强制换行显示，该标签比较特殊，没有结束标签，直接使用
表示标签的开始和结束。
直接使用<br/>表示标签的开始和结束的标签叫做单标签。成对出现的，如<html></html>这样有开始标签和结束标签的标签叫双标签。
水平线标签
水平线标签<hr/>表示一条水平线，注意该标签与<br/>标签一样，比较特殊，没有结束标签
字体样式标签
在网页中，经常会遇到字体加粗或斜字体，可以使用<strong>标签来让字体变粗，<em>标签让文字倾斜
注释和特殊符号
HTML中注释是为了方便代码阅读和调试。当浏览器遇到注释时会自动忽略注释内容
HTML注释的语法是，如下
<!--注释内容-->| 特殊符号 | 字符实体 | 示例 |
|---|---|---|
| 空格 |  ； | <a href="#".>百度</a.> ；| ；<a href="#".>Google</a.> |
| 大于号 (>) | >； | 如果时间>；晚上6点，就坐车回家 |
| 小于号(<) | <； | 如果时间<；早上7点，就走路去上学 |
| 引号(’’) | "； | W3C规范中，HTML的属性值必须用成对的"；引起来 |
| 版权符号© | ©； | ©；20013-2018北大青鸟 |
图像标签
常见的图像格式
1.JPG格式
此格式最适合用于摄影或连续色调图像的高级格式,这是因为JPG文件可以包含数百种颜色,随着JPG格式文件品质的提高,文件的大小和下载时间也会随之增加。
2.GIF格式
GIF格式是使用最广泛,最普遍的一种图像形式,它是图像交换格式,Gif格式在网页的背景和一些多层特效的显示上用的非常多,还支持动画,这是它最突出的一个特点。
3.BMP格式
BMP格式图像在windows操作系统中使用的比较多,它是位图,BMG形式图像文件不支持压缩,也不适用于Web。
4.PNG格式
PNG兼有GIF格式和JPG格式的优势,同时具备GIF格式不具备的特性.流式网络图形格式。
图像标签的基本语法如下：
<img src="图片地址"alt="图像的替代文字"title="鼠标悬停提示文字"width="图片宽度"height="图片高度"/>其中，src属性表示图片路径，alt属性表示图片无法显示时指定的替代文本，width属性指定图片宽度，height属性表示图片高度。
超链接标签
超链接的基本用法
超链接包含两部分内容，一是链接地址，即链接目标，可以是某个网址或文件的路径，对应为<a>标签的href属性；二是链接文本或图像文本或图像，单击该文本或图像，将跳转到href属性指定的链接地址，超链接的基本语法如下：
<a href="链接地址"target="目标窗口位置">链接文本或图像</a>绝对路径：指向目标地址的完整描述，一般指向本站点外的文件
相对路径：相对于当前页面的路径，一般指向本站点的文件，所以一般不需要一个完整的URL地址的形式
页面间链接：页面间链接就是从一个页面链接到另一个页面
功能性链接：功能性链接比较特殊，当单击该链接是不是打开某个网页，而是启动本机自带的某个应用程序，如网上常见的电子邮件，QQ等链接。
超链接的应用
1.页面间链接
页面间链接就是从一个页面链接到另外一个页面。
2.锚链接
锚链接常用于目标页内容很多,需定位到目标内容的某个具体位置时。语法:
<a name="make">目标位置已</a>name为<a>标签的属性,marker为标记名,其功能类似于古时用于固定船的锚(或沟)。语法:
<a href="#marke">当前位置甲</a>3.功能性链接
功能性链接比较特殊,当单击该链接时不是打开某个网页,而是启动本机的自带的某个应用程序,如网上常见的电子邮件,qq,msn等链接。
列表、表格与媒体元素
列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
列表被分为三类型：无序列表、有序列表、定义列表。
无序列表
无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无序列表的声明,使用<li>标签作为每个列表的起始。语法：
<ul>
<li>第一项<li>
<li>第二项<li>
<li>第三项<li>
<ul>遵循W3C标准,<ul>标签里面只能嵌套<li>标签,不能嵌套其他标签
<li>标签里面可以嵌套任意标签。
无序列表的特性如下：
1.没有顺序,每个<li>标签独占一行(块元素)
2.默认<li>标签项前面有实心小圆点
3.一般用于无序列表的列表,如导航、侧边栏
有序列表
由<ol>标签和<li>标签组成,使用<li>标签作为有序列表的声明,使用<li>标签作为每个列表的起始,只能嵌套<li>标签。语法：
<ol>
<li>....<li>
<li>.....<li>
<ol>
有序列表的特性如下：
(1)有顺序,每个<li>标签独占一行(块元素)
(2)默认<li>标签项前面有顺序标记
(3)一般用于排序列表
定义列表
定义列表是一种很特殊的列表形式,它是标题及列表的结合。语法：
<dl>
<dt>标题一<dt>
<dd>......<dd>
<dd>.......<dd>
<dt>标题二<dt>
<dd>.......<dd>
<dd>.......<dd>有序列表的特性如下：
(1)没有顺序,每个<dt>标签,<dd>标签独占一行(块元素)
(2)默认没有标记
(3)一般用于(一个标题下有一个或多个列表)*n
表格
为什么要使用表格
**简单通用：**由于表格行列的简单结构，以及在生活的广泛使用，因此对它的理解和编写都很方便
**结构稳定：**表格通常每行的列数一致，同行单元格高度一致且水平对齐，同例单元格宽度一致且垂直对齐
表格的基本结构
1.单元格
单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格
2.行
由于表格单元格横向堆叠形成了行
3.列
由于表格单元格的宽度必须一致，因此单元格纵向排列形成了列
创建表格的基本语法如下：
<table>
<tr>
<th>第一个单元格的内容</th>
<th>第二个单元格的内容</th>
......
</tr>
<th>
<td>第一个单元格的内容</td>
<td>第二个单元格的内容</td>
......
</th>
</table>创建表格一般分为下面四步：
第一步：创建表格标签<table>…</table>
第二步：在表格标签<table>…</table>里创建标签<tr>…</tr>,可以有多行
第三步：在第一行标签<tr>…</tr>里创建单元格标签<th>…/th>,用于创建表格标题
<第四步：在行标签<tr>…<tr>里创建单元格标签<td>…</td>,可以有多个单元格
表格的跨列与跨行
表格的跨列
跨列是指单元格的横向合并，语法如下
<table>
<tr>
<td colspan="所跨的列数">单元格内容</td>
</tr>
</table>col为column(列)的缩写，span为跨度，所以colspan的意思为跨列。
表格的跨行
跨行是指单元格在垂直方向的合并，语法如下：
<table>
<tr>
<td rowspan="所跨的行数">单元格内容</td>
</tr>
</table>row为行的意思，rowspan即跨行。
HTML的媒体元素
视频元素
video元素的基本语法：
HTML5中video元素是用来播放视频文件的，支持Ogg(Ogg Vorbis的简写)，MPEG4，WebM等视频格式，
语法如下：
<video src="视频路径"controls="controls"></video>音频元素
HTML中的audio元素是用来播放音频文件的，支持Ogg，MP3，WSV等音频格式，其语法如下
<video src="音频路径"controls="controls"></video>videoo与audio中src属性用于指定要播放的视频文件的路径，controls属性用于提供播放、暂停和音量控件，此外，还可以使用width和height设置视频的宽度和高度。
如果浏览器不支持video/audio元素，可以在video/audio元素中间插入一段文字用于提示，这样，旧的浏览器就可以显示这段文字给用户。具体操作如下：
<video src="视频路径"controls="controls">你的浏览器不支持video/audio标签</video>HTML的结构元素
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容(用于页面或页面中的一块区域) |
| footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用(常用于侧边栏) |
| nav | 导航类辅助内容 |
表单
表单标签及表单属性
在HTML5中，使用标签来实现表单的创建，该标签用于在网页中创建表单区域，属于容器标签，其他表单标签需要在它的范围内才有效，便是其中的一个，用于设定各种输入资料的方法
| 属性 | 说明 |
|---|---|
| action | 此属性指示服务器上处理表单输出的程序，一般来说，当用户单击表单上的"提交"按钮后，信息发送到Web服务器上，由action属性所指定的程序处理。语法为action=“URL”。如果action属性的值为空，则默认表单提交到本页 |
| method | 此属性告诉浏览器如何将数据发送给服务器，它指向服务器发送数据的方法。语法为metod=(get|post) |
表单元素及其格式
使用< input>标签实现了向表单添加文本框、提交按钮、重置按钮等的功能。< input>中有很多属性，下面对一些较常用的的属性进行整理。
| 属性 | 说明 |
|---|---|
| type | 此属性指定表单元素的类型,可用的类型有text,password,chekbox,radio,submit,rest,file,email,默认为text |
| name | 此属性指定表单元素的名称 |
| value | 此属性是可选属性,它指定表单元素的初始值.如果type为radio类型,则必须指定一个值 |
| size | 此属性指定单元格的初始宽度 |
| maxlength | 此属性用于指定text或password元素中输入的最大字符,默认为无限大 |
| checked | 此属性用于指定按钮是否被选中 |
文本框
在表单最常用，最常见的表单输入元素就是文本框(text),它用于输入单行文本信息，如用户民的输入文本框。若要在文档的表单里创建一个文本框，将表单元素type属性设为text类型就可以了。
密码框
密码框与文本框类似，区别在于需要设置文本框控件的type属性为password。设置了type属性后，在输入密码时字符都由黑色实心点来显示，从而实现了对数据的处理。
复选框
复选框与单选按钮有些类似，只不过复选框允许用户选择多个选项。复选框的类型是checkbox，即将表单元素的type属性设为checkbox就可以创建一个复选框了。
按钮
按钮分为三种，分别是普通按钮(button),提交按钮(submit)和重置按钮(reset)。普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中一填信息。
多行文本域
当需要在网页中输入两行或两行以上的文本时，怎么办？显然，前面学过的文本框框及其他的表单元素都不能满足要求，这就应该使用多行文本框，他的标签是。语法：
<textarea name="textarea"cols="显示的列数"rows="显示的行数">
文本内容
</textarea>其中，cols属性用来指定多行文本框的列的宽度；rows属性用来指定多文本框的行数。在…标签中不能使用value属性的初始值
文本域
文本域的作用是用于实现文件的选择，在应用时只需要type属性设为file即可。在实际应用中，文件域通常应用于文件上传的操作，如选择需要上传的文本，图片等。
邮箱
Email类型的input元素是一种专门应用于输入Email地址的文本框,与上面表单元素不同的是Email在提交表单的时候会自动验证Email文本框的值,如果不是有效的邮箱地址,则输入不允许提交表单。
网址
url类型的input元素提供用于输入url地址这一类特殊的文本的文本框,提交表单时,如果输入不是url地址格式的表单将不允许提交表单。
数字
number类型的input元素提供了用于输入数字的文本框,我们还可以对接收的数字进行限制,包括规定允许的最大值和最小值,合法的数字间隔或默认值等,如果输入的数字不在规定的范围之类,则会出现错误提示。
number类型使用表如下所示的属性来规定对数字的限定：
| 属性 | 值 | 描述 |
|---|---|---|
| value | number | 规定的默认值 |
| min | number | 规定允许的最小值 |
| max | number | 规定允许的最大值 |
| step | number | 规定合法的数字间隔(如果step=“2”,则合法的数是-2，0，2，4等） |
滑块
range类型的input元素提供用于输入包含一定范围内的数字值的文本框。在页面中显示为滑动条，我们还可以进行对所接收的数字进行限制，包括规定允许的最大值和最小值，合法的数字间隔或默认条。如果输出的数字不在限定范围之内，则会出现错误提示。
搜索框
search类型的input元素提供用于输入搜索关键字的文本框。虽然外观看起来search类型和input的普通text类型差不多，但实现起来却并不那么容易。search类型提供的搜索框不只是Google或百度的搜索框，而是任意一个搜索框。
表单的高级应用
设置表单的隐藏域
网站服务器端发送到客户端(用户计算机)的信息，除了用户直观看到的页面内容外，可能还包含一些“隐藏”信息。例如，用户登录后的用户名，用于区别不同用户的用户ID等。这些信息可能对于客户没用，但对于网站服务器有用，所以一般“隐藏”起来，不在页面中显示。将type属性设置为hidden隐藏类型即可创建一个隐藏域。
表单的只读与禁用
在某些情况下，需要对表单元素进行限制，即设置表单元素为只读属性(readonly)或禁用属性(disabled)。它们常见的应用场景如下。
只读场景：网站服务器方不希望用户修改的数据，这些数据在表单元素中显示。例如，注册或交易协议、商品价格等。
禁用场景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后，才允许单击"注册"按钮；播放器控件在播放状态时，不能再单击"播放"按钮等。
表单元素的标注
对表单元素进行标注，这样做的目的就是为了增强鼠标的可用性。这是因为使用表单元素标注时，在客户端呈现的效果不会有任何特殊的改进。如果当用户使用鼠标单击标注的文本内容时，浏览器会自动将焦点转移到与该标注相关的表格单元元素上。为表单元素进行标注时，需要使用<lable>标签，该标签的语法如下：
<lable for="表单元素的id">标注的文本</lable>在<label>标签中，使用了for属性来指定当鼠标单击标注文本时，焦点对应的表单元素。
表单的初级验证
plaeeholder
plaeeholder属性用于为input类型的文本框一种提示,这种提示可以描述文本框期待用户输入何种内容,在输入空时显示,当在文本框中写入内容消失,该标签适合于input标签,text,search,url,email和password等lx。
required
required属性用于规定文本框填写内容不能为空,否则不允许用户提交表单。
pattern
pattern属性用于input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配，匹配成功就能提交,否则不能提交。
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
