一、常用新增标签

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的更多相关文章

  1. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  2. html5新增标签和属性

    结构性标签:<header>头部</header><nav>导航</nav><section>用于表达书的一章或一部分</sectio ...

  3. html学习_html5 新增标签和属性

    html5 新增标签和属性 1.html发展历程(html有很多版本) 2.快捷键生成不同版本(html4.xhtml.html5) 文档类型不同.字符设定 3.常用新标签 (只有html5才识别的标 ...

  4. html5新增及废除属性

    html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定au ...

  5. 盒子模型,定位技术,负边距,html5 新增标签

    盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...

  6. html5新增标签/删除标签

    闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方 ...

  7. HTML5新增的form属性简介——张鑫旭

    一.引言 HTML5中新增了一个名为form的属性,是一个与处理表单相关的元素. 在HTML4或XHTML中,我们要提交一个表单,必须把相关的控件元素都放在<form>元素下.因为表单提交 ...

  8. 解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题

    https://www.cnblogs.com/yangjie-space/p/4816279.html html5shiv.js和respond.min.js 做页面常用的东西,写这里用的时候省点去 ...

  9. 让旧浏览器支持HTML5新增标签

    首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素.   ...

随机推荐

  1. 文本离散表示(一):词袋模型(bag of words)

    一.文本表示 文本表示的意思是把字词处理成向量或矩阵,以便计算机能进行处理.文本表示是自然语言处理的开始环节. 文本表示按照细粒度划分,一般可分为字级别.词语级别和句子级别的文本表示.字级别(char ...

  2. 前端笔记之ES678&Webpack&Babel(上)初识ES678&Babel&let和const&解构&语法

    一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...

  3. Unity 用ml-agents机器学习造个游戏AI吧(2)(入门DEMO)

    前言: 上一篇博文已经介绍了Unity ml-agents的环境配置(https://www.cnblogs.com/KillerAery/p/10629963.html)了. 个人建议先敲demo再 ...

  4. BugkuCTF~Mobile~WriteUp

    最近,开始记录一篇关于 Android 逆向分析的 WriteUp 方便有需要的人学习,也欢迎大家相互交流, 发现不 一样的世界. 一. signin 考点:反编译.静态分析 Topic Link:h ...

  5. Android中一个经典理解误区的剖析

    今天,在Q群中有网友(@广州-包晴天)发出了网上的一个相对经典的问题,问题具体见下图. 本来是无意写此文的,但群里多个网友热情不好推却,于是,撰此文予以分析. 从这个问题的陈述中,我们发现,提问者明显 ...

  6. python之循序渐进学习装饰器

    python装饰器的定义:在代码运行期间在不改变原函数定义的基础上,动态给该函数增加功能的方式称之为装饰器(Decorator) 装饰器的优点和用途: 1. 抽离出大量函数中与函数功能本身无关的的雷同 ...

  7. SpringBoot整合SpringCloud搭建分布式应用

    什么是SpringCloud? SpringCloud是一个分布式的整体解决方案.SpringCloud为开发者提供了在分布式系统中快速构建的工具,使用SpringCloud可以快速的启动服务或构建应 ...

  8. Promise(避免金字塔回调)

    前后端分离开发,前端通过接口获取数据,但是有的页面不止一个接口,就会出现金字塔回调,可以通过 Promise 封装请求. request-data.js: function reqData(postu ...

  9. 关于'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 ...

  10. Linux 桌面玩家指南:08. 使用 GCC 和 GNU Binutils 编写能在 x86 实模式运行的 16 位代码

    特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...