後臺程序員看前端想死

時間 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; }