任務目的

  • 瞭解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

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