整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Web基礎知識 、 HTML快速入門

          1272208556@qq.com

          1、HTML + CSS + UI

          2、Javascript

          3、HTML5CORE + AJAX + Jquery

          4、Bootstrap,Angular JS + 其他框架

          1、HTML + CSS3BASIC + PRO + UI + PRO + CSS3CORE + PRO

          ======================================================

          1、Internet

          1、什么是Internet

          是全球性計算機互聯網絡,是由若干終端(PC,移動端)以及特殊的傳輸介質而組成的一個網絡結構

          PC:Personal Computer

          2、提供的服務

          信息共享

          Telnet : 遠程連接

          Email : 電子郵件

          WWW : 萬維網 www.baidu.com

          BBS : 電子公告板 ,論壇

          FTP : 上傳和下載服務

          3、實現技術

          1、分組交換原理:數據通過數據包進行傳遞,到達目的地后,對數據包進行重組

          2、TCP/IP 協議簇

          2、WEB

          1、什么是WEB

          就是 WWW(World Wide Web)

          w3c : www consortium 萬維網聯盟

          2、能干什么

          能夠將各類的信息和服務進行連接,提供圖形用戶界面

          信息:文字、圖片、音頻、視頻

          服務:Telnet, FTP , Mail , HTTP ...

          3、萬維網就是無數的文檔集合(網頁文檔),文檔會駐留在世界(互聯網)的任何一個角落

          3、WEB的工作原理

          WEB是基于Internet的多媒體信息服務系統

          1、基于 瀏覽器 / 服務器 模式

          B / S : Browser / Server

          在服務器上,主要以網頁的形式發布多媒體信息

          2、由WEB服務器、瀏覽器、通信協議組成

          3、WEB 相關技術

          1、服務器端技術(后臺)

          PHP,JSP,ASP 。。。 。。。

          2、客戶端技術(前端技術)

          HTML,

          CSS,

          Javascript

          =========================================================

          1、HTML 入門

          1、什么是HTML

          HTML(Hyper Text Markup Language),超級文本標記語言

          超文本:

          a

          標記 : 超文本都是由標記組成的

          <a>

          語言 : 包含自己獨特的語法

          HTML最終由瀏覽器負責解釋

          HTML總可以嵌入一些腳本語言編寫的程序段:Javascript,VBScript

          2、HTML版本

          超級文本標記語言(第一版)

          HTML2.0

          HTML3.2

          HTML4.0

          HTML4.01

          XHTML1.0

          HTML5

          3、標簽(標記)

          1、標簽語法

          1、必須使用尖括號擴起來

          <a>,<div> ...

          <A>,<a>

          2、有封閉類型的標簽,也有非封閉類型的標簽

          1、封閉類型

          也稱作雙標記,則必須成對出現

          <標記>文本內容</標記>

          不同的標記,決定了"文本內容"的不同表現形式

          eg:<a></a>,<p></p>,<div></div>

          2、非封閉類型

          也稱作單標記、空標記

          <標記>

          或者

          <標記/>

          eg:

          <hr>,<br>,<img>

          3、元素

          標記就是元素,元素也稱為標記

          4、元素嵌套(標簽嵌套)

          標簽之間相互嵌套,形成復雜的語法結構

          <body>

          <p>

          <a></a>

          </p>

          </body>

          5、屬性

          屬性是出現在開始標記中的內容,作用是修飾元素

          <p 屬性名="屬性值"></p>

          <p 屬性名='屬性值'></p>

          <p 屬性名=屬性值></p>

          標準屬性:每個元素都會具備的通用屬性

          id : 定義每個標簽的唯一標識

          title:提示文本

          class:樣式相關,類樣式

          style:樣式相關,行內樣式

          操作1:定義一對p標簽,id屬性設置為program

          <p id="program"></p>

          多屬性:

          <p 屬性1="值" 屬性2="值"></p>

          注意:多屬性之間,排名不分先后

          2、創建HTML文檔

          開發工具:任何一個文字編輯軟件都可以開發HTML

          EditPlus : 超級記事本

          運行環境:任何一個瀏覽器都能運行HTML

          Google Chrome,Mozilla Firefox,Microsoft IE,Safari,Opera

          超文本文件(HTML文檔):

          是一個以.html或.htm結尾的文檔

          3、文檔結構

          1、文檔類型聲明

          聲明使用的html版本和風格

          <!doctype html>

          2、html頁面

          1、文檔根元素

          每個文檔有且僅有一對根元素 , html

          2、在根元素的內部,包含兩對子元素

          1、head : 頁面的頭部內容

          定義頁面全局信息

          包含:

          <title></title> : 網頁標題

          <meta />:聲明元數據(編碼,關鍵字,描述)

          <style></style>:聲明內部樣式表

          <link />:引入外部樣式表

          <script></script>:定義或引入腳本文件

          2、body : 頁面的主體內容

          任何一個標簽,都可能會出現在body中

          3、head元素

          1、聲明網頁標題

          <title></title>

          2、定義網頁文本編碼格式

          默認:ISO-8859-1,只支持英文以及英文狀態下的標點符號

          utf-8:支持中英文,標點符號

          <meta charset="utf-8" />

          3、... ...

          4、body元素

          屬性:

          text : 文本的顏色

          bgcolor : 背景顏色

          練習1:

          1、為body添加兩個屬性,text,bgcolor

          2、文本顏色 : 紅色(red)

          背景顏色 : 銀色(silver)

          3、在body中隨意寫上一段文本,觀察頁面顯示效果

          5、文本標記

          1、特殊的文本

          轉義字符:

          空格:&nbsp;

          < : &lt; less than

          > : &gt; greater than

          版權標識:&copy;

          2、文本標記

          1、文本樣式

          <b>...</b> : 加粗文本

          <i>...</i> : 斜體文本

          <u>...</u> : 下劃線

          <s>...</s> : 刪除線

          <sup>...</sup> : 上標

          <sub>...</sub> : 下標

          2、標題元素

          1-6級6個標題

          <hn></hn> n:1-6

          一級最大

          六級最小

          3、段落元素

          提供了結構化文本的表現方式

          語法:<p></p>

          注意:

          1、每對p標簽單獨成一個段落

          2、段落與其他元素有垂直空白,段落間距

          常用屬性:

          align : 水平對齊方式

          取值:left center right

          4、換行元素

          在代碼的任何位置處,實現回車的效果

          <br />

          5、水平線

          又叫分割線

          <hr />

          屬性:

          1、size : 水平線的粗細,通常以像素(px)為單位

          2、width: 寬度

          3、align: 水平線的水平對齊方式

          4、color: 顏色

          6、分區元素

          目的:為元素進行分組,多數用在布局中

          塊分區元素:<div></div> 層

          行內分區元素:<span></span>

          注意:

          div :主要用在布局上

          span:修改其內部內容的樣式

          7、預格式化

          保留源文檔中的空格和回車

          <pre>

          文本內容

          </pre>

          3、注釋

          可以寫在html源碼中,但不被瀏覽器解釋的文本

          語法:

          <!-- 注釋內容 -->

          4、行內元素與塊級元素

          塊級元素:默認情況下,塊級元素獨占一行,元素的前后都會自動換行 div,hn,hr,p

          塊級元素作用:布局

          行內元素:默認情況,多個元素位于同一行,不會換行

          span,文本標記... ...

          行內元素作用:修改內部內容的樣式

          .昨日回顧

          表單

          主要功能:收集客戶的信息。

          表單的開發分兩個部分:前臺靜態頁面制作、后臺PHP程序來處理。

          <form name= “form1”action=“register.php”method=“GET” enctype=“application/x-www-form-urlencoded”>

          用戶名:<input type=“text”name=“username” />

          密碼:<input type=“password” name=“userpwd” />

          <input type=“submit” value=“提交表單” />

          </form>

          Method提交方式

          POST方法:提交大量數據、相對安全些、可以提交多樣化的格式數據,提交的數據用戶不可見。

          GET方法:提交少量數據,安全性比較低、數據的格式比較單一,提交的數據顯示在地址欄

          Username=itcast

          Userpwd=itcast

          http://www.itcast.cn/register.php?username=itcast&userpwd=itcast

          enctype:有兩個值:普通的表單數據編碼application/x-www-form-urlencoded”

          上傳文件時,數據編碼multipart/form-data

          框架

          在框架定義頁面,不能包含<body>及其子標記。<body>和<frameset>只能使用其中一個。

          一個框架由框架集(frameset)和框架頁(frame)構成。

          <frameset>標記:定義框架的類型、大小、位置,主要定義框架的結構。

          <frame>標記:指定窗口的默認頁面、是否可以改變大小、是否出現滾動條。

          <frameset rows=“64,*”frameborder=“0”border=“0”>

          <frame src=“topFrame.html”noresize=“noresize”scrolling=“no”name=“topFrame” />

          <frameset cols=“182,*”frameborder=“0”border=“0”>

          <frame src=“leftFrame.html”noresize=“noresize”scrolling=“auto” />

          <frame src=“mainFrame.html”name=“mainFrame” />

          </frameset>

          </frameset>

          <noframes></noframes>標記

          含義:當瀏覽器不支持框架時,顯示的提示信息。

          <iframe></iframe>浮動框架

          <iframe>是<body>有標記,相當于在一個普通網頁中,開了一個小窗口,小窗口中可以引入一個普通的網頁。

          <iframe src=“文件URL”width=“寬度”height=“高度”scrolling=“”align=“對齊”></iframe>

          2.網頁標準

          一個網頁由三個部分構成:結構、表現、行為。對應的標準也有三個,分別為XHTML、CSS、JS

          3.CSS基礎

          CSS,Cascading Style Sheets層疊樣式表,“級聯樣式表”、“樣式表”。用戶可以自己定義HTML元素的樣式外觀。

          CSS樣式表由多個CSS樣式規則構成;

          一個CSS樣式規則,由選擇器和樣式格式聲明語句構成,比如:選擇器body或h1

          選擇器就是指給不同的HTML元素指定樣式的一個名稱;

          格式聲明語句,必須放在{}中;

          一個格式聲明語句,由“屬性名:屬性值”形式構成;比如:color:#FF000

          每一條格式聲明語句,必須以分號(;)結束;

          CSS屬性值,不需要加引號;

          CSS的數值屬性值,一般都要加單位px;比如:div{width:500px;}

          CSS中不區分大小寫,建議一般都用小寫。

          <style type="text/css">

          body{margin:0px;padding:0px;}

          h1{color:#FF0000;}

          </style>

          4.CSS選擇器

          一、基本選擇器

          (1)通用選擇器:將匹配所有的HTML元素,舉例:*{margin:0px;padding:0px;}

          注意:*在IE6不支持、門戶網站會增加客戶端負擔

          (2)標簽選擇器:所有的HTML標記,都可以做為CSS的選擇器,它們是一一對應的關系

          舉例:h1{color:#FF0000;}

          (3)類選擇器:給一類HTML元素定義樣式。每個HTML元素都有一個class的屬性,在CSS中class的寫法,是以“.”開頭。

          CSS樣式寫法:.news{color:#FF0000;}

          HTML元素:

          <div class=“news”></div>

          <p class=“news”></p>

          <h1 class=“news”></h1>

          提示:類樣式可以給任何HTML元素增加,只需要在HTML標記,增加一個class的屬性即可。

          (4)ID選擇器,也就是說:每一個HTML元素,都有id屬性,在CSS中id選擇器的寫法,是以“#”開頭。

          CSS樣式的寫法:#title{color:#FF0000;}

          HTML元素:<span id=“title”></span>

          提示:ID樣式只能給某一個HTML元素增加樣式,不能是多個同名ID。ID相當于身份證號,具有唯一性。

          5.二、組合選擇器

          (1)多元素選擇器(E,F,G,H):同時匹配E\F\G\H元素。并列關系

          舉例:body,h1,p,a{margin:0px;padding:0px;}

          (2)后代元素選擇器(E F):將匹配E元素下的所有F元素。(后代關系

          舉例:div.news div.title{font-size:24px;}

          說明:div.news表示,class=news的<div>元素

          Div#news表示id=news的<div>元素

          沒有清除margin和padding之前的效果

          去除margin和padding的效果

          (3)子元素選擇器(E > F):將匹配E元素下的子元素F。(父子關系

          舉例:.news>h2{color:#FF0000;font-size:24px;font-family:黑體;}

          三、偽類選擇器:主要是給鏈接的不同狀態加樣式

          一個鏈接有四種狀態:正常狀態、鼠標放上狀態、激活狀態(時間太短)、訪問過的狀態

          正常狀態:a:link{color:#0000FF;text-decoration:none;}

          放上狀態:a:hover{}

          激活狀態:a:active{}

          訪問過的狀態:a:visited{color:#0000ff;text-decoration:none;}

          全局鏈接樣式設置

          平常使用時,請將a:link和a:visited寫一致的樣式。

          a:link,a:visited{color:#0000FF;text-decoration:none;}

          a:hover{color:#FF0000;text-decoration:underline;}

          自定義鏈接樣式,也就是增加類樣式

          <a class=“a1” href=“#”>網首首頁</a>

          a.a1:link,a.a1:visited{color:#FF0000;}

          a.a1:hover{color:#0000FF;}

          6.CSS尺寸屬性

          Width:設置元素的寬度;

          Height:設置元素的高度;

          7.CSS字體/文本屬性

          font-size:設置元素的文本大小,默認單位px。比如:font-size:24px;

          color:設置元素的文本顏色;

          font-family:設置元素的文本字體;比如:font-family:宋體,楷體,黑體;

          注意:如果是英文字體,并且英文字體由多個單詞構成,請使用引號引起來

          Font-family:"Times New Roman",Georgia,Serif;

          font-weight:加粗;比如:font-weight:bold;

          font-style:斜體;比如:font-style:italic;

          text-align:水平對齊,取值:left、center、right

          line-height:設置行高,取值:固定值或百分比。比如:line-height:150%、line-height:24px;

          text-indent:首行縮進,比如:text-indent:24px;

          letter-spacing:字符間距;

          word-spacing:單詞之間的距離

          text-decoration:文本修飾線,取值:underline(下劃線)、overline(上劃線)、line-through(刪除線)、none(無)

          8.CSS列表屬性

          List-style-type:設置列表前的符號,取值:none、disc、circle、square

          List-style-position:設置符號的位置,取值:inside(內)、outside(外)

          List-style-image:設置圖片項目符號,舉例:list-style-image:url(images/li01.gif);

          簡寫的形式:list-style:disc inside; //將上面三項的值分別寫入,中間用空格隔開

          實現一個<div>中的單行文本上下居中,需要設置兩個屬性:

          div{ height:30px; line-height:30px; }

          9.HTML文件引入CSS的方法

          (1)通過<style></style>來書寫CSS代碼 嵌入式

          <style>標記可以放到任何地方,一般放在<head>標記中。

          <style>標記中寫的CSS代碼,只能對當前網頁起作用。

          格式:

          <style type=“text/css”>

          body{margin:0px;padding:0px;}

          </style>

          (2)通過<link>標記引入外部的CSS文件(.css) 鏈入式

          格式:<link href=“css/public.css” rel=“stylesheet” type=“text/css” />

          屬性:

          Href:指定外部CSS文件的路徑;

          Rel:指定外部CSS文件與當前網頁的關系,取值:stylesheet

          Type:指定引入的文件類型,取值:text/css

          說明:這種方式,可以實現多個網頁共享同一個CSS文件。

          (3)每個HTML元素都有一個style屬性,通過該屬性設置“行內樣式

          格式:<div style=“color:#FF0000;font-size:24px;”></div>

          總結:HTML元素的公共屬性有哪些? name idstyle、titleclass

          10.CSS的繼承性和優先級

          1CSS繼承性

          HTML中,內層元素將繼承外層元素的樣式;多個外層元素的樣式,最終疊加到內層元素上。

          如果里面元素的CSS屬性與外層元素的CSS屬性相同時,將替換外層的CSS屬性。

          以下CSS屬性具有繼承性:

          • 文本相關的屬性是繼承的

          • text-align、color、text-indent、font-family、font-size

          • font-style、font-weight、 letter-spacing、word-spacing

          • text-transform、line-height

          2、CSS優先級

          1)單個選擇器的優先器

          !important > 行內樣式 > ID選擇器 > 類選擇 > 標簽選擇器

          注意:!important兼容性不太好,在IE6下不支持,盡量少用。

          h1{color:#FF0000!important;}

          2)組合選擇器的優先級

          當多個選擇器組合在一起時,如何判斷其優先級?我們平常這么做,假設:標簽的優先為1、類選擇器優先級為10、ID選擇器的優先級為100,行內樣式的優先級為1000。

          .news h1{} 優先級值為11

          .title 優先級值為10

          div.news h1{color:#FF0000;} 優先級為12

          #title{color:#009900;} 優先級為100

          TML配置

          • 文件應以“”首行頂格開始,推薦使用“”。
          • 必須申明文檔的編碼charset,并且使用UTF-8編碼。
          • 移動端必須使用 viewport 適配
          • 頁面title是極為重要的不可缺少的一項。

          以下是一個標準的html結構

          html復制代碼<!DOCTYPE html>
          <html>
            <head>
              <!-- 必須聲明 utf-8 編碼格式 -->
              <meta charset="utf-8">
              <!-- 頁面標題不能為空 -->
              <title>京東商城:商家后臺</title>
              <!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
              <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
               
              <!-- 樣式文件 以外鏈形式在此處引入 -->
              <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
            </head>
            <body>
              <!-- 頁面主體 -->
              <div class="warp">
                <header>頂部內容區域,比如:菜單頭</header>
                <div class="content">主內容區域</div>
                <footer>頂部頁尾區域,比如:備案號</footer>
              </div>
               
              <!-- js文件 在此處引入 -->
              <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
            </body>
          </html>
          

          主框架(jQuery,vue,react,angular等) 避免混合使用

          避免多個框架混合使用,在同一個工程里面要保持主框架的一致性,多框架同時使用會造成代碼混亂,后期會變得越來越難維護。

          Css開發規范

          1、全局樣式禁止使用!important

          2、避免使用導入式引入css樣式文件;

          css復制代碼<style type="text/css">
            @import url(./demo.css);
          </style>
          

          未使用的js/css禁止引用

          歷史頁面會有一些功能下線,在去除頁面初始化的js語句的同時,也要將依賴的js文件刪除,避免資源加載浪費

          文件必須使用gzip壓縮

          開啟Gzip壓縮功能, 可以使網站的css、js 、xml、html 文件在傳輸時進行壓縮,提高訪問速度

          api接口中,無用字段占傳輸比例30%以上時,刪除無用字段

          在開發過程中,發現無用字段占傳輸比例30%以上時,請進行返回數據的刪減,加快數據請求速度

          關于圖片壓縮

          上傳圖片之前一定要做圖片的無損壓縮,節省網絡流量,推薦網站tinypng

          HTML的標準結構

          html復制代碼<!DOCTYPE html>
          <html>
            <head>
              <!-- 必須聲明 utf-8 編碼格式 -->
              <meta charset="utf-8">
              <!-- keywords 關鍵詞 和 Description 頁面描述 便于搜索引擎檢索,不強制使用 -->
              <meta name="Keywords" Content=”關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4″>
              <meta name="Description" Content=”頁面描述″>
              <!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
              <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
              <!-- 推薦手動引入指定路徑 favicon  -->
              <link rel="shortcut icon" href="path/to/favicon.ico">
              <!-- 樣式文件必須以外鏈形式在此處引入 -->
              <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
              <!-- 內聯樣式 -->
              <style type="text/css">
                .warp {
                  margin: 0;
                  padding: 0;
                }
              </style> -->
              <!-- 頁面標題不能為空 -->
              <title>頁面標題</title>
            </head>
            <body>
            <!-- 頁面主體 -->
              <div class="warp">
              <header>頂部內容區域,比如:菜單頭</header>
              <div class="content">主內容區域</div>
              <footer>頂部頁尾區域,比如:備案號</footer>
              </div>
           
              <!-- JavaScript 文件在此處引入 -->
              <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
            </body>
          </html>
          
          • 不同模塊區域可使用簡要備注標識模塊內容
          • HTML 標簽語義化使結構清晰,比如:
          • CSS 外鏈引入必須放在 中
          • JS 外鏈引入必須放在中
          • 省略圖像、媒體文件、樣式表和腳本等嵌入式資源 URL 協議頭部聲明 ( http:// , https:// ),用//代替。
          • favicon 在未指定 favicon 時,大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問,避免404,必須遵循以下兩種方法之一:1。在 Web Server 根目錄放置 favicon.ico 文件,2。使用 link 指定 favicon

          HTML標簽使用守則

          標簽小寫

          原生 HTML 標簽元素小寫使用,自定義組件使用小駝峰命名(自定義標簽避免和原生標簽同名)

          html復制代碼<!-- 錯誤 ? -->
          <DIV></DIV>
          <SPAN></SPAN>  
           
          <!-- 正確 ? -->
          <div></div>  
          <p></p> 
           
          <!-- 自定義組件 -->
          <shareDialog><shareDialog/>
          

          套用規則

          禁止在行內元素中嵌套塊級元素??

          html復制代碼<!-- 錯誤的嵌套 ? -->
          <span><div></div></span>  
          <i><p></p></i>     
           
          <!-- 正確的嵌套 ? -->
          <div><span></span></div>  
          <p><i></i></p>   
          

          更多標簽使用規則介紹請查看尾部附錄

          屬性定義

          定義屬性賦值時,使用雙引號,禁止單雙引號混用

          html復制代碼<!-- 錯誤的定義 ? -->
          <input id="formTitle" type='text' placeholder="請輸入標題">   
           
          <!-- 正確的定義 ? -->
          <input id="formTitle" type="text" placeholder="請輸入標題" data="formTitle">   
          

          正確閉合

          除自閉合標簽外,所有標簽都需正確的編寫閉合標簽

          常用自閉合標簽: <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />

          ID、Class 命名使用規范

          ID 和 Class 取通用且有意義的名字;

          使用連字符 - 作為 ID、Class 名稱界定符 ,不要駝峰命名法和下劃線;

          避免選擇器嵌套層級過多,盡量少于 3 級;

          使用命名空間防止命名沖突,利于維護;

          css復制代碼/* 不推薦: 無意義 不易理解 */
          #yee-1901 {}
          #meunBtn {}
          .login_input {}
           
          /* 推薦: 明確詳細 */
          #gallery {}
          #login {}
          .login-input {}
          .meun-btn {}
          
          • 避免選擇器和 Class、ID 疊加使用
          • 聲明順序,相關屬性應為一組,建議遵循: 定位布局屬性 -> 盒模型屬性 -> 文本屬性 -> 視覺屬性 -> 其他屬性
          • 對于 JS 操作相關選擇器 前面需加上 特殊應用標識前綴
          css復制代碼/* 標準的聲明順序 */
          .declaration-order {
            /* 布局屬性 */
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
           
            /* 盒模型屬性 */
            display: block;
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 1px solid #e5e5e5;
            border-radius: 3px;
            margin: 10px;
            float: right;
            overflow: hidden;
           
            /* 文本屬性 */
            font: normal 13px "Helvetica Neue", sans-serif;
            line-height: 1.5;
            text-align: center;
           
            /* 視覺屬性 */
            background-color: #f5f5f5;
            color: #fff;
            opacity: .8;
           
            /* 其他屬性 */
            cursor: pointer;
          }
          

          圖片相關使用規范

          <img/>標簽守則

          • src 屬性不能為空,需添加默認值(托底圖片路徑)
          • 為重要圖片添加 alt 屬性,當無法顯示圖像時,瀏覽器將顯示替代文本,便于 SEO 及用戶閱讀
          • 為圖片標簽 增加 width 和 height 屬性,避免圖片加載從無到有,導致頁面抖動
          • 大量圖片流資源,使用懶加載技術按需加載
          html復制代碼<!-- 禁止 src 取值為空 -->
          <img src="" />
           
          <!-- 推薦 -->
          <img src="xxxx" alt="xxx" style="width:100px;height:100px;" />
          

          圖片資源守則

          大小

          尺寸 小于 50 ×?50 的請使用 字體圖標(iconfont)或者 將多個圖標合成一張大圖使用(雪碧圖) 尺寸大于 50 ×?50 的圖片,引入前先使用 在線壓縮 對其進行壓縮 ,圖片大小盡量控制在 300kb 以內

          倍率

          PC端、移動端 推薦使用 2倍圖 (@2x),避免設備分辨率過高,圖片顯示失真模糊 如有兼容 iPad 場景等特殊場景,可使用 3倍圖(@3x)

          html復制代碼<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>
          

          2倍圖: 圖片展示區域大小 : 圖片實際尺寸 = 1 :2

          無論使用幾倍圖,圖片大小都需遵守上條限制

          如遇圖片倍圖問題,可咨詢 @UI童鞋

          性能守則

          • 避免不必要的 DOM 操作瀏覽器遍歷 DOM 元素的代價是昂貴的。最簡單優化 DOM 樹查詢的方案是,當一個元素出現多次時,將它保存在一個變量中,來避免多次查詢 DOM 樹。
          js復制代碼/* 推薦用變量保存頻繁使用的 DOM 元素*/
          var ul = document.getElementsByTagName('ul')[0],
            lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
             
          /* 推薦用變量保存頻繁使用的 DOM 元素*/
          var ul = document.getElementsByTagName('ul')[0],
            lis = ul.getElementsByTagName('li')
          
          • 異步加載第三方內容 當你無法保證嵌入第三方內容 比如 埋點、調研等資源正常工作的時候,你需要考慮用異步加載這些代碼,避免阻塞整個頁面加載。
          • 減少標簽的數量 編寫 HTML 代碼時,盡量避免多余的標簽嵌套,避免 DOM樹的冗余
          • 控制靜態資源數量

          1個頁面中建議CSS文件不要超過3個(1個組件庫樣式文件、1個項目公共樣式、1個頁面樣式); JS文件不要超過5個(1個框架文件、1個組件庫文件、1個項目公共庫文件、1個頁面腳本文件、1個埋點文件)。

          編碼建議

          縮進使用 2個空格 樣式建議引入 CSS reset 重置各瀏覽器自帶樣式差異 github.com/necolas/nor… JS 中字符串定義 使用 '' 單引號

          其他建議

          保持一定的代碼潔癖,尤其在大型項目中

          • 代碼邏輯應當直截了當,清晰易讀,保持與業務邏輯與代碼一一對應關系,減少邏輯錯誤的可能性,降低二次開發成本;
          • 刪除過期無用代碼,減少代碼過大,造成不必要的維護成本
          • 代碼盡量復用,擁有組件化思想
          • 代碼命名合理化,即使不寫注釋情況下,也可以讓其他開發人員一眼明白意思
          • 性能調至最優,降低耦合度,避免別人做不合理的優化時而造成的混亂
          • 整潔的模塊邊界,明確的劃分模塊之間的邏輯邊界,盡量保證職責單一,避免功能交叉混雜
          • 讓代碼沒有改進的余地,在開發時把各種情況都想到了,如果有人企圖改進它,總是會回到原點

          性能檢測工具 - Lighthouse簡介 Lighthouse是一個Google開源的自動化工具,主要用于改進網絡應用的質量。Lighthouse會對各個測試項的結果打分,并給出優化建議,這些打分標準和優化建議可以視為Google的網頁最佳實踐。

          Chrome拓展程序 谷歌商店安裝lighthouse后,在右上角或者菜單里點擊圖中圖標,Options可以配置測試項目,點擊Generate report即可測試。

          命令行

          js復制代碼<!-- 安裝 lighthouse 組件(Node.js V5.0 或以上版本) -->
          npm install -g lighthouse
          <!-- 啟動測試 (測試過程中會自動打開 Chrome 完成后會在當前目錄生成一個靜態HTML文件) -->
          lighthouse https://www.baidu.com/ --view
          <!-- 幫助-->
          lighthouse --help
          

          檢測結果

          【附錄】常用的標簽規范

          標簽

          語義

          嵌套常見錯誤

          常用屬性

          <a></a>

          超鏈接/錨

          a不可嵌套a

          href,name,title,rel,target

          <div></div>

          塊級容器



          <p></p>

          段落

          不能嵌套塊級元素


          <span></span>

          內聯容器(行內元素)

          不可嵌套塊級容器


          <form></form>

          表單


          action,target,method,name

          <input />

          輸入框

          不可嵌套元素

          type,name,value,checked,disabled,maxlength,readonly,accesskey

          <textarea></textarea>

          多行文本輸入控件


          name,accesskey,disabled,readonly,rows,cols

          <img />

          圖像

          不可嵌套元素

          alt,src,width,height

          <label></label>

          標簽(常用input元素定義標注)

          不可嵌套塊級容器

          for

          <table></table>

          表格

          只可嵌套表格子元素

          width,align,background,cellpadding,cellspacing,summary,border

          <tbody></tbody>

          表格主體

          只能嵌套在table內


          <thead></thead>

          表頭

          只能嵌套在table內


          <tr></tr>

          表格行

          嵌套于table或thead、tbody、tfoot


          <td></td>

          表格中的單元格

          只用于tr

          colspan,rowspan

          <th></th>

          表格中的標題單元格

          只用于tr

          colspan,rowspan

          <tfoot></tfoot>

          表格表尾

          只用于table


          <button></button>

          按鈕

          不可嵌套表單、表格等塊級元素

          type,disabled

          <select></select>

          列表框或下拉框

          只能嵌套option或optgroup

          name,disabled,multiple

          <option></option>

          select中的一個選項

          只能嵌套在select內

          value,selected,disabled

          <ol></ol>

          有序列表

          只能嵌套li


          <ul></ul>

          無序列表

          只能嵌套li


          <li></li>

          無序列表項

          只能嵌套在 ul 或 ol 內


          <iframe></iframe>

          內嵌一個網頁


          frameborder,width,height,src,scrolling,name

          <br />

          換行



          <link />

          引用樣式或icon

          不可嵌套任何元素

          type,rel,href

          <meta />

          文檔信息

          只用于head內

          content,http-equiv,name

          <script></script>

          引用腳本

          不可嵌套任何元素

          type,src

          <style></style>

          引用樣式

          不可嵌套任何元素

          type,media

          <title></title>

          文檔標題

          只用于head內


          點贊收藏支持、手留余香、與有榮焉,動動你發財的小手喲,感謝各位大佬能留下您的足跡。


          作者:StriveToY
          鏈接:https://juejin.cn/post/7262378982255394873


          主站蜘蛛池模板: 国产主播福利一区二区| 东京热人妻无码一区二区av| 国产一区二区三区播放心情潘金莲| 国产一区二区在线观看| 日韩电影一区二区| 一区二区三区在线观看视频| 欧美日韩一区二区成人午夜电影| 国产精品熟女一区二区| 国产乱码伦精品一区二区三区麻豆| 综合一区自拍亚洲综合图区| 国产经典一区二区三区蜜芽| 性色A码一区二区三区天美传媒| 亚洲高清偷拍一区二区三区 | 国产99精品一区二区三区免费| 国产精品无码一区二区三区毛片| 国产精品视频一区二区三区经| 无码人妻精品一区二区三| 久久99精品国产一区二区三区| 中文乱码精品一区二区三区| 中文字幕一区二区视频| 国产成人一区二区三区在线| 国产精品成人国产乱一区| 国产成人高清视频一区二区 | 国产午夜福利精品一区二区三区 | 国产精品成人一区二区三区| 理论亚洲区美一区二区三区 | 蜜臀Av午夜一区二区三区| 91精品一区二区三区久久久久| 一区二区三区日韩| 亚洲综合av一区二区三区| 国产欧美一区二区精品仙草咪| 国产精品视频一区麻豆| 国产成人精品视频一区| 国产亚洲欧洲Aⅴ综合一区| 国产精品伦子一区二区三区 | 无码人妻久久一区二区三区免费丨| 亚洲日韩国产一区二区三区在线 | 一区二区三区在线播放| a级午夜毛片免费一区二区| 日韩一区二区在线观看视频| 日韩成人无码一区二区三区|