第 2 章 基本格式

學習要點:

1.HTML5 文檔結構
2.文檔結構解析
3.元素標簽探討

主講教師:李炎恢

  本章主要先從 HTML5 的文檔結構談起。 這些基礎元素確定了 HTML 文檔的輪廓以及瀏覽器的初始環境。幾乎所有頁面都必須首先鍵入這些元素。

一.HTML5 文檔結構
1.第一步:打開 Sublime Text 3,打開指定文件夾;
2.第二步:保存 index.html 文件到磁盤中,.html 是網頁后綴;
3.第三步:開始編寫 HTML5 的基本格式。


<!DOCTYPE html>                                  //文檔類型聲明
<html lang="zh-cn">                              //表示 HTML 文檔開始
    <head>                                       //包含文檔元數據開始
        <meta charset="utf-8">                   //聲明字符編碼
        <title>基本結構</title>                   //設置文檔標題
    </head>                                      //包含文檔元數據結束
    <body>                                       //表示 HTML 文檔內容
        <a >炎黃養生</a>//一個超鏈接元素(標簽)
    </body>                                      //表示 HTML
</html>                                          //表示 HTML 文檔結束


二.文檔結構解析
1.Doctype
  文檔類型聲明(Document Type Declaration,也稱 Doctype)。它主要告訴瀏覽器所查看的文件類型。 在以往的 HTML4.01 和 XHTML1.0 中, 它表示具體的 HTML 版本和風格。而如今 HTML5 不需要表示版本和風格了。

<!DOCTYPE html>       //不分區大小寫

2.html 元素
  首先,元素就是標簽的意思,html 元素即 html 標簽。html 元素是文檔開始和結尾的元素。它是一個雙標簽,頭尾呼應,包含內容。這個元素有一個屬性和值:lang="zh-cn",表示文檔采用語言為:簡體中文。

<html lang="zh-cn">   //如果是英文則為 en

3.head 元素
  用來包含元數據內容,元數據包括:<link>、<meta>、<noscript>、<script>、<style>、<title>。這些內容用來瀏覽器提供信息,比如 link 提供 CSS 信息,script提供 JavaScript 信息,title 提供頁面標題等。

<head>...</head>     //這些信息在頁面不可見

4.meta 元素
  這個元素用來提供關于文檔的信息,起始結構有一個屬性為:charset="utf8"。表示告訴瀏覽器頁面采用的什么編碼,一般來說我們就用 utf8。當然,文件保存的時候也是utf8,而瀏覽器也設置 utf8 即可正確顯示中文。

<meta charset="utf-8">    //除了設置編碼,還有別的

5.title 元素
  這個元素很簡單,顧名思義:設置瀏覽器左上角的標題。

<title>基本結構</title>

6.body 元素
  用來包含文檔內容的元素,也就是瀏覽器可見區域部分。所有的可見內容,都應該在這個元素內部進行添加。

<body>...</body>

7.a 元素
  一個超鏈接,后面會詳細探討。

<a >炎黃養生</a>

三.元素標簽探討
  HTML 是一種標記語言,剛才的結構我們已經詳細探討過。這里,我們再剖析一下這些“標記”或者叫“標簽”,書面上經常稱作為“元素”的東西是怎么構成的。

1.元素
  元素就是一組告訴瀏覽器如何處理一些內容的標簽。每個元素都有一個關鍵字,比如<body>、<title>、<meta>都是元素。不同的標簽名稱代表不同的意義,后面將會涉及到段落標簽、文本標簽、鏈接標簽、圖片標簽等。
元素一般分為兩種:單標簽(空元素)和雙標簽。單標簽一般用于聲明或者插入某個元素,比如聲明字符編碼就用<meta>,插入圖片就用<img>;雙標簽一般用于設置一段區域的內容,將其包含起來,比如段落<p>...</p>。

2.屬性和值
  元素除了有單雙之分, 元素的內部還可以設置屬性和值。 這些屬性值用來改變元素某些方面的行為。比如超鏈接:<a>中的 href 屬性,里面替換網址即可鏈接到不同的網站。當然一個元素里面可以設置多個屬性,甚至自定義屬性。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,805評論 1 92
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,947評論 18 139
  • 簡介網絡瀏覽器很可能是使用最廣的軟件。在這篇入門文章中,我將會介紹它們的幕后工作原理。我們會了解到,從您在地址欄輸...
    wengjq閱讀 2,071評論 2 15
  • *以下內容翻譯自android wear的官方教程,本人水平有限,如有錯誤歡迎指出home以下正文 比起手機,在a...
    Daz_ye閱讀 1,051評論 0 8
  • 第一、性格內向,孤僻; 第二、缺乏好勝心; 第三、缺乏獨立性; 第四、缺乏自信心; 第五、太易相信別人;提倡“寧可...
    榮海田閱讀 5,294評論 2 2