【WEB基礎】HTML & CSS 基礎入門（1）初識

青衫煙雨客發表於2019-05-20
WebHTMLCSS

前面

我們每天都在瀏覽著網路上豐富多彩的頁面，那麼在網頁中所呈現出的絢麗多彩的內容是怎麼設計出來的呢？我們想要自己設計一個頁面又該如何來做呢？對於剛剛接觸網頁設計的小夥伴來說，看到網頁背後的一堆符號和程式碼，是不是會感到有些凌亂。“看這裡、看這裡”，其實HTML並不複雜，嚴格意義上它並不是程式設計，它只是一些標記，也可以說是和瀏覽器的一些“約定”，就是告訴瀏覽器，要顯示什麼內容，這些內容是什麼樣式。

好了，不廢話了，來個例子看下：

一個 HTML 小例子

第一步：新建“記事本”，把下面這段程式碼複製到記事本中去，然後儲存。

<!DOCTYPE HTML>
<html>
    <head>
        <title>網頁的標題</title>    
    </head>
    <body>
        <p>左手程式Z右手詩</p>       
    </body>
</html>

第二步：將記事本字尾名“.txt”改為“.html”。

第三步：點選“新建文字文件.html”這個HTML檔案，就可以在瀏覽器開啟了。

OK，是不是很簡單，我們看一下過程：

通過上面的幾行程式碼，不難看出，HTML就是由一些用尖括號圍起來並且成對出現的標籤組成。不錯，HTML就是由若干標籤及其包含的內容組成，這些標籤一般都是成對出現的，有開始和結束，但也有部分自閉合標籤例外，HTML的基本結構由以下幾個部分組成：

  • 標記符<html>和</html>，表明該檔案是用HTML來描述的，宣告瞭文件的開頭和結尾。
  • 標記符<head>和 </head>，表示HTML文件頭部資訊的開始和結尾。頭部資訊主要包括頁面的標題、相關說明等內容，它不作為網頁的內容在瀏覽器中顯示。
  • 標記符<body>和</body>，網頁中要顯示的實際內容就在這兩個標記符之間，它是網頁的主體部分。

我們再對前面記事本里的程式碼加上註釋，就會看的更明白。

<!DOCTYPE HTML>  <!--宣告這是一個HTML文件-->
<html>  <!--告訴瀏覽器網頁是從這裡開始的-->
<head>  <!--這是網頁的頭部開始-->
    <title></title> <!--這是網頁的標題，這裡為空-->
</head>  <!--這是網頁的頭部結束-->
<body>  <!--這是網頁的主體部分開始-->
    <p>左手程式Z右手詩</p>  <!--這是要在瀏覽器上顯示的內容-->
</body>  <!--這是網頁的主體部分結束-->
</html>  <!--告訴瀏覽器網頁在這裡結束了-->

HTML 小總結

HTML（Hypertext Markup Language） 是用來描述網頁的一種語言。

HTML 指的是超文字標記語言，不是一種程式語言，而是一種標記語言，標記語言是一套標記標籤 (markup tag)。

HTML 使用標記標籤來描述網頁。

簡單說來，HTML 就是我們與瀏覽器用來溝通交流的語言，我們通過 HTML 告訴瀏覽器讓它按照我們的意願展示出我們期望的內容及效果。

認識一下 CSS

大概瞭解了一下 THML，我們在來看一下 CSS，其實 CSS 就是一個標準的“顏值黨”，它基本決定了網頁的外觀樣式。HTML 和 CSS 相輔相成，它們一個負責網頁上要顯示的內容，另一個負責這些內容的佈局和樣式。

看個小例子，比如我要調整前面記事本里 HTML 所顯示文字的字型、顏色和大小，如下：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>網頁的標題</title>
    <!--下面是CSS樣式程式碼，與HTML在同一個文件中 -->
    <style type="text/css">
        p {
            font-family: 微軟雅黑; /*設定標籤P裡面字型*/
            font-size: 12pt; /*設定標籤P裡面字型大小*/
            color: white; /*設定標籤P裡面字型顏色*/
            background-color: green; /*設定標籤P背景顏色*/
        }
    </style>
</head>
<body>
    <p>左手程式Z右手詩</p>
</body>
</html>

先看一下在瀏覽器中的顯示效果：

不難看出，在 HTML 文件的頭部，就是<head></head>標記的裡面加上了<style></style>，在這裡定了<p></p>的樣式，字型是“微軟雅黑”，大小是“12pt”，顏色是“白色”，背景是“綠色”。

最後

OK！看完的小夥伴應該大概瞭解 HTML 和 CSS 是幹什麼的了吧，稍微總結一下，HTML就是一堆標籤，這些標籤告訴瀏覽器要顯示的內容的是什麼，CSS 就是告訴瀏覽器要如何顯示這些內容。列一下前面例子裡出現過的標籤：

<html><!--HTML 頁面開始標籤-->

<head><!--頁面頭部標籤-->
    <!--在頭部標籤裡一般放置“標題標籤”、“CSS樣式”、“JS程式碼”等內容-->
    <title></title><!--頁面標題標籤-->
   
    <style type="text/css">
        /*頁面樣式標籤*/
        /*type是個屬性，是說明樣式的內容型別，一般固定就是“text/css”*/
        /*在這裡可以設定頁面各個元素的樣式*/
    </style>

</head><!--頁面頭部結束標籤-->

<body><!--HTML 頁面主體標籤，要在網頁上顯示的內容都要放在這裡面-->

    <p></p><!--p標籤表示一個段落-->

</body><!--主體標籤結束標記-->

</html><!--HTML 頁面結束標籤-->

一點說明

程式碼加註釋是非常必要且重要的，它能提高程式碼的可讀性。註釋不參與編譯，不會被執行，THML註釋同樣也不會在瀏覽器裡顯示，它只是程式碼的說明。

HTML註釋：“<!--”表示註釋的開始，“-->”表示註釋的結束。

CSS註釋：“/*”表示註釋的開始，“*/”表示註釋的結束。

------------------END

相關文章