在HTML5标准中，新加了几个用于增添页面语义的标签，这些标签有：article、section、nav和aside等。与别的大多数标签不 同，浏览器在解释渲染这些标签的时候仅仅把它作为普通的p块级元素来处理，不会添加任何额外的展现逻辑；也即，这些标签仅用于增添语义。对于Web开 发人员而言，使用这些标签的实际意义主要有2点：搜索引擎优化，以及增加页面的可用性(accessibility)。在元素分类上，article、section、nav和aside称之为“Secti...
一、语义化标签的实战意义我先收集到一些观点，大家姑且先听上一听， 有人说： “没必要考虑语义化，只要我写的代码浏览器运行后没问题就行，反正领导根本不关心这些” “语义化是w3c推广的，我是很想语义化我的代码，但总是用不明白” “这个不好说，语义化再好有啥用，关键是有好的项目，客户才是金主！” “除了专业人士，谁会去看我们的代码是不是语义化的”不仅仅有页面重构人员的声音，也听一听工程师、设计师、还有项目管理...
一、页眉1、添加页眉和页脚 <p data-role="header"><h1>第 1 页</h1></p> <p data-role="footer"><h4>页面脚注</h4></p>默认的页眉在屏幕的顶部边缘显示，而且在在屏幕滚动时，页眉会滑出屏幕之外，通过添加data-position属性可以创建一个固定的页眉 <p data-role="header" data-position="fixed"><h1>第 1 页</h1></p> <p data-role="footer" data-position="fixed"><h4>页面脚注</h4></p>可以使用date-theme属性来调整页眉的主题...
随着HTML5的到来，flash在手机端全部不能得到支持，这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了。很恰巧的是，移动端对HTML5中的媒体标签video标签和audio标签支持的非常好。这就使HTML5在移动端很流行。 video标签和audio标签也提供了很实用的JavaScript API，允许创建自定义的控件。两个标签的用法如下。 HTML代码<!-- 视频标签 --> <video src="meng.ogg" id="myVide...
HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局。大多数浏览器基本兼容html5，但目前来说ie6/ie7/ie8还不兼容html5标签，所以需要javascript处理，让其进行兼容方法一：javascript code<!--[if lt IE9]> <script>(function() {if (!/*@cc_on!@*/0) return;var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, ...
一、视频播放<html> <head> <title>多媒体播放</title> </head> <body> <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4"> </body> </html>效果如下：<embed> 标签是 HTML 5 中的新标签。属性HTML5 中的新属性。属性 值 描述height pixels 设置嵌入内容的高度。 src url 嵌入内容的 URL。 type type 定义嵌入内容的类型。 width pixels 设置嵌...
在前面的小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器中制作了一个非常好用的播放器，有的朋友对其中的原理还不是很了解，这一篇文章将在前一篇的基础上深入剖析<video>标签的使用。一、使用技巧在HTML5中可以使用<audio>或者<video>标签播放Html5媒体，使用方式如下：<video src="move.mp4"></video>video标签中有很多属性，例如controls属性可以控制是否有控制台。<video src="move.mp4" controls="controls"> 浏...
简要教程svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件。该3D标签云插件不需要额外的CSS样式，可使用鼠标与标签进行互动，并提供很多参数来控制标签云的外观。使用方法使用该3D标签云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。<script src="js/jquery.min.js"></script> <script src="js/jquery.svg3dtagcloud.min.js"></script> HTML结构可以使用一个<div>容器来作为该3D标签云的包裹容器。<div id="tag...
在iPhone的浏览器中页面将以原始大小显示，不允许缩放。 width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。添加到主屏...
总是遇到h5新标签的笔试题目，就查阅了资料来总结一下：1.form相关：（1）form属性：在HTML5中表单元素可放在表单之外，通过给该元素添加form属性来指向目标表单（form属性值设为目标表单id）即可。（2）formaction属性：HTML5给提交按钮(如button、submit、image等)增加了formaction属性，以便提交到不同的服务器地址。（3）formmethod属性：用法同formaction。（4）placeholder属性：用于文本框处于未输入状态时的一种文字提示。...
我记得以前淘宝首页有使用article section nav等新的HTML5语义化标签，今天看了下首页、list、detail三大页面都已经没有任何一个新标签的使用，是出于什么考虑了？回复内容： 唯一能想到的就是，一次对赌协议，要做性能优化，对 ie8-的浏览器，少一些 shim 也能节约点性能，谁让是首页呢~ 这问题只能淘宝的相关前端工程师前来回答。我个人意见：对于淘宝这样量级的网站，前进需谨慎，但倒退更不可取。他敢不兼容IE6？ 别开玩笑了，...
如果构建一个网站，不需要兼容ie6-8。使用button标签作为按钮是否更符合语义？回复内容： 主流网站的html代码写得保（烂）守（挫），也不是第一天的事情了。没错，如果不是超链接跳转，那么不应该用a，而应该用 button 或者 input[type=button] 。button和input的问题是，因为是表单控件，所以在某些浏览器或平台上可设置的样式受到限制，或者干脆存在样式bug。尽管随着时间推移这种问题越来越少，但是坏习惯已经养成了。有时候可能...
今天刚看到HTML 5 标签的存在：http://www.w3school.com.cn/html5/html5_eventsource.asp可能1：这个信息是错误的；可能2：规范仅规定了自定义标签（组件技术）是有短横线的，却没说原生标签一定不能有短横线；可能3：规范禁止这样，同时规范又规定了一个违背规范的标签。如果是3，那么进一步的问题是：还有多少此类型的例外标签需要在设计类库时加以留意？回复内容： http://w3schools.com 的内容只能作为参考。何况你看的是版权...
除了一个变大一个变小，这两个标签的作用不是相似的么。回复内容： 当谈论HTML标记时，永远不要谈论「这个标记的显示效果是什么」，这是CSS负责的，也是HTML5标准移除了一部分视觉标签（如你提到的）的原因。你应当考虑的是「这个标记的语义是什么」。那么标记的语义是什么呢？根据W3C：Although previous versions of HTML defined the small element only in presentational terms, the element has now been given the specific...
回复内容： HTML5 很多新的元素容易产生误解，其中有一部分原因是因为有些元素本身有歧义，所表达的语义在规范中也是在不断修正的。并不是指视觉上的导航栏，而是表示带有导航性质的内容，准确的说：元素表示一个包含多个链接的区域，这些链接指向其他页面或本页面的其他部分。需要注意以下几点：并不是所有的链接都要放到 nav 元素里面，该元素内应包含用于构成主要导航区块的部分。举个反例，通常页脚有链接列表链接到网站的其他...