查看: 2142|回复: 7
最后登录在线时间68 小时注册时间积分193主题精华4帖子
Cocos2d-html5核心开发
注册时间最后登录积分193精华4主题帖子
互联网科技发展的速度真可谓惊人的快，一个稍不留神，你就可能无法跟上它的步伐。HTML5的变化和更新也压倒不少人，这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。
1. 新的文档类型（Doctype） &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN&& &&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&& &复制代码
你还在使用上面这个既麻烦又难记的XHTML文档类型吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型了。 &!DOCTYPE html&& &复制代码
只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html文件的第一行。）
2. 图形（Figure）元素
考虑用下面的代码来标记图片？ &mg src=&path/to/image& alt=&About image& /&& &&&&p&Image of Mars. &/p&& &复制代码
很不幸，它不能用简单、富有语义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹着，而 HTML5通过引进&figure&元素，改进了这一点。当结合 &figcaption& 元素使用时，我们就可以将图形标题与图形配对起来。代码如下： &figure&& &&&&img src=&path/to/image& alt=&About image& /&& &&&&figcaption&& &&&&p&This is an image of something interesting. &/p&& &&&&/figcaption&& &&&&/figure&& &复制代码
3. 重新定义&small&
原来你可以利用&small&元素来创建与logo密切相关的副标题。不过，现在HTML5修改了这个用法，&small&元素被重新定义了，或者更恰当地说，它现在用来代表小字或其他边注（如，网站底部的版权声明）。
4. 不再需要脚本、链接类型
很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。 &link rel=&stylesheet& href=&path/to/stylesheet.css& type=&text/css& /&& &&script type=&text/javascript& src=&path/to/script.js&&&/script&& &复制代码
在HTML5中，这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此，我们可以将它们的类型属性都删除掉。代码如下： &link rel=&stylesheet& href=&path/to/stylesheet.css& /&& & &script src=&path/to/script.js&&&/script&& &复制代码
5. 使用还是不使用引号
记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。 &p class=myClass id=someId& Start the reactor. &/p& 复制代码
6. 使你的内容可编辑
HTML5其中一个非常强大的功能就是“contenteditable”，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。 &!DOCTYPE html&& &&html lang=&en&& &head& &meta charset=&utf-8&& &title&untitled&/title& &/head&& &&body&& &&h2& To-Do List &/h2& &ul contenteditable=&true&& &li& Break mechanical cab driver. &/li& &li& Drive to abandoned factory&/li&& &&li& Watch video of self &/li& &/ul& &/body& &/html&& &复制代码
或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号）： &ul contenteditable=true&& &复制代码
7. 电子邮件输入
如果我们应用“电子邮件”类型来指定输入的形式，我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。比较旧的浏览器不理解这种“电子邮件”类型，它们只会简单地返回到普通的文本框。
&!DOCTYPE html& &html lang=&en&& &head&& &&&&meta charset=&utf-8&&& &&&&title&untitled&/title&& &&&&/head&& &&&&body&& &&&&form action=&& method=&get&&& &&&&label for=&email&&Email:&/label&& &&&&input id=&email& name=&email& type=&email& /&& &&&&button type=&submit&& Submit Form &/button&& &&&&/form&& &&&&/body&& &&&&/html&& &
在说到浏览器所支持和不支持的元素以及属性时，你必需知道当前所有浏览器都不是那么可靠。例如，Opera只有在你指定name属性时才支持电子邮件验证。不过，它不支持占位符属性（下面即将要讲到的）。最后，虽然你可以使用这种形式的验证，不过不要过分依赖它。
最后登录在线时间0 小时注册时间积分6主题精华0帖子
HTML5菜鸟, 积分 6, 距离下一级还需 44 积分
注册时间最后登录积分6精华0主题帖子
第4点掉东西了
最后登录在线时间0 小时注册时间积分6主题精华0帖子
HTML5菜鸟, 积分 6, 距离下一级还需 44 积分
注册时间最后登录积分6精华0主题帖子
网站太垃圾了，注册页面都这么多bug
最后登录在线时间0 小时注册时间积分6主题精华0帖子
HTML5菜鸟, 积分 6, 距离下一级还需 44 积分
注册时间最后登录积分6精华0主题帖子
回复点提交都没反应的，也不晓得回成功没有，要刷新页面才行
最后登录在线时间68 小时注册时间积分193主题精华4帖子
Cocos2d-html5核心开发
注册时间最后登录积分193精华4主题帖子
回 2楼(hhhhhhhhhhhh) 的帖子
注册页面有BUG？哪里有，可以具体说下吗
最后登录在线时间68 小时注册时间积分193主题精华4帖子
Cocos2d-html5核心开发
注册时间最后登录积分193精华4主题帖子
回 1楼(hhhhhhhhhhhh) 的帖子
补上了，谢了
最后登录在线时间6 小时注册时间积分44主题精华0帖子
HTML5菜鸟, 积分 44, 距离下一级还需 6 积分
注册时间最后登录积分44精华0主题帖子
html5里的tag只是个框，关键要熟悉那些DOM API，例如，最复杂的WebGL，简单点的Canvas，再简单点的CSS3等等。真正综合在一起做个耳目一新的东西，才能吹自己是html5。看起来难那，其实比起.NET，cocoa和android，html5真是简单那，因为其一，Javascript是很难做大项目的，所以复杂的东西浏览器包了，其二，Javascript是很灵活的，所以API才会简单。
最后登录在线时间68 小时注册时间积分193主题精华4帖子
Cocos2d-html5核心开发
注册时间最后登录积分193精华4主题帖子
楼上说的非常正确
Powered by查看: 2143|回复: 7
最后登录在线时间68 小时注册时间积分193主题精华4帖子
Cocos2d-html5核心开发
注册时间最后登录积分193精华4主题帖子
互联网科技发展的速度真可谓惊人的快，一个稍不留神，你就可能无法跟上它的步伐。HTML5的变化和更新也压倒不少人，这篇文章将向大家介绍一些最基本也非常必要的HTML技巧。
1. 新的文档类型（Doctype） &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN&& &&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&& &复制代码
你还在使用上面这个既麻烦又难记的XHTML文档类型吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型了。 &!DOCTYPE html&& &复制代码
只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html文件的第一行。）
2. 图形（Figure）元素
考虑用下面的代码来标记图片？ &mg src=&path/to/image& alt=&About image& /&& &&&&p&Image of Mars. &/p&& &复制代码
很不幸，它不能用简单、富有语义关联的方式与图形的标题关联，因为它仅仅是用段落标记以及图片元素包裹着，而 HTML5通过引进&figure&元素，改进了这一点。当结合 &figcaption& 元素使用时，我们就可以将图形标题与图形配对起来。代码如下： &figure&& &&&&img src=&path/to/image& alt=&About image& /&& &&&&figcaption&& &&&&p&This is an image of something interesting. &/p&& &&&&/figcaption&& &&&&/figure&& &复制代码
3. 重新定义&small&
原来你可以利用&small&元素来创建与logo密切相关的副标题。不过，现在HTML5修改了这个用法，&small&元素被重新定义了，或者更恰当地说，它现在用来代表小字或其他边注（如，网站底部的版权声明）。
4. 不再需要脚本、链接类型
很可能你仍然像下面的代码一样给你的链接和脚本标签添加类型的属性。 &link rel=&stylesheet& href=&path/to/stylesheet.css& type=&text/css& /&& &&script type=&text/javascript& src=&path/to/script.js&&&/script&& &复制代码
在HTML5中，这已经不再需要了。 意味着说这两个标签分别代表着样式和脚本。因此，我们可以将它们的类型属性都删除掉。代码如下： &link rel=&stylesheet& href=&path/to/stylesheet.css& /&& & &script src=&path/to/script.js&&&/script&& &复制代码
5. 使用还是不使用引号
记住，HTML5与XHTML不同，如果你不喜欢的话你不必用引号将属性包裹起来。不过，要是你觉得用引号会让你觉得更加舒服的话，当然也不会有任何问题。 &p class=myClass id=someId& Start the reactor. &/p& 复制代码
6. 使你的内容可编辑
HTML5其中一个非常强大的功能就是“contenteditable”，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。 &!DOCTYPE html&& &&html lang=&en&& &head& &meta charset=&utf-8&& &title&untitled&/title& &/head&& &&body&& &&h2& To-Do List &/h2& &ul contenteditable=&true&& &li& Break mechanical cab driver. &/li& &li& Drive to abandoned factory&/li&& &&li& Watch video of self &/li& &/ul& &/body& &/html&& &复制代码
或者，按照第五条技巧所说的，你也可以将第九行的代码写成这样（不用引号）： &ul contenteditable=true&& &复制代码
7. 电子邮件输入
如果我们应用“电子邮件”类型来指定输入的形式，我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。比较旧的浏览器不理解这种“电子邮件”类型，它们只会简单地返回到普通的文本框。
&!DOCTYPE html& &html lang=&en&& &head&& &&&&meta charset=&utf-8&&& &&&&title&untitled&/title&& &&&&/head&& &&&&body&& &&&&form action=&& method=&get&&& &&&&label for=&email&&Email:&/label&& &&&&input id=&email& name=&email& type=&email& /&& &&&&button type=&submit&& Submit Form &/button&& &&&&/form&& &&&&/body&& &&&&/html&& &
在说到浏览器所支持和不支持的元素以及属性时，你必需知道当前所有浏览器都不是那么可靠。例如，Opera只有在你指定name属性时才支持电子邮件验证。不过，它不支持占位符属性（下面即将要讲到的）。最后，虽然你可以使用这种形式的验证，不过不要过分依赖它。
最后登录在线时间0 小时注册时间积分6主题精华0帖子
HTML5菜鸟, 积分 6, 距离下一级还需 44 积分
注册时间最后登录积分6精华0主题帖子
第4点掉东西了
最后登录在线时间0 小时注册时间积分6主题精华0帖子
HTML5菜鸟, 积分 6, 距离下一级还需 44 积分
注册时间最后登录积分6精华0主题帖子
网站太垃圾了，注册页面都这么多bug
最后登录在线时间0 小时注册时间积分6主题精华0帖子
HTML5菜鸟, 积分 6, 距离下一级还需 44 积分
注册时间最后登录积分6精华0主题帖子
回复点提交都没反应的，也不晓得回成功没有，要刷新页面才行
最后登录在线时间68 小时注册时间积分193主题精华4帖子
Cocos2d-html5核心开发
注册时间最后登录积分193精华4主题帖子
回 2楼(hhhhhhhhhhhh) 的帖子
注册页面有BUG？哪里有，可以具体说下吗
最后登录在线时间68 小时注册时间积分193主题精华4帖子
Cocos2d-html5核心开发
注册时间最后登录积分193精华4主题帖子
回 1楼(hhhhhhhhhhhh) 的帖子
补上了，谢了
最后登录在线时间6 小时注册时间积分44主题精华0帖子
HTML5菜鸟, 积分 44, 距离下一级还需 6 积分
注册时间最后登录积分44精华0主题帖子
html5里的tag只是个框，关键要熟悉那些DOM API，例如，最复杂的WebGL，简单点的Canvas，再简单点的CSS3等等。真正综合在一起做个耳目一新的东西，才能吹自己是html5。看起来难那，其实比起.NET，cocoa和android，html5真是简单那，因为其一，Javascript是很难做大项目的，所以复杂的东西浏览器包了，其二，Javascript是很灵活的，所以API才会简单。
最后登录在线时间68 小时注册时间积分193主题精华4帖子
Cocos2d-html5核心开发
注册时间最后登录积分193精华4主题帖子
楼上说的非常正确
Powered by来自子话题：
感谢南哥的邀请，不过说实在的，我对HTML5还真不是很了解。于是特地的去补习了下。
&br& 上面几位已经说的很好了，我把我看过的一些文章整理下。举百家之长补充下。
&br&&br&我把HTML5代码都看了下，新增了不少新元素，整理了下，这些标签应该对SEO还是比较有影响的，适当运用，也许对SEO优化是有很大好处的！
&br&&br&&b&&u&结构上的&/u&&/b&&ol&&li&&header&定义了站点的头部信息，也就是页眉，一般放置网站的站点名称以及LOGO和导航栏。搜索引擎更容易识别站点的类型。 &br&&/li&&li&&nav&定义导航链接，也就是栏目或者频道的链接。搜索引擎可以更好了解网站的信息架构，分类等。良好的信息架构，更有利于蜘蛛的爬行和权重的分布。 &br&&/li&&li&&footer&定义了底部信息，也就是页脚。放置页脚导航，一些比如公司介绍，联系我们之类的信息。一般来说对网站比较不重要，有可能搜索引擎会降低其位置的权重。 &br&&/li&&li&&section&该元素用来表示网页中不同的分区。优势体现在每个部分都可以有其独立的HTML标题。这可以让搜索引擎更好的了解网页的结构是如何划分的。搜索引擎可能会根据网页中的&section&标签找出其信息架构。（同左撇子） &br&&/li&&li&&article& 定义文章区域，可以更有利于搜索引擎识别网页的内容以及判断相关性。， &br&&/li&&li&&aside&定义页面内容之外的内容，在左侧或右侧边栏。比如知乎右侧的“相关问题”就属于&aside&区域。aside标签的文字信息与article标签区域的文字信息最好是相关。可能会影响到该页面和目标页面的排名。&/li&&/ol&这些结构元素有些在HTML4时代，一般是用div来定义。如&div id=&header&&、&div id=&nav&&和&div id=&footer&&，但是难免有些网站会采用其它的命名方式。而HTML就把这些都标准化了，规范化了，简洁明了。更有利于搜索引擎衡量网页上的内容和相关性，甚至分配权重的流向。
&br&&b& &br&&/b&
&br&&b&&u&块元素&/u&&/b&&ol&&li&&figure&定义媒介内容的分组，以及它们的标题，&figcaption&定义 figure 元素的标题。这两个元素可以说非常好的使媒介和文字说明联系在了一起。有利于搜索引擎理解内容。文字说明是可见的。&/li&&li&&time&定义日期/时间，time标签可能会作为一个来判断网页文字源，也就是能够通过time标签来识别哪篇文章是原创的。&/li&&li&&audio&定义音频 &br&&/li&&li&&video&定义视频 &br&&/li&&/ol&这两个元素区域中间的文字信息将会让搜索引擎读懂视频和音频。据说很多国外社交网站都开始试用HTML5，就是因为搜索引擎可以更好识别社交网站更多出现的音视频。
&br&&br&另外目前搜索引擎可能还不能很好支持的HTML5，毕竟现在还没有更好的推广和运用。但我相信这是未来的趋势。
&br&&b&这里另外再推荐两篇文章：&/b&
&br& 姜东栋：HTML5中SEO可以用那些代码来做优化：&a href=&/Blog/HTML5-SEO/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&/Blog/HTML5-SE&/span&&span class=&invisible&&O/&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a& &br&HTML5与搜索引擎优化：&a href=&/reed/398.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/reed/398&/span&&span class=&invisible&&.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&
&br&&br& 都一点了，南哥你还邀请了好多题，难度都不小。我这几天会好好琢磨，并完成的。也很感谢知乎这个平台，让我重新学习了一遍。
感谢南哥的邀请，不过说实在的，我对HTML5还真不是很了解。于是特地的去补习了下。 上面几位已经说的很好了，我把我看过的一些文章整理下。举百家之长补充下。 我把HTML5代码都看了下，新增了不少新元素，整理了下，这些标签应该对SEO还是比较有影响的，适…
来自子话题：
平台已经上线，地址为 &a href=&http://www.maka.im/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&maka.im/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&，欢迎各位朋友体验并提出意见。&br&上线四天2w＋用户注册，超乎我们的预期。&br&关于功能，我们会分批次加进去，最近一次更新会在十一之前，加入一些动态模板、背景音乐以及数据统计的同能，敬请期待。&br&&br&平台是免费的，主要定位是为个人及中小企业提供创建展示型的信息的在线工具。&br&我们针对企业活动邀请、报名、签到以及CRM有另外一款产品MAKA Event，已经上线2个月，积累了很多品牌客户，这方面是收费的服务。详可参见 &a href=&/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&MAKA Event 会议解决方案 活动解决方案 微信邀请函 二维码签到 Social CRM&i class=&icon-external&&&/i&&/a&&br&&br&非常欢迎各位给我们产品建议or吐槽，我们将不断完善。&br&－－－－－－－－－－－－－－－－－－－－－－－－&br&&br&&br&&br&作为一个远离社交网络的小团队，居然在知乎上看到有人推荐我们，感到很意外，非常感谢 &a data-hash=&8e15c804f271fa61279d57& href=&/people/8e15c804f271fa61279d57& class=&member_mention& data-editable=&true& data-title=&@AlwenLu& data-tip=&p$b$8e15c804f271fa61279d57&&@AlwenLu&/a& 对我们的关注。&br&MAKA是我们去年10月份立项的，最初的创意来源于 Lumia系列手机的滑动解锁效果，我们致力于搭建一个人人都可以在几分钟内创建这样精美邀请函的平台。这个项目一直没有做过传播，今年3月份一个邀请函demo被某朋友（我到现在都不知道是哪位NB朋友）转发引起了很多关注，后台统计1个月时间被点击了200W＋次。我们本计划5月上线推广的平台一直因为服务一些品牌客户的原因拖到了现在。&br&&br&之后很多机构在模仿，这个在我们意料之中，也证明这种形式深得大家认可。背景什么的我就不过多介绍了，直接介绍一下我们现在的进展吧。&br&&br&我们近期刚刚上线了针对会议的解决方案，命名为MAKA Event，网站 &a href=&& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&/&i class=&icon-external&&&/i&&/a& ，除了邀请函之外还有 报名、二维码签到、CRM以及调查问卷等功能。这个产品主要是和一些品牌客户合作，我们也没有做太多的传播。&br&&br&MAKA平台 预览版网页 &a href=&http://test.maka.im& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&http://test.maka.im/&i class=&icon-external&&&/i&&/a& ，这个是我们全身心投入的项目，计划9月上旬正式上线，我们正在琢磨怎么传播，也希望各位多给建议，非常感谢！&br&&br&PS：&a href=&http://grameenvision.org& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GrameenVision&i class=&icon-external&&&/i&&/a& 是我们在去年5月份创建的一个为公益机构策划大众筹款、政策倡导和社会教育的机构，两个机构，一套人马。虽然主要精力在MAKA上面，我们在过去半年里也与中国罕见病发展中心、亚洲动物基金会和英国救助儿童会等公益机构合作了挺多有趣的项目，给个链接参考下 &a href=&http://2014.hanjianbing.org& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&国际罕见病日&i class=&icon-external&&&/i&&/a& 。
平台已经上线，地址为 ，欢迎各位朋友体验并提出意见。上线四天2w＋用户注册，超乎我们的预期。关于功能，我们会分批次加进去，最近一次更新会在十一之前，加入一些动态模板、背景音乐以及数据统计的同能，敬请期待。平台是免费的，主…
来自子话题：
先说说什么是视差。&br&&blockquote&视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。&/blockquote&一般把网页解剖为：背景层、内容层和悬浮层(贴图层)。&br&当滚动鼠标滚轮的时候，各图层以不同速度移动，形成视差的效果。这就是时差滚动的大致原理。&br&&br&原理是这样，但落实到技术细节上时，实现的方法却各种各样。&br&我个人大致归纳了一下：&br&1、以 “页面滚动条” 作为 “视差动画进度条” 的；&br&2、以 “滚轮刻度” 当作 “动画帧度” 去播放动画的（或者直接称为“隐藏进度条”）；&br&3、鉴听mousewheel事件，事件被触发即播放动画，实现“翻页”效果；&br&&br&下面的回答，均以上述1类的实现方式为基准。&br&为什么是1类呢？因为它很直观，和我们日常接触到的视频播放器是一样的：&br&&img src=&/9abbebb9cb4e26ff108b_b.jpg& data-rawwidth=&903& data-rawheight=&502& class=&origin_image zh-lightbox-thumb& width=&903& data-original=&/9abbebb9cb4e26ff108b_r.jpg&&（&b&页面滚动条&/b& 等同于 &b&播放器进度条&/b&）&br&&br&&br&&br&下面，以&a href=&http://everylastdrop.co.uk/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Every Last Drop&i class=&icon-external&&&/i&&/a&这个页面做为分析对象，去回答题主的问题。&br&&blockquote&做滚动网页的时候，是怎么实现页面的翻页？&/blockquote&首先，根据页面动画所需的分镜，去等比划分进度条。&br&例如：共有11个分镜，则分镜大致可以划分为：0%、10%、20%、30% .... 100%&br&&br&但需要注意的是，整个滚动过程实际分为两个部分：&b&分镜切换&/b& 和 &b&分镜动画&/b&。&br&我们要预先划分好他们的比例，如：每一个分镜，2%的进度用于分镜切换，7%的进度用于分镜动画。&br&则进度大致可以划分为：&br&------------------------------------------&br&
0%(初始，分镜1)&br&
(消耗2%用于切换分镜)&br&
2%(完全进入分镜2）&br&
(消耗8%用于分镜动画的播放)&br&
10%(分镜2动画播放完毕)&br&
(消耗2%用于切换分镜)&br&
12%(完全进入分镜3）&br&
...（略）&br&------------------------------------------&br&按照上面的划分，当进度条滚动到10%的时候，就要开始进行分镜2到分镜3的切换，也就是所谓的翻页。当滚动到12%时，翻页结束。其他分镜如此类推。&br&（如果题主想问的是技术实现细节，估计要失望了！）&br&&br&&br&&blockquote&在做时间轴的时候，一般都要调用别人的js库。那么这个滚动页面，是不是也有一个js库？&br&&/blockquote&随便在google搜一下，就搜到很多关于视差滚动插件的文章：&a href=&/source/10-best-Parallax-Scrolling-plugin.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&10个优秀视差滚动插件&i class=&icon-external&&&/i&&/a&&br&这里补充一点：做视差滚动页面绝对是体力活。&br&本着我为人人的分享精神，还是推荐一个我觉得好用凑合好用的时差滚动库:&br&Jarallax(&a href=&/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Welcome &i class=&icon-external&&&/i&&/a&)&br&设计思路清晰，API设计也很直观。依赖于jQuery1.7的版本，再高的版本就不支持了哦！&br&另外，作者貌似已经没有维护了...&br&&br&&br&&blockquote&滚动时每层不同滚动速率的实现原理是什么？&/blockquote&初中物理：单位时间相同，位移距离不同，速度也不同。&br&&br&&br&&blockquote&如何让滚动更加平滑？&/blockquote&这个问题就太大了，能重新开一个问题了。&br&这边我就简单回答一下吧（不细谈前端技术层面的优化，如：DOM数量、页面渲染优化这些）。&br&开头处，我提到的三种实现分类，实际上是这样一个情况：&br&&img src=&/459f3c10f44a86a01b1ce_b.jpg& data-rawwidth=&505& data-rawheight=&451& class=&origin_image zh-lightbox-thumb& width=&505& data-original=&/459f3c10f44a86a01b1ce_r.jpg&&1类是最自由的，用户甚至可以直接调整进度条，实现“快进”。&br&在这种设计下，用户鼠标滚轮的最小刻度，就是动画的一帧。因为不同浏览器之间，鼠标滚轮的最小刻度是不一样的。这就导致了，在不同浏览器之间，页面滚动过程中，动画播放的帧率是有差异的。如果遇到奇葩浏览器，鼠标滚动的最小刻度很大，动画甚至会出现“掉帧”的情况。&br&解决方法很简单，一般采取增加页面长度的方式，来稀释鼠标滚轮的最小刻度。&br&但还是会有一些情况出现，如户快拖动进度条时，“掉帧”的情况难免还是会出现。&br&&br&3类的实现，滚轮只是动画的触发按钮。当用户滚动了一下鼠标，之前设计好的动画就开始播放。当播放结束后，对滚动事件的监听，才会重新被激活。这种设计，弱化了交互，但提供了更优质的动画展现。因为动画的播放时间和帧率不是用户控制的，是事先代码所设定好的。&br&&br&2类就不说了，介乎与1和3之间。&br&&br&简单的说，鱼(流畅)与熊掌(操控性)不可得兼。&br&&br&&br&以上&br&&br&PS：码字真的很累！&br&(╯-_-)╯ ~╩╩
先说说什么是视差。视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。一般把网页解剖为：背景层、内容层和悬浮层(贴图层)。当滚动鼠标滚轮的时候，各图层以不同速度移动，形成视差的效果。这就是…
Canvas是使用JavaScript程序绘图(动态生成)，SVG是使用XML文档描述来绘图。&br&
从这点来看：SVG更适合用来做动态交互，而且SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。&br&
同时SVG是基于矢量的，所有它能够很好的处理图形大小的改变。Canvas是基于位图的图像，它不能够改变大小，只能缩放显示；所以说Canvas更适合用来实现类似于Flash能做的事情(当然现在Canvas与Flash相比还有一些不够完善的地方)。&br&
关于最后一点二者谁更有前途：从上面我们可以知道二者是有不同用途的，作为一个开发者，你应该做的是理解应用程序的具体需求并选择正确的技术来实现它。
Canvas是使用JavaScript程序绘图(动态生成)，SVG是使用XML文档描述来绘图。 从这点来看：SVG更适合用来做动态交互，而且SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。 同时SVG是基于矢量的，所有它能够很好的处理图形大小的改变。Canvas是基于…
来自子话题：
给你个中文的版本 &a href=&/bootstrap/docs/base-css.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/b&/span&&span class=&invisible&&ootstrap/docs/base-css.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&
给你个中文的版本
首先，HTML/CSS都在不断发展进化，是难说“学完”的，更别说还没开始“练习”了。
&br&学开发必须学习与实践相结合。如果给自己设定一个目标，比如你说的写一个网站，可以更好地逼迫自己学习。开始可以由功能需求出发完成一些小的功能，了解这些技术如何相互协作的机制，对整个体系先有个粗略的理解。之后再进行一些权威知识的补充，比如阅读相关的技术规范以或是类似那几本权威指南的书，提高知识的完备性并且改正自己开发中的不良习惯。
&br&然后就是一个不断实践学习的积累过程，这个过程是永恒的。有不懂的东西尽量查英文的权威资料，一些好的技术博客的内容也会很有帮助，善用搜索，最后再推荐一个很棒的网站 &a href=&& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&，上面经常会有一些问题的最佳实践。
&br&说到底，这些东西不是可以先“学完”理论知识再开始实践的。不必拘泥于什么先后顺序。
首先，HTML/CSS都在不断发展进化，是难说“学完”的，更别说还没开始“练习”了。 学开发必须学习与实践相结合。如果给自己设定一个目标，比如你说的写一个网站，可以更好地逼迫自己学习。开始可以由功能需求出发完成一些小的功能，了解这些技术如何相互协…
前端开发工程师和网页重构工程师，都是做页面的，都是在要把页面的表现展现在用户眼前，目的一样，而走的路线不一样，条条道路捅罗马……&br&&br&似乎在很多人眼中认为，重构工程师要做的仅仅就是切图、写HTML、写CSS，其他什么都不会。不过事实上有绝大部分的人好像是这样，但这并不代表重构工程师的作用很低。其实每一位重构工程师，如果不是想混日子，不是在滥竽充数的，他们就不会一直在做简单的切图、写CSS之类的工作，而是会用更多的心思去思考问题，让后面的开发工作变得简单容易。&br&&br&前端开发和重构这两份工作相辅相成，分工的细化，可以让人变得更专，更精。其实重构这份工作不简单，比如给你一个页面的PSD后，拿到这个页面时要考虑哪些图片怎么优化、怎么合并；样式文件怎么编写；结构怎么处理会便于开发的工作以及后期的扩展性；诸如此类的问题，在页面制作的过程会想得比较多。&br&&br&个人比较认同的是，前端开发和网页重构是同一工种，但分工不同的工作。一定要将他们区分开来的话，那么应该就是平时所写的代码侧重点不一样，前端开发偏向JS或者AS，网页重构偏向CSS。&br&&br&前端开发和网页重构所“精通”的方向不同，但所了解的技术点都是差不多的，都懂得一点点的PHP或者其他语言，JS、AS、CSS什么的也都知道些，只是深入研究的方向不同。&br&&br&写到这里，我突然想到一个职位，叫“美工”，其实这个职位是万能的，什么东西都要做，尤其是在一些小公司或者建站类型的网络公司。万能的人不太可能精通所有的东西。精通的东西有一两样就已经非常吃香了。&br&而很多大公司里分工明细化，估计也就是为了在这个职位的人能发挥他所具有的能力。&br&&br&PS：记得淘宝好像都叫前端开发工程师，但是好像他们那边也有侧重于写CSS的人。&br&&br&--------------------( # ▽ # )---------------------------------&br&好像第一次在zhihu写这么多东西，而且也都是废话比较多，望见谅……
前端开发工程师和网页重构工程师，都是做页面的，都是在要把页面的表现展现在用户眼前，目的一样，而走的路线不一样，条条道路捅罗马……似乎在很多人眼中认为，重构工程师要做的仅仅就是切图、写HTML、写CSS，其他什么都不会。不过事实上有绝大部分的人好…
一张简明易懂的介绍图：&a href=&http://aiku.me/bar/a9ki& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5 是什么东西？&i class=&icon-external&&&/i&&/a&
一张简明易懂的介绍图：
来自子话题：
团队习惯&br&&br&- 是连字符，从语义上，感觉更符合 css 中 class 的命名含义（组合式）
团队习惯- 是连字符，从语义上，感觉更符合 css 中 class 的命名含义（组合式）
来自子话题：
这是一个错误的设计，因为没有搜索的话基本不可用。
这是一个错误的设计，因为没有搜索的话基本不可用。
来自子话题：
&b&PS：不会是直接判断文字编码吧。。。&br&&/b&&br&没错，就是这样。&br&&br&实际上一开始在开发的时候确实去读charset的，但是有太多的网站不标准了：&ul&&li&没有相应的信息&/li&&li&标注的编码与实际编码不一致&/li&&li&HTTP Header和网页中meta charset标注的编码不一致&/li&&/ul&&br&遇到这种情况，让人恼火。于是不再理会这些信息，直接用chardet库判断网页的编码。&br&chardet大部分时候是准的，有时候会把utf8认成iso－8859-2之类的，但是confidence很低，于是再做一些hack，就能应付绝大部分的网页了。
PS：不会是直接判断文字编码吧。。。没错，就是这样。实际上一开始在开发的时候确实去读charset的，但是有太多的网站不标准了：没有相应的信息标注的编码与实际编码不一致HTTP Header和网页中meta charset标注的编码不一致遇到这种情况，让人恼火。于是不再…
&ul&&li&我觉得js从诞生起就不应该作为一种被保护的代码，因此你才会看到大量的js库都以&b&开源&/b&方式发布，需要保护的代码是服务端的代码（防止你不想要的漏洞挖掘行为）和服务器的安全。&/li&&li&举个不恰当的例子，优秀的JS代码之于盗取代码的人而言就像名画之于临摹画作的人，你需要做的是把画做好就行，别人临摹反而是对你“画作”的一种肯定。因此，防止别人盗取要做的不是把画给抹掉，而是用法律武器（如果你想非开源并保护你代码版权的话）。&/li&&li&而虚拟机的话，js执行的宿主环境浏览器本来就可以看做一个虚拟机，除非把js弄成编译型语言，否则并无法做到源代码直接查看，但是这又会丧失了js本身优秀的动态特性&/li&&li&同样作为编译型语言的C# java等依然可以反编译出非常易读的代码（例如C#的反编译工具reflector），就算是C语言在编译后也可以反汇编为汇编代码，只要你有恒心，任何逆向工程都是可以的。因此，只要代码是在本地执行的，那就不存在绝对的代码保护。&/li&&li&js现有的保护机制主要为混淆合并等，但是更多这种工具（例如closure compiler）的初衷是用于减小js体积而不是用于混淆代码，而某些混淆加密工具反而会增大js体积，这在实践中是不可取的。&/li&&/ul&
我觉得js从诞生起就不应该作为一种被保护的代码，因此你才会看到大量的js库都以开源方式发布，需要保护的代码是服务端的代码（防止你不想要的漏洞挖掘行为）和服务器的安全。举个不恰当的例子，优秀的JS代码之于盗取代码的人而言就像名画之于临摹画作的人，…
&div class=&highlight&&&pre&&code class=&language-css&&&span class=&nt&&input&/span&&span class=&o&&:&/span&&span class=&nd&&:input-placeholder&/span& &span class=&p&&{&/span& &span class=&k&&text-align&/span&&span class=&o&&:&/span& &span class=&k&&center&/span& &span class=&p&&}&/span&
&/code&&/pre&&/div&
input::input-placeholder { text-align: center }
来自子话题：
「发此帖的目的更多是让我们的那些设计师反省一下」（问题评论）——提问者大概以为知乎的用户们能帮他免费开批斗大会。&br&问题补充说明里的测试图片和那些话没有任何价值，基本全是错的，思路混乱不堪。希望大家不要被那些内容误导。&br&&br&* * *&br&&br&匆忙地简要说一些：&br&&br&首先，这个话题太大了。我先排除一些方面：&ul&&li&Web font 在西文世界已经很成熟了，所以西文世界其实没有什么字体限制了。不过我们在这里可以只讨论系统自带字体。&br&&/li&&li&既然提问者其实想知道的是中西文混排时的西文字体选择，那么，从操作系统自带中文字体的现状来看，恐怕还是无衬线字体更主流一些，我们把衬线字体暂时排除。&/li&&li&对于正文字体，风格太夸张的不必考虑。&/li&&li&中文字体只考虑简中。&/li&&li&排除 Linux 等非主流桌面操作系统的情况。暂且排除移动操作系统的情况。&br&&/li&&li&基本排除大字号标题的情况，只讨论正文（大多是 11 至 16 px，其中以 12、13、14 px 最为常见）。&/li&&/ul&&br&那么，西文字体只用这几个可用：&ul&&li&Windows：Verdana、Tahoma、Arial 以及 Segoe UI（Vista 或更高版本）；&br&&/li&&li&OS X：Verdana、Tahoma、Arial、Lucida Grande、Helvetica (Neue)、PT Sans（10.7 或更高版本）。&br&&/li&&/ul&中文字体这有这几个可用：&ul&&li&Windows：中易宋体（即 SimSun）、微软雅黑；&br&&/li&&li&OS X：华文黑体、冬青黑体简体中文。&br&&/li&&/ul&&br&一些观点：&ul&&li&Verdana 是 Windows 上正文字号显示效果最好的西文字体。在 OS X 里效果也不错。&br&&/li&&li&Tahoma 实际上基本是 Verdana 的紧凑版本，很丑。它对网页正文来说太紧了。基本没有什么场合需要舍弃 Verdana 而去用它。&br&&/li&&li&Lucida Grande 的特性类似 Verdana，都是在小字号时很不错的字体。&br&&/li&&li&Arial 和 Helvetica (Neue) 分别是 Windows 和 OS X 这两个平台上最中庸的西文字体。毫无性格，但也不会添乱，很安全。它们在正文字号时的清晰度稍逊于 Verdana 和 Lucida Grande，但也不错。&br&&/li&&li&如果要兼顾稍大字号时的效果，Verdana 和 Lucida Grande 就不太好了，它们在大字号时很傻。大字号时 Arial 在 OS X 上不如 Helvetica 美观，尤其不如 Helvetica Neue 美观。但这种针对 OS X 的字体优化恐怕一般项目里没有精力做。&br&&/li&&li&Segoe UI 和中文搭配起来太小，而微软雅黑的西文部分其实就是基于 Segoe UI 制作的，所以如果要在 Windows 上用 Segoe UI，不如直接用微软雅黑显示西文。Segoe UI 和微软雅黑的西文部分是 Frutiger/Myriad 风格的，应该说总体效果比 Verdana 更美观，但小字号表现并不更好。&/li&&li&PT Sans 的风格其实比较特殊，偶尔需要和冬青黑体简体中文混排时可以考虑。&/li&&li&所以 Arial 是最保险的字体。而且这已经是多年的共识了。&br&&/li&&li&如果你真要追求小字号时（比如 12 px）的清晰度，那么 Verdana 可能是最好的跨平台选择。&/li&&/ul&
「发此帖的目的更多是让我们的那些设计师反省一下」（问题评论）——提问者大概以为知乎的用户们能帮他免费开批斗大会。问题补充说明里的测试图片和那些话没有任何价值，基本全是错的，思路混乱不堪。希望大家不要被那些内容误导。* * *匆忙地简要说一些：…
来自子话题：
360浏览器说它怎么不好怎么流氓都行，但为了前端它可是做了一件良心事：自定义了一个meta标签，可以指定360浏览器默认使用webkit内核，这样浏览效果就跟Chrome差不多了，开发代码随心应手。&br&详见：&a href=&/v6/help/meta.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&360安全浏览器&i class=&icon-external&&&/i&&/a&&br&反正我现在所有的网站都会写上&br&&div class=&highlight&&&pre&&code class=&language-text&&&meta name=&renderer& content=&webkit&&
&/code&&/pre&&/div&
360浏览器说它怎么不好怎么流氓都行，但为了前端它可是做了一件良心事：自定义了一个meta标签，可以指定360浏览器默认使用webkit内核，这样浏览效果就跟Chrome差不多了，开发代码随心应手。详见：反正我现在所有的网站都会写上&meta name="ren…
来自子话题：
&ol&&li&拿到图会先审一下,把图对应的场景里会出现的所有业务功能的需求都过一下,看是不是图里都有体现,有不明确或遗漏了的地方找UI一一核实.&br&&/li&&li&然后确认不同屏幕宽度下,界面的各个地方是什么样子&/li&&li&最后确认在某部分数据缺失、异常、过多、过少的情况下是什么个展示&br&&/li&&li&最最后确认下所有页面间的跳转关系、哪些地方可以过来，点去哪里，哪些地方是个各界面都一样的&/li&&/ol&&br&以上所有都确定完并了然于胸之后，就可以开工了。以上如果真正做好了，就相当于整个项目就已经完成了一半了。真不是危言耸听，很多时候前端工程师开发中都会遇到需求变更、界面改版啥的，都是因为前期做之前没有把所有风险都处理完，导致问题后期暴露，改版、延期、加班、身心疲惫，最后一堆烂代码、烂交互仓促上线。&br&&br&跑完题回来，终于可以开工了，先看所有页面间的关系，找出各个（界面css/交互逻辑js）一样的地方做成共用的,看看文件目录怎么规划下,想想之后上线时要怎么部署.&br&&br&开始做单个页面了的时候,先写好整个界面的布局,这儿是上下结构,那儿是左右结构,里边再是什么结构的,不用写具体的内容,先把所有块的box写好&br&&br&然后就是枯燥地往box里填空了,写的时候记得时常注意下,这个地方的代码是该写在box里,还是页面里,还是大模块里,还是整个项目里,就好了.....
拿到图会先审一下,把图对应的场景里会出现的所有业务功能的需求都过一下,看是不是图里都有体现,有不明确或遗漏了的地方找UI一一核实.然后确认不同屏幕宽度下,界面的各个地方是什么样子最后确认在某部分数据缺失、异常、过多、过少的情况下是什么个展示最最…
来自子话题：
首先肯定的回答你，当然是有需求的。h5技术最大的优点即为灵活性高，开发成本相对于native app要低很多。&br&所以目前来说h5主流的应用场景大体可以分为三部分吧：&br&1.活动推广：&br&主要针对一些实效性比较高的事件去做营销推广，例如什么突发事件或微信中传播的那些杂七杂八的抽奖页等等。由于开发速度很快且页面实效性高，所以用h5去实现那真可谓是“多快好省”了。&br&&br&2.产品体验式服务：&br&一般一个内容为王的产品理论上都会有对应的h5产品，它准确来说算是app渠道的一种，存在的目的就是为app去导安装量。先为用户提供体验式的服务或内容，如果想深度使用，请安装客户端。相对于app硬推广，这个方法不仅转化率高而且费用也少很多。&br&所以目前多数大公司的h5 pm都背着三个kpi：安装量、唤起app使用量、自身产品服务指标。我们做h5产品设计时，其实恨不得所有地方都贴上app导量的banner。考虑功能逻辑是否巧妙？别傻了！&br&&br&3.混合native app&br&这个不细说了，就是混合开发啦，用着native app的框架，内容页使用h5技术。使整个产品综合了native的稳定同时又发挥出了h5的灵活性，可以实时更新内容。例如淘宝呀，微信，每日头条呀，都有这么干。举个例子吧：淘宝如果要做个什么促销活动，如果采用native，可能需要等下一版迭代才能满足？人家分分钟几千万呢好吧，如果用webview那就妥妥的了。不过web于native融合在一起响应速度貌似会变慢，不过我也没有验证过。&br&&br&睡觉去了～
首先肯定的回答你，当然是有需求的。h5技术最大的优点即为灵活性高，开发成本相对于native app要低很多。所以目前来说h5主流的应用场景大体可以分为三部分吧：1.活动推广：主要针对一些实效性比较高的事件去做营销推广，例如什么突发事件或微信中传播的那些…
来自子话题：
是故意的，为了减少请求数，加快载入速度。
是故意的，为了减少请求数，加快载入速度。
来自子话题：
1）HTML5 有很多很棒很符合当今用户需求的新 tag，而在中国的网络环境中，要想使用这些 tag，就必须要同时针对旧版浏览器进行 graceful degradation。&br&&br&2）HTML5 有一些 extension 的提案，或正在测试阶段，比如 srcset 就是一个非常棒的解决 responsive image 的 attribute，而 caniuse 指出目前只有 chrome 和 opera 才有支持。&br&&br&HTML5 里有很多很棒的东西可以学，它为网页设计提供了更多的可能。然而在中国，仍然有超过五分之一的用于上网的电脑使用 IE6（&a href=&http://www.modern.ie/en-us/ie6countdown#list& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&modern.ie/en-us/ie6coun&/span&&span class=&invisible&&tdown#list&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a& 话说我对这个数字怀疑很久了……），同时还有很大部分人仍在使用 IE7 和 IE8，面对这些浏览器，必须要花时间进行全面的 graceful degradation，有时候就需要放弃一些效果，达到「能用就行」的程度。&br&&br&所以，劝不要学 HTML5 并不是没有道理——可能暂时还用不上，还会分散注意力。&br&&br&但长远看的话，学一学是非常有好处的。
1）HTML5 有很多很棒很符合当今用户需求的新 tag，而在中国的网络环境中，要想使用这些 tag，就必须要同时针对旧版浏览器进行 graceful degradation。2）HTML5 有一些 extension 的提案，或正在测试阶段，比如 srcset 就是一个非常棒的解决 responsive imag…
来自子话题：
HTML5 很多新的元素容易产生误解，其中有一部分原因是因为有些元素本身有歧义，所表达的语义在规范中也是在不断修正的。&br&&br&&nav&并不是指视觉上的导航栏，而是表示带有&b&导航性质的内容&/b&，准确的说：&br&&br&&blockquote&&nav&元素表示一个包含多个链接的区域，这些链接指向其他页面或本页面的其他部分。&br&&/blockquote&&br&&b&需要注意以下几点：&/b&&br&&ul&&li&并不是所有的链接都要放到 nav 元素里面，该元素内应包含用于构成主要导航区块的部分。举个反例，通常页脚有链接列表链接到网站的其他页面，比如：服务、首页、版权页。这种情况下，仅仅用 footer 元素就够了，没必要使用 nav 元素。&/li&&li&如果nav 元素里面的内容描述的是一个项目列表，&b&那就应该用列表标记（ol,ul等）&/b&帮助理解（增强语义）和导航。&/li&&li&用户代理（如屏幕阅读器）可以通过该元素来确定页面上哪些内容可以直接跳过或者按要求提供选择。&br&&/li&&/ul&所以通常一个页面导航可以这样写：&br&&div class=&highlight&&&pre&&code class=&language-cfm&&&span class=&nt&&&nav&&/span&
&span class=&nt&&&ul&&/span&
&span class=&nt&&&li&&a&/span& &span class=&na&&href=&/span&&span class=&s&&&index.html&&/span&&span class=&nt&&&&/span&Home&span class=&nt&&&/a&&/li&&/span&
&span class=&nt&&&li&&a&/span& &span class=&na&&href=&/span&&span class=&s&&&#about&&/span&&span class=&nt&&&&/span&About&span class=&nt&&&/a&&/li&&/span&
&span class=&nt&&&li&&a&/span& &span class=&na&&href=&/span&&span class=&s&&&#&&/span&&span class=&nt&&&&/span&Contact&span class=&nt&&&/a&&/li&&/span&
&span class=&nt&&&/ul&&/span&
&span class=&nt&&&/nav&&/span&
&/code&&/pre&&/div&&br&或者：&br&&div class=&highlight&&&pre&&code class=&language-html&&&span class=&nt&&&div&/span& &span class=&na&&id=&/span&&span class=&s&&&nav&&/span&&span class=&nt&&&&/span&
&span class=&nt&&&ul&&/span&
&span class=&nt&&&li&&a&/span& &span class=&na&&href=&/span&&span class=&s&&&index.html&&/span&&span class=&nt&&&&/span&Home&span class=&nt&&&/a&&/li&&/span&
&span class=&nt&&&li&&a&/span& &span class=&na&&href=&/span&&span class=&s&&&#about&&/span&&span class=&nt&&&&/span&About&span class=&nt&&&/a&&/li&&/span&
&span class=&nt&&&li&&a&/span& &span class=&na&&href=&/span&&span class=&s&&&#&&/span&&span class=&nt&&&&/span&Contact&span class=&nt&&&/a&&/li&&/span&
&span class=&nt&&&/ul&&/span&
&span class=&nt&&&/div&&/span&
&/code&&/pre&&/div&&br&&br&nav 元素还可以用在以下场景：&br&&br&&ul&&li&目录&/li&&li&上一页，下一页按钮，或者分页&/li&&li&面包屑导航&/li&&/ul&&br&规范地址：&a href=&http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&4.3 Sections&i class=&icon-external&&&/i&&/a&&br&&br&还可以参考：&a href=&/question/& class=&internal&&做导航栏为什么用ul&li，而不用dd dt dl?&/a&
HTML5 很多新的元素容易产生误解，其中有一部分原因是因为有些元素本身有歧义，所表达的语义在规范中也是在不断修正的。&nav&并不是指视觉上的导航栏，而是表示带有导航性质的内容，准确的说：&nav&元素表示一个包含多个链接的区域，这些链接指向其他页面或…
来知乎，参与讨论