任務一：零基礎HTML編碼練習

標籤：應用   src   相關   解釋   完整   hub   實驗   網上   利用   

任務目的

• 瞭解HTML的定義、概念、發展簡史
• 掌握常用HTML標籤的含義、用法
• 能夠基於設計稿來合理規劃HTML文檔結構
• 理解語義化，合理地使用HTML標籤來構建頁面

 

任務描述：完成一個HTML頁面代碼編寫（不寫CSS，不需要關注樣式，只關注文檔結構），詳情看（可右鍵複製圖片到本地自行練習）：

 

任務注意事項

• 只需要完成HTML代碼編寫，不需要寫CSS
• 樣本圖僅為參考，不需要完全實現一致，其中的圖片、文案均可自行設定
• 儘可能多地嘗試更多的HTML標籤

 

 

 

 

任務完成及總結：

問題1：標題元素無法正確顯示的怪異現象

源碼：

 解決：猜想可能是與頭部的<h1>起了衝突，但是具體原理是什麼也沒想明白是為什麼，網上也沒有找到相關的解釋。後來將其修改為<h2>、<h3>即和一樣。

 

問題2：開始卡在了“圖片”那塊，一直想不到有哪個元素能夠實現該效果。如果使用無序列表<ul>和有序列表<ol>，那麼不利用css樣式就無法消除其預設的屬性，真叫人頭大。

解決：後來在洗澡的時候突然想到一個自己不經常使用的3d元素（dl、dt、dd），趕緊用最快速度洗完澡，出來一實驗，果然，成功了！

 

 

小demo的亮點：

大膽使用了HTML5的新標籤，代碼幾乎完全遵循html的語義化規範。能夠比較清晰的知道在哪處使用<article>標籤,在哪處使用<section>標籤。一開始我對這兩個標籤的應用情境比較懵逼，相信大部分人也是如此，現在我們來看一下它們之間的區別：

<article>標籤可以在網頁中定義獨立的內容，包括文章、部落格和使用者評論等，<article>標籤是可以嵌套使用的，當該標籤進行嵌套使用的時候，內部的<article>標籤中的內容必須和外部的<artcle>標籤中的內容相關。

<section>標籤用於對頁面中的內容進行分區。一個section元素通常由內容及其標題組成，<section>標籤的作用是對頁面中的內容進行分塊處理，相鄰的<section>標籤中的內容應該是相關的，而不是像<article>標籤中的內容那樣是獨立的。

區別：<article>標籤更加強調獨立性、完整性，<section>標籤更加強調相關性。

 

小demo的不足之處：

表單有一些不符合規範的地方，比如不能很好的與後台進行互動，缺乏id、name和value值。

 

小demo地址：

https://cruxf.github.io/BaiduTask/test1.html

 

有不足的地方希望大家多多指出！

 

任務一：零基礎HTML編碼練習