请选择 进入手机版 | 继续访问电脑版
楼主
[HTML5&前端]| 发表于 2017-7-29 21:52:43 |阅读模式 719 0

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Day11 css统筹总结
(1)、html5新标签
•     结构性标签:<article>  ,<aside>,<footer>,<header>,<nav>,<section><main>
•     非结构性标签:<audio>,<video>,<canvas>,<datalist>,<details>,<mark>,<progress>,<source>,<time>
•     按例:个人博客
(2)、元素分类
1、结构性元素:主要负责Web的上下文结构的定义,确保HTML文档的完整性
section:内容区块,也可用于区域的文章表述
header:页面主体的头部,注意区别head元素
footer:页面的底部(页脚)
nav:是专门用于菜单导航、链接导航的元素,是navigator的缩写
article:用于表示一篇文章的主体内容,一般为文字集中显示的区域
2、级块性元素
aside:用以表达注记、贴士、侧栏、摘要、插入的引用作为补充主体的内容,从一个简单页面上看,就是侧边栏,
   可以在左边,可以在右边,从一个页面的局部看,就是摘要
figure:是对多个元素进行组合并展示的元素,通常与figcaption联合使用
code:表示一段代码块
dialog:用于表达人与人之间的对话,该元素还包括dt和dd这两个组合元素,他们常常同时使用,dt用于表示说话
   者,而dd则表示说话在说的内容
3、行内语义性元素
meter:表示特定范围内的数值,可用于工资、数量、百分比等
time:表示时间值
progress:用来表示进度条,可通过对其max\min\step等属性进行控制,完成对进度的表示和监视
video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式,如,MPEG-4,
   OggV和WebM等
audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式
4、交互性元素:主要用于功能性内容的表达,会有一定的内容和数据的关联,是各种事件的基础。
details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与legend交互才会显 示出来
datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新
menu:主要用于交互菜单(这是一个曾被废弃现在又被重新启用的元素)
command:用来处理命令按钮
(3)、设计微格式
微格式的提出主要目的是简化web开发的数据提取,曾从网页中提取过数据的web开发人员都知道,现有的html结构除了告诉浏览器这些信息再哪里之外,几乎不能再提供任何有意义的信息。开发人员需要了解与数据本身相关的信息,这些信息能帮助程序员了解这些数据的真正含义。HTML5中所谓额微格式引入了一种新的机制,它再HTML中新增了一些专门的标签。
例如一个好的、标准的方式来表示日期和时间,那么程序员再开发时,就不需要编程来分析别人用的是什么时间格式,这样日历、时间表、日程安排等需要从多个数据源收集时间信息的应用也就变成非常简单的工作了。HTML5中新增了一种元素来无歧义的、明确的对机器的日期和时间进行编码,并且以让人易读的方式来实现它,这个元素就是time元素,格式如下:
<time datetime="2012-11-13">2012年11月13日</time>
<time datetime="2012-11-13">11月13日</time>
<time datetime="2012-11-13">我的生日</time>
<time datetime="2012-11-13T20:00">我生日的晚上8点</time>
<time datetime="2012-11-13T20:00Z">我生日的晚上8点</time>
<time datetime="2012-11-13T20:00+09:00">我生日的晚上8点的美国时间</time>
注意:datetime属性中日期和时间之间要用“T”字母分隔,“T”表示时间。时间加上“Z”字母表示给机器编码时使用UTC标准时间,时间后可以加时差,表示另一地区时间,如果编码本地时间,课省略时差
(4)、新增的表单类型:
1、type=”number”
max- 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔(如果step="3",则合法的数是 -3,0,3,6 等)
value - 规定默认值         
2、type=”range”    IE10+
max- 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔(如果step="3",则合法的数是 -3,0,3,6 等)
value - 规定默认值
3、type=”search”
4、type=”tel”(输入的内容为电话号码类型)
5、type=”color” ( 从拾色器选取一个颜色)
6、type=”date”
               Date Pickers - 日期时间选择器
               date - 选取日、月、年
               month - 选取月、年
               week - 选取周和年
               time - 选取时间(小时和分钟)
7、type=”email”(用于应该包含e-mail地址的输入域,提交表单时,会自动验证email域的值)
8、type=”url” (url 类型用于应该包含URL 地址的输入域,在提交表单时,会自动验证 url 域的值。)
(5)、表单新特性和函数
1 placeholder属性  显示提示文字
2 autocomplete属性  自动完成功能on or off
3 autofocus属性  自动获取焦点
4 list特性和datalist  绑定input和datalist    注意:每一个option都需要设置value值
5 required属性   提交之前必须填写,应用与input类型
6 pattern属性 规定输入内容的验证表正则达式
<input type="text" pattern=”[0-9]{6}”title=”提示信息”/>
7 form属性 规定input元素属于哪个form表单
<input type="text" form="form1  form2 from3"/>
8 disabled属性   禁用一个input属性
9 readonly属性   规定输入字段为只读
10 multiple属性  允许file选择多个文件
      <input type="file"multiple=”multiple”/>
                                                           

分享到:  微信微信
回复回复0 收藏收藏0 分享
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /3 下一条

育知同创学员技术交流社区

问币兑换|社区帮助|免责声明|交换友情链接|育知同创学员技术交流社区

Powered by Discuz! X3.2 Licensed© 2001-2013 Comsenz Inc. 京ICP备16004053号

GMT+8, 2018-2-20 13:33 , Processed in 0.095328 second(s), 26 queries .

快速回复 返回顶部 返回列表