h5新属性

2020-04-09  本文已影响0人  刘松阳

header标签 :页面的头部,或者一个部分或一个版块的头部

footer 标签 :页面的底部,或者一个部分或一个版块的底部

nav 标签:表示导航

article 标签 表示一篇独立完整的文章

section标签 表示的一个部分,可以是article里面的一个部分

figure 标签 完整中独立存在的一部分, figurecaption附加说明

aside标签 表示侧边栏,或者可以独立于页面单独存在的一个部分

mark 做记号,特殊表明的部分,默认背景颜色是黄色

time 标签 时间

hgroup标签 标题的组合

新增了表单相关元素和属性
<input type="url"> 输入的内容必须是网址,必须以http或者https开头,移动端会弹出带.com按键的键盘

<input type="email"> 输入的内容必须是邮箱,必须带@符号,移动端会弹出带@符号的键盘
<input type="number"> 输入数字,移动端出现数字键盘

value="1" max="10" min="0" step="2"

有效值:0 2 4 6 8 10

有效值跟谁有关

范围是max和 min之间的值

具体取值是多少和min有关

Value 默认值

Max 最大值

Min 最小值

Step 步长

<input type="tel"> 电话号码,移动端出现电话号码的键盘

<input type="range"> 滑块

<input type="color"> 用于选取颜色

<input type="search"> 搜索框

<input type="month"> 用户选择一整个月

<input type="week"> 用户选择一整个周

<input type="time"> 用户选取小时和分钟

<input type="datetime"> 用户手动输入日期

<input type="datetime-local"> 用户选取年月日小时分钟

Datalist 标签 用于写选项列表,和option标签配合使用

<input type="url" list="smart">

<datalist id="smart">

   <option value="https://www.baidu.com/">百度</option>

   <option value="http://www.4399.com/">4399小游戏</option>

</datalist>

<input type="url" list="smart">

<datalist id="smart">

  <option value="https://www.baidu.com/">

  <option value="http://www.4399.com/">

</datalist>

required 必填项

autofocus 自动获取焦点

autocomplete 自动填充

multiple 上传多个文件

pattern="" 填写符合正则表达式的内容

form 属性可以把form标签以外的内容提交

<form id="form1">

</form>

<input type="text" form="form1">

  1. 新增了音频和视频
    <audio src="videoAudio/YouAreMySunshine.mp3" controls autoplay muted loop></audio>

Src 路径

Controls 播放的控制台,播放控件

Autoplay 自动播放

Muted 静音播放

Loop 循环播放

preload="auto" 在没有autoplay的时候,页面加载,音频文件就开始加载,不加这个属性的话,是点击音乐播放,这个音频文件才开始加载

<audio controls autoplay muted loop>

 <source src="videoAudio/YouAreMySunshine.mp3">

 <source src="videoAudio/YouAreMySunshine.ogg">

 <source src="videoAudio/YouAreMySunshine.wav">

    您的浏览器不支持音频文件,请下载谷歌浏览器

</audio>

Video 视频

height="500"

width="1000"

poster="pic.png" 视频播放之前显示的画面

<video src="videoAudio/despacito.mp4" controls muted loop height="500" width="1000" poster="pic.png" preload="auto">

    <source src="videoAudio/despacito.mp4">

    <source src="videoAudio/despacito.ogg">

    <source src="videoAudio/despacito.webm">

    您的浏览器不支持视频文件,请下载谷歌浏览器

</video>
上一篇下一篇

猜你喜欢

热点阅读