最近新浪、百度、腾讯、京东、大众点评、淘宝等流行的网站都加大了招聘HTML5的力度，HTML5开发人员成了抢手货，本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的《HTML5网页开发实例详解》，喜欢本书的人可以关注连载，后续会更精彩！

2.1.1  最新的交互元素——内容交互、菜单交互、状态交互

HTML 5不仅仅只带来了一堆在语义上进行强化了的元素，同时在交互效果上也进行了极大的改变。也就是说，使用者可以在不使用JavaScript的情况下也能制作出满足一般需求的交互效果，这在笔者看来是一个非常友善的突破，可以通过HTML结构读出更多统一的使用规范和动态语义的交互信息。

首先看显示内容上的交互特性，这里向读者介绍的是details与summary两个元素。details元素用来描述文档或文档片段的信息，summary元素与details元素一同使用，用于说明文档的标题，同时，summary元素应为details元素的第一个子元素。通过一个简单的示例展示summary与details的使用，代码如下：

  1. <pre name="code" class="html"><!DOCTYPE HTML>
  2. <html>
  3. <style>details details{padding:15px}</style>                    <!-- 二级details样式-->
  4. <body>
  5. <details>
  6. <summary>交互</summary>                         <!-- 第一级detauls标题-->
  7. <details>
  8. <summary>内容交互</summary>                         <!-- 第二级detauls标题-->
  9. <p>details与summary元素</p>                            <!-- 文档内容 -->
  10. </details>
  11. </details></body></html>

details与summary元素示例的交互效果如图2.1所示。





图2.1  details与summary元素示例


details同时还具备open属性，用于表示是否展开可见，语法如下：




  1. <details open="open">




菜单交互中，命运最坎坷的应属menu元素，这个早在HTML 2时代就出现的元素，居然在HTML 4时遭到弃用，幸运的是HTML 5从语义的角度重新拾回menu元素。menu元素出现时常与li元素一同使用，用于排列表单控件。另外一个是command元素，按照W3C的说明，该元素有单选按钮、复选框、按钮3种类型，目前笔者测试了市面上主流的浏览器都暂时无法使用command元素特性，读者如果有兴趣可以自行尝试。


最后一类是状态交互类型，即可以理解为页面上的进度条。如progress元素、meter元素。progress元素一般用于下载或者上传时的进度显示，当状态产生变化时，可以通过设置progress的属性改变元素的交互状态。progress元素有两个关键属性：


  • value：进度的当前值，可以为整数或者浮点数。
    • 

  • max：完成的值，即总量，可以为整数或者浮点数。


下面通过一个简单的示例展示progress元素的使用，代码如下：




  1. <!DOCTYPE HTML>
    2. 

  2. <html>
    3. 

  3. <body>
    4. 

  4. 下载进度：<progress value=30 max=100></progress>                     <!-- 当前进度-->
    5. 

  5. </body>
    6. 

  6. </html>




运行效果如图2.2所示。




图2.2  progress元素


meter元素与progress元素非常相似，主要用于定义度量衡，表示在一定范围内的值，如投票占比、使用量等。meter元素有6个关键属性：


  • value：实际度量的值，默认为0，可以为整数或者浮点数。
    • 

  • high：范围的上限值。
    • 

  • low：范围的下限值。
    • 

  • max：最大值，默认值是1。
    • 

  • min：最小值，默认值是0。
    • 

  • optimum：最佳的值，必须在min属性值与max属性值之间。


下面通过一个示例说明meter元素的使用，代码如下：




  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <body>
    4. 

  4. <p>投票结果：</p>
    5. 

  5. <p>小周：                                        <!-- 小周的投票值 -->
    6. 

  6. <meter value="20" optimum="100" high="100" low="0" max="100" min="0"></meter><span>20%</span>
    7. 

  7. </p>
    8. 

  8. <p>小王：                                        <!-- 小王的投票值 -->
    9. 

  9. <meter value="80" optimum="100" high="100" low="0" max="100" min="0"></meter><span>80%</span>
    10. 

  10. </p>
    11. 

  11. </body>
    12. 

  12. </html>




meter元素示例的运行效果如图2.3所示。




图2.3  meter元素投票示例


HTML5并不难，难的是没有那么多的应用开发经验，清华大学出版社推出的《HTML 5网页开发实例详解》是市场上唯一 一本HTML 5实用案例书，是通过应用案例的形式学习HTML5的最佳著作。关注新浪围脖@我的图书我做主，留下邮箱，我们免费赠送“大众点评”工程师为本书量身定制的HTML5R视频。


												


											
免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）的更多相关文章
	

    
								
  1. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询
		
    响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...
    
		
    2. 
						
  2. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发
		
    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...
    
		
    3. 
						
  3. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集
		
    在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...
    
		
    4. 
						
  4. 当里个当，免费的HTML5连载来了《HTML5网页开发实例详解》连载（一）
		
    读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...
    
		
    5. 
						
  5. 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口
		
    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...
    
		
    6. 
						
  6. 读懂《HTML5网页开发实例详解》这本书
		
    你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信<Flash之我见>中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利. ——国际巨头Google.苹果等都 ...
    
		
    7. 
						
  7. 感谢各位亲们的大力支持，免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了！
		
    感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...
    
		
    8. 
						
  8. 免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（六）媒体查询
		
    响应式设计的还有一个重要技术手段是媒体查询.假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上 ...
    
		
    9. 
						
  9. 《python开发技术详解》|百度网盘免费下载|Python开发入门篇
		
    <python开发技术详解>|百度网盘免费下载|Python开发入门篇 提取码:2sby  内容简介 Python是目前最流行的动态脚本语言之一.本书共27章,由浅入深.全面系统地介绍了利 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. maven 的 scope的含义
			
    依赖范围控制哪些依赖在哪些classpath 中可用,哪些依赖包含在一个应用中.让我们详细看一下每一种范围: compile (编译范围) compile是默认的范围:如果没有提供一个范围,那该依赖的 ...
    
			
    2. 
						
  2. 一个关于AdaBoost算法的简单证明
			
    下载本文PDF格式(Academia.edu) 本文给出了机器学习中AdaBoost算法的一个简单初等证明,需要使用的数学工具为微积分-1. Adaboost is a powerful algori ...
    
			
    3. 
						
  3. POJ 2828 Buy Tickets（线段树 树状数组/单点更新）
			
    题目链接: 传送门 Buy Tickets Time Limit: 4000MS     Memory Limit: 65536K Description Railway tickets were d ...
    
			
    4. 
						
  4. Yocto开发笔记之《嵌入式linux libcurl编程》（QQ交流群：519230208）
			
    开了一个交流群,欢迎爱好者和开发者一起交流,转载请注明出处. QQ群:519230208,为避免广告骚扰,申请时请注明 “开发者” 字样 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ...
    
			
    5. 
						
  5. 先贴上代码：Random快排，快排的非递归实现
			
    设要排序的数组是A[0]……A[N-1],首先任意选取一个数据(通常选用数组的第一个数)作为主元,然后将所有比它小的数都放到它前面,所有比它大的数都放到它后面,这个过程称为一趟快速排序.值得注意的是, ...
    
			
    6. 
						
  6. TP中验证码的实现
			
    
			
    7. 
						
  7. React入门简单实践
			
    参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...
    
			
    8. 
						
  8. xcode 不显示占用内存
			
    解决办法: Scheme设置中,将 Enable Zombie Objects 勾选去掉.
    
			
    9. 
						
  9. CentOS 7学习手册
			
    CentOS 7与之前版本有较大变动,查阅资料,整理得到如下手册(未完~). 一.安装 1.使用哪种方式安装 (1).虚拟机安装,推荐:VM,功能齐全,强大(Virtual Box也可以). (2). ...
    
			
    10. 
						
  10. PHP file_get_contents设置超时处理方法
			
    从PHP5开始,file_get_content已经支持context了(手册上写着:5.0.0 Added the context support. ),也就是说,从5.0开始,file_get_c ...
    
			
    11.