web 基礎（一） HTML

學無止境發表於2020-06-26
WebHTML

web 基礎（一） HTML 與 XHTML

一、HTML介紹

HTML（ Hyper Text Markup Language）指的是超文字標記語言，是用來描述網頁的一種語言。它包括一系列標籤．通過這些標籤可以將網路上的文件格式統一，使分散的Internet資源連線為一個邏輯整體。

（一）特點：

  • 簡易性。超級文字標記語言版本升級採用超集方式，從而更加靈活方便。 
  • 可擴充套件性。超級文字標記語言的廣泛應用帶來了加強功能，增加識別符號等要求，超級文字標記語言採取子類元素的方式，為系統擴充套件帶來保證。
  • 平臺無關性。雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文字標記語言可以使用在廣泛的平臺上，這也是全球資訊網（WWW）盛行的另一個原因。
  • 通用性。另外，HTML是網路的通用語言，一種簡單、通用的全置標記語言。它允許網頁製作人建立文字與圖片相結合的複雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什麼型別的電腦或瀏覽器。

二、XHTML

XHTML(eXtensible HyperText Markup Language) 指的是可擴充套件超文字標記語言，是將超文字標記語言HTML（HyperText Markup Language）作為XML應用而重新定義的標準。

（一）、HTML和XHTML之間的差異

  • XHTML 元素必須被正確地巢狀。 一般html網頁可以“<b><i>主要內容</b></i>”這是個不嚴格，在XHTML是錯誤的；正確的在xhtml標準中就必須要求這樣“<b><i>主要內容</i></b>”。
  • XHTML 元素必須被關閉。如一個HEAD裡的例子，“<meta name="keywords" content="關鍵字" > ”像這個標籤在html是可行的，但是為了xhtml的標準所以必須關閉如“<meta name="keywords" content="關鍵字" /> ”
  • 標籤名必須用小寫字母。在以前的網頁中對於很多標籤通常使用大寫或大小寫的編排方式，但是在為了WEB標準現在標籤都要求小寫統一
  • XHTML 文件必須擁有根元素。意思就是一什麼標籤開始就要用什麼標籤結束，如<body>開始就要在內容結束用</body>來關閉。
  • 對於圖片需新增alt屬性。以前很多時候在網頁裡顯示圖片img標籤裡都可加可不加alt屬性，但是現在xhtml要求必須加上alt屬性,不然xhtml驗證將提示錯誤，哪怕alt的值為空都可以。加上alt可以對圖片進行文字說明，可讓搜尋引擎辨別圖片內容，是優化網頁好地方。

三、HTML常用標籤

上面列出了HTML 常用的標籤，詳細標籤可訪問：HTML 標籤（按功能排序）。

四、元素的常用屬性

上面是 HTML文件裡標籤的共同屬性，每個標籤不僅有共同屬性，還有它們各自特有的屬性，詳細內容可以訪問：元素的其他屬性。

五、頭部

一個完整的HTML 文件，分別有頭部和主題部分，頭部 <head>元素包含了所有的頭部標籤元素。可以新增在頭部區域的元素標籤為: <title>、<style>、<meta>、<link>、<script>、<noscript> 和 <base>.。

  • <title>：定義文件的標題。瀏覽器會以特殊的方式來使用標題，並且通常把它放置在瀏覽器視窗的標題欄或狀態列上， <title>文件標題</title> 
  • <style>：用於為 HTML 文件定義樣式資訊。在 style 中，可以規定在瀏覽器中如何呈現 HTML 文件。
  • <meta>：元素可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞。
  • <link>：標籤定義了文件與外部資源之間的關係。最常見的用途是連結樣式表， <link rel="stylesheet" type="text/css" href="style.css" /> 。
  • <script>：用於載入或編寫指令碼檔案，如： JavaScript。
  • <noscript>：用來定義在指令碼未被執行時的替代內容（文字）。
  • <base>：為頁面上的所有連結規定預設地址或預設目標。

六、主體

主體部分是 HTML 文件的重要部分，該部分編寫的程式碼最終會呈現給客戶。<body> 元素定義文件的主體。<body> 元素包含文件的所有內容（比如文字、超連結、影像、表格和列表等等）。其中常見的有：

1、定義標題：<h1> -> <h6>

<h1> 定義最大的標題。 <h6> 定義最小的標題。標題是通過 <h1>  -> <h6> 標籤進行定義的。如下所示：

<h1>這是h1標題。</h1>
<h2>這是h2標題。</h2>
<h3>這是h3標題。</h3>

2、定義段落：<p>

定義一個段落，如果在不產生一個新段落的情況下進行換行（新行），使用 <br> 標籤。如下所示：

<p>這個<br>段落<br>演示了分行的效果</p>

3、超連結：<a>

定義超連結，用於從一個頁面連結到另一個頁面。<a> 元素最重要的屬性是 href 屬性，它指示連結的目標。如下所示：

<a href="https://www.baidu.com/">百度</a>

4、圖片：<img>

向網頁中嵌入一幅影像，<img> 標籤有兩個必需的屬性：src 屬性 和 alt 屬性。src 指 "source"。源屬性的值是影像的 URL 地址。alt 屬性用來為影像定義一串預備的可替換的文字。如下所示：

<img src="圖片的URL"  alt="圖片" />

5、文件的分割槽或節點：<div>

<div> 標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。如果用 id 或 class 來標記 <div>，那麼該標籤的作用會變得更加有效。如下所示：

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

七、示例

HTML 規範的文件格式：

<!DOCTYPE html> -----------------》 文件的定義型別
<html lang=en> ------------------》 HTML 文件
  <head> ------------------------》 文件頭部
    <meta charset=utf-8> --------》 定義文件字符集 utf-8
    <title>HTML</title> ---------》 定義一個標題
  </head>
  <body> ------------------------》 網頁主體，網頁可見內容
  </body>
</html>

HTML 示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>第一個網頁</title>
</head>
<body>
     <h1>這是第一個網頁</h1>
     <p>這是一個段落</p>
     <a href="https://www.baidu.com/">跳轉到百度</a>
</body>
</html>

相關文章