audio标签的controls属性_HTML5 新增标签和属性

2024-06-11 10:30:26

哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

第一阶段 HTML5

09HTML5 新增标签和属性

1 html5文档类型和字符集

Html的发展历程：

文档类型设定

Document

HTML: sublime输入html:4s

XHTML: sublime输入html:xt

HTML5：sublime输入html：5或者！显示

2 查看手册及其新增标签

常用新标签(需掌握)

W3c手册中文官网：w3school

header：定义文档的页眉头部

nav：定义导航链接的部分

footer：定义文档或节的页脚底部

article：定义文章。

section：定义文档中的节( section区段)

aside：定义其所处内容之外的内容侧边

datalist：定义选项列表。与 input元素配合使用该元素

Fieldset：可将表单内的相关元素分组，打包

3 datalist标签

有提示的下拉菜单

4 fieldset元素

fieldset元素可将表单内的相关元素分组、打包，和legend搭配使用

5 HTML5新增 iInput表单(一)

6 HTML5新增 input表单(二)

7 新增占位符焦点多选属性

8 autocomplete属性

输入内容自动记录，方便下次快速输入

autocomplete必须满足两个条件才会起作用，一是必须有提交按钮，二是必须给给他名字，名字是什么无所谓，例如上面“123”

9 内容不能为空和获得焦点属性

required是提示输入内容不能为空

accesskey是一个快捷键属性，如上字母“s”,意思是在页面中按“ctrl+s”可以将光标移至此文本框

10 表单综合案例学生档案

显示效果如下(马赛克不算)：

11 embed引入网上视频

多媒体标签 embed：定义嵌入的内容，embed可以用来插入各种多媒体，格式可以是Mid、Wav、AFF、AU、MP3等等。Url为音频或视频文件及其路径，可以是相对路径或绝对路径

因为兼容性问题，我们这里只讲解插入网络视频，后面H5会讲解audio和video视频多媒体。

12 播放音频 audio

autoplay是自动播放，controls是显示播放器，Loop是循环次数

每个浏览器的显示样式有所不同，每个浏览器支持的音频格式有所不同

Source可以提供多个音频格式，以便兼容各种浏览器。

13 播放视频 video

跟音频播放用法一样

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

第一阶段HTML5的所有章节都已结束，下篇文章将分享《第二阶段 CSS3》小伙伴们不要错过哟！

audio标签的controls属性_HTML5 新增标签和属性相关推荐

a标签获取input值_HTML5常用标签
一.HTML文档标签 <!DOCTYPE>: 定义文档类型. <html>: 定义HTML文档. <head>: 定义文档的头部.(头部内包含) (1). `< ...
HTML5移动开发的基础与技巧（一）HTML5新增标签及应用场景
HTML5移动开发 HTML5的发展 HTML5 是 W3C 与 WHATWG 合作的结果.WHATWG为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 JavaScr ...
html5 支持php标签吗,HTML5新增标签使用方法
HTML5提供了一些新的元素和属性,例如nav(网站导航块)和footer.这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如au ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
h5比html新增加的标签,HTML5（H5）新增属性和标签
一 H5的特点 H5就是在之前HTML的版本上新增了一些标签,所以用起来没有太多变化 01 H5的网页骨架非常简洁 02 H5的语法极其松散,很多标签可以省略,也可以只写开始不写结束 03 H5中新增 ...
十二、HTML5新增标签特性详解（audio、video、input）
HTML5 第一天一.什么是 HTML5 HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新 ...
前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签标签名描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
h5新增标签属性以及api
简介: H5是最新的HTML标准 H5是专门为承载丰富的web内容而设计的,并且无需额外的插件 H5拥有新的语义.图形.及多媒体元素 H5提供新的元素和新的api,简化了web应用程序的搭建 H5是跨 ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...

最新文章

热门文章