整合營銷服務商

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

          免費咨詢熱線:

          HTML 符號

          TML 符號實體

          HTML 符號是不呈現在標準的鍵盤上,比如數學運算符、箭頭符號、技術符號和形狀。

          如需向 HTML 頁面添加這些符號,您可以使用 HTML 實體名稱。

          如果不存在實體名稱,您可以使用實體編號。

          如果字符沒有實體名稱,您可以使用十進制(或十六進制)引用。

          實例

          <p>我將顯示 &euro;</p>

          <p>我將顯示 &#8364;</p>

          <p>我將顯示 &#x20AC;</p>

          結果如下:

          我將顯示 €

          我將顯示 €

          我將顯示 €


          HTML 支持的數學符號

          如果您使用的是一個 HTML 實體名稱或一個十六進制編號,字符總是能正確顯示。

          這是與您頁面使用的字符集相互獨立的!

          字符編號實體描述
          ?&#8704;&forall;所有(for all)
          ?&#8706;&part;部分(part)
          ?&#8707;&exist;存在(exists)
          ?&#8709;&empty;空(empty)
          ?&#8711;&nabla;倒三角(nabla)
          &#8712;&isin;屬于(isin)
          ?&#8713;&notin;不屬于(notin)
          ?&#8715;&ni;包含的成員(ni)
          &#8719;&prod;連乘(prod)
          &#8721;&sum;總和(sum)

          完整的數學(Math)參考手冊


          HTML 支持的希臘字母

          字符編號實體描述
          Α&#913;&Alpha;Alpha(中文注音:阿耳法)
          Β&#914;&Beta;Beta(中文注音:貝塔)
          Γ&#915;&Gamma;Gamma(中文注音:伽馬)
          Δ&#916;&Delta;Delta(中文注音:德耳塔)
          Ε&#917;&Epsilon;Epsilon(中文注音:艾普西隆)
          Ζ&#918;&Zeta;Zeta(中文注音:截塔)

          完整的希臘(Greek)參考手冊


          HTML 支持的其他實體

          字符編號實體描述
          ?&#169;&copy;版權所有(REGISTERED SIGN)
          ?&#174;&reg;注冊商標(REGISTERED SIGN)
          &#8364;&euro;歐元符號(EURO SIGN)
          ?&#8482;&trade;商標(trademark)
          &#8592;&larr;向左箭頭(LEFTWARDS ARROW)
          &#8593;&uarr;向上箭頭(UPWARDS ARROW)
          &#8594;&rarr;向右箭頭(RIGHTWARDS ARROW)
          &#8595;&darr;向下箭頭(DOWNWARDS ARROW)
          ?&#9824;&spades;黑桃(BLACK SPADE SUIT)
          ?&#9827;&clubs;黑梅花(BLACK CLUB SUIT)
          ?&#9829;&hearts;黑心(BLACK HEART SUIT)
          ?&#9830;&diams;黑方塊(BLACK DIAMOND SUIT)

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          tml如何選擇編碼,常見utf-8和gb2312編碼如何判斷選擇!

          一、首先了解目前國內中文網頁常用編碼是utf-8 還是gb2313。

          百度搜索 使用utf-8

          騰訊新聞 使用utf-8

          淘寶 使用utf-8

          亞馬遜 使用utf-8

          W3Cschool.cn 也使用utf-8

          支付寶 使用utf-8

          360搜索 使用utf-8

          小米官網 使用utf-8

          魅族官網 使用utf-8

          可見截止2017年05月02日這些名站,均使用utf-8編碼。

          二、了解常見html編碼utf-8和gb2312。

          1、utf-8

          UTF-8(8-bit Unicode Transformation Format)是一種針對Unicode的可變長度字符編碼,又稱萬國碼。由Ken Thompson于1992年創建。現在已經標準化為RFC 3629。UTF-8用1到4個字節編碼UNICODE字符。用在網頁上可以同一頁面顯示中文簡體繁體及其它語言(如日文,韓文)一般顯示簡體中文字、繁體中文字、英文、日文、韓文均支持。

          2、GB2312

          GB2312即信息交換用漢字編碼字符集。《信息交換用漢字編碼字符集》是由中國國家標準總局1980年發布,1981年5月1日開始實施的一套國家標準,標準號是GB 2312—1980。GB2312編碼適用于漢字處理、漢字通信等系統之間的信息交換,通行于中國大陸;新加坡等地也采用此編碼。中國大陸幾乎所有的中文系統和國際化的軟件都支持GB 2312。一般簡體中文的網站使用GB2312比較多。

          3、W3Cschool小結

          從文字支持上說utf-8比GB2312要多。一般企業站看情況自己選擇網頁編碼。

          三、如何選擇utf-8和gb2313編碼制作html

          單獨做html如果你是先div css做HTML,可以不用考慮編碼問題,及時制作好了HTML編碼要轉換也很簡單,只需要通過DW等軟件即可完成html編碼轉換。

          根據程序文件編碼定如果在開發DIV CSS時就知道了程序文件時哪種編碼。這個時候就要根據開發程序文件編碼確定編碼。如果程序文件和HTML編碼不同很容易照成Html亂碼(html中文亂碼)。如果不會程序開發卻使用開源程序比如dedecms 、帝國、phpcms 等網站系統時,開發HTML和使用開源程序編碼也要保持一致。

          總結:

          無論什么情況下開發DIV CSS使用HTML編碼要根據程序確定,如果無法確定要使用程序編碼,這個時候選擇常用gbk和utf編碼兩種均可,如果在開發HTML時知道程序文件使用什么HTML編碼,這個時候在開發DIV CSS時候就要與程序文件使用編碼保持一致,避免網頁亂碼問題。

          所以建議最好用UTF-8,國際通用。GB2312是國內用的,簡體中文。

          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无码一区二区乱子伦as | 日韩精品免费一区二区三区| 骚片AV蜜桃精品一区| 久夜色精品国产一区二区三区| 女同一区二区在线观看| AV鲁丝一区鲁丝二区鲁丝三区| 亚洲国产精品一区第二页 | 国产精品免费大片一区二区| 精品国产一区二区三区免费看| 亚洲熟妇成人精品一区| 亚洲日本一区二区三区在线| 区三区激情福利综合中文字幕在线一区| 国模无码一区二区三区| 极品少妇一区二区三区四区| 亚洲熟妇无码一区二区三区导航| 亚洲一区二区影视| 亚洲av乱码一区二区三区| 久久久精品人妻一区二区三区 | 性色AV一区二区三区无码| 精品人无码一区二区三区 | 国产欧美色一区二区三区| 无码人妻一区二区三区兔费| 亚洲日韩AV一区二区三区中文| 亚洲中文字幕久久久一区| 色窝窝免费一区二区三区| 天堂成人一区二区三区| 在线观看视频一区二区| 日韩精品人妻av一区二区三区| 国产一区二区三区在线观看影院| 福利视频一区二区牛牛| 中文字幕一区二区区免| 久久国产精品最新一区| 人妖在线精品一区二区三区| 怡红院一区二区三区| 国产成人无码精品一区在线观看| 中文字幕在线观看一区二区三区 | 国产精品高清视亚洲一区二区|