手摸手教你編寫你人生中第一個HTML頁面

時間  2019-12-20
標籤 編寫 人生 第一個 html 頁面 欄目 興趣愛好 简体版
原文   原文鏈接
本文是《HTML5與CSS3基礎語法自學教程》的第二篇，首發於【前端課湛】微信公衆號。

導讀：本小節主要講解 HTML 的基礎語法內容，將經過編寫第一個 HTML 頁面來學習 HTML 的基本結構、<!DOCTYPE> 聲明、元素和註釋等內容。經過本小節的學習能夠對 HTML 的基礎語法有個全面的掌握，這也是咱們後續學習 HTML 其餘內容時必需要用到的。javascript

提示：學習 HTML 基礎語法須要用到開發編輯器，這裏使用 Visual Studio Code 編輯器。固然，你也能夠選擇你更熟悉的開發編輯器來使用。關於 Visual Studio Code 編輯器的基本操做能夠參考本小節中 擴展閱讀。

1. HTML 基本結構

1.1 建立第一個 HTML 頁面

打開 Visual Studio Code 編輯器新建一個文件，而且保存爲 .html 或 .htm 擴展名的文件。而後，在新建的 HTML 文件中輸入 HTML，這時 Visual Studio Code 編輯器會彈出提示框。css

以下圖所示展現了輸入以後的提示框：html

02-01.png

根據 Visual Studio Code 編輯器的提示，選擇【html : 5】這個選項，就建立好了一個 HTML 的基本結構。前端

以下圖所示展現了建立以後的 HTML 模板內容：java

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

</body>

</html>
說明：【html : 5】選項表示使用 HTML5 版本的模板。

1.2 HTML 模板簡要說明

建立了 HTML5 版本的基本結構，接下來咱們以從上到下的順序，對這個基本結構中比較核心的內容進行簡單地初步瞭解。程序員

1.2.1 <!DOCTYPE> 聲明

<!DOCTYPE html>

在 HTML5 基本結構的第一行，這塊內容被稱爲 HTML 聲明。HTML 聲明的做用是瀏覽器運行該 HTML 頁面時，告知瀏覽器當前 HTML 頁面的版本。瀏覽器

1.2.2 HTML 基本結構

<html lang="en">

    <head></head>
  
    <body></body>

</html>

除了第一行的 HTML 聲明以外，其他內容纔算是 HTML 的基本結構。接下來咱們進行分別說明：微信

  • <html> 元素：表示當前 HTML 頁面的根元素，用來包含全部其餘 HTML 元素。
  • <head> 元素：表示當前 HTML 頁面的頭部，用來定義當前 HTML 頁面的基本信息，例如標題、關鍵字、做者等內容。
  • <body> 元素：表示當前 HTML 頁面的主體，用來定義最終顯示在瀏覽器窗口的內容。

2. <!DOCTYPE> 聲明

HTML 頁面的第一行通常都是編寫 HTML 聲明。HTML 聲明的做用就是當瀏覽器運行該 HTML 頁面時來告知瀏覽器當前 HTML 頁面的版本，這樣瀏覽器會準確地進行解析並展現其內容。框架

HTML 聲明必需要編寫在 HTML 頁面的第一行，通常都是在 <html> 元素以前。而且 HTML 聲明以前不能存在空行或者空格，否則會致使 HTML 聲明失效。編輯器

瀏覽器發展至今，其功能也很是的強大。因此，若是 HTML 頁面沒有定義 <!DOCTYPE> 聲明的話，瀏覽器也能夠正確地解析該 HTML 頁面並進行顯示。可是，仍是建議在編寫 HTML 頁面時定義 <!DOCTYPE> 聲明。

再有，咱們須要注意 HTML5 版本和 HTML 4.01 版本的聲明是不一樣的。

  • 以下示例代碼所示展現了 HTML5 版本的聲明：
<!DOCTYPE html>

  • HTML 4.01 版本的聲明分別存在三個版本。

    • HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

該聲明是嚴格型約束，該 DTD 文件包含全部 HTML 元素和屬性，但不包括展現性的和棄用的元素（好比 font），也不容許框架集（Framesets）。

  • HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

該聲明是過渡型約束，該 DTD 文件包含全部 HTML 元素和屬性，包括展現性的和棄用的元素（好比 font），但不容許框架集（Framesets）。

  • HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

該聲明是框架集約束，該 DTD 等同於 HTML 4.01 Transitional，但容許框架集內容。

經過兩個版本的 HTML 聲明內容，咱們也能夠看出 HTML5 版本的聲明內容簡化了很多。不只沒有了版本信息，也不須要約束文件。

說明：約束文件指的是如上述 strict.dtd、 loose.dtd 或者 frameset.dtd 文件。HTML 的約束文件是用來定義 HTML 的元素以及編寫規範。

3. HTML 元素

除了 HTML 聲明以外，其餘內容都是 HTML 元素。首先，須要搞清楚元素（Element）和標籤（Tag）之間的區別，以下圖所示：

02-02.png

  • 元素（Element）：是用來包含文字、圖片或者音視頻的內容，通常是由標籤和內容組成。
  • 標籤（Tag）：是元素的組成部分，通常分爲開始標籤和結束標籤。

3.1 HTML 元素

HTML 元素是 HTML 的重要組成部分之一，以下圖所示展現了 HTML 元素的語法結構：

02-03.png

HTML 元素能夠分爲閉合元素和空元素兩種類型：

  • 閉合元素：具備開始標籤和結束標籤，並且開始標籤和結束標籤是成對出現的。以下示例代碼展現了閉合元素：
<div>文本內容</div>
  • 空元素：只有開始標籤，而沒有結束標籤。以下示例代碼展現了空元素：
<input type="text">
注意：在編寫 HTML 元素時，若是是閉合元素不要忘記結束標籤，若是是空元素不要編寫結束標籤。目前的開發編輯器會有相應的提示功能。

因爲 HTML 是大小寫不敏感的，因此 HTML 元素的元素名寫成大寫或小寫都是容許的，例如 <div>、<Div> 和 <DIV> 是同樣的含義。

可是 W3C 組織早在 HTML4 版本時，建議元素名使用小寫形式。後來出現的 XHTML 是強制元素名必須使用小寫形式。因此，元素名的編寫仍是儘可能使用小寫形式，並且如今的開發編輯器的提供功能也都是小寫形式的。

注意： <html> 元素是比較特殊的元素，稱爲根元素。在一個 HTML 頁面中只能存在一個 <html> 元素，即便編寫了多個 <html> 元素，運行 HTML 頁面時瀏覽器也會自動忽略。

3.2 HTML 標籤

HTML 標籤其實是 HTML 元素的組成部分之一，分爲開始標籤和結束標籤。

  • 開始標籤（Opening Tag）：表示某個元素是從這裏開始的。
  • 結束標籤（Closing Tag）：表示某個元素是到這裏結束的。

不管是開始標籤仍是結束標籤都具備的結構：

  • 左尖角號
  • 元素名
  • 右尖角號

以下圖所示展現了標籤的結構：

02-04.png
而結束標籤相比開始標籤多了個結束符（/）。以下圖所示展現告終束標籤的結構：

02-05.png

3.3 HTML 元素的屬性

屬性是 HTML 元素的重要組成部分，用來定義某個元素的信息。例如爲 <div> 元素定義 ID 屬性，就是定義了惟一標識。

屬性定義在元素的開始標籤中，這樣不管是閉合元素仍是空元素均可以正常使用屬性。屬性的語法結構是鍵值對形式的。以下圖所示展現了屬性的語法結構：

02-06.png

  • 屬性名（attribute name）：其數量和做用都是 HTML 給定的。
  • 屬性值（attribute value）：屬性對應的值，建議使用一對雙引號進行包裹。
注意：不一樣的屬性，對應不一樣類型的值。

與元素的狀況相似，屬性的編寫 W3C 組織也是建議使用小寫形式。目前開發編輯器的提示功能也都是提供小寫形式的。

同一個元素是容許編寫多個不一樣的屬性的，但在同一個元素中不能同時定義多個相同的屬性。再有，HTML 元素的屬性能夠劃分爲如下 4 種：

  1. 標準（通用）屬性：HTML 元素幾乎都具備的屬性，例如 id、name、style 和 class 屬性等。
  2. 專有（私有）屬性：HTML 中某些元素特有的屬性，例如 <form> 元素的 action 屬性等。
  3. 事件屬性：用來爲 HTML 元素註冊 DOM 事件的屬性，例如 onclick 屬性等。
  4. 自定義屬性：第三方框架中爲了完成某個特定功能而定義的屬性，例如 Vue 框架的 v-if 屬性等。

4. HTML 頭部

HTML 頭部具體是指 <head> 元素以及該元素所包含的全部元素，其做用是用來定義當前 HTML 頁面的基本信息，例如 HTML 頁面的標題、編寫格式、做者、關鍵字以及描述等內容。

4.1 <head> 元素

<head> 元素是 HTML 頁面基本結構中的組成部分，其做用是定義 HTML 頁面的基本信息。可定義在 <head> 元素內的元素有以下：

  • <title> 元素：定義 HTML 頁面的標題，顯示在瀏覽器的標題或標籤頁上。以下示例代碼所示展現了 <title> 元素的用法：
<title>Document</title>
  • <base> 元素：定義 HTML 頁面中全部相對 URL 的根 URL。以下示例代碼所示展現了 <base> 元素的用法：
<base target="_blank" href="http://www.example.com/">
注意：一個 HTML 頁面只能定義一個 <base> 元素。若是一個 HTML 頁面定義了多個 <base> 元素的話，則只有第一個 <base> 元素有效。
  • <link> 元素：定義 HTML 頁面引入的外部資源，比較常見的是引入外部 CSS 文件或圖標文件等。


以下示例代碼所示展現了經過 <link> 元素引入外部 CSS 文件：

<link href="link-element-example.css" rel="stylesheet">

  • 以下示例代碼所示展現了經過 <link> 元素引入外部圖標文件：
<link rel="icon" href="favicon.ico">
  • <style> 元素：定義 HTML 頁面的 CSS 樣式，通常稱爲內嵌樣式表。以下示例代碼所示展現了經過 <style> 元素定義內嵌樣式表：
<style type="text/css">
    body {
      color:red;
    }
</style>
  • <meta> 元素：定義 HTML 頁面的元數據信息，例如編碼格式、做者、關鍵字等。以下示例代碼所示展現了經過 <meta> 元素的用法：
<meta charset="UTF-8">
  • <script> 元素：定義 HTML 頁面的可執行的腳本，通常多爲 JavaScript 腳本。以下示例代碼所示展現了經過 <script> 元素定義 JavaScript 腳本代碼：
<script type="text/javascript">
    console.log('打印一個測試信息.');
</script>
  • <noscript> 元素：定義當 HTML 頁面的腳本代碼不被支持或者瀏覽器關閉了腳本執行時的替代內容。以下示例代碼所示展現了 <noscript> 元素的用法：
<noscript>
    <a href="http://www.example.com/">這是一個連接</a>
</noscript>
  • <command> 元素：定義 HTML 頁面容許用戶能夠調用的命令。該元素已被廢棄！

4.2 <meta> 元素

<meta> 元素是用來定義不能由 <base>、<link>、<script>、<style> 和 <title> 元素定義的元數據信息。而且 <meta> 元素是個空元素。

<meta> 元素經常使用的用法以下所示：

  • 爲搜索引擎定義關鍵詞：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  • 爲網頁定義描述內容：
<meta name="description" content="Free Web tutorials on HTML and CSS">
  • 定義網頁做者：
<meta name="author" content="KingJ">
  • 每30秒中刷新當前頁：
<meta http-equiv="refresh" content="30">
  • HTML5 版本定義編碼格式：
<meta charset="UTF-8">
  • 定義 HTML 頁面的視口：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
提示：除了以上羅列的常見用法以外， <meta> 元素還有不少其餘用法，具體的用法在對應的章節進行詳細講解。

5. HTML 註釋

與不少開發語言相似，HTML 語言提供了編寫註釋的語法內容。在瀏覽器運行 HTML 頁面時，瀏覽器會自動忽略註釋裏面的內容，用戶是看不到 HTML 頁面中有關注釋的內容的。

當一段內容被 <!-- 和 --> 包裹起來時，那麼這段內容就是一個註釋內容了。以下圖所示展現了 HTML 註釋的語法結構：

02-07.png

註釋能夠用來更好地描述某一段 HTML 代碼的含義或做用。不管是本身一段時間以後回顧（review）代碼，仍是別人處理這段代碼，註釋都是起到了很大做用的。

說明：編寫註釋也是程序員在開發工做中的一個優良習慣，但願你能夠學習並保持這一優良習慣。

6. 擴展閱讀

6.1 Visual Studio Code 下載與安裝

Visual Studio Code 編輯器是 Microsoft 公司在 2015 年 4 月 30 日 Build 開發者大會上推出的一款運行於 Mac OS X、Windows 和 Linux 之上的，針對於編寫現代 Web 和雲應用的跨平臺源代碼編輯器。

咱們能夠經過訪問 Visual Studio Code 編輯器的 官網 來了解，以下圖所示展現了 Visual Studio Code 官網的部分界面：

02-08.png

Visual Studio Code 編輯器的官網會自動識別咱們當前的操做系統，並提供對應的安裝包下載。咱們須要作的就是下載對應版本的安裝包到本地電腦，再進行安裝便可。

提示：這裏有關具體的下載和安裝步驟就不作詳細說明了，由於很是的簡單。

6.2 Visual Studio Code 設置中文界面

通常狀況下，安裝好的 Visual Studio Code 編輯器的界面就是中文的。但也不妨有特殊狀況出現，若是你在安裝完 Visual Studio Code 打開後發現界面是英文（或者是任何其餘語言）界面能夠經過擴展安裝中文語言插件來解決。具體能夠按照以下步驟進行操做：

提示：如下操做請在你的電腦能夠正常聯網的狀況下進行操做。

a. 打開 Visual Studio Code 編輯器的擴展界面

打開 Visual Studio Code 編輯器以後，咱們能夠看到在最左邊是有 5 個菜單的。其中第 5 個菜單（圖標）表示是擴展，以下圖所示展現了擴展菜單所在的位置：

02-09.png

b. 搜索中文語言插件包

在擴展界面的搜索框中，輸入【Chinese】關鍵字來搜索中文語言插件包。搜索結果中的第一個結果通常就是咱們要找的中文語言插件包，以下圖所示展現了搜索結果：

02-10.png

在搜索中第一個結果點擊【Install】按鈕，來安裝對應的插件包便可。

c. 重啓 Visual Studio Code 編輯器

安裝成功以後 Visual Studio Code 編輯器會彈出讓你重啓編輯器的提示框，以下圖所示展現安裝插件成功以後的提示框：

02-11.png

這時點擊提示框中的【Restart Now】按鈕，來重啓 Visual Studio Code 編輯器。重啓以後，Visual Studio Code 編輯器的界面就成功地改成了中文。以下圖所示展現了中文操做界面的 Visual Studio Code 編輯器：

02-12.png

6.3 Visual Studio Code 新建文件

Visual Studio Code 編輯器新建文件有兩種方式進行操做：

a. 經過菜單完成新建操做

點擊 Visual Studio Code 編輯器頂部菜單中的【文件】，在彈出的菜單中選擇【新建文件】選項，完成新建文件的操做。

以下圖所示展現了新建文件的菜單位置：

02-13.png

b. 經過快捷鍵完成新建操做

若是你的操做系統是 Windows 的話，能夠經過【Ctrl+N】快捷鍵直接建立一個新的文件。若是你的操做系統是 Mac OS 的話，能夠經過【Command+N】快捷鍵直接建立一個新的文件。

注意：新建的文件在沒有保存的狀況下，是沒有任何擴展名的。也就是說，新建的文件不屬於任何文件類型。

6.4 Visual Studio Code 保存文件

Visual Studio Code 編輯器保存文件有兩種方式進行操做：

a. 經過菜單完成保存操做

點擊 Visual Studio Code 編輯器頂部菜單中的【文件】，在彈出的菜單中選擇【保存】選項，完成保存文件的操做。

以下圖所示展現了保存文件的菜單位置：

02-14.png

b. 經過快捷鍵完成保存操做

若是你的操做系統是 Windows 的話，能夠經過【Ctrl+S】快捷鍵完成保存文件的操做。若是你的操做系統是 Mac OS 的話，能夠經過【Command+S】快捷鍵完成保存文件的操做。

注意：保存文件的時候必定要指定文件的擴展名。若是不指定文件的擴展名，該文件將不屬於任何文件類型，而且會影響該文件的內容編寫。

7. 總結

本小節從 HTML 基本結構開始講解，而後根據 HTML 基本結構進行分別講解，其中包括 <!DOCTYPE> 聲明、HTML 元素、HTML 頭部以及 HTML 註釋等內容。其中：

  • <!DOCTYPE> 聲明：重點在於其做用是什麼、用法與注意事項，以及 HTML 4.01 和 HTML 5 兩個版本的寫法。
  • HTML 元素：重點在於 HTML 元素的語法結構、分類和分類的特色，以及屬性的相關內容。
  • HTML 頭部：重點在於 HTML 頭部的做用、包含哪些元素及做用，以及常見的 <meta> 元素的用法。

預告：下一節，咱們介紹 CSS 的基本信息，其中包括 CSS 概念、CSS 的發展歷程，以及 CSS 版本的發展歷程等內容。

做者二維碼.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程