后台程序员看前端想死

时间 2019-11-26

原文原文链接

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属性：规定元素内容的文本方向。javascript

lang：规定元素内容的语言。php

xmlns:xx：其中xx指代某个玩意儿，而后上面的标签又有xmlns:wb="http://open.weibo.com/wb"这个玩意，而后上网查到了这个：css

原来这个是为了微博关注的功能呀。html

而后再源码中又看到了这个：前端

可是好像没有follow-button这个按钮，总之这个是搞清楚了。html5

关于这个class的，确定是和浏览器有关，在这里我找到了答案：java

<!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/jquery

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，由于手机屏幕的分辨率已经愈来愈高，高像素可是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。css3

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就能够看作是设备的独立像素，因此经过devicePixelRatio，咱们能够知道该设备上一个css像素表明多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素至关于2个物理像素。可是要注意的是，devicePixelRatio在不一样的浏览器中还存在些许的兼容性问题，因此咱们如今还并不能彻底信赖这个东西。api

还有一个因素也会引发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 &amp; 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 &amp; 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的