web 基礎（一） HTML

時間 2020-06-27

標籤 web 基礎 html 欄目 HTML 简体版

原文原文鏈接

web 基礎（一） HTML 與 XHTML

1、HTML介紹

HTML（ Hyper Text Markup Language）指的是超文本標記語言，是用來描述網頁的一種語言。它包括一系列標籤．經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。css

（一）特色：

簡易性。超級文本標記語言版本升級採用超集方式，從而更加靈活方便。
可擴展性。超級文本標記語言的普遍應用帶來了增強功能，增長標識符等要求，超級文本標記語言採起子類元素的方式，爲系統擴展帶來保證。
平臺無關性。雖然我的計算機大行其道，但使用MAC等其餘機器的大有人在，超級文本標記語言可使用在普遍的平臺上，這也是萬維網（WWW）盛行的另外一個緣由。
通用性。另外，HTML是網絡的通用語言，一種簡單、通用的全置標記語言。它容許網頁製做人創建文本與圖片相結合的複雜頁面，這些頁面能夠被網上任何其餘人瀏覽到，不管使用的是什麼類型的電腦或瀏覽器。

2、XHTML

XHTML(eXtensible HyperText Markup Language) 指的是可擴展超文本標記語言，是將超文本標記語言HTML（HyperText Markup Language）做爲XML應用而從新定義的標準。html

（一）、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能夠對圖片進行文字說明，可以讓搜索引擎辨別圖片內容，是優化網頁好地方。

3、HTML經常使用標籤

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

4、元素的經常使用屬性

上面是 HTML文檔裏標籤的共同屬性，每一個標籤不只有共同屬性，還有它們各自特有的屬性，詳細內容能夠訪問：元素的其餘屬性。瀏覽器

5、頭部

一個完整的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>：爲頁面上的全部連接規定默認地址或默認目標。

6、主體

主體部分是 HTML 文檔的重要部分，該部分編寫的代碼最終會呈現給客戶。<body> 元素定義文檔的主體。<body> 元素包含文檔的全部內容（好比文本、超連接、圖像、表格和列表等等）。其中常見的有：工具

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

<h1> 定義最大的標題。 <h6> 定義最小的標題。標題是經過 <h1> -> <h6> 標籤進行定義的。以下所示：優化

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

二、定義段落：<p>

定義一個段落，若是在不產生一個新段落的狀況下進行換行（新行），使用 <br> 標籤。以下所示：ui

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

三、超連接：<a>

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

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

四、圖片：<img>

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

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

五、文檔的分區或節點：<div>

<div> 標籤能夠把文檔分割爲獨立的、不一樣的部分。它能夠用做嚴格的組織工具，而且不使用任何格式與其關聯。若是用 id 或 class 來標記 <div>，那麼該標籤的做用會變得更加有效。以下所示：

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

7、示例

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。