如何學好HTML5?

時間 2021-05-09 20:07:12

1樓:小可愛

僅僅是問html5怎麼學好是嗎?

html學好挺簡單的 ,不過再簡單的技術知識點也需要你全身心的投入去做。跟你簡單介紹一下html5的知識點,你可以先了解一些:

1.塊狀元素(block element)

1)塊狀元素在網頁中就是以塊的形式顯示,所謂塊狀就是元素顯示為矩形區域,常用的塊狀元素包塊div,dl,dt,dd,ol,ul,li,(h1-h6),p,form,hr,table,tr,td,等。

2)預設情況下,塊狀元素都會佔據一行,通俗地說,兩個相鄰塊狀元素不會出現並列顯示的現象;預設情況下,塊狀元素會按順序自上而下排列。

3)塊狀元素都可以自定義元素的寬度和高度。

4)塊狀元素一般可以作為其他元素的容器,它可以容納其它一些內聯元素以及塊狀元素。我們一般把它比作是乙個盒子。

2.內聯元素(inline element)(或是行內元素)

1) 常見的內聯元素如:a,span,i,em,strong,b,u,del,s,input,img,br,sub,sup等.

2) 內聯元素的表現形式是始終以行內逐個進行顯示。

3) 內聯元素沒有自己的形狀,不能定義它的寬和高,它顯示的寬度、高度只能根據所包含內容的高度和寬度來確定,它的最小內容單元也會呈現矩形形狀。

4)內聯元素也會遵循盒模型基本規則,如可以定義padding,border,margin,background等屬性,padding,border,margin上下的值沒有實際功能。

元素可通過display屬性來改變元素的預設顯示型別

1)display屬性與屬性值 (18個屬性值)

屬性值:block/inline/inline-block(img,input)/none/list-item(li)/table-row/table(table)/table-cell(td)/table-header-group(thead)/table-footer-group(tfoot);

作用:塊狀元素和內聯元素之間的轉換。

說明:各屬性值的作用。

1)Block塊狀顯示:類似在元素後面新增換行符,也就是說其他元素不能和它並列顯示。

3)Inline-block行內塊狀顯示:元素的內容以塊狀顯示,行內的其他元素顯示在同一行。

(此元素型別支援vertical-align屬性)img,input

4)none:隱藏元素, 此元素不會被顯示。

5)list-item:將元素轉換成列表,li的預設型別。

6)當元素設定了float屬性後,就相當於該元素加了display:block;

注:A、大部分塊元素display屬性值預設為block,其中li列表的預設值為list-item。

B、大部分內聯元素的display屬性值預設為inline,其中img,input,預設為inline-block。

Inline-block行內塊元素顯示:元素的內容以塊狀顯示,行內的其他元素顯示在同一行。

(此元素型別可以支援vertical-align屬性)img,input

垂直對齊方式

不過html只是web前端基礎的一部分,你要是想通過web前端找到工作還是要全面學習的。

你需要先找web前端教程,結合前端學習規劃圖來學習。

你是如何看待HTML5,你認為HTML5推廣的難度有那些?在你的工作團隊中對HTML5又是如何看待,是否有考慮引入到專案或者產品中呢?

因為瀏覽器標準各不相同的原因,導致現階段HTML5在推廣上還是存在一些阻力,但是我相信,在未來的時間裡,隨著大眾整體素質與水平的提高,會有更多的人樂意接受它的,誰不喜歡在自己電腦螢幕上出現更炫更快更優秀的頁面呢? 螞蟻線 手機端的WEB開發可以引入HTML5 CSS3,可以保證使用者更好的操作體驗。...

在html5中sessionStorage和localStorage有什麼區別?

文匯軟體 html5的本地儲存是儲存在客戶端中,本地儲存包括sessionStorage和localStorage。區別一 生命週期 sessionStorage僅在當前會話下生效,當你關閉頁面或瀏覽器後你儲存的sessionStorage資料會被清除。localStorage生命週期是永久,儲存的...

HTML5 到底帶來了什麼?

Chaos 離線儲存 websocket canvas給前端界帶來了巨大的變革,前端的內涵變得更為豐富,對於前端攻城師的要求變得更高 小適 我感覺重點是帶來了相容性。再等段時間,也許所有的手機 平板電腦 移動客戶端 PC Mac都會支援HTML5,但是上述裝置中的一種或多種並不一定支援Flash和S...