html5新增属性----多媒体、input类型

àì夳堔傛蜴生んèń 2022-11-30 01:59 263阅读 0赞

# HTML5 #

HTML5是HTML最新的修订版本  
**HTML5 中的一些新特性：**

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

**HTML5 的改进**  
新元素、新属性、完全支持 CSS3  
Video 和 Audio、2D/3D 制图  
本地存储、本地 SQL 数据、Web 应用

## HTML5多媒体 ##

<audio>	定义音频内容
    <video>	定义视频（video 或者 movie）
    <source>定义多媒体资源 <video> 和 <audio>
    <embed>	定义嵌入的内容，比如插件。
    <track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

< video >视频  
< video > 元素提供了 播放、暂停和音量控件来控制视频。  
在html5中显示视频：

> < video > 元素支持多个 < source > 元素、  
> width 和 height 属性控制视频的尺寸、  
> < source > 元素可以链接不同的视频文件。

MP4 : 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
    WebM : 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
    Ogg : 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

< Audio >音频标签  
HTML5 提供了播放音频文件的标准。  
在html5中播放音频：

> control 属性供添加播放、暂停和音量控件。  
> < audio >元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

## HTML 新的input类型 ##

Input 类型: color  
color 类型用在input字段主要用于选取颜色

选择你喜欢的颜色：<input type="color" name="favcolor">

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

Input 类型: date  
date 类型允许你从一个日期选择器选择一个日期。

选择一个日期：<input type="date" name="day">

![在这里插入图片描述][20200822234903799.png_pic_center]  
Input 类型: datetime  
datetime 类型允许你选择一个日期（UTC 时间）。

生日 (日期和时间): <input type="datetime" name="bdaytime">

![在这里插入图片描述][20200822235016901.png_pic_center]  
Input 类型: email  
email 类型用于应该包含 e-mail 地址的输入域。

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

Input 类型: number  
number 类型用于应该包含数值的输入域。

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

![在这里插入图片描述][20200822235338368.png_pic_center]

使用下面的属性来规定对数字类型的限定：
    disabled	规定输入字段是禁用的
    max			规定允许的最大值
    maxlength	规定输入字段的最大字符长度
    min			规定允许的最小值
    pattern		规定用于验证输入字段的模式
    readonly	规定输入字段的值无法修改
    required	规定输入字段的值是必需的
    size		规定输入字段中的可见字符数
    step		规定输入字段的合法数字间隔
    value		规定输入字段的默认值

Input 类型: range  
range 类型用于应该包含一定范围内数字值的输入域。  
range 类型显示为滑动条。

![在这里插入图片描述][20200822235550106.png_pic_center]  
可使用下面的属性来规定对数字类型的限定：

max - 规定允许的最大值
    min - 规定允许的最小值
    step - 规定合法的数字间隔
    value - 规定默认值

Input 类型: tel  
定义输入电话号码字段:

电话号码: <input type="tel" name="usrtel">

Input 类型: url  
url 类型用于应该包含 URL 地址的输入域。

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

## HTML5应用 ##

*  本地数据存储
 *  访问本地文件
 *  本地 SQL 数据
 *  缓存引用
 *  Javascript 工作者
 *  XHTMLHttpRequest 2

## HTML5图形 ##

*  使用 < canvas > 元素。
 *  使用内联 SVG。
 *  使用 CSS3 2D 转换、CSS3 3D 转换。

## HTML5 使用 CSS3 ##

*  新选择器
 *  新属性
 *  动画
 *  2D/3D 转换
 *  圆角
 *  阴影效果
 *  可下载的字体

## HTML新的语义和结构元素 ##

**什么是语义元素?**  
语义= 意义  
语义元素 = 有意义的元素  
**无语义元素**实例: `<div>` 和 `<span>` 等无需考虑内容.  
**语义元素**实例: `<form>`,`<table>`, and `<img>`等清楚的定义了它的内容.

<table> 
 <thead> 
  <tr> 
   <th>标 签</th> 
   <th>描 述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt; article &gt;</td> 
   <td>定义页面独立的内容区域。</td> 
  </tr> 
  <tr> 
   <td>&lt; aside &gt;</td> 
   <td>定义页面的侧边栏内容。</td> 
  </tr> 
  <tr> 
   <td>&lt; bdi &gt;</td> 
   <td>允许您设置一段文本，使其脱离其父元素的文本方向设置。</td> 
  </tr> 
  <tr> 
   <td>&lt; command &gt;</td> 
   <td>定义命令按钮，比如单选按钮、复选框或按钮</td> 
  </tr> 
  <tr> 
   <td>&lt; details &gt;</td> 
   <td>用于描述文档或文档某个部分的细节</td> 
  </tr> 
  <tr> 
   <td>&lt; dialog &gt;</td> 
   <td>定义对话框，比如提示框</td> 
  </tr> 
  <tr> 
   <td>&lt; summary &gt;</td> 
   <td>标签包含 details 元素的标题</td> 
  </tr> 
  <tr> 
   <td>&lt; figure &gt;</td> 
   <td>规定独立的流内容（图像、图表、照片、代码等等）。</td> 
  </tr> 
  <tr> 
   <td>&lt; figcaption &gt;</td> 
   <td>定义 &lt; figure &gt; 元素的标题</td> 
  </tr> 
  <tr> 
   <td>&lt; footer &gt;</td> 
   <td>定义 section 或 document 的页脚。</td> 
  </tr> 
  <tr> 
   <td>&lt; header &gt;</td> 
   <td>定义了文档的头部区域</td> 
  </tr> 
  <tr> 
   <td>&lt; mark &gt;</td> 
   <td>定义带有记号的文本。</td> 
  </tr> 
  <tr> 
   <td>&lt; meter &gt;</td> 
   <td>定义度量衡。仅用于已知最大和最小值的度量。</td> 
  </tr> 
  <tr> 
   <td>&lt; nav &gt;</td> 
   <td>定义导航链接的部分。</td> 
  </tr> 
  <tr> 
   <td>&lt; progress &gt;</td> 
   <td>定义任何类型的任务的进度。</td> 
  </tr> 
  <tr> 
   <td>&lt; ruby &gt;</td> 
   <td>定义 ruby 注释（中文注音或字符）。</td> 
  </tr> 
  <tr> 
   <td>&lt; rt &gt;</td> 
   <td>定义字符（中文注音或字符）的解释或发音。</td> 
  </tr> 
  <tr> 
   <td>&lt; rp &gt;</td> 
   <td>在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。</td> 
  </tr> 
  <tr> 
   <td>&lt; section &gt;</td> 
   <td>定义文档中的节（section、区段）。</td> 
  </tr> 
  <tr> 
   <td>&lt; time &gt;</td> 
   <td>定义日期或时间。</td> 
  </tr> 
  <tr> 
   <td>&lt; wbr &gt;</td> 
   <td>规定在文本中的何处适合添加换行符。</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]

## 已移除元素 ##

以下的 HTML 4.01 元素在HTML5中已经被删除:

*  < acronym >
 *  < applet >
 *  < basefont >
 *  < big >
 *  < center >
 *  < dir >
 *  < font >
 *  < frame >
 *  < frameset >
 *  < noframes >
 *  < strike >

> 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/a929318ff7324d05afa94a73caf8cf1a.png
[20200822234903799.png_pic_center]: /images/20221124/c1fa89ab3cd4400a9f43ae0238a75b91.png
[20200822235016901.png_pic_center]: /images/20221124/fd2cfed15e6244e6a6b742bdace38308.png
[20200822235338368.png_pic_center]: /images/20221124/1cc2ceb2aac64bf59541bf6300c4b6ff.png
[20200822235550106.png_pic_center]: /images/20221124/943dbfc48f1446abbd8c252e709f19c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/271aad8cc6f14c2abc53364e7988ed97.png