H5新特性

最新推荐文章于 2024-05-10 18:00:00 发布

小雪Margain

最新推荐文章于 2024-05-10 18:00:00 发布

阅读量184

点赞数

分类专栏：学习文章标签： H5新特性

本文链接：https://blog.csdn.net/qq_42862581/article/details/98197389

版权

学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、常用新标签

1.header:定义页面头部。
2.footer：定义页面尾部。
3.article：定义文章。
4.nav:定义导航栏。
5.aside：定义其所处内容之外的内容，侧边。
6.datalist：标签定义选项列表，一般与input元素配合使用该元素。
7.fieldset：可以将表单内的相关元素分组，打包。与legend搭配使用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5新的标签</title>
</head>
<body>
  <header>页面头部定义</header>
  <nav>导航栏</nav>
  <article>文章</article>
  <aside>定义侧边栏</aside>
  <footer>页面尾部</footer>
  <input type="text" value="请输入您要查询的内容" list="list" > <!--input里面使用list，实现提示词效果-->
  <datalist id="list"> <!--datalist里面用ID来实现和input建立链接-->
    <option>杨紫</option>
    <option>杨幂</option>
    <option>杨颖</option>
    <option>刘涛</option>
    <option>刘浩然</option>
  </datalist>
  <br/> <br/> <br/> <br/>
  <fieldset>
      <legend>用户登录</legend>
      用户名：<input type="text">
      <br/> <br/>
      密  码：<input type="password">
  </fieldset>
</body>
</html>

预览
在这里插入图片描述

二、input标签的新属性

1、新增的type值

类型	使用	含义
email	`<input type="email"/>`	输入邮箱格式
tel	`<input type="tel"/>`	输入手机号码格式
url	`<input type="url"/>`	输入URL格式
number	`<input type="number"/>`	输入数字格式
search	`<input type="search"/>`	搜索框，当有输入时，最后面会有一个清除按钮
range	`<input type="range"/>`	自动拖动滑块
time	`<input type="time"/>`	小时分钟
date	`<input type="date"/>`	年月日
datetime	`<input type="datetime"/>`	时间
month	`<input type="month"/>`	月年
week	`<input type="week"/>`	星期年

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5中input的新属性</title>
</head>
<body>
  按钮：<input type="button"><br/>
  单选：<input type="checkbox"><br/>
  颜色：<input type="color"><br/>
  日期：<input type="date"><br/>
  时间：<input type="datetime-local"><br/>
  邮箱：<input type="email"><br/>
  文件：<input type="file"><br/>
  隐藏：<input type="hidden"><br/>
  图片：<input type="image"><br/>
  月份：<input type="month"><br/>
  音频：<input type="radio"><br/>
  range：<input type="range"><br/>
  reset ：<input type="reset"><br/>
  手机号：<input type="tel"><br/>
  url：<input type="url"><br/>
  周：<input type="week"><br/>
  time：<input type="time"><br/>
</body>
</html>

预览
在这里插入图片描述
2、新增的属性

属性	使用	描述
placeholder	`<input type = "text" placeholder="请输入姓名"／>`	用户输入之前的占位符，提示语句
autofocus	`<input type = "text" autofocus／>`	规定页面加载时input自动获取焦点
multiple	`<input type = "file" multiple／>`	多文件上传
autocomplete	`<input type = "text" autocomplete／>`	有两个值，1，on,代表记录已经输入过的值，提交之后再次输入时会有提示，2，off，不记录已经提交过的值，autocomplete使用有两个条件：1，要有提交按钮，2，这个表单必须要有名字。
required	`<input type = "text" required／>`	必填项内容不能为空
accesskey	`<input type = "text" accesskey=“s”／>`	按住alt+字母（s）键可以使input获取焦点

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      body{
        width: 50%;
        height: 400px;
        border: 2px dashed seagreen;
        padding: 16px;
      }
      fieldset{
        width: 300px;
        padding: 16px;
      }
    </style>
</head>
<body>
  <fieldset>
    <legend>用户信息</legend>
    <form name="user">
      姓名：<input type="text" placeholder="请输入姓名"><br/>
      年龄：<input type="text" autocomplete="on" name="old">
      头像：<input type="file" multiple>
      <input type="submit">
    </form>

  </fieldset>
</body>
</html>

预览：
在这里插入图片描述
三、新增的多媒体标签
1、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	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控制视频的按钮，如播放暂停
height		设置视频播放器的高度。
loop	loop	循环播放，可以是循环播放的次数，如果要无限循环，loop=“-1”
muted	muted	静音
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
src	URL	要播放的视频的地址
width		规定视频的宽度

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <video autoplay controls src="https://f.us.sinaimg.cn/001ispIXlx07uCXHdlVm0104120023mH0E010.mp4?label=mp4_hd&template=640x368.23.0&Expires=1564735934&ssig=rCDQJfgIPB&KID=unistore,video">
  </video>
</body>
</html>

预览
在这里插入图片描述
2、音频

为了兼容各个浏览器，一般会把三种格式的音频都加上，浏览器会自动获取到可以播放的音频资源，例如：

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

属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，会展示音频控件。
loop	loop	循环播放，可以是循环播放的次数，如果要无限循环，loop=“-1”
muted	muted	静音
src	URL	要播放的音频的地址

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <audio src="http://soundpreview.ohipic.com/preview/sound/00/29/52/515ppt-S295214-B7ACA3D2.mp3" autoplay controls></audio>
</body>
</html>

预览
在这里插入图片描述

小雪Margain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5新特性

一、常用新标签1.header:定义页面头部。2.footer：定义页面尾部。3.article：定义文章。4.nav:定义导航栏。5.aside：定义其所处内容之外的内容，侧边。6.datalist：标签定义选项列表，一般与input元素配合使用该元素。7.fieldset：可以将表单内的相关元素分组，打包。与legend搭配使用。示例：<!DOCTYPE html&gt...
复制链接

扫一扫

专栏目录