前端體系梳理

entner 發布于2019-08-02 10:23 / 1527人閱讀

摘要：交互元素用于與用戶交互的元素元數據元素被用于說明其他內容的表現或行為，或者在當前文檔和其他文檔之間建立聯系的元素。

一、開篇

很久以前我們對于前端的理解就是開發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

1.2 meta標簽的變化

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中的元素、屬性及屬性值都擁有某些含義。如

標簽就表示導航相關內容、

標簽表示盛放文章相關內容。
2.2 為什么要語義化
??????2.2.1 為開發人員提供可讀性、可維護性
??????2.2.2 有利于搜索引擎優化
??????2.2.3 提升無障礙性，便于讀屏軟件對頁面中的內容進行智能化的解析。

2.3 HTML標簽分類
HTML標簽分類的很大一個作用就是可以很好的確定嵌套規則，比如在p標簽中無法嵌入div標簽。

流式元素：在應用程序和文檔的主體部分中使用的大部分元素

標題元素：

、

章節元素：

、

段落元素：文檔中的文本、標記段落級文本的元素

嵌入元素：引用資源插入到文檔中其他元素。

交互元素：用于與用戶交互的元素

元數據元素：被用于說明其他內容的表現或行為，或者在當前文檔和其他文檔之間建立聯系的元素。

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

1、h1~h6

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

2、hr標簽

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

3、列表標簽

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


    
        無序列表
        My favourite fruits are：
        
            apple
            banana
            watermallon
        
    
    
    
        有序列表
        采集信息：
        
            姓名
            年齡
            
                主修課成績
                
                    數學
                    英語
                    計算機
                
            
        
    
    
    
        自定義列表
        電影后來的我們相關內容
        
            導演：
            劉若英
            演員：
            周冬雨
            井柏然

3、內容結構相關標簽
盡量使用語義化的標簽，避免使用div和span標簽。

4、a標簽

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

idValue就是我們要跳轉到的標簽的id值

d、target屬性
??????target的屬性值可以為_self、_blank、_parent、_top或者自定義的名字，當定義自定義的名字時，首次訪問時瀏覽器會打開一個新的窗口，并命名為我們設置的自定義的名字。下次再訪問a鏈接時，凡是target值為該名字的，都在該窗口打開。

idValue就是我們要跳轉到的標簽的id值

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

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

5、引用標簽

引用標簽包括三類，分別是blockquoto、cite和q
blockquoto引用相關的內容，并且可以設置其引用來源；cite標簽包含來源；q標簽包含引用的內容。

三種遍歷方法，很好記，什么時候訪問根節點就叫什么方法

讀了這么多書，還是覺得小王子才是我的最愛

我昨天見過李明，他說他今天不參加你的生日會了。

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


  小米
  小花
  小明

2.4.2 Link標簽

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，方便搜索引擎或其他網站獲取相關的格式化信息

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

提升無障礙的方式：

設置img的alt屬性

noscript

input與label對應

圖形驗證碼與語音驗證碼

文字和背景有足夠的對比度

鍵盤可操作(e.g:使用tab鍵進行頁面內容選中切換)

未完待續、持續更新....................

GPU云服務器云服務器梳理多云管理平臺調研,流程梳理運營體系認證體系

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52320.html

前端體系梳理

摘要：交互元素用于與用戶交互的元素元數據元素被用于說明其他內容的表現或行為，或者在當前文檔和其他文檔之間建立聯系的元素。一、開篇很久以前我們對于前端的理解就是開發web網頁的，并且在PC上的瀏覽器進行展示；后來，隨著響應式布局和智能手機的興起，web網頁更多的出現在了移動端的瀏覽器中；再后來，隨著技術的不斷發展，web頁面逐漸出現在了PC、Android、Iphone的applicati...

widuu 2019-08-22 17:04 評論0 收藏0
前端體系梳理

摘要：交互元素用于與用戶交互的元素元數據元素被用于說明其他內容的表現或行為，或者在當前文檔和其他文檔之間建立聯系的元素。一、開篇很久以前我們對于前端的理解就是開發web網頁的，并且在PC上的瀏覽器進行展示；后來，隨著響應式布局和智能手機的興起，web網頁更多的出現在了移動端的瀏覽器中；再后來，隨著技術的不斷發展，web頁面逐漸出現在了PC、Android、Iphone的applicati...

DataPipeline 2019-08-29 15:19 評論0 收藏0
從輸入URL到頁面加載的過程？如何由一道題完善自己的前端知識體系！

摘要：前言見解有限，如有描述不當之處，請幫忙指出，如有錯誤，會及時修正。為什么要梳理這篇文章最近恰好被問到這方面的問題，嘗試整理后發現，這道題的覆蓋面可以非常廣，很適合作為一道承載知識體系的題目。前言見解有限，如有描述不當之處，請幫忙指出，如有錯誤，會及時修正。為什么要梳理這篇文章？最近恰好被問到這方面的問題，嘗試整理后發現，這道題的覆蓋面可以非常廣，很適合作為一道承載知識體系的題目...

kel 2019-08-22 15:18 評論0 收藏0
前端開發收集 - 收藏集 - 掘金

摘要：責編現代化的方式開發一個圖片上傳工具前端掘金對于圖片上傳，大家一定不陌生。之深入事件機制前端掘金事件綁定的方式原生的事件綁定方式有幾種想必有很多朋友說種目前，在本人目前的研究中，只有兩種半兩種半還有半種的且聽我道來。 Ajax 與數據傳輸 - 前端 - 掘金背景在沒有ajax之前，前端與后臺傳數據都是靠表單傳輸，使用表單的方法傳輸數據有一個比較大的問題就是每次提交數據都會刷新頁面，用...

ygyooo 2019-08-20 17:15 評論0 收藏0