第十课html5 新增标签及属性 html5学习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>
第十课html5 新增标签及属性 html5学习5的更多相关文章
- HTML5新增标签与属性
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- html5新增标签和属性
结构性标签:<header>头部</header><nav>导航</nav><section>用于表达书的一章或一部分</sectio ...
- html学习_html5 新增标签和属性
html5 新增标签和属性 1.html发展历程(html有很多版本) 2.快捷键生成不同版本(html4.xhtml.html5) 文档类型不同.字符设定 3.常用新标签 (只有html5才识别的标 ...
- html5新增及废除属性
html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定au ...
- 盒子模型,定位技术,负边距,html5 新增标签
盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...
- html5新增标签/删除标签
闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方 ...
- HTML5新增的form属性简介——张鑫旭
一.引言 HTML5中新增了一个名为form的属性,是一个与处理表单相关的元素. 在HTML4或XHTML中,我们要提交一个表单,必须把相关的控件元素都放在<form>元素下.因为表单提交 ...
- 解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题
https://www.cnblogs.com/yangjie-space/p/4816279.html html5shiv.js和respond.min.js 做页面常用的东西,写这里用的时候省点去 ...
- 让旧浏览器支持HTML5新增标签
首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素. ...
随机推荐
- 文本离散表示(一):词袋模型(bag of words)
一.文本表示 文本表示的意思是把字词处理成向量或矩阵,以便计算机能进行处理.文本表示是自然语言处理的开始环节. 文本表示按照细粒度划分,一般可分为字级别.词语级别和句子级别的文本表示.字级别(char ...
- 前端笔记之ES678&Webpack&Babel(上)初识ES678&Babel&let和const&解构&语法
一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...
- Unity 用ml-agents机器学习造个游戏AI吧(2)(入门DEMO)
前言: 上一篇博文已经介绍了Unity ml-agents的环境配置(https://www.cnblogs.com/KillerAery/p/10629963.html)了. 个人建议先敲demo再 ...
- BugkuCTF~Mobile~WriteUp
最近,开始记录一篇关于 Android 逆向分析的 WriteUp 方便有需要的人学习,也欢迎大家相互交流, 发现不 一样的世界. 一. signin 考点:反编译.静态分析 Topic Link:h ...
- Android中一个经典理解误区的剖析
今天,在Q群中有网友(@广州-包晴天)发出了网上的一个相对经典的问题,问题具体见下图. 本来是无意写此文的,但群里多个网友热情不好推却,于是,撰此文予以分析. 从这个问题的陈述中,我们发现,提问者明显 ...
- python之循序渐进学习装饰器
python装饰器的定义:在代码运行期间在不改变原函数定义的基础上,动态给该函数增加功能的方式称之为装饰器(Decorator) 装饰器的优点和用途: 1. 抽离出大量函数中与函数功能本身无关的的雷同 ...
- SpringBoot整合SpringCloud搭建分布式应用
什么是SpringCloud? SpringCloud是一个分布式的整体解决方案.SpringCloud为开发者提供了在分布式系统中快速构建的工具,使用SpringCloud可以快速的启动服务或构建应 ...
- Promise(避免金字塔回调)
前后端分离开发,前端通过接口获取数据,但是有的页面不止一个接口,就会出现金字塔回调,可以通过 Promise 封装请求. request-data.js: function reqData(postu ...
- 关于'selffilter' is not a registered tag library. Must be one of:
报错代码: 'selffilter' is not a registered tag library. Must be one of: admin_list admin_modify admin_st ...
- Linux 桌面玩家指南:08. 使用 GCC 和 GNU Binutils 编写能在 x86 实模式运行的 16 位代码
特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...