资讯专栏INFORMATION COLUMN

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

wuyangnju / 3131人阅读

摘要:一常用新增标签定义页面的页眉头部定义导航栏定义页面底部,页脚定义文章定义区域定义侧边定义选项列表与搭配使用请输入明星里面用里面用来实现和连接刘德华刘青云刘亦菲张学友将表单内的相关元素分组打包与搭配使用用户登陆用户名二新增的属性值邮箱手机数字

一、常用新增标签

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

2、nav:定义导航栏

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

4、article:定义文章

5、section:定义区域

6、aside:定义侧边

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

input里面用list

datalist 里面用id 来实现和input连接

  

  

  

  

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

  用户登陆

  用户名:

 

二、新增的input type属性值

1、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:多文件上传

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

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

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

如:accesskey="s"

 

四、多媒体标签

embed:标签定义嵌入内容

audio:音频

video:视频

 

1、

 

属性: autoplay 自动播放

controls 显示控件

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

 

 

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

  

  

  

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

2、video

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

 

 

属性: autolay 自动播放

controls 显示控件

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

width

height

 

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

  

  

  

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

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1204.html

相关文章

  • 【Vue.js 牛刀小试】:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    摘要:而路由则是使用了中新增的事件和事件。总结这一章主要是介绍了如何使用在中构建我们的前端路由。 系列目录地址 一、基础知识概览 第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的使用(posted at 2018-11-02) 第四章 - 页面元素样式的设定(posted a...

    cpupro 评论0 收藏0
  • Vue.js十课 自定义指令

    摘要:下面我们注册一个全局指令该指令的功能是在页面加载时,元素获得焦点实例页面载入时,元素自动获取焦点注册一个全局自定义指令当绑定元素插入到中。 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点:实例 页面载入时,input 元素自动获取焦点: // 注册...

    summerpxy 评论0 收藏0
  • TRY REGEX:正则表达式交互式入门教程 翻译&解答

    摘要:写一个正则表达式来测试变量中是否包含字符串。用函数给出不使用字符,但和等价的正则表达式。第十四课标志全局匹配标志第二个常用的标志是全局匹配标志,用字母表示。写出一个正则表达式来检验合法性。非捕获组的主要用途是给一个组赋予量词。 TRY REGEX 是一个交互式的正则表达式学习项目项目地址:https://github.com/callumacra...在线地址:http://tryre...

    李义 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<