Python全栈开发学习--HTML 5--标签--Day8

HTML5 概述

HTML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。

一、HTML 5 新增元素

（1）用于绘画的 canvas 元素
（2）用于媒介回放的 video 和 audio 元素
（3）对本地离线存储的更好的支持
（4）新的特殊内容元素，比如 article、footer、header、nav、section
（5）新的表单控件，比如 calendar、date、time、email、url、search

二、HTML5 新增元素速查表

元素	描述
canvas	用于在网页上绘制图形
svg	用于在网页中插入矢量图
MathML	数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
video	用于在网页中播放视频
audio	用于在网页中播放音频
input	表单输入框类型
form	表单元素
语意元素	没有特殊的意义，传统的元素通过不同的语义明确其在页面中位置

三、HTML5 新增元素具体使用方法

3.1 canvas

<canvas> 标签定义图形容器，比如图表和其他图像，您必须使用脚本（通常是JavaScript)）来绘制图形。可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像等

3.1.1 用法

需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

<canvas id="myCanvas" width="200" height="100"></canvas>

3.2 svg

3.2.1 矢量图的概念

矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，也就是说当我们放大一张图片的时候不会出现类似于马赛克的小方块，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。

3.2.2 用法

HTML5 中，能够将 SVG 元素直接嵌入 HTML 页面中SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
 具体详见svg的使用方法 
</svg>

3.3 MathML

3.3.1 用法

<math xmlns="http://www.w3.org/1998/Math/MathML">
	具体的数学公式
</math>

3.4 video

大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。

3.4.1 用法

带有两个源文件的视频播放器。浏览器需要选择它所支持的源文件（如果都支持则任选一个）：

<video width="320" height="240" controls>
  <source src="video1.mp4" type="video/mp4">
  <source src="video2.ogg" type="video/ogg">
</video>

3.4.2 视频文件格式

3.5 audio

3.5.1 用法

<source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

control 属性供添加播放、暂停和音量控件。

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

3.5.2 音频格式

3.6 input

3.6.1 type="color"

<input type="color" name="favcolor">

用在input字段主要用于选取颜色

3.6.2 type="date"

<input type="date" name="bday">

从一个日期选择器选择一个日期

类似字段还有：type="datetime"、type="datetime-local"、type="month"、type=“time”、type=“week”

3.6.3 type="email"

在提交表单时，会自动验证 email 域的值是否合法有效:

E-mail: <input type="email" name="email">

3.6.4 type="number"

<input type="number" name="quantity" min="1" max="5">

使用下面的属性来规定对数字类型的限定：

3.6.5 type=“range”

定义一个不需要非常精确的数值（类似于滑块控制）:

<input type="range" name="points" min="1" max="10">

3.5.6 type="url"

在提交表单时，会自动验证 url 域的值。

 <input type="url" name="homepage">

3.7 form元素

3.7.1 <datalist>

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

请输入浏览器：
<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

3.7.2 <keygen>

当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

这个暂时不知道用法，等到用到的时候在具体研究。

3.7.3 <output>

将计算结果显示在 <output> 元素，用于脚本或者其他计算的输出

<input type="number" id="a" value="50">
+
<input type="number" id="b" value="50">
=
<output name="x" for="a b"></output>

3.7.4 表单新属性

HTML5 的 <form> 和 <input>标签添加了几个新属性.
（1）autocomplete：表单提交后，刷新页面表单会自动填充之前填入的数据

	（1.1）用法：
	autocomplete=“on”
	autocomplete=“off”

（2）novalidate：添加该属性后，表单域无需验证，例如，email等需要验证的表单元素

<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

<input>新属性：

（1）autofocus：提交后自动聚焦（类似于提交后表单保持颜色填充状态等）
（2）form：引用表单外的其他表单元素

<form action="demo-form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>
 
Last name: <input type="text" name="lname" form="form1">

（3）formaction：覆盖form元素中的action属性

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

（4）formenctype：表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)。覆盖 form 元素的 enctype 属性。
注意： 该属性与 type=“submit” 和 type=“image” 配合使用。

<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 提交">
</form>

（5）formmethod：属性定义了表单提交的方式。覆盖了 form元素的 method 属性。

/*第一个input使用get方法*/
/*第二个input使用post方法*/
<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

（6）formnovalidate：提交时无需验证
（7）placeholder：placeholder 属性提供一种提示（hint），描述输入域所期待的值。

 <input type="text" name="fname" placeholder="请输入姓名">

（8）required： 属性规定必须在提交之前填写输入域（不能为空）

不能为空的input字段:

Username: <input type="text" name="usrname" required>

3.8 语义元素

<article> 定义文章

<aside> 定义文章的侧边栏

<figure> 一组媒体对象以及文字

<figcaption> 定义 figure 的标题

<footer>定义页脚、一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

<header>定义页眉

<hgroup>定义对网页标题的组合

<nav>定义导航

<section> 定义文档中的区段、比如章节、页眉、页脚或文档中的其他部分。

<time>定义日期和时间

<dialog>定义一个对话框