第十课html5 新增标签及属性 html5学习5

2019-02-25 16:09:36来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一、常用新增标签

1、header:定义页面的页眉头部

2、nav:定义导航栏

3、footer:定义页面底部,页脚

4、article:定义文章

5、section:定义区域

6、aside:定义侧边

7、datalist: 定义选项列表 与input搭配使用

<input type="text" value="请输入明星" list="star"/> input里面用list

<datalist id="star"> datalist 里面用id 来实现和input连接

  <option>刘德华</option>

  <option>刘青云</option>

  <option>刘亦菲</option>

  <option>张学友</option>

</datalist>

8、fieldset: 将表单内的相关元素分组打包 与legend搭配使用

<fieldset>

  <legend>用户登陆</legend>

  用户名:<input type="text"/>

</fieldset>

 

二、新增的input type属性值

1、email:邮箱 <input type="email" />

2、tel:手机

3、number:数字

4、url:网址格式

5、search:搜索框

6、range: 区域 滑块 滑动条

7、time:小时分钟

8、date:年月日

9、dtaetime:时间

10、month:月年

11、week:星期

12、color:颜色

 

 

三、input 新增属性

1、placeholder:占位符 提示文本

2、autofocus:自动获得焦点

3、multiple:多文件上传 <input type="file" multiple />

4、autocomplete:自动记录 on开启 off关闭 注:首先需要提交按钮 还需要设置input的name值

5、required:内容不能为空 必填项

6、accesskey:规定激活(使元素获得焦点)元素快捷键 采用alt+字母的形式

如:accesskey="s"

 

四、多媒体标签

embed:标签定义嵌入内容

audio:音频

video:视频

 

1、<audio src=""></audio>

 

属性: autoplay 自动播放

controls 显示控件

loop 循环播放 loop="2" 魂环播放两遍 loop或loop="-1" 无线循环播放

 

 

为了浏览器兼容,需要准备3种格式的音频文件

<audio controls autoplay>

  <source src="music.mp3" />

  <source src="music.ogg" />

  <source src="music.wav" />

  您的浏览器不支持音频播放

</audio>

2、video

支持三种视频格式:ogg,mp4,WebM

 

<video src=""></video>

 

属性: autolay 自动播放

controls 显示控件

loop 循环播放 loop="2" 魂环播放两遍 loop或loop="-1" 无线循环播放

width

height

 

为了浏览器兼容,需要准备3种格式的视频文件

<video controls autoplay>

  <source src="movie.mp4" />

  <source src="movie.ogg" />

  <source src="music.webm" />

  您的浏览器不支持音频播放

</video>

 


原文链接:https://www.cnblogs.com/Liuxingtao/p/10416412.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:fab 菜单实现之前传-钟表表盘

下一篇:原生 table css实现操作按钮固定右侧及底部滚动 IE不会卡死