靜態頁面製作:5HTML布局

標籤：字母   那是   閱讀   方式   另一個   元素   允許   height   使用者   

上節課我們大概是得到了的一個效果，課後幫和HomeWorkHelper分別獲得了帶下以及樣式。但是他們倆實際上是分在兩行的。我們來看一下理想與現實的一個對比。我們看到現實與理想之間還是有一定差距的。我們的理想效果是課後幫與HWHelper是在一行，但現實情況卻是在兩行。我們期望的效果是在一行並且HWHelper在課後幫的右上方。其實實現這個效果並不難，我們先來對現在的情況進行一些分析。我們想要將兩行文字合為一行，會通過兩種方式來實現，我們從這兩種方式中管中窺豹來瞭解網頁是如何布局的。我們看到，兩段文字是不在一行的，其實對於文字不在一行這件事，有些讓人難以理解，不理解的原因也很簡單，那就是我們不清楚HTML的布局是什麼規則，如果我們瞭解了布局規則，也就不難理解，為什麼文字不在一行了。以及我們針對性的可以做什麼操作。這兩個元素為什麼不在一行的原因很簡單，因為每個元素都獨佔了一行，我們可以看到，課後幫我們給它套了一個h1標籤，然後HWHelper套了一個p標籤。不太講理的地方就是某些標籤元素，天生就獨佔滿行。例如h1標籤、p標籤他們就是天生就是要佔滿整行的。這種標籤元素我們給他取個名字，叫做塊元素，英文叫做block。那麼此時如果我們去看他們的寬度的話，他們的寬度是佔滿容器百分百的寬度。並且寬度和高度是可以設定的，但我們千萬不要以為他們是因為寬度太寬才會獨佔滿行，其實即使我們把寬度變小，他們也不會跟其他元素在同一行。這是塊元素的一個重要特點。即使我們將兩個塊元素的寬度變小，小到一行可以足夠容器兩行，他們也不會在一起，因為他們是塊元素。就是這麼跋扈。 就是不跟其他元素在一行。我們之前講到了一些標籤，有很多標籤都是塊元素，比如：div、h1、h2、h3以及p標籤他們都是塊元素，有這些比較跋扈的，不會和其他標籤擺在一行的塊元素，也有比較隨和的，也就是可以擺在一行的。那是什麼呢？行內元素，就是可以和其他標籤元素融合在一起的，英文是inline. 行內元素的高度和寬度是不可以設定的，完全跟內容而定。其實我們之前也接觸過行內標籤，比如說：a標籤，它就是一個行內元素。現在我們來分析一下我們當前的情況，看我們不難發現，課後幫以及HWHelper都是塊標籤元素，他們預設佔據了螢幕的百分百的寬度，高度是自動的一個高度。如果我們添加一些樣式，讓他們的寬度變小。雖然寬度變小了，但是由於他們是塊元素，仍然不會跟其他元素同在一行。既然他們這麼跋扈，沒有可商量的餘地，我們暫且也不管他們。我們來看看行內標籤。我們添加了兩個a標籤，我們發現兩個a標籤同在一行，比較隨和。但是只是a標籤在一行，上面那兩位大爺仍然是自己搞一行。我們在兩個a標籤的下方，再加一個div標籤，我們看到div也是塊元素，他也是大爺。自己就佔滿整行了。 現在我們來做一件事，就是給div的寬度變短一點，看看效果。此時雖然我們給div加了樣式，讓他的寬度變很短了，但是仍然是獨佔一行。現在我們需要整理一下剛剛的分析。有兩點： 第一：我們瞭解了塊元素（block），他的特點就是天生跋扈，獨佔滿行。高和寬是可以設定的。即使寬高設定很小，也不會跟其他元素分享一行。它是大爺！第二： 我們又瞭解了行內元素(inline)，這個哥們就很隨和，但也有屬於自己的特點。他雖然可以和其他元素分享一行，但是他的寬高是不能設定的，就是跟著內容的寬高而定。以上兩點是非常重要的知識點，希望大家能好好領會，那我們現在再來看看理想和現實。雖然我們現在現實還沒有達到理想的效果，但現在至少我們已經明白為什麼課後幫和HWHelper為什麼不在一行了，為什麼呢？那就是因為他們都是塊元素。那麼有沒有什麼辦法讓這兩個元素編程行內元素，一旦成為行內元素，他們不就跑到一行去了嗎。所以我們來看看方法一。方法一就是使用行內元素，行內元素可以擺在一行，我們現在明確的知道，h1標籤和p標籤他們都是塊元素，所以我們該用哪個元素呢？我們接觸過的行內元素就是a標籤，我們是否可以使用a標籤來解決這個問題呢？其實a標籤是不合適的，因為a標籤都是應用於超連結，那麼課後幫和HWHelper他們其實都不是超連結，或者說我們並不希望他是超連結。那麼問題來了，就是除了a標籤之外，有沒有用於文字的行內標籤元素呢？答案是必須的，那就是span標籤，span的意思就是小範圍的意思，主要用於一小段文字，這正符合我們的要求。至於行不行我們試試再說。首先我們把HWHelper換成span標籤試試。當把HWHelper從p標籤換成span標籤，現在就變成行內元素了。他的寬度也隨之縮小，也就是和內容寬度是一樣的。但是效果仍然沒有達到，我們是否也需要將h1換成span標籤呢，我給大家的建議是最好不要換。為什麼呢？這裡我們需要引入一個很重要的概念。那就是標籤語義化。我們的網站如果發布到網路上，搜尋引擎會派出網路蜘蛛來爬取我們網站的關鍵字，從而在使用者搜尋到相關的關鍵字的時候，把我們的網站呈現給使用者。搜尋引擎派出的網路蜘蛛畢竟不是人， 它其實不會看瀏覽器的效果，而是通過HTML代碼來識別我們的頁面。 所謂識別頁面其實就是通過HTML中標籤來識別我們的內容。例如那些是標題，那些事段落文字，那些是圖片都是通過標籤來爬取的。從這個角度看，那課後幫用h1標籤就再適合不過了，因為他就是我們整個網站的標題。然後網路蜘蛛過來一爬取就知道，原來這個網站的標題就叫做課後幫，這樣他就明白了。標籤語義化的另一個好處就是代碼更容易閱讀，比如說你寫了一個HTML代碼，裡面全是h1、span、p標籤等，那我完全不知道到底哪個是標題，哪個是段落，哪個是一小段文字。 但如果我看到你裡面只有一個h1標籤，那我馬上就知道你到底在說什麼。所以說h1標籤最好不要換。 現在問題又來了，h1標籤不允許換，然後他又是塊元素，那怎麼辦呢？ 其實是有辦法的，我們繼續往下看。我們說這個一個標籤到底是塊元素還是行內元素並不是一成不變的，不是說天生怎樣他就是怎麼樣， 其實我們是可以通過樣式來改變的。什麼樣式呢？就是display, 我們這裡提到兩個寫法，分別是display:block和display:inline。 那這個有什麼作用呢，就是別管你之前寫的是塊元素還是行內元素，一旦你在樣式中指定display：block 它就變成了塊元素。同理只要你寫上display:inline就會變成行內元素。我們來做一下。我們為h1標籤添加樣式，使h1標籤從塊元素變成行內元素。叫做display：inline；我們希望能夠達到我們想要效果，看。此時課後幫就變成行內元素了，然後就跟HWHelper公用一行了。其實我們已經達到了成為一行的效果，現在我們在來看一下現實和理想還有沒有差距。我們發現已經接近了理想效果，但是還是有些細節不太一樣，哪裡不一樣呢？就是課後幫和HWHelper的樣式。我們理想的樣式是課後幫和HWHelper是頂端對齊，但是我們現實的效果是底端對齊， 那這個是怎麼回事呢？難道說行內元素預設是底端對齊嗎？這個理解不是很到位，我們對於這個細節來詳細解釋一下。我們通過寫過的英文字母書寫格式來舉例，通過這個例子來深究底端對齊這麼一個細節。英文子母在我們書寫的時候，都有四線格， 其中從上往下數第三根線其實非常重要，他有一個自己的名字叫做基準， 我們看到圖中寫的7個字母。 這7個字母其實大多數都是以基準為基準的。首先看字母a、c、e體型比較小，那完全是在第二根和第三根之間。 字母b、d、f比較長，所以他們伸出去了。 長出來的部分伸到了第一根和第二根之間， 那麼字母g又比較特別，它其實分上下兩個部分。 上半部分也是以基準為準，在2、3根線之間，那麼下半部分就伸到了3、4根之間。總而言之，這個基準對於英文字母的書寫是非常重要的。那麼我們來看看我們寫的這幾個字。其實課後幫這幾個字也有一根基準， 但是這根基準並不是我們所想的那樣，是不是從最底下開始的， 其實不是。他其實離最低端的部分有一段距離，課後幫這幾個字有基準，其實HWHelper也有一根基準。HWHelper這個基準其實就跟我們的英文字母的基準差不多，但實際上HWHelper的基準和課後幫的基準並不在同一條水平線上。因為文字大小不一樣，並且文字類型也不一樣，一個是中文一個是英文，所以就更不一樣了。那我們現在想做的事情就是讓同一行的元素基準對齊。同一行的行內元素，基準要想對齊，這事怎麼辦呢？因為基準不一樣，咱們得想個辦法。我們這裡採用的辦法就是，讓這兩個元素互相靠近。當兩個元素互相靠近之後，我們發現現在基準已經在底端對齊了，看起來效果就很好了，但是這個並不是我們理想的效果。我們理想的效果明明是在頂端對齊，那這事該怎麼辦呢？我們可以通過樣式來控制同一行的行內元素的對齊，通過什麼樣式來控制呢？vertical:align這麼一個東西來控制垂直的對齊，現在的狀態實際上是一個預設狀態。vertical-align:baseline; 其實就是我們所謂的基準對齊，我們不滿意，我們不滿意誰呢，其實是HWHelper這幾個字，我們希望他在頂部。那我們就要對它進行修改。我們添加一個vertical-align：top；當我們添加這麼一個方法時， 就會和整個行內元素頂部最高的對齊。 其實現在就符合我們的要求了，那我們來看看代碼。在代碼中我們是有這樣的一個樣式，就是h1標籤中有display:inline；這麼寫之後，課後幫就變成了行內元素， 然後把HWHelper改成了span標籤，那麼接下來我們需要讓其頂端對齊。我們把代碼填上。此時我們就已經達到我們理想的效果了，這裡我們需要把代碼寫入到我們的sublime中。這裡我們來整理一下我們今天所講的內容，其實我們主要做了三件事：第一件事: 是我們把塊元素p標籤改成了行內元素標籤span。第二件事: 是我們把h1標題標籤通過display:inline；變成了列標籤，使兩行可以共用一行。第三件事: 是我們不滿意底端對齊，所以我們通過vertical-align改變標籤的樣式。從而達到我們最理想的效果，以上是我們今天的內容，我們下節會繼續分享“浮動騰挪”。

靜態頁面製作:5HTML布局