likes
comments
collection
share

HTML5 中常用的新特性

作者站长头像
站长
· 阅读数 24

HTML5 针对以前的不足,增加了一些新的标签、新的表单和新的表单属性等。

1、新增的语义化标签

以前布局,基本使用 div 来做,但 div 对于浏览器来说,是没有语义的。HTML5 中新增了一批语义化标签。

<header>头部标签</header>

<nav>头部标签</nav>

<article>内容标签</article>

<section>定义文档某个区域</section>

<aside>侧边栏标签</aside>

<footer>尾部标签</footer>

2、新增的多媒体标签

2.1 视频标签 <video>

HTML5 在不使用插件的情况下,也可以原生的支持视频格式文件的播放。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签
</video>

在上面的代码块中,包含了两个类型不同的 source,还有一行文字。如果浏览器支持 mp4 类型的文件,就可以直接播放 movie.mp4 这个视频;如果不支持,则尝试播放 ogg 类型的视频;如果这两种类型的文件都不支持,则会显示文字 “您的浏览器不支持 video 标签”。

video 标签常见的属性有:

属性说明
autoplayautoplay视频就绪自动播放(Google 浏览器需要添加 muted 属性才能自动播放)
controlscontrols显示播放控件
width像素值设置播放器宽度
height像素值设置播放器高度
looploop循环播放视频
preloadauto / none是否预加载视频。 auto - 预先加载视频|none - 不预先加载视频
srcurl视频的地址
posterimage url加载时等待画面的图片地址
mutedmuted静音播放

2.2 音频标签 <audio>

音频标签和视频标签的使用方式及属性相差无几。

<audio controls="controls">
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  您的浏览器不支持 audio 标签
</audio>

3、新增的 input 标签

属性值说明
type="email"限制用户输入必须为 email 格式
type="url"限制用户输入必须为 url 格式
type="date"限制用户输入必须为日期
type="time"限制用户输入必须为时间
type="month"限制用户输入必须为月类型
type="week"限制用户输入必须为周类型
type="number"限制用户输入必须为数字类型
type="tel"限制用户输入必须为手机号码
type="search"搜索框
type="color"颜色选择器

4、新增的表单属性

  1. required: 该属性必填,不能为空
<input type="email" required />
  1. placeholder:表单的提示信息
<input type="email" placeholder="请输入邮箱" />
  1. autofocus: 自动聚焦
<input type="email" placeholder="请输入邮箱" autofocus/>
  1. autocomplete:当用户开始键入时,浏览器基于之前输入过的值,是否显示出该字段中填写的选项。默认 autocomplete="on",可以设置为关闭 autocomplete="off"。如果放在表单内,需要加上 name 属性并且成功提交。
<input type="email" placeholder="请输入邮箱" name="email" autocomplete="on" />
  1. multiple:可以多选文件提交
<input type="file" multiple />
转载自:https://segmentfault.com/a/1190000042063856
评论
请登录