一文带你了解前端三剑客之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见

目录
相关文章
|
13天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
48 6
|
4月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
55 1
前端基础(十七)_HTML5新特性
|
3月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
30 2
|
3月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
39 1
|
4月前
|
前端开发 程序员
【前端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;`)。
78 19
|
4月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
253 1
|
4月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
67 13
|
4月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。