資訊專欄INFORMATION COLUMN
摘要：交互元素用于與用戶交互的元素元數(shù)據(jù)元素被用于說明其他內(nèi)容的表現(xiàn)或行為，或者在當(dāng)前文檔和其他文檔之間建立聯(lián)系的元素。
一、開篇
很久以前我們對于前端的理解就是開發(fā)web網(wǎng)頁的，并且在PC上的瀏覽器進(jìn)行展示；后來，隨著響應(yīng)式布局和智能手機(jī)的興起，web網(wǎng)頁更多的出現(xiàn)在了移動端的瀏覽器中；再后來，隨著技術(shù)的不斷發(fā)展，web頁面逐漸出現(xiàn)在了PC、Android、Iphone的application(APP)中。從上面的發(fā)展可以看出，前端涉及的面越來越廣，未來前端技術(shù)也會越來越重要，前端工程師們加油哇！
下面我將一點(diǎn)點(diǎn)完善整個前端結(jié)構(gòu)，由于無法一次寫完，所以這篇文章會不斷更新，如果大家覺得還可以就先關(guān)注一波，以便及時查看更新內(nèi)容。
1、前端主要包括下面三個部分：
1.1 web標(biāo)準(zhǔn)技術(shù)
HTML、CSS、JavaScript、SVG、HTTP、WebGL等
1.2 運(yùn)行環(huán)境
PC端瀏覽器、移動端瀏覽器、PC端桌面應(yīng)用、移動端桌面應(yīng)用等
1.3 界面與交互
界面的設(shè)計、用戶的交互設(shè)計等問題，比如需要考慮web無障礙性(e.g:盲人或者色盲無法正常瀏覽頁面，此時應(yīng)該怎樣進(jìn)行界面和交互的設(shè)計以滿足該類人群的需要呢？)
2、前端開發(fā)時需要考慮的問題
什么是html呢？html就是使用標(biāo)簽來描述頁面的內(nèi)容和結(jié)構(gòu)。
1、HTML5的變化
目前最新的HTML標(biāo)準(zhǔn)是html5，那html5相比以前的標(biāo)準(zhǔn)有哪些變化呢？
1.1 doctype聲明更加簡潔
1.1.1、Doctype的作用
a、 指定文檔使用的標(biāo)準(zhǔn)和版本
html到現(xiàn)在已經(jīng)經(jīng)歷了很多個版本，最新的是HTML5，聲明Doctype可以指定該文檔遵循的標(biāo)準(zhǔn)。
b、 瀏覽器根據(jù)Doctype決定使用哪種渲染模式
瀏覽器的渲染模式分為怪異模式、標(biāo)準(zhǔn)模式、部分怪異(準(zhǔn)標(biāo)準(zhǔn))模式，在不同模式下瀏覽器對于同一個文檔的渲染方式是不同的。最突出的一個影響就是在標(biāo)準(zhǔn)模式下和怪異模式下的盒模型不同。上面的是標(biāo)準(zhǔn)盒模型，下面的是怪異模式下的盒模型。
1.1.2 如何聲明doctype
1.2 meta標(biāo)簽的變化
1.3 新增了許多語義化的標(biāo)簽和屬性，例如：標(biāo)簽有header、nav、article、main、footer等，屬性有readonly、disabled、hidden等。
1.4 去掉純展示性標(biāo)簽，例如：stricke、font、s等標(biāo)簽。
1.5 增加了很多富應(yīng)用化的東西，例如canvas、video、audio、離線、本地存儲、拖拽等。
2、HTML語義化
2.1 什么是語義化
HTML中的元素、屬性及屬性值都擁有某些含義。如
2.3 HTML標(biāo)簽分類
HTML標(biāo)簽分類的很大一個作用就是可以很好的確定嵌套規(guī)則，比如在p標(biāo)簽中無法嵌入div標(biāo)簽。
流式元素：在應(yīng)用程序和文檔的主體部分中使用的大部分元素
標(biāo)題元素：
章節(jié)元素：
段落元素：文檔中的文本、標(biāo)記段落級文本的元素
嵌入元素：引用資源插入到文檔中其他元素。
交互元素：用于與用戶交互的元素
元數(shù)據(jù)元素：被用于說明其他內(nèi)容的表現(xiàn)或行為，或者在當(dāng)前文檔和其他文檔之間建立聯(lián)系的元素。
上面是對標(biāo)簽的分類，下面講下我們常用的一些標(biāo)簽及其屬性：
1、h1~h6
頁面中最好將最重要的內(nèi)容，一般一個頁面中只有一個h1標(biāo)題，即將大的標(biāo)題設(shè)置為h1，并且不要試圖設(shè)置多個h1，這樣不利于SEO搜索引擎優(yōu)化。針對頁面中的包含的多篇文章或者章節(jié)，可以根據(jù)內(nèi)容層次使用h2~h6級標(biāo)題。
2、hr標(biāo)簽
表示段落級別的話題切換，頁面會呈現(xiàn)一條水平線
3、列表標(biāo)簽
列表標(biāo)簽包括了：
????無序列表標(biāo)簽：ul、li
????有序列表標(biāo)簽：ol、li
????自定義列表標(biāo)簽：dl、dt、dd
無序列表
My favourite fruits are：
- apple
- banana
- watermallon
有序列表
采集信息：
- 姓名
- 年齡
-
主修課成績
- 數(shù)學(xué)
- 英語
- 計算機(jī)
自定義列表
電影后來的我們
相關(guān)內(nèi)容
- 導(dǎo)演：
- 劉若英
- 演員：
- 周冬雨
- 井柏然
3、內(nèi)容結(jié)構(gòu)相關(guān)標(biāo)簽
盡量使用語義化的標(biāo)簽，避免使用div和span標(biāo)簽。
4、a標(biāo)簽
a、href省略問題
??????在a標(biāo)簽的href屬性中可省略協(xié)議、省略協(xié)議和host，瀏覽器在解析時會補(bǔ)全為完整的的URL，補(bǔ)全的協(xié)議和host與當(dāng)前頁面的協(xié)議和host一致。
b、相對、絕對路徑
??????省略協(xié)議和host后，鏈接的地址可以使用絕對路徑和相對路徑：
??????絕對路徑：從根目錄開始查找和訪問
??????相對路徑：相對于當(dāng)前頁面所在目錄進(jìn)行查找和訪問
????????????推薦省略了scheme和host的絕對路徑
c、錨點(diǎn)
idValue就是我們要跳轉(zhuǎn)到的標(biāo)簽的id值
d、target屬性
??????target的屬性值可以為_self、_blank、_parent、_top或者自定義的名字，當(dāng)定義自定義的名字時，首次訪問時瀏覽器會打開一個新的窗口，并命名為我們設(shè)置的自定義的名字。下次再訪問a鏈接時，凡是target值為該名字的，都在該窗口打開。
idValue就是我們要跳轉(zhuǎn)到的標(biāo)簽的id值
e、alt屬性
alt屬性必須要有，當(dāng)圖片加載失敗時作為替代文字出現(xiàn)，同時也有利于提升無障礙性(為盲人設(shè)計的讀屏軟件獲取信息)
f、width和height屬性
圖片是一個異步加載的，所以有可能頁面其他元素已經(jīng)加載和渲染完成了，圖片才加載完成，此時頁面會重繪，會出現(xiàn)跳動效果，所以為了防止頁面在加載過程中的抖動，可以預(yù)先定義好圖片的寬度和高度。
5、引用標(biāo)簽
引用標(biāo)簽包括三類，分別是blockquoto、cite和q
blockquoto引用相關(guān)的內(nèi)容，并且可以設(shè)置其引用來源；cite標(biāo)簽包含來源；q標(biāo)簽包含引用的內(nèi)容。
三種遍歷方法，很好記，什么時候訪問根節(jié)點(diǎn)就叫什么方法讀了這么多書，還是覺得小王子才是我的最愛
我昨天見過李明，他說
他今天不參加你的生日會了。
2.4 HTML擴(kuò)展性
2.4.1 data-* 和dataset API
通過data-可以自定義屬性，同時可以通過dataset.獲取屬性值
2.4.2 Link標(biāo)簽
2.4.3 JSON—LD
JSON-LD 是 JavaScript Object Notation for Linked Data的縮寫，是一種基于JSON表示和傳輸互聯(lián)數(shù)據(jù)（Linked Data）的方法，其實(shí)就是用我們熟悉的JSON物件{}把LD包起來。
使用結(jié)構(gòu)化數(shù)據(jù)的目的是為了能夠構(gòu)建一個更加語義化的網(wǎng)絡(luò)。語義化網(wǎng)絡(luò)由哪些好處呢？a、搜索引擎可以獲取更多網(wǎng)頁相關(guān)資料，更有效的整合相關(guān)服務(wù)，以便開發(fā)更多的應(yīng)用；b、為website提高SEO，帶來更多精準(zhǔn)流量；c、用戶可以獲得更優(yōu)質(zhì)的體驗，搜索的結(jié)果有更佳的深度與廣度。
可以在頁面中保存一段獨(dú)立的數(shù)據(jù)JSON-LD，方便搜索引擎或其他網(wǎng)站獲取相關(guān)的格式化信息
2.5 web無障礙
參考：
WCAG(web content Accessibility Guidelines)2.0
ARIA(Accessible Rich Internet Applications)
提升無障礙的方式：
設(shè)置img的alt屬性
noscript
input與label對應(yīng)
圖形驗證碼與語音驗證碼
文字和背景有足夠的對比度
鍵盤可操作(e.g:使用tab鍵進(jìn)行頁面內(nèi)容選中切換)
未完待續(xù)、持續(xù)更新....................
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94820.html
摘要：交互元素用于與用戶交互的元素元數(shù)據(jù)元素被用于說明其他內(nèi)容的表現(xiàn)或行為，或者在當(dāng)前文檔和其他文檔之間建立聯(lián)系的元素。 一、開篇 很久以前我們對于前端的理解就是開發(fā)web網(wǎng)頁的，并且在PC上的瀏覽器進(jìn)行展示；后來，隨著響應(yīng)式布局和智能手機(jī)的興起，web網(wǎng)頁更多的出現(xiàn)在了移動端的瀏覽器中；再后來，隨著技術(shù)的不斷發(fā)展，web頁面逐漸出現(xiàn)在了PC、Android、Iphone的applicati...
摘要：交互元素用于與用戶交互的元素元數(shù)據(jù)元素被用于說明其他內(nèi)容的表現(xiàn)或行為，或者在當(dāng)前文檔和其他文檔之間建立聯(lián)系的元素。 一、開篇 很久以前我們對于前端的理解就是開發(fā)web網(wǎng)頁的，并且在PC上的瀏覽器進(jìn)行展示；后來，隨著響應(yīng)式布局和智能手機(jī)的興起，web網(wǎng)頁更多的出現(xiàn)在了移動端的瀏覽器中；再后來，隨著技術(shù)的不斷發(fā)展，web頁面逐漸出現(xiàn)在了PC、Android、Iphone的applicati...
摘要：前言見解有限，如有描述不當(dāng)之處，請幫忙指出，如有錯誤，會及時修正。為什么要梳理這篇文章最近恰好被問到這方面的問題，嘗試整理后發(fā)現(xiàn)，這道題的覆蓋面可以非常廣，很適合作為一道承載知識體系的題目。 前言 見解有限，如有描述不當(dāng)之處，請幫忙指出，如有錯誤，會及時修正。 為什么要梳理這篇文章？ 最近恰好被問到這方面的問題，嘗試整理后發(fā)現(xiàn)，這道題的覆蓋面可以非常廣，很適合作為一道承載知識體系的題目...
摘要：責(zé)編現(xiàn)代化的方式開發(fā)一個圖片上傳工具前端掘金對于圖片上傳，大家一定不陌生。之深入事件機(jī)制前端掘金事件綁定的方式原生的事件綁定方式有幾種想必有很多朋友說種目前，在本人目前的研究中，只有兩種半兩種半還有半種的且聽我道來。 Ajax 與數(shù)據(jù)傳輸 - 前端 - 掘金背景 在沒有ajax之前，前端與后臺傳數(shù)據(jù)都是靠表單傳輸，使用表單的方法傳輸數(shù)據(jù)有一個比較大的問題就是每次提交數(shù)據(jù)都會刷新頁面，用...
閱讀 3631·2021-11-24 09:39
閱讀 2570·2021-11-15 11:37
閱讀 2226·2021-11-11 16:55
閱讀 5272·2021-10-14 09:43
閱讀 3717·2021-10-08 10:05
閱讀 3025·2021-09-13 10:26
閱讀 2340·2021-09-08 09:35
閱讀 3549·2019-08-30 15:55
