继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

米脂
关注TA
已关注
手记 492
粉丝 88
获赞 591

一、常用新增标签

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>

作者:king-blue

原文链接:https://www.cnblogs.com/Liuxingtao/p/10416412.html


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP