上一期帶你們簡單的瞭解了關於html的知識和特性,你們對html有了初步的瞭解。 這一期咱們主要圍繞着3點來展開css
1.讓咱們簡單膜拜一下別人的頁面以及簡單的瞭解一下瀏覽器 2.讓咱們開始搭建一個簡單的html頁面 3.簡單的認識一下什麼是行內元素?什麼是塊級元素?html
第一部分,首先我們先找個你們常常瀏覽的頁面: www.baidu.com/ 打開頁面而且單機右鍵單擊檢查打開控制檯程序員
而後你會在又邊欄裏面看到了一切在瀏覽度孃的時候歷來沒有注意到的一個東西,並且貌似還挺複雜,不過不着急,這個東西幾乎要伴隨我們整個程序員生涯
在大家走神看控制檯的彩蛋的時候別忘了咱們的目的是去瀏覽這個頁面的結構,下面單擊一下控制檯左上角的Elements
咱們就能夠看到這個頁面html結構和css樣式信息
左邊的邊框裏面是它的html結構,有面的是他的css信息,不管頁面有多麼的複雜(或者多麼的簡單)這兩個要素是構成頁面必不可少的就像我以前說的,html是骨骼而css是依附在骨骼上的皮肉。 咱們從頁面html結構上能夠看到這個頁面看上去很簡單可是其實並不簡單貌似結構還挺複雜的,是有不少的「盒子」構成的,咱們把這個叫作「標籤」。
把鼠標移動到了某個標籤會顯示頁面上對應該區域的模塊而且會顯示它的寬高等簡單的信息。 可是有沒有發現有幾個比較特殊的標籤,把鼠標移動到上面的時候貌似沒有對應到頁面上任何一個元素。
head和script標籤是什麼東西,難道它在頁面上沒有任何用處麼? 讓咱們點開head標籤看一下
咱們能夠看到head標籤裏面還有其餘的標籤 title標籤顧名思義是標題,那咱們把裏面的文案改一下看看有什麼變化
哇塞!對應着的頁面的標題也會改變了!可是咱們再次打開這個頁面卻什麼都沒變,從上面的操做咱們能夠得知: A)html結構是有不一樣的標籤構成的,並且標籤裏面能夠嵌套小標籤 B)控制檯能夠看到頁面實時的html結構和css樣式,而且能夠被「暫時」更改方便開發者觀察效果
第二部分,那麼咱們說了這麼多同窗們有沒有想要躍躍欲試開始打造本身的第一個頁面了呢?那麼打開你的記事本瀏覽器
沒錯就是它 而後在裏面寫一行代碼
OK保存關閉,把txt文件的擴展名改爲html
而後文件的圖標會改變,別擔憂這是正常現象,並且你有沒有發現這個圖標有些熟悉,雙擊打開它!
你的第一個頁面就產生啦!那麼讓咱們打開控制檯看一下你寫的代碼都生成了什麼
怎麼樣,所見即所得,是否是很簡單呢?可是真正在工做中固然不會使用記事本這種工具去敲代碼,我推薦的編碼工具是VSCODE或者HBUILDER,都2019年了就不要再提Dreamweaver了。 第三部分,這一部分主要是想給學生們介紹一下標籤大致的分類以及特色,你們還記得標籤是什麼麼?就是組成你的一個一個的小「模塊」。 通過剛纔的嘗試你們大概能夠發現標籤有這幾個特徵: 1.標籤大部分是成對出現的,可是也是能夠不成對出現 2.標籤是不區分大小寫的 3.標籤要閉合不然頁面會出錯,尤爲在不成對出現的時候 一個標籤在頁面上會生成一塊對應的「元素」。一共分爲三大類: 1.行內元素 2.塊級元素 3.行內塊元素 那麼他們都有什麼區別呢? 行內元素的表明span,讓咱們來試試先
多寫兩個試試
那麼咱們在加上一個塊級元素試一下(div)
那個「i am div」掉下來了!那麼我多寫幾個div
運行一下試試
每個塊級元素單獨佔一行,而行內元素能夠多個在一行以內展現,在一行放不開的狀況下才會分行