一文带你了解前端三剑客之HTML(三)

简介: 一文带你了解前端三剑客之HTML

3、HTML5 Audio(音频)


HTML5 提供了播放音频文件的标准。


互联网上的音频

直到现在,仍然不存在一项旨在网页上播放音频的

标准。今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。


HTML5 规定了在网页上嵌入音频元素的标准,即使用  元素。


(1)浏览器支持


Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持  元素.


注意: Internet Explorer 8 及更早IE版本不支持  元素.


2)Audio使用

如需在 HTML5 中播放音频,你需要使用以下代码:


实例

<audio controls>   
    <source src="horse.ogg" type="audio/ogg">           <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 
</audio>
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件

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

在 与 之间你需要插入浏览器不支持的元素的提示文本 。

(3)音频格式及浏览器支持

目前, 元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

浏览器 MP3 Wav Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ YES YES YES
Safari 5+ YES YES NO
Opera 10+ YES YES YES

(4)音频格式的MIME类型

Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav


5)HTML5 Audio 标签

标签 描述
定义了声音内容
规定了多媒体资源, 可以是多个,在 与 标签中使用

4、HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的输入类型:

color

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

date

生日: <input type="date" name="bday">


datetime

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

datetime-local

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

email

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

month

生日 (月和年): <input type="month" name="bdaymonth">

number

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

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

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

range

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

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

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

search

Search Google: <input type="search" name="googlesearch">

tel

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

time

选择时间: <input type="time" name="usr_time">

url

添加您的主页: <input type="url" name="homepage">

week

选择周: <input type="week" name="week_year">

5、HTML5 新的表单属性

HTML5 的 和 标签添加了几个新属性.

新属性:

  • autocomplete
    自动提示以前输入过的内容
  • autofocus

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时,域自动地获得焦点。

First name:<input type="text" name="fname" autofocus>

height 与 width

height 和 width 属性规定用于 image 类型的 标签的图像高度和宽度。

注意: height 和 width 属性只适用于 image 类型的 标签。

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

min 与 max

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)

注意: Internet Explorer 9及更早 IE 版本,Firefox 不支持 input 标签的 max 和 min 属性。

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

pattern (regexp)

pattern 属性描述了一个正则表达式用于验证 元素的值。

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

placeholder

placeholder 属性提供一种提示(hint),描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上

<input type="text" name="fname" placeholder="First name">

required

注意: Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 required 属性。

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域(不能为空)。

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

新属性:


autocomplete


autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。


当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。


novalidate


novalidate 属性是一个 boolean(布尔) 属性.


novalidate 属性规定在提交表单时不应该验证 form 或 input 域。


观众老爷们,咱们下期CSS见

目录
相关文章
|
2月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
3月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
44 1
前端基础(十七)_HTML5新特性
|
2月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
20 2
|
2月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
29 1
|
3月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
128 1
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
66 19
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
52 13
|
3月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
3月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
117 0
|
4月前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
61 2