html 标签
<html dir="ltr" lang="zh-CN" xmlns:wb="http://open.weibo.com/wb" class=" js rgba borderradius boxshadow textshadow opacity cssanimations cssgradients csstransitions fontface generatedcontent video audio js">
dir属性：规定元素内容的文本方向。
lang：规定元素内容的语言。
xmlns:xx：其中xx指代某个玩意儿，然后上面的标签又有xmlns:wb="http://open.weibo.com/wb"这个玩意，然后上网查到了这个：
原来这个是为了微博关注的功能呀。
然后再源码中又看到了这个：
但是好像没有follow-button这个按钮，总之这个是搞清楚了。
关于这个class的，肯定是和浏览器有关，在这里我找到了答案：
<!DOCTYPE html>
<html dir="ltr" lang="en-US" class="no-js">
<head>
<meta charset="utf-8">
其实，这个 no-js 是配合 Modernizr 一起使用的类名（class）
Modernizr 是一个 javascript 库，检查你的游览器是否支持 CSS3 或者 HTML5 的特性而自动添加一些类名（class）到 <html> 并 替换掉原来的 .no-js（简单来说，Modernizr 就是一个CSS3/HTML5 的测试器，你需要测试什么，这可以到它的官方网站配置，选择自己需要测试的元素）。
还有让你的游览器支持 HTML5 中的新的标签，例如：<nav>, <header>, <footer> 和 <figure>
Modernizr 官方网站：http://modernizr.com/
关于Moderniz 的具体使用方法和解释，请参照大神的文章：
http://blog.justwd.net/2012/02/about-no-js/
head
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的viewport来对页面进行缩放，并固定不允许用户再重新缩放。
在看viewport的具体用法之前，我们先搞清楚几个概念。
layout viewport：是网页的所有内容，他可以全部或者部分展示给用户。
visual viewport：visual viewport 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。
<!-- Favicon & Mobileicon --> <link rel="shortcut icon" href="http://www.importnew.com/wp-content/uploads/2014/12/d02a42d9cb3dec9320e5f550278911c7.ico"> <link rel="apple-touch-icon" href="http://www.importnew.com/wp-content/themes/jobbolev4blog/mobileicon.png">
这个是网站的icon，
<!-- RSS, Atom & Pingbacks --> <link rel="alternate" title="ImportNew RSS Feed" href="http://www.importnew.com/feed"> <link rel="alternate" title="RSS .92" href="http://www.importnew.com/feed/rss"> <link rel="alternate" title="Atom 0.3" href="http://www.importnew.com/feed/atom"> <link rel="pingback" href="http://www.importnew.com/xmlrpc.php">
WordPress中的link元素
1) RSS地址和Pingback地址
下面是WordPress默认主题对RSS2地址，Atom地址和Pingback地址的定义。具体原理俺觉得很深奥很复杂，就不研究了。反正你的 博客需要它，Atom好像不要也可以？
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed"
href="http://xzl52199.blog.163.com/blog/<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="http://xzl52199.blog.163.com/blog/<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="http://xzl52199.blog.163.com/blog/<?php bloginfo('pingback_url'); ?>" />
2) 用于远程发布的link元素
如果你的主题中有<?php wp_head(); ?>这个函数，下面这两个link元素就会出现:
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" />
<link rel='stylesheet' id='lightboxStyle-css' href='http://www.importnew.com/wp-content/plugins/lightbox-plus/css/shadowed/colorbox.css?ver=2.0.2' type='text/css' media='screen' /> <link rel='stylesheet' id='core3.0-css' href='http://www.importnew.com/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0' type='text/css' media='all' /> <link rel='stylesheet' id='core-Default3.0-css' href='http://www.importnew.com/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter3/styles/shCoreDefault.css?ver=3.0' type='text/css' media='all' /> <link rel='stylesheet' id='theme-Default3.0-css' href='http://www.importnew.com/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css?ver=3.0' type='text/css' media='all' />
ColorBox是一款功能强大的轻量级jQuery Lightbox插件。ColorBox支持图片展示、图片分组、幻灯片、行内样式和iframe内容。该lightbox插件的兼容性极好，可以兼容IE7+的IE浏览器。
syntaxhighlight是语法高亮的
<script type='text/javascript' src='http://www.importnew.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script> <script type='text/javascript' src='http://www.importnew.com/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=4.0.6'></script> <script type='text/javascript' src='http://www.importnew.com/wp-content/themes/jobbolev4blog/_assets/js/modernizr.js?ver=2.5.3'></script> <script type='text/javascript' src='http://www.importnew.com/wp-includes/js/comment-reply.js?ver=3.4.2'></script>
jquery就不用说了
Q2W3 Fixed Widget 顾名思义就是用来设定边栏悬浮固定小工具的WordPress插件。该插件比较值得称赞的一点是，启用后，就会给每一个小工具添加了一个“Fixed widget”的选项，勾选后，该小工具就可以悬浮固定哦！
modernizr这个js，在国外的主题里面很多地方都看到，就只记得是为HTML补充的，有点类似与responsive.js一样。今天搜索到这篇文章，深入的讲解了modernizr.js是为检测浏览器的css3和HTML5的属性而生，从而通过CSS来解决兼容性问题。
comment-reply.js这个js好像是wordpress里面的
1 <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.importnew.com/xmlrpc.php?rsd" /> 2 <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.importnew.com/wp-includes/wlwmanifest.xml" /> 3 <link rel='prev' title='微博发布' href='http://www.importnew.com/weibo' /> 4 <link rel='next' title='所有文章' href='http://www.importnew.com/all-posts' />
html里的link标签
link标签是网页头部head中的元素，在html语言中，link标签是单独出现的，并且可以被多次使用，该元素的用途是与外部文件建立链接，例如我们打开“搜狐门户网”的首页查看源代码：
在一个html文件中，link标签还包含许多其它属性，其中最常见的是使用link元素链接外部的CSS样式表，语法如下：
link type="text/css" rel="stylesheet" href="style.css" /
- link标签需要用一个反斜杠结束，这样才符合W3C标准，上述语法用html语言解释为：
- link type="定义当前文本内容以层叠样式表（CSS）来解析"
- rel="定义当前文档与被链接文档之间的关系，这里是调用外部文件，stylesheet即代表css样式表。"
- href="定义被链接文档的位置，这里链接所指向的是：同一目录下名为style.css的文件。"
除了以上案例，link标签中还包含着许多其它属性，我们通过下面的介绍来逐一认识link标签里所包含的属性都有哪些吧！
HTML语言中的 link href 是什么意思？
link 是链接外部文件所使用的一个标签，href 属性是用于指定目标的路径，它表示引入的外部文件，指向的文件地址，一般用于调用外部的CSS，Js文件等；所有主流浏览器都支持 href属性。link href 有两种链接URL的方式：
A、 绝对路径：非常明确的指向目标地址，常用于指向另一个网站，写法（link href="http://链接另一个网站的文件地址"）
B、 相对路径：方便于网站内部某些文件之间的移放，用于站内的写法（link href="/指向站内的文件地址"）
link标签的属性
- charset属性 ：规定了被链接文档的字符编码方式。该属性不被 HTML5 支持。
- hreflang属性：规定被链接文档的语言，如：hreflang="zh" 代表是个中文网站，hreflang="en" 代表英文网站。
- href属性：定义资源的链接 URL。内容为一个绝对URL链接或者是相对URL。
- type属性：指定所连接文档的MIME类型，css的MIME是type/css,一般使用type="text/css"。
- media属性：媒体类型，设定被链接文档将显示在什么设备上。
属性值（media：screen,tty,tv,projection,handheld,print,braille,aural,all）
- rel属性 ：规定链接类型,指当前文档与被链接文档之间的关系。link还可以用Shortcut Icon等。
属性值（Alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection）
- rev属性 ： 指定被链接文档与当前文档之间的关系。该属性不被 HTML5 支持。
属性值（Alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection）
以上为 HTML4.01 的某些属性，在新的 HTML5 标准中，link标签里的可选属性 charset，rev 已不再被支持，新增的属性有 sizes、crossorign。
sizes属性：heightxwidth,any 设定被链接资源的尺寸。仅适用于 rel="icon"。
crossorigin属性：规定是否使用 CORS（CrossOrigin Resources Sharing）跨源资源共享，获取相关图像。
本文主要介绍了html中，link标签的属性及使用，在接下来的几篇教程中，将详细讲述link标签中不同属性的作用。
1 <!-- All in One SEO Pack 1.6.15.2 by Michael Torbert of Semper Fi Web Design[465,472] --> 2 <meta name="description" content="ImportNew 是一个专注于 Java & Android 技术分享的博客，为Java 和 Android开发者提供有价值的内容。包括：Android开发与快讯、Java Web开发和其他的Java技术相关的分享。" /> 3 <link rel="canonical" href="http://www.importnew.com/" /> 4 <!-- /all in one seo pack -->
注意这里的rel属性的canonical值
1 <!-- Comment Rating plugin Version: 2.9.32 by Bob King, http://wealthynetizen.com/, dynamic comment voting & styling. --> 2 <style type="text/css" media="screen"> 3 .ckrating_highly_rated {background-color:#FFFFCC !important;} 4 .ckrating_poorly_rated {opacity:0.6;filter:alpha(opacity=60) !important;} 5 .ckrating_hotly_debated {background-color:#FFF0F5 !important;} 6 </style>
1 <!-- WP SyntaxHighlighter Ver.1.7.3 CSS for code Begin --> 2 <style type="text/css"> 3 .syntaxhighlighter, 4 .syntaxhighlighter a, 5 .syntaxhighlighter div, 6 .syntaxhighlighter code, 7 .syntaxhighlighter table, 8 .syntaxhighlighter table td, 9 .syntaxhighlighter table tr, 10 .syntaxhighlighter table tbody, 11 .syntaxhighlighter table thead, 12 .syntaxhighlighter table caption, 13 .syntaxhighlighter textarea { 14 font-size: 12px !important; /* Set the font size in pixels */ 15 font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; /* Set the font type */ 16 } 17 18 .syntaxhighlighter table caption { 19 /* For Title(Caption) */ 20 font-size: 14px !important; /* Set the font size in pixels */ 21 font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; /* Set the font type */ 22 } 23 .syntaxhighlighter.nogutter td.code .line { 24 /* Set the left padding space when no-gutter in ver. 3.0 */ 25 padding-left: 3px !important; 26 } 27 .syntaxhighlighter { 28 /* For Chrome/Safari(WebKit) */ 29 /* Hide the superfluous vertical scrollbar in ver. 3.0 */ 30 overflow-y: hidden !important; 31 padding: 1px !important; 32 } 33 .widget-area.syntaxhighlighter a, 34 .widget-area.syntaxhighlighter div, 35 .widget-area.syntaxhighlighter code, 36 .widget-area.syntaxhighlighter table, 37 .widget-area.syntaxhighlighter table td, 38 .widget-area.syntaxhighlighter table tr, 39 .widget-area.syntaxhighlighter table tbody, 40 .widget-area.syntaxhighlighter table thead, 41 .widget-area.syntaxhighlighter table caption, 42 .widget-area.syntaxhighlighter textarea { 43 /* For Widget */ 44 font-size: 14px !important; /* Set the font size in pixels */ 45 font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; /* Set the font type */ 46 } 47 .widget-area table caption { 48 /* For Widget */ 49 /* For Title(Caption) */ 50 font-size: 10px !important; /* Set the font size in pixels */ 51 font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; /* Set the font type */ 52 } 53 </style> 54 <!-- WP SyntaxHighlighter Ver.1.7.3 CSS for code End -->
这个应该是代码语法高亮的插件了。
1 <!-- CSS --> 2 <link rel="stylesheet" href="./ImportNew - 专注Java & Android 技术分享_files/style.css" media="screen"> 3 <!-- link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noticia+Text:400,700italic,700,400italic" media="screen" / --> 4 <style> 5 *::selection { background: #0099cc; } 6 *::-moz-selection { background: #0099cc; } 7 body { background: #ffffff } 8 a, .tabs ul.nav li a:hover, .tabs ul.nav li.active a, .dropcap, .toggle.hover .toggle-title, li.comment cite a:hover, h3.widget-title, .post-meta .meta-title:hover, .the-latest a:hover h4, .aw_socialcounter_widget li a:hover, .aw_tabbed_widget #tab-latest-comments a:hover { color: #0099cc; } 9 a:hover { color: #b30000; } 10 input:focus, textarea:focus { border-color: #0099cc; } 11 #searchsubmit, .highlight, .aw_tabbed_widget .tabs ul.nav li.active a, footer .aw_tabbed_widget .tabs ul.nav li.active a, #top .aw_tabbed_widget .tabs ul.nav li.active a, .aw_tabbed_widget .tabs ul.nav li a:hover, footer .aw_tabbed_widget .tabs ul.nav li a:hover, #top .aw_tabbed_widget .tabs ul.nav li a:hover, .aw_twitter_widget .twitter-icon, .testimonial-icon, #top-closed:hover, .flex-control-nav a:hover, .flex-control-nav a.flex-active { background-color: #0099cc; } 12 .submit { background-color: #0099cc; border-color: #007399; } 13 .submit:hover { background-color: #b30000; border-color: #860000; } 14 #searchsubmit:hover { background-color: #b30000; } 15 .toggle.hover .toggle-icon { border-top-color: #0099cc; } 16 .toggle.hover.active .toggle-icon { border-bottom-color: #0099cc; } 17 .flex-direction-nav li .flex-prev:hover { border-right-color: #0099cc; } 18 .flex-direction-nav li .flex-next:hover { border-left-color: #0099cc; } 19 @media only screen and (min-width: 768px) and (max-width: 959px) { 20 .aw_tabbed_widget .tabs ul.nav li a:hover, .tabs ul.nav li.active a { color: #0099cc; } 21 } 22 @media screen and (max-width: 767px) { 23 .tabs ul.nav li a:hover, .tabs ul.nav li.active a { color: #0099cc; } 24 } 25 </style>
然后上面的是css样式了还是挺多的。
终于把header分析完了，好像也没有用啥框架，就引入了比较多的插件。
布局分析
先不看css了，css是调样式、布局用的，这里先分析下html的标签，因为比较简单，最后去分析屏幕自适应的实现吧。
1 <!-- BEGIN #top-nav --> 2 <nav id="top-nav" class="menu-nav"> 3 <!-- BEGIN .container --> 4 <div class="container"> 5 <div class="grid-12"></div> 6 <div class="clear"></div> 7 </div> 8 <!-- END .container --> 9 </nav> 10 <!-- END #top-nav –>
hi 我告诉你没有区别，html5的这几个标签都是收集了网上数百万网站上出现概率比较多的部分确定的，比如网站80%都会有页脚
以前大家的做法会有如下：
<div class="foot"></div>
<div class="footer"></div>
<div class="page-footer"></div>
...
有了html5岂不是更简单了么
语义对于视觉上来看网页的人来说可能意义不大，但对于看不见视觉的人来说意义重大，比如搜索引擎，比如盲人，现在的搜索引擎搜索结果太不准确了，可能就是因为页面的语义做的不够好，比如写在正文和写在页脚的同一段文字对于用户来说页脚的可能没有用处，但是搜索引擎可能无法区分，这大概就是语义的一点用处吧
但是这个nav标签中啥也没有啊，哦不，有两个空的div标签
container是大小
1 /* -- 2.1 960 < x -- */ 2 body { min-width: 960px; background: #ddd; color: #333; position: relative; } 3 .container { display: block; width: 960px; margin: 0 auto; } 4 .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { display: block; margin: 0 10px; float: left; } 5 .grid-1 { width: 60px; } 6 .grid-2 { width: 140px; } 7 .grid-3 { width: 220px; } 8 .grid-4 { width: 300px; } 9 .grid-5 { width: 380px; } 10 .grid-6 { width: 460px; } 11 .grid-7 { width: 540px; } 12 .grid-8 { width: 620px; } 13 .grid-9 { width: 700px; } 14 .grid-10 { width: 780px; } 15 .grid-11 { width: 860px; } 16 .grid-12 { width: 940px; } 17 .container .container { margin-left: -10px; } 18 .container .grid-1 .container { width: 80px; } 19 .container .grid-2 .container { width: 160px; } 20 .container .grid-3 .container { width: 240px; } 21 .container .grid-4 .container { width: 320px; } 22 .container .grid-5 .container { width: 400px; } 23 .container .grid-6 .container { width: 480px; } 24 .container .grid-7 .container { width: 560px; } 25 .container .grid-8 .container { width: 640px; } 26 .container .grid-9 .container { width: 720px; } 27 .container .grid-10 .container { width: 800px; } 28 .container .grid-11 .container { width: 880px; } 29 .container .grid-12 .container { width: 960px; }
终于成功copy一个，对于我这种不会前端的用下别人的css和网站架构会被骂么。。。。。
样式啥的先不分析，从js入手吧，毕竟是用js来控制dom的
扫一扫
728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
