4.9 html5新增

html5新增内容：

语义化结构标签:

section：更偏于划分区域。( 网页的外围结构...更类似与div)
article：更偏向于内容的展示

header：网页头部或者是内容块头部
footer：网页的顶部或者内容快的底部
nav：导航区域
main:主体区域（ie不兼容）

figure：代表一个独立的区域
figcaptionfigure区域的标题
aside：侧边栏(在一旁的)
time：时间类
mark:高亮显示文本
dialog:定义一个对话框
视频：
<video src="./wangs/movie. mp4“></video>

autoplay：自动播放

controls：播放控件

loop：循环播放

muted：静音

poster：封面

1:新增加的type类型

email：限制必须是邮件

url：限制必须是网址：http://

number：限制数字

range：滑动条

color：颜色

search：搜索框

time时间类型

month月份

week周

datetime-local选取本地时间

date只有年月日

2:新增的html属性

min

max

required如果衣单没有输入内容的情况下，禁止提交
step确定一个法定值eg:3 -6 -3 0 3 6 9

原文地址：https://www.cnblogs.com/xiaokeai233/p/12676943.html

时间： 2024-10-22 08:54:11

4.9 html5新增的相关文章

HTML5新增Canvas标签及对应属性、API详解（基础一）

知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签原型 <canvas width=”1000” height=”1000” id=”myCanvas”> 您的浏览器版本过低,不支持HTML5新增的canvas标签. </canvas> 使用js获取该画布,并指定对象 <script> Var canvasID = doc

玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. html5新增的input类型有:email,url,number,range,date pickers,datalist,telephone,search,color email:提交时会自动验证输入的内容是否满足格式邮箱 :<input type="email" name=&quo

HTML5 学习笔记（二）——HTML5新增属性与表单元素

目录一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性二.HTML5表单新功能解析 2.1.表单结构更自由

html5新增及删除标签

一.新增标签有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签新增的结构标签,之前都是用div实现的,为了语义化,html5从div派生出很多新的标签.这些新增的结构标签有助于将文档分成几个逻辑部分.如下: a.section标签表示页面中的一个独立内容区块,里面有自己的大纲结构,比如章节,页眉,页脚或页面的其他部分.就是说section可以包含h1.h2...h6标签,表

html5新增及废除属性

html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定autofocus属性.它以指定属性的方式让元素在页面加载后自动获得焦点.一个页面只能有一个元素有autofocus属性,同时设置多个,则第一个生效. 这个属性对登录页面很有用,可提升用户体验,有时登录页面就一个用户名,密码,页面加载后用户要手动定位到输入框,才能输入,有了autofocus,页面打开即

HTML5新增的一些属性和功能之六——拖拽事件

拖放事件的前提是分为源对象和目标对象,你鼠标拖着的是源对象,你要放置的位置是目标对象,区分这两个对象是因为HTML5的拖放事件对两者是不同的. 被拖动的源对象可以触发的事件: 1).ondragstart:源对象开始被拖动 2).ondrag:源对象被拖动过程中(鼠标可能移动也可能不移动) 3).ondragend:源对象被拖动结束拖动源对象可以进入到上方的目标对象可以触发的事件: 1).ondragenter:目标对象被源对象拖动着进入 2).ondragover:目标对象被源对象拖动着悬停

第二篇、HTML5新增标签

<html> <head> <meta charset="UTF-8"> <title>html5新增的标签</title> </head> <body>  <article> <header> </header> <section> </section> <section>

HTML5新增的拖放API---（一）

HTML5新增了关于拖放的API,通过API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互的界面. 拖放操作可以分为两个动作:在某个元素上按下鼠标移动鼠标(没有松开鼠标),此时开始拖动:在拖动的过程中,只要没有松开鼠标,将会不断产生事件-----这个过程称为“拖”.把被拖动的元素拖动到另外一个元素上并松开鼠标-----这个过程被称为“放”. 一.启动拖放在HTML5中,<img .../>元素默认就是可拖动的:而<a .../>元素只要设置

HTML5新增核心工具——本地存储

除了Canvas元素外,HMTL5另外一个新增的非常重要的功能是可以在客户端本地存储数据库的Web Storage.本文就介绍下Web Storage以及SQLLite操作. Web Storage分为两类: - sessionStorage:数据保存在session 对象中(临时) - localStorage:数据保存在本地硬件设备中(永久) sessionStorage: 保存数据的两种方法: sessionStorage.setItem('key','val'); sessionStor

HTML5新增核心工具——canvas

Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度,JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形. Canvas可以在浏览器中绘制出十分华丽的图形,比如: 当然这应该算比较高级的用法了,本菜也不会=.= Canvas一个很大的作用就是制作游戏,本文通过博主之前做的一个小游戏来从零介绍Canvas的用法,先展示下吧: O