HTML5学习笔记

1、什么HTML（Hypertext Markup Language）？

①HTML即超文本标记语言，“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。

②HTML5是HTML规范的最新版本。

③一系列用来制作现代富web内容的相关技术的总称。

④最重要的三项技术：HTMl5核心规范、CSS（层叠样式表）、JavaScript。

HTML5新特性：①引入原生多媒体支持  ②引入可编程内容  ③引入语义Web

2、HTML5列表元素

①<ol>有序列表：属性——type（修改各列表项旁的编号类型），reversed（降序排列）

<ol>
	<li>处理图像</li>
	    <ol type="a">
	    <li>在页面上插入图片</li>
	    <li>从图片和文件打印样式中提取文本</li>
	    <li>在笔记本页上插入屏幕剪辑</li>
	    <li>在页面上组合图片</li>
	</ol>
</ol>

②<ul>无序列表

<ul>
	<li>a</li>
	<li>a</li>
	<li>a</li>
	<li>a</li>
</ul>

③<li>表示列表中的项

3、什么是表单？

①表单：表单是HTML中获取用户输入的手段，对于web应用系统极其重要，但是HTML定义的功能落后于表单的使用方式已经有很多年了。

②关键表单元素

元素	作用介绍
form	用于为用户输入创建HTML表单
input	用于搜集用户信息

Form元素属性

属性	作用介绍
Method（参考）	用于发送form-data的http方法
Action（参考）	当提交表单时向何处发送表单数据

Input元素属性

属性	作用介绍
Type	input元素的类型
Value	input元素的值
input属性多达29种

Text型input元素（单行文本框）   格式： <input>or<input type="text">

属性	作用介绍	格式
Value	文本框里的值	<input type="text" value="">
Placeholder	文本框内的提示	<input type="text" placeholder="">
maxlength	限制文本框最大字符	<input type="text" maxlength="8">
size	增加文本框可见的字符数目	<input type="text" size="40">
readonly	文本框只读	<input type="text" readonly">

Password型input元素（输入密码的单行文本框）

---格式：<input type="password">

---属性同text型input属性（单行文本框）

---虽然看起来密码不为人知，但实际上是以明文传输到服务器的！

Textarea元素（多行文本框）

属性	作用介绍
同Text型input属性（单行文本框）
Rows	增加文本框的宽度
Cols	增加文本框的长度

      提示：在不同的浏览器多行文本框展示的方式是不一样的，要综合考虑！

③按钮元素（button）

---格式：

---1、<input type="button" value="按钮" >

---2、<button>按钮</button>

---3、<input type="submit" value="提交"/>

---分析：

---1、原理来讲：button元素和type="button"实际应用还是有区别的，button要比input按钮的功能多，button元素可以当做任何按钮来使用，适用范围更广泛一些。

---2、input button 和input submit的区别：submit用于提交表单，适用范围比input button小一些。

---3、input button通常用于和JavaScript一起使用并作为绑定事件处理（细节参看JS笔记）

---4、input submit用于提交表单时，必须声明form里面的method属性，最好也添加action属性。（涉及php内容只做参考）

----结论：

适用范围和功能：button>input button>input submit

④其他input type类型讲解

①number型input元素

代码	浏览器预览
<input type="number">	见html-2.html

Number型input元素属性

属性	作用介绍
Min	设定可接受的最小值
Max	设定可接受的最大值
Step	上下调节数值的步长
Value	元素的初始值

②range型input元素（属性同input型number元素）

代码	浏览器预览
<input type="range" />	见html-2.html

③checkbox型input元素

说明：checkbox型input元素传送到服务器的文本类型为布尔型。

布尔型（boolean）：布尔型变量是有两种逻辑状态的变量，它包含两个值，真和假。用程序语言表达就是true/false,on/off,1/0。（了解即可）

④radio型input元素

拓展：用radio型input元素生成一组固定选项

说明：设定input元素的name属性并且name属性值相同才可以正常使用。

代码解析：

---checkbox属性无属性值，指网页进入时默认选中的项

---当选择了某一选项后其他被选中选项会变成未选中状态，而该选项从未选中状态变为选中状态

⑤select元素（包含在<form>标签里面）

⑥datalist元素（包含在<form>标签里面）

详解：仅datalist元素在数据中并没有任何显示，必须搭配单行文本框使用。并且datalist要设置其id属性，id属性就是这个datalist唯一的“身份证”，在单行文本框中引用datalist需要使用list属性，并且属性值就是datalist的id值才能完成datalist的显示。

⑦关于select和datalist：

共同点：datalist和select都可以提供内容值，并且提供内容项的元素值都是<option>

不同点：select无法获取用户输入的文本，只能从项中选取，而datalist不仅可以从项中选取出自己想要的，还可以自己手动写进去一些项中没有的，这是它们两个元素的最大区别！

4、更多功能的表单元素

①用input元素获取有规定格式的字符串

TYPE属性值	作用介绍	格式
Email	验证电子邮件地址	<input type="email" />
Tel	验证电话号码	<input type="tel" />
Url	验证URL完整度	<input type="url" />

解释：

---这三个type值展示出来的都是单行文本框的格式

---这三个type值只有提交表单（submit）时候才会检查输入的数据

---浏览器基本都支持email和url，但是对tel的支持很差

②input元素获取时间

③input元素获取颜色

④用input元素获取搜索用词

⑤用input元素生成隐藏的数据项

格式：<input type="hidden" value="123" />

解释：hidden属性值在浏览器中没有任何效果，不会显示该元素，但是用户提交表单时会发送出去

⑥用input元素生成图像按钮

解释：当点击image型的input元素时，可以注意查看上方的url连接。

⑦用input元素上传文件

代码	浏览器预览
<input type="file" />	见html-3.html

当type="file"时元素的特有属性（这两个属性没有属性值）

属性	作用介绍
Multiple	一次允许上传多个文件
Required	必须上传一个文件

注明：当使用input元素上传文件提交表单时，要设置如下内容

<form enctype="multipart/form-data"></form>

5、创建图片（img）

①在浏览器中插入图片

Img元素属性

属性	作用介绍
Src	图片所处位置
Width	设置图片宽度
Height	设置图片长度
Alt	定义img元素的备用内容

②在超链接里嵌入图像

常用方法：用a标签结合创建一个基于图像的超链接

格式：<a href=" " ><img src=" "></a>

③创建客户端分区响应图（难点介绍）

原理：通过点击某张图像上的不同区域上浏览器到不同的URL上

元素	作用介绍
<map>	客户端分区响应图的关键元素
<area>	可以有多个，每一各自代表图像上可被点击的一块区域

Area元素属性：分为两类

第一类：点击后导航到指定URL

第二类：shape属性和coords属性，共同起作用

标明用户可以点击的各个图像区域

Shape值	Coords属性的值解析
Rect	这个值代表一个矩形区域，用四个逗号分割的整数组成 四个整数分别代表： 图像左边缘 图像上边缘 图像右边缘 图像下边缘
Circle	这个值代表一个圆形区域，用三个逗号分割的整数组成 三个整数分别代表： 图像左边缘到圆心的距离 图像右边缘到圆心的距离 圆的半径
Poly	这个值代表一个多边形，至少包含六个逗号分割的整数组成，每一对数字各代表多边形的一个顶点
Default	代表默认区域，也就是说覆盖整张图片。不需要coords值

如何创建分区相应图（详解代码行html-4.html）：

代码行	解析
<img src="img/1.jpg" usemap="#map1" />	创建分区响应图首先必须要有img元素，并img元素中必须包含src属性和usemap属性
<map name="map1">	创建分区响应关系的关键元素，一定要设置name属性，name、属性就是usemap的属性值（在前面加#）
<area href="html-1.html" shape="rect" coords="22,14,50,50" target="_blank" />	在map里面可以有多个area元素，并且每个元素必须指定其shape值，除shape值为default时还要添加coords值
<area href="html-1.html" shape="rect" coords="22,14,50,50" target="_blank" />	第二块点击区域 一般来说使用分区相应图都有多个area元素
</map>	Map元素结束

提示：

---在制作分区响应图时，不需要使用<a>标签元素创建超链接

---图像定位方式可以使用js代码，在后面js教程中进行讲解，也可以使用我们之前学过的image型input元素来定位。

6、HTML-5多媒体——视频

HTML5支持直接在浏览器中播放音频和视频文件，不需要使用adobe flash插件。

插件是令浏览器崩溃的主要原因之一，特别是flash，存在着很多问题。、

①使用video元素

格式：<video></video>

②Video元素属性

属性	作用介绍
Src	视频地址（来源）
Width	设置视频宽度
Height	设置视频长度
Autoplay	网页完成后自动播放视频
Preload	预先加载视频 解释：告诉浏览器当加载完video元素之后，是否下载视频。分别有三个属性值： None——不会载入 Metadata——只载入第一帧 Auto——请求下载整个视频，浏览器可以忽略，默认行为。
Controls	除非设置该属性，否则不显示播放控件
Loop	视频循环播放
Poster	视频载入时显示图片
Muted	视频静音

③浏览器支持的视频格式

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	NO	3.5+	10.5+	5.0+	NO
MPEG 4	9.0+	NO	NO	5.0+	3.0+
WebM	NO	4.0+	10.6+	6.0+	NO

Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件

MPEG 4：带有H.264视频编码和AAC音频编码的MPEG 4文件

WebM：带有VPB视频编码和Vorbis音频编码的WebM文件

总结：

---没有任何一个格式可以支持所有浏览器

---最简单的方法，需要Mp4和Ogv二种影音格式

---现在更新即使可以支持了，但以前的旧版本不支持，所以还需要添加

所以我们分类讨论，不同浏览器要用不同格式。

④设置视频格式

---将源文件用视频转码工具转换格式

---在<video></video>中间插入元素<source>

---Source元素——设置视频格式

包含属性：src和type

7、HTML5嵌入音频

①使用audio元素

格式：<audio></audio>

②Audio属性（audio属性与video属性相似）

属性	作用介绍
Autoplay	自动播放音频
Loop	循环播放
Controls	向用户展示控件，如播放按钮
Preload	预先载入音频文件
Src	播放音频的URL

③Audio支持的浏览器音频格式

在<audio>元素里设置<source>元素支持所有浏览器

<audio>
	<source src="song.ogg" type="audio/ogg"></source>
	<source src="song.mp3" type="video/mpeg"></source>
</audio>