# HTML5 新标签、音视频、form 表单

# 新增布局标签

html4:1997年,html5:2008年

包括:

  • 绘图画布 SVG(矢量图形)canvas(画布)
  • 智能表单
  • 多媒体
  • 地理定位
  • 数据存储
  • 多线程
<header> 定义了头部区域,标题,logo,搜索表单等 </header>

<footer> 定义了底部区域,友情链接,版权信息等 </footer>

<nav> <!-- 导航条,侧边栏导航,页内导航等 -->
  <a href="#">首页</a>
  <a href="#">登录</a>
  <a href="#">注册</a>
</nav>

<article> 完整含义的内容区域 </article>

<!--  页面内容中的章节,分区,通常是由标题和段落组成 -->
<section>
  <h2>标题</h2>
  <p> 段落 </p>
</section>

<!--  给标题和子标题进行分组 -->
<hgroup>
  <h1>主标题</h1>
  <h3>副标题</h3>
</hgroup>

<!-- 图片的文本内容 -->
<figure>
  <img src="" alt="">
  <figcaption> 定义figure的标题 </figcaption>
</figure>

<!-- 会自带背景颜色 -->
<mark> 标记标签 </mark>

<!-- 日期或时间 -->
<time>11:39</time>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

提示

你知道不用 css 怎么让一个标签有颜色吗?

# html5标签的兼容

比较旧的浏览器可能无法识别 html5 的标签

解决方法:

  1. 利用 JavaScript 新增元素的方式
document.createElement('header');
document.createElement('nav');
document.createElement('footer');
document.createElement('article');
document.createElement('aside');
document.createElement('section');
1
2
3
4
5
6

提示

通过 js 创建的元素是行内元素

  1. 使用封装好的插件,引入js文件(html5shive.js)
<script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/r29/html5.min.js"></script>
1

# 视频标签

<video src="" control loop autoplay> </video>
1
  • src:规定要播放的视频的路径

  • controls:播放控件

  • loop:循环播放

  • muted:静音播放

  • autoplay:自动播放(要在静音播放属性下才有效)

  • poster:预览图片

  • width:宽度

  • height:高度

# 视频浏览器的支持:

Firefox、Safari、chrome、Opera、IE 9+

# 视频的格式

mp4:Firefox、Safari、chrome、IE 9+

webp:Firefox、Safari、Opera

ogg:avi、flv、wvvm

# 音频标签

<audio src=""></audio>
1
  • src:规定要播放的音频的路径
  • controls:播放控件
  • loop:循环
  • muted:静音播放

# 音频标签浏览器支持:

Firefox、Safari、chrome、Opera、IE 9+

# 音频标签的格式:

mp3:Firefox、Safari5+、chrome、Opera10+、IE 9+

wav:Firefox、Safari5+、chrome、Opera10+

ogg:Firefox、chrome、Opera10+

# 定义媒体资源

设置多个资源链接

<video controls loop poster="./img/a.jpg"> 
    <source src="./videoAudio/movie.mp4">
    <source src="./videoAudio/movie.webp">
    <source src="./videoAudio/movie.ogg">
    <source src="./videoAudio/movie.avi">
    <object> 您的浏览器不支持 video 元素播放视频 </object>
</video>
1
2
3
4
5
6
7

# 表单

# form

<form action="http" method="GET">
	表单元素,input,button标签等
</form>
1
2
3

action:提交表单时执行的动作

method:提交数据的方式

  • get:得到数据(不安全,传输数据较小)
  • post:传输数据(安全系数较高,传输数据相对较大)

# button 标签

<button type="submit">按钮</button>
1
  • type 属性
    • submit:提交数据(默认值)
    • reset:重置数据(刷新)
    • button:普通按钮(按钮形状)

# input 的类型

<input type="text" name="txt" placeholder="输入文本">
1
  • type 属性-按钮

    • button:普通按钮
    • submit:提交按钮
    • reset:重置按钮
    • file:文件上传按钮
    • image:图片按钮
  • type 其它属性

    • text:单行文本输入框
    • password: 密码输入框
    • radio:单选按钮
    • checkbox:复选框
    • url:网址
    • email:验证邮箱的格式
    • search:搜索
    • tel:验证电话号码的格式
    • number:数字输入框
    • range:滑动条
    • color:颜色块
    • date:日期 年月日 日历表
    • datetime:日期时间 UTC
    • datetime-local:本地日期时间 年月日 时分 日历表
    • month:月份 年月 日历表
    • time:时间 时分 时钟
    • week:周
    <input type="url" name="url" placeholder="验证网址">
    <input type="email" placeholder="正确的邮箱地址">
    <input type="search" placeholder="请输入搜索的内容">
    <input type="tel" placeholder="请输入正确的手机号" pattern="">
    <input type="number" placeholder="请输入数字" value="10" min="0" max="20" step="5">
    <input type="range" value="0" min="5" max="20" step="3">
    <input type="color">
    <input type="date">
    <input type="datetime">
    <input type="datetime-local">
    <input type="month">
    <input type="time">
    <input type="week">
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
  • 属性

    • value:输入框的初始值
    • checked:默认选中,选中单选按钮和复选框
    • placeholder:input 输入框的提示信息
    • autofocus:自动获取焦点
    • pattern:验证input的模式,pattern 的值是正则表达式
    • required :必填字段(不能为空)
    • multiple:可以选择多个文件
    • size:定义下拉列表中可见项的数目
    • maxlength:规定输入框的最大长度值
    • readonly:只读状态,只读不可以写入
    • disabled:禁用,不可读,不可写
    • selected:默认选中下拉列表中的项
    • autocomplete:自动填充 on 打开 off 关闭(下次打开网站浏览器会提示上次输入的内容)
    <input type="text" autocomplete="on" name="user" placeholder="自动填充">
    
    1
    • form:form 属性必须引用所属表单的 id。form 里面的表单提交时也会把绑定 id 不在 form 里面的一并提交
    <form action="" id="login">
      用户名:<input type="text" name="username">
      密码: <input type="password" name="pwd" >
      <input type="submit" >
    </form>
    <input type="email" placeholder="请输入邮箱" name="email"  form="login">
    
    1
    2
    3
    4
    5
    6
  • type=number 数字,range 滑动条时的属性:

    • max:允许最大的值
    • min:允许最小的值
    • step:步长
    • value:默认值

# datalist

list 指定 input 元素绑定某一个 datalist 数据

<input type="text" list="car">
<datalist id="car"> 
    <option value=""></option>
    <option value=""></option>
</datalist>
1
2
3
4
5

# select 标签

<select size='2'>
	<option selected >默认选中</option>
	<option>下拉框元素</option>
</select>
1
2
3
4

# textarea 标签

<textarea>多行文本</textarea>
1
最后更新时间: 2021年9月22日 23:14:58