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