HTML5新增特性

323 阅读3分钟

一、为什么要新增特性

原因:之前学到的标签有不足,不足以满足后期的需要,因此新增部分特性对以前基础的部分加以改进。而且新增的特性会更加直接、便捷。

二、此处新增了哪些特性

新的标签、新的表单及新的表单元素等等

注意:此处新增的特性都有兼容性问题,IE9以上版本的浏览器才支持

三、新增标签

1、语义化标签

  • header 头部标签:定义一个页面或一个区域的头部
  • nav 导航标签:定义导航链接
  • artical 内容标签
  • section 定义文档中的某个文档:可看作一个大的div盒子,但它的范围比div更大,是一个区域
  • aside 侧边栏标签
  • footer 尾部标签:定义一个页面或一个区域的底部

注意:

a、这种语义化标签主要是针对 搜索引擎 的

b.这些标签可多次使用

c、使用这些标签时,元素必须都转换为块级元素

2、视频标签video

表达效果:在HTML5不使用插件的情况下,支持视频格式文件的播放

video元素支持三种视频格式,分别是:MP4、WebM、Ogg

相较于其他两种格式,MP4格式的视频受限制最少,通用性最好,比较推荐使用MP4格式

<body>
<video src="media/mi.mp4" autoplay="autoplay" controls="controls" loop="loop” muted="muted" poster="media/mi9.jpg"></video>
</body>     

其样式为

<style>
    video {
        width: 100%;
    }
    </style>
    

它们语法结构相同,例如:<video src="文件地址” autoplay="autoplay">

width 是设置视频的宽度

autoplay意为自动播放,即点击开页面时便自动播放视频

muted意为静音播放

loop意为循环播放

poster意为等待加载画面,即信号不好的时候展现给我们的画面

controls意为控制标签,即控制播放、暂停的图标

3、音频标签audio

audio元素支持三种视频格式,分别是:MP3、Wav、Ogg

同样的MP3的通用性最强,比较推荐

因为音频标签和视频标签统称为多媒体标签,因此它们二者肯定有着非同一般的关系

音频标签和视频标签的使用语法结构相似,音频标签的语法结构为:

<audio src="文件地址” autoplay="autoplay">

音频标签有以下几个属性:autoplay、contrals、loop、muted

一般情况下muted属性在音频标签里的使用次数为o

3、input表单

优点:相较于之前的input表单元素,新增的更加便捷

验证的时候必须添加表单域

  • 邮箱
  • 网址
  • 日期
  • 时间
  • 数字
  • 搜索
  • 手机号码
  • 颜色
form表单域起到了验证的作用

当我们点击提交按钮的时候就可以直接进行验证、提交了,非常的方便。而且如果有错误,会直接指出错误所在

时间包括月和周,但time是通称,涵盖所有

 <li>月份<input type="month"></li>
   <li><input type="week"></li>

“search” 意为搜索框 “color” 意为颜色选择表单

4、表单元素

语法和input表单大致相同

<form action="">
    <input type="search" name="sear" id="" required="required" placeholder="编程学习" autofocus="autofocus"
        autocomplete="off">
    <input type="file" multiple="multiple">
    <input type="submit" value="提交">
</form>

其样式为

  <style>
    input::placeholder {
        color: rgb(102, 190, 190);
    }
</style>

required 属性是必须要的,必填项

placeholder 属性是框内默认值(提示文本)

autofocuse 标签可将鼠标光标自动定到框内

multiple 标签是文件加选

autocomplete 标签是会记录下来搜索历史,默认的是打开的,由于安全性不高,因此我们需要手动关闭 最重要一点:它需要定义名称!!!否则无效

注意!!!

只要操作需要验证就一定需要 form 标签,要记得把代码包含在 form 标签里面

好了,说了那么多了,“实践出真知”赶紧去试验一下,感受敲代码的魅力和快乐吧

如有不足之处,请在评论区指正!