第1章-Web網站初體驗

這是我參與8月更文挑戰的第1天，活動詳情查看：8月更文挑戰

帶着問題去看書學習，不失爲一種好的方式。

HTML5＋CSS3＋JavaScript Web 前端開發案例教程（慕課版），微信讀書中找到的學習Web前端書籍，好啦，我要帶着課後習題，開始學習前端開發了，耶(＾－＾)V

習題

1-1 網頁製做的核心技術有哪些？

HTML5（純文本類型的語言）、CSS3（層疊樣式表）和JavaScript（網頁設計的一種腳本語言）

1-2 概述HTML5文件的基本結構。

一個HTML5文件由一些元素和標籤組成。元素是HTML5文件的重要組成部分，例如title（文件標題）、img（圖片）及table（表格）等。元素名不區分大小寫，HTML5用標籤來規定元素的屬性和它在文件中的位置。

1-3 建立一個HTML文檔的開始標籤是什麼？結束標籤是什麼？

文件的所有內容

1-4 元素的分類有哪些？請分別具體說明。

• 塊狀元素

自己的屬性爲display:block的元素。不是塊狀的元素，經過設置display:block，能夠將該元素變成塊狀元素。

一、在默認狀況下，每一個塊狀元素重新的一行開始，其後面的元素另起一行；

二、在默認狀況下，塊狀元素是自上而下垂直排列，且每一個塊狀元素獨佔一行；

三、塊狀元素通常都做爲其餘元素的容器，能夠容納內聯元素和其餘塊狀元素。

四、塊狀元素的高度，行高及其外邊距和內邊距均可以經過CSS屬性來控制和調整！

五、在不設置寬度的狀況下，塊級元素的寬度則和它的父級元素的寬度一致。

六、在不設置高度的狀況下，塊級元素的高度則和它的父級元素的高度一致。

• 內聯元素

指自己屬性爲display:inline的元素，其寬度隨元素的內容而變化。不是內聯元素，經過設置display:inline，能夠將該元素變成內聯元素。

一、內聯元素不會獨佔一行，多個相鄰的內聯元素會排列在同一行中，順序是從左到右排列，直到排列不下，纔會另起新的一行；

二、內聯元素設置高度height是無效的，寬度由其自身內容決定的，但高度能夠經過行高line-height來進行調整；

三、內聯元素設置寬度width是無效的，其寬度是由元素內容自己的大小決定的，好比文字、圖片等；

四、內聯元素設置外邊距margin，只有左外邊距margin-left和右外邊距margin-right是有效的，而上下是無效的；

五、內聯元素設置內邊距padding，只有左內邊距padding-left和右外邊距padding-right是有效的，而上下是無效的；

六、內聯元素只能容納文本或者其餘內聯元素，請不要在內聯元素中嵌套塊狀元素。

• 塊狀內聯元素

內聯塊狀元素（inline-block）就是既能設置寬高，又能獨佔一行顯示，這樣，同時具有了內聯元素和塊狀元素的特色，設置display:inline-block，就是將元素轉換成爲內聯塊狀元素類型。

一、內聯塊狀元素和其餘相鄰元素同在一行， 但它們之間存在間隙，間隙大小爲字體大小；

二、內聯塊狀元素的高度、寬度、行高以及頂和底邊距均可設置。

常見內聯塊狀元素：

button，textarea，input、select、img是內聯塊狀元素(inline-block)

1-5 說明網頁中註釋的意義以及添加註釋的方式。

適當的註釋能夠幫助用戶更好地瞭解頁面中各個模塊的劃分狀況，也有助於之後對代碼的檢查和修改。給代碼加註釋，是一種很好的編程習慣。

• 在文件開始標籤中的註釋：

<!--註釋的文字-->
複製代碼

• 在CSS中的註釋：

/*註釋的文字*/
複製代碼

• 在JavaScript腳本語言中的註釋

單行註釋:      //註釋的文字
複製代碼

多行註釋:      /*註釋的文字*/
複製代碼

其餘筆記

• 查看網頁源代碼：單擊鼠標右鍵，點擊查看源代碼

• 下載 WebStorm

www.jetbrains.com/webstorm/