H5新特性


HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。

声明:
新特性增加了很多,但是我们专注于开发常用的新特性。

1.1H5新增的语义化标签

以前布局,我们基本用div来做。div对于搜索引擎来说,是没有语义的。

<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

新增的标签:

<header>头部标签</header>
<nav>导航标签</nav>
<article>内容标签</article>
<section>定义文档某个区域</section>
<aside>侧边栏标签</aside>
<footer>尾部标签</footer>

在这里插入图片描述
注意:

  • 这种语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在IE9中,需要把这些元素转换为块级元素
  • 其实,我们移动端更喜欢使用这些标签

新增的多媒体标签主要包含两个:
1.音频:
2.视频:

使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件。

2.H5新增的多媒体标签

视频video

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

浏览器MP4WebMOgg
IEynn
谷歌yyy
火狐y:从火狐21版本开始,Linux系统从火狐30开始yy
Safariynn
Operayyy

语法:

<video src="media/mi.mp4" controls="controls"></video>

菜鸟教程的语法:

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

视频—常见属性

属性描述
autoplayautoplay视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controlscontrols向用户显示播放控件
widthpixels(像素)设置播放器宽度
heightpixels(像素)设置播放器高度
looploop播放完是否继续播放该视频,循环播放
preloadauto(预先加载视频),none(不应加载视频)规定是否预加载视频(如果有了autoplay 就忽略该属性)
srcurl视频url地址
posterimgurl加载等待的画面图片
mutedmuted静音播放

音频audio

在这里插入图片描述
语法:

<audio src="文件地址" controls="controls"></audio>

菜鸟教程的写法:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

在这里插入图片描述
多媒体标签总结

  • 音频和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频标签加muted属性来静音播放视频,音频不可以(可以通过js解决)
  • 视频标签是重点,我们经常设置自动播放,不使用controls控件,循环和设置大小属性

3.H5新增的input类型

属性值说明
type=“email”限制用户输入必须为Email类型
type=“url”限制用户输入必须为URL类型
type=“date”限制用户输入必须为日期类型
type=“time”限制用户输入必须为时间类型
type=“month”限制用户输入必须为月类型
type=“week”限制用户输入必须为周类型
type=“number”限制用户输入必须为数字类型
type=“tel”限制用户输入必须为手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单

在这里插入图片描述
重点记住:number tel search 这三个

4.新增的表单属性

属性说明
requiredrequired表单拥有该属性表示其内容不能为空,必填
placeholder提示文本表单的提示信息,存在默认值将不显示
autofocusautofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
autocompleteoff/on当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。默认已经打开,如autocomplete=“on”,关闭autocomplete="off"需要放在表单内,同时加上name属性,同时成功提交
multiplemultiple可以多选文件提交
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增表单属性</title>
    <style>
        input::placeholder {
            color: pink;
        }
    </style>
</head>
<body>
    <form action="">
            <input type="search" name="sear" id="" required="required" placeholder="pink老师" autofocus="autofocus" autocomplete="off">
            <input type="file" name="" id="" multiple="multiple">
            <input type="submit" value="提交">
    </form>
  
</body>
</html>

可以通过下面代码改变颜色:

 input::placeholder {
            color: pink;
        }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安澜仙王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值