Head First HTML 與 CSS（第二版）學習筆記

Cytues發表於2018-06-10
HTMLCSS筆記



第一個聊天室檔案

<!DOCTYPE html>
<html lang="en"><!-- 告訴瀏覽器HTML從這裡開始 -->
<head>頁面head開始
    <meta charset="UTF-8">
    <title>Head First Lounge</title>為頁面指定一個標題
</head>head結束
<body>頁面主體開始
    <h1>Welcome to the Head First Lounge</h1>告訴瀏覽器這是一個標題
    <img src="../images/drinks.gif">在這裡插入一個圖片
    <p>開始一個段落
        Join us any evening for refreshing elixirs,
        conversation and maybe a game or
        two of <em>Dance Dance Revolution</em>.強調這句話
        Wireless access is always provided;
        BYOWS (bring your own Web server).
    </p>段落結束
    <h2>Directions</h2>告訴瀏覽器這是一個子標題
    <p>開始另一個段落
        You'll find us right in the center of
        downtown Webville. Come join us!
    </p>段落結束
</body>頁面主體結束
</html>告訴瀏覽器HTML在這裡結束

效果圖：


瀏覽器會忽略掉HTML文件中的空白符，製表符，回車和大部分空格。實際上瀏覽器會根據你標記來確定在哪裡換行或分段。

瀏覽器通常顯示的標題一共有6級。<h1>-<h6>，字型由大到小。一般不會用到<h3>以後的標題。

HTML用<!-- -->來增加註釋，將要註釋的語句放在它們之間。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StarBUzz</title>
</head>
<body>
    <h1>StarBuzz Coffee Beverages</h1>
    <h2>House Blend, $1.4</h2>
    <p>A smooth, mild blend of coffees from Mexico, Bolivia
    and Guatemala.</p>
    <h2>Mocha Cafe Latte, $2.35</h2>
    <p>Espresso, steamed milk and chocolate syrup</p>
    <h2>Cappuccino, $1.89</h2>
    <p>A mixture of espresso, steamd milk and foam.</p>
    <h2>Chai Tea, $1.85</h2>
    <p>A spicy drink made with black tea, spices, milk and
    honey</p>
</body>
</html>

簡單的StarBuzz檔案。效果圖：


要告訴瀏覽器頁面的結構，需要用成對的標記包圍頁面內容。

元素=開始標記+內容+結束標記

匹配標記沒必要在同一行上。有些元素採取一種簡寫記法，只有一個標記。

認識style元素

<style>元素放在HTML的首部裡，與其他元素類似，<style>有一個開始標記和一個結束標記。

<style>標記還有一個可選的屬性：type，告訴瀏覽器使用什麼樣型別的樣式，如CSS或Javascript。

<style type="text/css">
        body {
                background-color: #d2b48c;設定背景色為土黃色
                margin-left: 20%;設定左右外邊距分別佔頁面的20%
                margin-right: 20%;
                border: 2px dotted black;定義頁面主題周圍的邊框是虛線，顏色為黑色
                padding: 10px 10px 10px 10px;在頁面周圍建立一些內邊距
                font-family: sans-serif定義文字使用的字型
        }
    </style>

新增的css屬性。效果圖：


BULLET POINTS

HTML和CSS是我們用來建立網頁的語言。

Web伺服器儲存並提供由HTML和CSS建立的網頁。瀏覽器獲取頁面，並根據HTML和CSS顯示網頁的內容。

HTML是超文字標記語言的縮寫，用來建立網頁的結構。

CSS是層疊樣式表的縮寫，用來控制HTML的表現。

通過HTML，我們利用標記來標識內容提供結構。把標記和內容稱為元素。

元素=開始標記+內容+結束標記

開始標記可以有屬性。

結束標記在左尖括號後面，標記名前有一個/。

網頁的資訊放在<head>元素裡。

<body>元素裡的內容就是你在瀏覽器裡看到的東西。

大多數空白符都會被瀏覽器忽略，不過可以利用空白符使HTML更有可讀性。

可以在<style>元素中寫CSS規則，<style>元素總要放在<head>裡。

可以使用css在HTML中指定元素的特性。



相關文章