前端體系梳理

時間 2019-11-07

標籤前端體系梳理简体版

原文原文鏈接

1、開篇

好久之前咱們對於前端的理解就是開發web網頁的，而且在PC上的瀏覽器進行展現；後來，隨着響應式佈局和智能手機的興起，web網頁更多的出如今了移動端的瀏覽器中；再後來，隨着技術的不斷髮展，web頁面逐漸出如今了PC、Android、Iphone的application(APP)中。從上面的發展能夠看出，前端涉及的面愈來愈廣，將來前端技術也會愈來愈重要，前端工程師們加油哇！
下面我將一點點完善整個前端結構，因爲沒法一次寫完，因此這篇文章會不斷更新，若是你們以爲還能夠就先關注一波，以便及時查看更新內容。css

2、什麼是前端

一、前端主要包括下面三個部分：
1.1 web標準技術
HTML、CSS、JavaScript、SVG、HTTP、WebGL等
1.2 運行環境
PC端瀏覽器、移動端瀏覽器、PC端桌面應用、移動端桌面應用等
1.3 界面與交互
界面的設計、用戶的交互設計等問題，好比須要考慮web無障礙性(e.g:盲人或者色盲沒法正常瀏覽頁面，此時應該怎樣進行界面和交互的設計以知足該類人羣的須要呢？)html

二、前端開發時須要考慮的問題
前端

3、HTML

什麼是html呢？html就是使用標籤來描述頁面的內容和結構。
一、HTML5的變化
目前最新的HTML標準是html5，那html5相比之前的標準有哪些變化呢？
1.1 doctype聲明更加簡潔html5

1.1.一、Doctype的做用
a、指定文檔使用的標準和版本
html到如今已經經歷了不少個版本，最新的是HTML5，聲明Doctype能夠指定該文檔遵循的標準。
b、瀏覽器根據Doctype決定使用哪一種渲染模式
瀏覽器的渲染模式分爲怪異模式、標準模式、部分怪異(準標準)模式，在不一樣模式下瀏覽器對於同一個文檔的渲染方式是不一樣的。最突出的一個影響就是在標準模式下和怪異模式下的盒模型不一樣。上面的是標準盒模型，下面的是怪異模式下的盒模型。

1.1.2 如何聲明doctypeweb

<!DOCTYPE html>

1.2 meta標籤的變化json

<!-- 編碼 -->
<meta charset="UTF-8">

<!-- 指定HTTP Header -->
<meta http-equiv="Content-Security-Policy"
  content="script-src 'self'">

<!-- SEO 搜索引擎優化 -->
<meta name="keywords" content="關鍵詞">
<meta name="description" content="頁面介紹">

<!-- 移動設備Viewport -->
<meta name="viewport" content="initial-scale=1">

<!-- 關閉iOS電話號碼自動識別 -->
<meta name="format-detection" content="telphone=no">

<!-- 360瀏覽器指定內核 -->
<meta name="renderer" content="webkit">

<!-- 指定IE渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

1.3 新增了許多語義化的標籤和屬性，例如：標籤有header、nav、article、main、footer等，屬性有readonly、disabled、hidden等。canvas

1.4 去掉純展現性標籤，例如：stricke、font、s等標籤。segmentfault

1.5 增長了不少富應用化的東西，例如canvas、video、audio、離線、本地存儲、拖拽等。瀏覽器

二、HTML語義化
2.1 什麼是語義化
HTML中的元素、屬性及屬性值都擁有某些含義。如<nav>標籤就表示導航相關內容、<article>標籤表示盛放文章相關內容。
2.2 爲何要語義化
      2.2.1 爲開發人員提供可讀性、可維護性
      2.2.2 有利於搜索引擎優化
      2.2.3 提高無障礙性，便於讀屏軟件對頁面中的內容進行智能化的解析。網絡

2.3 HTML標籤分類
HTML標籤分類的很大一個做用就是能夠很好的肯定嵌套規則，好比在p標籤中沒法嵌入div標籤。

流式元素：在應用程序和文檔的主體部分中使用的大部分元素
標題元素：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hgroup>
章節元素：<article>、<aside>、<nav>、<section>
段落元素：文檔中的文本、標記段落級文本的元素
嵌入元素：引用資源插入到文檔中其餘元素。
交互元素：用於與用戶交互的元素
元數據元素：被用於說明其餘內容的表現或行爲，或者在當前文檔和其餘文檔之間創建聯繫的元素。

上面是對標籤的分類，下面講下咱們經常使用的一些標籤及其屬性：

一、h1~h6

頁面中最好將最重要的內容，通常一個頁面中只有一個h1標題，即將大的標題設置爲h1，而且不要試圖設置多個h1，這樣不利於SEO搜索引擎優化。針對頁面中的包含的多篇文章或者章節，能夠根據內容層次使用h2~h6級標題。

二、hr標籤

表示段落級別的話題切換，頁面會呈現一條水平線

三、列表標籤

列表標籤包括了：
    無序列表標籤：ul、li
    有序列表標籤：ol、li
    自定義列表標籤：dl、dt、dd

<body>
    <section>
        <header>無序列表</header>
        <p>My favourite fruits are：</p>
        <ul>
            <li>apple</li>
            <li>banana</li>
            <li>watermallon</li>
        </ul>
    </section>
    <hr>
    <section>
        <header>有序列表</header>
        <p>採集信息：</p>
        <ol>
            <li>姓名</li>
            <li>年齡</li>
            <li>
                主修課成績
                <ol type="a" start="a">
                    <li>數學</li>
                    <li>英語</li>
                    <li>計算機</li>
                </ol>
            </li>
        </ol>
    </section>
    <hr>
    <section>
        <header>自定義列表</header>
        <p>電影<q>後來的咱們</q>相關內容</p>
        <dl>
            <dt>導演：</dt>
            <dd>劉若英</dd>
            <dt>演員：</dt>
            <dd>周冬雨</dd>
            <dd>井柏然</dd>
        </dl>
    </section>
</body>

三、內容結構相關標籤
儘可能使用語義化的標籤，避免使用div和span標籤。

四、a標籤

a、href省略問題
      在a標籤的href屬性中可省略協議、省略協議和host，瀏覽器在解析時會補全爲完整的的URL，補全的協議和host與當前頁面的協議和host一致。
b、相對、絕對路徑
      省略協議和host後，連接的地址可使用絕對路徑和相對路徑：
      絕對路徑：從根目錄開始查找和訪問
      相對路徑：相對於當前頁面所在目錄進行查找和訪問
            推薦省略了scheme和host的絕對路徑
c、錨點

<a href="#idValue">idValue就是咱們要跳轉到的標籤的id值</a>

d、target屬性
target的屬性值能夠爲_self、_blank、_parent、_top或者自定義的名字，當定義自定義的名字時，首次訪問時瀏覽器會打開一個新的窗口，並命名爲咱們設置的自定義的名字。下次再訪問a連接時，凡是target值爲該名字的，都在該窗口打開。

<a href="#idValue" target="myPage">idValue就是咱們要跳轉到的標籤的id值</a>

e、alt屬性
alt屬性必需要有，當圖片加載失敗時做爲替代文字出現，同時也有利於提高無障礙性(爲盲人設計的讀屏軟件獲取信息)

f、width和height屬性
圖片是一個異步加載的，因此有可能頁面其餘元素已經加載和渲染完成了，圖片才加載完成，此時頁面會重繪，會出現跳動效果，因此爲了防止頁面在加載過程當中的抖動，能夠預先定義好圖片的寬度和高度。

五、引用標籤

引用標籤包括三類，分別是blockquoto、cite和q
blockquoto引用相關的內容，而且能夠設置其引用來源；cite標籤包含來源；q標籤包含引用的內容。

<blockquote cite="https://segmentfault.com/a/1190000014410891">三種遍歷方法，很好記，何時訪問根節點就叫什麼方法</blockquote>
<p>讀了這麼多書，仍是以爲<cite>小王子</cite>纔是個人最愛</p>
<p>我昨天見過李明，他說<q>他今天不參加你的生日會了。</q></p>

2.4 HTML擴展性
2.4.1 data-* 和dataset API
經過data-能夠自定義屬性，同時能夠經過dataset.獲取屬性值

<ul>
  <li data-num="1">小米</li>
  <li data-num="2">小花</li>
  <li data-num="3">小明</li>
</ul>

2.4.2 Link標籤

<!-- 引入 CSS -->
<link rel="stylesheet" href="style.css">

<!-- 瀏覽器預加載,域名的預解析，都是異步加載的過程，不會阻塞頁面正常加載 -->
<link rel="dns-prefetch" href="//example.com">
<link rel="prefetch" href="image.png">
<link rel="prerender" href="http://example.com">

<!-- favicon，頁面標題欄的小圖標 -->
<link rel="icon" type="image/png" href="myicon.png">

<!-- RSS -->
<link rel="alternate" type="application/rss+xml" href="/feed">

2.4.3 JSON—LD
JSON-LD 是 JavaScript Object Notation for Linked Data的縮寫，是一種基於JSON表示和傳輸互聯數據（Linked Data）的方法，其實就是用咱們熟悉的JSON物件{}把LD包起來。
使用結構化數據的目的是爲了可以構建一個更加語義化的網絡。語義化網絡由哪些好處呢？a、搜索引擎能夠獲取更多網頁相關資料，更有效的整合相關服務，以便開發更多的應用；b、爲website提升SEO，帶來更多精準流量；c、用戶能夠得到更優質的體驗，搜索的結果有更佳的深度與廣度。

能夠在頁面中保存一段獨立的數據JSON-LD，方便搜索引擎或其餘網站獲取相關的格式化信息

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "John Doe",
  "jobTitle": "Graduate research assistant",
  "affiliation": "University of Dreams",
  "additionalName": "Johnny",
  "url": "http://www.example.com",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "1234 Peach Drive",
    "addressLocality": "Wonderland",
    "addressRegion": "Georgia"
  }
}
</script>

2.5 web無障礙
參考：
WCAG(web content Accessibility Guidelines)2.0
ARIA(Accessible Rich Internet Applications)

提高無障礙的方式：