[HeadFrist-HTMLCSS學習筆記]第一章Web語言：開始瞭解HTML

時間 2019-11-07

標籤 headfrist htmlcss 學習筆記第一章 web 語言開始瞭解 html 欄目 HTML 简体版

原文原文鏈接

[HeadFrist-HTMLCSS學習筆記]第一章Web語言：開始瞭解HTML

宏觀瞭解Web是如何工做的

要創建Web頁面，就須要用超文本標記語言（HyperText Markup Language，簡寫爲HTML）編寫一個文件，並將他們放在一個Web服務器上
一旦把文件放在Web服務器上，任何瀏覽器就能經過互聯網獲得你的Web頁面

Web服務器能作什麼

每一個Web服務器都會存儲HTML文件，圖像，聲音等文件
服務器端就是一個鏈接到互聯網的計算機，等待來自瀏覽器的請求
等待來自Web瀏覽器的請求，多是請求Web頁面，圖像或聲音等
收到請求後，會查找所請求的資源，而後把找到的資源發給瀏覽器

Web瀏覽器能作什麼

單機連接訪問頁面->瀏覽器向Web服務器請求一個HTML頁面->獲取這個頁面，並在你的瀏覽窗口顯示css

範例代碼（HTML）

<html>
    <head>                                           <!-- 頁面「Head」開始 -->
        <title>Head First Lounge</title>             <!-- 網頁名字 -->
    </head>                                          <!-- Head結束 -->
    <body>                                           <!-- 頁面主體body開始 -->
        <h1>Welcome to the Head First Lounge</h1>    <!-- 一級標題 -->
        <img src="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 Webbille. Come join us!
        </p>                                         <!-- 段落結束 -->
    </body>                                          <!-- 頁面主體結束 -->
</html>

瀏覽器建立的頁面

瀏覽器讀HTML時，會翻譯文本中的全部標記（標記是括起來的詞），例如 <head>,<p>,<h1>
HTML會肯定標題，圖片所放的位置，後期能夠經過CSS增長新的樣式
瀏覽器顯示的標題一共有6級，從<h1>到<h6>,字體從大到小，通常不會用到<h3>

本身第一個html文件！！

<html>
    <head>
        <title>Starbuzz Coffe</title>
    </head>
    
    <body>
        <h1>Starbuzz coffee Beverages</h1>
        <h2>House Blend,$1.49</h2>
        <p>A smooth,mild blend of coffees from Mexico,Bolivia and civatenala.</p>                                   

        <h2>Mocha cafe catte,$2.35</h2>
        <p>Espresso,steamed milk and hocolate syryp</p>

        <h2>Cappuccino,$1.89</h2>
        <p>Amixture of espresso,steamed milk and foam.</p>
        </body>
</html>

雖然頁面結果挺醜的。。。
html

標記剖析

元素 = 開始標記 + 內容 + 結束標記
瀏覽器不關心空格，製表符，回車

遇到的問題

A smooth,mild blend of coffees from Mexico,Bolivia and Guatemala.web

id這個不太懂，還正在尋求解決瀏覽器

認識style元素

<style>元素放在HTML的首部裏
與替他元素相似，有一個開始標誌和一個結束標誌
<style>標記能夠加一個屬性type,能夠代表所使用的樣式。如：<style type="text/css">
<style>定義頁面樣式

<style type="text/css">
        body{                             <!-- 表示應用於HTML <body>元素中的內容 -->
            background-color: #d2b48c;    <!-- 背景顏色 -->
            margin-left: 20%;             <!-- 左頁邊距 -->
            margin-right: 20%;            <!-- 右頁邊距 -->
            border: 2px dotted black;     <!-- 定義頁面主體周圍的邊距是虛線，顏色爲黑色 -->
            padding: 10px 10px 10px 10px; <!-- 在頁面主體周圍建立內邊距 -->
            font-family: sans-serif;      <!-- 定義文本使用的字體 -->
        }
        </style>

樣式也好看了不少~
服務器