H5新特性

最新推荐文章于 2024-06-24 14:21:19 发布

安澜仙王

最新推荐文章于 2024-06-24 14:21:19 发布

阅读量184

点赞数

分类专栏： # CSS 文章标签： html html5

本文链接：https://blog.csdn.net/sinat_28317385/article/details/120169396

版权

CSS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

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在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式有限的。

浏览器	MP4	WebM	Ogg
IE	y	n	n
谷歌	y	y	y
火狐	y:从火狐21版本开始，Linux系统从火狐30开始	y	y
Safari	y	n	n
Opera	y	y	y

语法：

<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>

视频—常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预先加载视频)，none(不应加载视频)	规定是否预加载视频(如果有了autoplay 就忽略该属性)
src	url	视频url地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

音频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.新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空,必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”,关闭autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提交

<!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
评论
H5新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。声明：新特性增加了很多，但是我们专注于开发常用的新特性。1.1H5新增的语义化标签以前布局，我们基本用div来做。div对于搜索引擎来说，是没有语义的。<div class="header"></div><div class="nav"></div>
复制链接

扫一扫