乐趣区

关于前端:HTML5-中常用的新特性

jiezi

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 标签常见的属性有：

属性 值 阐明
autoplay autoplay 视频就绪自动播放（Google 浏览器须要增加 muted 属性能力自动播放）
controls controls 显示播放控件
width 像素值 设置播放器宽度
height 像素值 设置播放器高度
loop loop 循环播放视频
preload auto / none 是否预加载视频。auto – 事后加载视频|none – 不事后加载视频
src url 视频的地址
poster image url 加载时期待画面的图片地址
muted muted 静音播放

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 />
退出移动版