前端系統梳理

2019年8月24日 121次阅读 来源: Alisa

一、開篇

很久之前我們關於前端的明白就是開闢web網頁的，而且在PC上的閱讀器舉行展現；厥後，跟着相應式規劃和智能手機的鼓起，web網頁更多的湧現在了挪動端的閱讀器中；再厥後，跟着手藝的不斷生長，web頁面逐步湧現在了PC、Android、Iphone的application(APP)中。從上面的生長可以看出，前端觸及的面愈來愈廣，將來前端手藝也會愈來愈主要，前端工程師們加油哇！
下面我將一點點完美全部前端構造，因為沒法一次寫完，所以這篇文章會不斷更新，假如人人認為還可以就先關注一波，以便實時檢察更新內容。

二、什麼是前端

1、前端主要包括下面三個部份：
1.1 web規範手藝
HTML、CSS、JavaScript、SVG、HTTP、WebGL等
1.2 運轉環境
PC端閱讀器、挪動端閱讀器、PC端桌面運用、挪動端桌面運用等
1.3 界面與交互
界面的設想、用戶的交互設想等題目，比方須要斟酌web無障礙性(e.g:瞽者或許色盲沒法平常閱讀頁面，此時應當怎樣舉行界面和交互的設想以滿足該類人群的須要呢？)

2、前端開闢時須要斟酌的題目
《前端系統梳理》

三、HTML

什麼是html呢？html就是運用標籤來形貌頁面的內容和構造。
1、HTML5的變化
現在最新的HTML規範是html5，那html5比擬之前的規範有哪些變化呢？
1.1 doctype聲明越發簡約

1.1.1、Doctype的作用

a、 指定文檔運用的規範和版本

html到現在已閱歷了許多個版本，最新的是HTML5，聲明Doctype可以指定該文檔遵照的規範。

b、 閱讀器依據Doctype決議運用哪一種襯着形式

閱讀器的襯着形式分為奇異形式、規範形式、部份奇異(准規範)形式，在差別形式下閱讀器關於同一個文檔的襯着體式格局是差別的。最凸起的一個影響就是在規範形式下和奇異形式下的盒模子差別。上面的是規範盒模子，下面的是奇異形式下的盒模子。

《前端系統梳理》

1.1.2 怎樣聲明doctype

<!DOCTYPE html>

1.2 meta標籤的變化

<!-- 編碼 -->
<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等。

1.4 去掉純展現性標籤，比方：stricke、font、s等標籤。

1.5 增加了許多富運用化的東西，比方canvas、video、audio、離線、當地存儲、拖拽等。

2、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>
  • 段落元素：文檔中的文本、標記段落級文本的元素
  • 嵌入元素：援用資本插進去到文檔中其他元素。
  • 交互元素：用於與用戶交互的元素
  • 元數據元素：被用於申明其他內容的表現或行動，或許在當前文檔和其他文檔之間豎立聯絡的元素。

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

1、h1~h6

頁面中最好將最主要的內容，平常一個頁面中只要一個h1題目，行將大的題目設置為h1，而且不要試圖設置多個h1，如許不利於SEO搜刮引擎優化。針對頁面中的包括的多篇文章或許章節，可以依據內容條理運用h2~h6級題目。

2、hr標籤

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

3、列表標籤

列表標籤包括了：

    無序列表標籤：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>

《前端系統梳理》

3、內容構造相干標籤
只管運用語義化的標籤，防備運用div和span標籤。
《前端系統梳理》

4、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屬性
圖片是一個異步加載的，所以有可以頁面其他元素已加載和襯着完成了，圖片才加載完成，此時頁面會重繪，會湧現跳動效果，所認為了防備頁面在加載歷程當中的發抖，可以預先定義好圖片的寬度和高度。

5、援用標籤

援用標籤包括三類，分別是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)

提拔無障礙的體式格局：

  • 設置img的alt屬性
  • noscript
  • input與label對應
  • 圖形驗證碼與語音驗證碼
  • 筆墨和背景有充足的對比度
  • 鍵盤可操作(e.g:運用tab鍵舉行頁面內容選中切換)

未完待續、延續更新………………..

    原文作者：Alisa
    原文地址: https://segmentfault.com/a/1190000014777959
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞