HTML5新标签-结构标签、表单元素、媒体标签
文章目录
- 新的结构标签
- 新的表单元素
- 新的媒体标签
- 1、 audio 音频标签（src controls autoplay loop muted）
- 2、video 视频标签（src controls autoplay loop muted）
- 3、source 资源 （src type）
新的结构标签
HTML5新添加的结构标签本质上都是div元素，由于许多开发者都以这些单词命名且相同，所以官方统一命名，便于他人理解，同时也可方便信息抓取。
新的表单元素
| 表单元素 | 作用 |
|---|---|
| date | 年月日 |
| time | 时分秒 |
| 邮箱，且正确 | |
| url | 网址，且正确 |
| number | 数字 |
| range | 数字范围 |
用法：
<form action="http://www.baidu.com"><input type="text" placeholder="请输入内容"><br><input type="date"><br><input type="time"><br><input type="email" name="user-email"><br><input type="url"><br><input type="number" value="0" min="-10" max="10"><br><input type="range" min="-10" max="10"><br><input type="submit"></form>
显示结果如图：
注意：
- 第4行代表email元素，如果输入格式不对的邮件地址，点击提交按钮时会提示错误，如：
- 第5行代表URL元素，如果输入格式不对的URL地址（包含解析协议，如http://），点击提交按钮时会提示错误
- 第6行代表number元素，可以设置最大最小值，鼠标移动到上面可以点击上下键按钮（图中未显示），不得超过指定范围
- range元素需要设置最大最小值和初始值，不会显示数字，后期可以配合JavaScript加span标签显示获取到的值
新的媒体标签
媒体标签主要有三个：
1、 audio 音频标签（src controls autoplay loop muted）
用法：
<audio src="C:\Users\huang\Music\周杰伦 - 晴天.mp3" controls></audio>
如图：
元素介绍：
- src ：表示媒体资源，需要注意不同的浏览器所能识别的媒体资源不同，需要不同的后缀名的文件，如音频文件格式有.mp3，.ogg，.wav，.wma，按需选择
- controls ：显示控件，也就是暂停、进度条、音量等内容
- autoplay：媒体自动播放 （注意：Chrome新版本因为一些原因屏蔽了autoplay功能，需要用js主动打开）
- loop：媒体循环播放
- muted：媒体初始化为静音模式，用户需要手动开启音量
2、video 视频标签（src controls autoplay loop muted）
用法：
<video src="vide01.mp4" controls autoplay></video>
元素介绍：同音频标签
3、source 资源 （src type）
用法：
<audio controls autoplay loop muted><source src="audio1.mp3" type="audio/mp3"><source src="audio1.wav" type="audio/wav"><source src="audio1.ogg" type="audio/ogg">
</audio><video src="vide01.mp4" controls autoplay><source src="video.mp4" type="audio/mp4"><source src="video.webm" type="audio/webm">
</video>
source标签用于给同一个音频/视频标签添加不同后缀名的资源，可以有多个，浏览器按顺序搜索可以识别的资源，这样就可以避免因浏览器不同而导致的兼容性问题
元素介绍：
- src ：表示媒体资源
- type：该条source标签对应的资源类型、格式
HTML5新标签-结构标签、表单元素、媒体标签相关推荐
- 【Educoder】HTML答案 （HTML入门——基础、HTML入门——基本标签、HTML——表单类的标签）
文章目录 HTML入门--基础 初识HTML:简单的Hello World网页制作 HTML结构:自我简介网页 HTML入门--基本标签 创建第一个 HTML 标签 创建 h2-h6标签 创建 p 标 ...
- HTML5新特性之智能表单： required=required指示输入字段的值是必需的
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 前端基础：通过表单元素实践《健康体检单》
前端基础:通过表单元素实践<健康体检单> HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互. 一.项目说明 该项目是进行表格布局表 ...
- HTML基本语法之表单标签：表单的组成 ，表单域，表单控件元素（表单元素） ，input表单元素， label标签， 表单控件（表单元素）， select表单元素， textarea表单元素
文章目录 表单标签 表单的组成 表单域 常用属性: 表单控件元素(表单元素) input表单元素 label标签 表单控件(表单元素) select表单元素 textarea表单元素 表单元素几个总结 ...
- 12.6学习笔记 HTML5表单元素/嵌入图片/视频（未完）
12.6学习笔记 一. HTML 表单元素(下) 二. HTML5嵌入图片与创建分区响应图 三. HTML5嵌入视频 一. HTML 表单元素(下) 主要内容: 用input元素获取有规定格式的字符串 ...
- form表单之input标签
表单标签<form> 表单用于向服务器传输数据. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select.fieldse ...
- Educoder/头歌JAVA——HTML：表单类的标签
目录 第1关:表单元素--文本框 相关知识 第2关:表单元素--密码框 相关知识 第3关:表单元素--单选框 相关知识 第4关:表单元素--多选框 相关知识 第5关:表单元素--checked属性 相 ...
- 表单之input标签
表单之input标签 文章目录 表单之input标签 视频 代码 视频 https://www.bilibili.com/video/BV1gf4y1m7No?from=search&seid ...
- 表单之label标签
表单之label标签 文章目录 表单之label标签 视频 代码 视频 https://www.bilibili.com/video/BV16s411N7sM?from=search&seid ...
- php怎么引用表单元素,表单元素：最全的各种html表单元素获取和使用方法总结...
表单是网页与用户的交互工具,由一个 元素作为容器构成,封装其他任何数量的表单控件,还有其他任何元素里可用的标签,表单能够包含.....等表单控件元素.表单元素有哪些呢?它包含了如下的这些元素,输入文本 ...
最新文章
- UIPickerView隐藏透明条
- 每日一皮：我觉得明明很好用啊，谁知道客户是这样用的呢？
- oracle0级备份和全备份实录_蓝光硬盘备份管理系统在档案系统的应用
- AIX-maxuproc参数案例
- NASA WorldWind1.4.0源代码调试总结
- Axure学习之线框图-文本
- 枚举枚举和修改“最终静态”字段的方法
- python if else格式_Python if else条件语句详解
- LeetCode:892. 三维形体的表面积
- 【CSP201312-2】ISBN号码，字符串，简单模拟
- PLC编程从入门到精通视频教程【副业学习会】
- GIS应用技巧之去除遥感影像黑边
- 王垠：怎样尊重一个程序员
- 强化学习之贝尔曼方程
- css3属性基本骨架
- TC214B直流电机控制芯片
- Python课程第二章实例训练
- wireshark抓图
- 从阿里巴巴发行价看A股新股投资机会
- Python编程：从入门到实践（美）.pdf -学习篇（基础）