HTML+CSS CSS3 特殊的“邊線”outline

utline與border的異同：

邊框的設定在web設計中使用率非常的高，border:1px solid #00f;屬于標準的邊線寫法，也可以實現單方向邊線border-left:1px solid red;

1px red solid邊線

（單邊線）左邊線

在CSS標準盒模型中，邊線border是計算在容器總寬度和高度之中的，

總寬高是102*102

瀏覽器中呈現的總寬度和總高度102*102

但隨著web布局要求越來越高，自適應布局應用逐漸廣泛，橫向排布四個div 各占據四分之一的寬度，但如果某一個要有邊線border修飾，因為border是占據寬度的，最終會導致最后一個元素掉下來，因為實際寬度大于了總寬度。

各占據四分之一的寬度

第四個元素掉了下來

outline可以實現和border相同的效果，標準語法也基本相同(outline:1px solid red)，也支持outline-style，outline-width，outline-color等分散屬性。

但是outline不占位，不會增加元素的寬高。

outline使用，總寬高不變還是100*100

outline標準寫法

outline缺點：

①不支持圓角 outline-radius:3px;

②不支持單方向outline。

不支持部分屬性

outline在文本框中的作用：

默認的文本框input[type="text"]獲取光標時會有邊線高亮。

文本框高亮獲取光標（新版本之前是藍色邊線）

實際上高亮的部分為outline在起作用

.text:focus{outline: 3px solid #00f;}

使用outline:none，可以去除默認文本框獲取光標時出現的邊線

outline：none

.outline{
		/*標準寫法*/
		outline:1px solid red;
		/*單方向邊線*/
		outline-left:4px solid #000; 
	}
	.outline:focus{
		/*去除默認邊線*/
		outline: none;
	}

outline作為一個特殊的屬性存在，在特殊的場景中會產生很棒的效果，靈活使用才能發揮出最大作用。

模型是CSS布局的基礎，理解它的每個組成部分對于創建整潔、響應式的網頁至關重要。本文將深入探討盒模型的四個主要組成部分：邊距（Margin）、邊框（Border）、填充（Padding）和內容（Content），并解釋它們如何共同工作來創建網頁布局。

盒模型概述

在CSS中，盒模型是一種用于設計和布局的概念模型，它將HTML元素視為一個盒子。這個盒子包括了元素的內容、內邊距、邊框和外邊距。理解盒模型對于控制元素的大小和在頁面上的位置至關重要。

盒模型的結構

+-------------------------------+
|           Margin              |
|  +-------------------------+  |
|  |        Border           |  |
|  |  +-------------------+  |  |
|  |  |     Padding       |  |  |
|  |  |  +-------------+  |  |  |
|  |  |  |   Content   |  |  |  |
|  |  |  +-------------+  |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

每個盒子從里到外包括：

內容（Content）：這是盒子中的實際內容，包括文本、圖片或其他媒體。
內邊距（Padding）：內容區域周圍的空間，內邊距是透明的。
邊框（Border）：圍繞內邊距和內容的線框，可以設置大小、樣式和顏色。
外邊距（Margin）：盒子外圍的空間，用來隔開相鄰的盒子。

邊距（Margin）

邊距是盒子外部的空間，它決定了元素之間的間隔。邊距是透明的，不可見，不會被背景顏色或背景圖片覆蓋。

/* 單邊邊距設置 */
.element {
  margin-top: 10px;    /* 上邊距 */
  margin-right: 15px;  /* 右邊距 */
  margin-bottom: 10px; /* 下邊距 */
  margin-left: 15px;   /* 左邊距 */
}

/* 簡寫形式 */
.element {
  margin: 10px 15px;   /* 上下邊距 | 左右邊距 */
}

邊距可以用來創建元素之間的空間，或者將元素與頁面邊緣分開。當兩個元素的垂直邊距相遇時，它們會合并成一個邊距，這個現象稱為邊距折疊。

邊框（Border）

邊框是盒子的一個可視化組件，圍繞著內邊距和內容。邊框的樣式、寬度和顏色都可以自定義。

.element {
  border-style: solid; /* 邊框樣式 */
  border-width: 2px;  /* 邊框寬度 */
  border-color: black; /* 邊框顏色 */
}

/* 簡寫形式 */
.element {
  border: 2px solid black;
}

邊框對于突出顯示元素或分隔內容非常有用。你還可以只為邊框的一邊或幾邊設置樣式。

填充（Padding）

填充是圍繞內容內部的空間，它可以增加內容和邊框之間的距離。與邊距不同，填充區域會被背景顏色或背景圖片覆蓋。

.element {
  padding-top: 5px;    /* 上填充 */
  padding-right: 10px;  /* 右填充 */
  padding-bottom: 5px; /* 下填充 */
  padding-left: 10px;   /* 左填充 */
}

/* 簡寫形式 */
.element {
  padding: 5px 10px;   /* 上下填充 | 左右填充 */
}

填充對于控制元素內部的空白區域非常有用，它可以幫助改善內容的可讀性。

內容（Content）

內容是盒子中的文字、圖片或其他媒體。內容的大小可以通過設置width和height屬性來控制，但實際可見區域的大小還會受到內邊距和邊框的影響。

.element {
  width: 200px;
  height: 150px;
}

內容區域是設計和布局的核心，所有的文本和媒體都在這里顯示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin, Border, Padding Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
  }

  .container {
    max-width: 800px;
    margin: auto;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .header {
    background-color: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .content {
    padding: 20px;
    border: 1px solid #ddd;
    margin: 20px;
  }

  .box {
    background-color: #007bff;
    color: white;
    padding: 10px;
    margin: 10px;
    border: 3px solid #0056b3;
    text-align: center;
  }

  .footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="container">
  <div class="header">
    <h1>Welcome to My Page</h1>
  </div>

  <div class="content">
    <h2>Understanding CSS Box Model</h2>
    <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. This model allows us to create space between elements and style them effectively.</p>
    
    <div class="box">Content Box</div>
  </div>

  <div class="footer">
    Footer Content
  </div>
</div>

</body>
</html>

總結

理解盒模型是前端開發的基礎，它允許我們精確控制元素的布局和間距。通過恰當地使用邊距、邊框、填充和內容，我們可以創建出既美觀又功能強大的網頁設計。隨著響應式設計的興起，現代CSS框架已經將盒模型的概念整合進其核心，使得跨設備布局變得更加一致和簡單。

在日常開發中，經常使用開發者工具來檢查和調試盒模型的各個部分，確保我們的樣式表現按照預期工作。掌握盒模型，你將能夠更加自信地處理網頁布局的挑戰。

一個網站為例、程序開發中需要前端開發、后臺開發、數據庫開發

?前端開發知識點又分 HTML、css 、js

而每一種都有成熟的框架學習但是學習框架前還是要把，原生的這些前端開發技能做一個認識不至于兩眼一抹黑、都會一點一點更新的，莫急，莫煩

HTML的概念

HTML 全稱為 HyperText Markup Language，譯為超文本標記語言。

HTML 不是一種編程語言，是一種描述性的標記語言。

作用：HTML是負責描述文檔語義的語言。

概念：超文本

所謂的超文本，有兩層含義：

（1）圖片、音頻、視頻、動畫、多媒體等內容，成為超文本，因為它們超出了文本的限制。

（2）不僅如此，它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件進行連接。即：超級鏈接文本。

概念：標記語言

HTML 不是一種編程語言，是一種描述性的標記語言。這主要有兩層含義：

（1）標記語言是一套標記標簽。比如：標簽<a>表示超鏈接、標簽<img>表示圖片、標簽<h1>表示一級標題等等，它們都是屬于 HTML 標簽。

說的通俗一點就是：網頁是由網頁元素組成的，這些元素是由 HTML 標簽描述出來，然后通過瀏覽器解析，就可以顯示給用戶看了。

（2）編程語言是有編譯過程的，而標記語言沒有編譯過程，HTML標簽是直接由瀏覽器解析執行。

HTML是負責描述文檔語義的語言

HTML 格式的文件是一個純本文文件（就是用txt文件改名而成），用一些標簽來描述語義，這些標簽在瀏覽器頁面上是無法直觀看到的，所以稱之為“超文本標記語言”。

接下來，我們需要學習 HTML 中的很多“標簽對兒”，這些“標簽對兒”能夠給文本不同的語義。

比如，面試的時候問你，<h1> 標簽有什么作用？

正確答案：給文本增加主標題的語義。
錯誤答案：給文字加粗、加黑、變大。

關乎“語義”的更深刻理解，等接下來我們學習了各種標簽，就明白了。

HTML的歷史

其中，我們專門來對XHTML做一個介紹。

XHTML介紹： XHTML：Extensible Hypertext Markup Language，可擴展超文本標注語言。 XHTML的主要目的是為了取代HTML，也可以理解為HTML的升級版。 HTML的標記書寫很不規范，會造成其它的設備(ipad、手機、電視等)無法正常顯示。 XHTML與HTML4.0的標記基本上一樣。 XHTML是嚴格的、純凈的HTML。

我們稍后將對XHTML的編寫規范進行介紹。

HTML的專有名詞

網頁：由各種標記組成的一個頁面就叫網頁。
主頁(首頁) : 一個網站的起始頁面或者導航頁面。
標記：比如<p>稱為開始標記，</p>稱為結束標記，也叫標簽。每個標簽都規定好了特殊的含義。
元素：比如<p>內容</p>稱為元素.
屬性：給每一個標簽所做的輔助信息。
XHTML：符合XML語法標準的HTML。
DHTML：dynamic，動態的。javascript + css + html合起來的頁面就是一個 DHTML。
HTTP：超文本傳輸協議。用來規定客戶端瀏覽器和服務端交互時數據的一個格式。SMTP：郵件傳輸協議，FTP：文件傳輸協議。

書寫第一個 HTML 頁面

我們打開 VS Code 軟件，新建一個文件，名叫test.html（注意，文件名是test，后綴名是html），保存到本地。

緊接著，在文件里，輸入html:5，然后按一下鍵盤上的Tab鍵，就可以自動生成如下內容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

上面的內容，就是 html 頁面的骨架。我們在此基礎之上，新增幾個標簽，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>我是三級標題</h3>
    <img src="" alt="">
    <a href="https://www.jd.com">我是超鏈接，可以點擊一下</a>
</body>
</html>

標簽寫完之后，我們用 chrome 瀏覽器打開上面這個test.html文件，看看頁面效果：

到此，第一個簡單的 HTML 頁面就寫完了。是不是很有成就感？

HTML結構詳解

HTML標簽通常是成對出現的（雙邊標記），比如 <div> 和 </div>；也有少部分單標簽（單邊標記），如：<br />、<hr />和<img src="images/1.jpg" />等。

屬性與標記之間、各屬性之間需要以空格隔開。屬性值以雙引號括起來。

html骨架標簽分類

標簽名定義說明<html></html>HTML標簽頁面中最大的標簽，我們成為根標簽<head></head>文檔的頭部注意在head標簽中我們必須要設置的標簽是title<titile></title>文檔的標題讓頁面擁有一個屬于自己的網頁標題<body></body>文檔的主體元素包含文檔的所有內容，頁面內容基本都是放到body里面的

快速生成 html 的骨架

方式1：在 VS Code 中新建 html 文件，輸入html:5，按 Tab鍵后，自動生成的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

方式2：在Sublime Text中安裝Emmet插件。新建html文件，輸入html:5，按Tab鍵后，自動生成的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

方式3：在Sublime Text中安裝Emmet插件。新建html文件，輸入html:xt，按Tab鍵后，自動生成的代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

上面的方式2和方式3中，我們會發現，第一行的內容有些不太一樣，這就是我們接下來要講的文檔聲明頭。

1、文檔聲明頭

任何一個標準的HTML頁面，第一行一定是一個以<!DOCTYPE ……>開頭的語句。這一行，就是文檔聲明頭，即 DocType Declaration，簡稱DTD。

DTD可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。

HTML4.01有哪些規范呢？

HTML4.01這個版本是IE6開始兼容的。HTML5是IE9開始兼容的。如今，手機、移動端的網頁，就可以使用HTML5了，因為其兼容性更高。

說個題外話，html1 至 html3 是美國軍方以及高等研究所用的，并未對外公開。

HTML4.01里面有兩大種規范，每大種規范里面又各有3種小規范。所以一共6種規范（見下圖）。

HTML4.01里面規定了普通和XHTML兩大種規范。HTML覺得自己有一些規定不嚴謹，比如，標簽是否可以用大寫字母呢？<H1></H1>所以，HTML就覺得，把一些規范嚴格的標準，又制定了一個XHTML1.0。在XHTML中的字母X，表示“嚴格的”。

總結一下，HTML4.01一共有6種DTD。說白了，HTML的第一行語句一共有6種情況：

下面對上圖中的三種小規范進行解釋：

strict：

表示“嚴格的”，這種模式里面的要求更為嚴格。這種嚴格體現在哪里？有一些標簽不能使用。比如，u標簽，就是給一個本文加下劃線，但是這和HTML的本質有沖突，因為HTML最好是只負責語義，不要負責樣式，而u這個下劃線是樣式。所以，在strict中是不能使用u標簽的。

那怎么給文本增加下劃線呢？今后將使用css屬性來解決。

XHTML1.0更為嚴格，因為這個體系本身規定比如標簽必須是小寫字母、必須嚴格閉合標簽、必須使用引號引起屬性等等。

Transitional：表示“普通的”，這種模式就是沒有一些別的規范。

Frameset：表示“框架”，在框架的頁面使用。

在sublime輸入的html:xt，x表示XHTML，t表示transitional。

在HTML5中極大的簡化了DTD，也就是說HTML5中就沒有XHTML了。HTML5的DTD（文檔聲明頭）如下：

<!DOCTYPE html>

2、頁面語言 lang

下面這行標簽，用于指定頁面的語言類型：

<html lang="en">

最常見的語言類型有兩種：

en：定義頁面語言為英語。
zh-CN：定義頁面語言為中文。

2、頭標簽 head

html5 的比較完整的骨架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="Author" content="">
    <meta name="Keywords" content="厲害很厲害" />
    <meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、游戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />
    <title>Document</title>
</head>
<body>

</body>
</html>

面試題：

問：網頁的head標簽里面，表示的是頁面的配置，有什么配置？
答：字符集、關鍵詞、頁面描述、頁面標題、IE適配、視口、iPhone小圖標等等。

頭標簽內部的常見標簽如下：

<title>：指定整個網頁的標題，在瀏覽器最上方顯示。
<base>：為頁面上的所有鏈接規定默認地址或默認目標。
<meta>：提供有關頁面的基本信息
<body>：用于定義HTML文檔所要顯示的內容，也稱為主體標簽。我們所寫的代碼必須放在此標簽內。
<link>：定義文檔與外部資源的關系。

meta 標簽：

meta表示“元”。“元”配置，就是表示基本的配置項目。

常見的幾種 meta 標簽如下：

（1）字符集 charset：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

字符集用meta標簽中的charset定義，charset就是charactor set（即“字符集”），即網頁的編碼方式。

字符集(Character set)是多個字符的集合。計算機要準確的處理各種字符集文字，需要進行字符編碼，以便計算機能夠識別和存儲各種文字。

上面這行代碼非常關鍵，是必須要寫的代碼，否則可能導致亂碼。比如你保存的時候，meta寫的和聲明的不匹配，那么瀏覽器就是亂碼。

utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312等。關于“編碼方式”，我們在下一段會詳細介紹。

（2）視口 viewport：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width ：表示視口寬度等于屏幕寬度。

viewport 這個知識點，初學者還比較難理解，以后學 Web 移動端的時候會用到。

（3）定義“關鍵詞”：

舉例如下：

<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />

這些關鍵詞，就是告訴搜索引擎，這個網頁是干嘛的，能夠提高搜索命中率。讓別人能夠找到你，搜索到你。

（4）定義“頁面描述”：

meta除了可以設置字符集，還可以設置關鍵字和頁面描述。

只要設置Description頁面描述，那么百度搜索結果，就能夠顯示這些語句，這個技術叫做SEO（search engine optimization，搜索引擎優化）。

設置頁面描述的舉例：

<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、游戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />

效果如下：

上面的幾種<meta>標簽都不用記，但是另外還有一個<meta>標簽是需要記住的：

<meta http-equiv="refresh" content="3;http://www.baidu.com">

上面這個標簽的意思是說，3秒之后，自動跳轉到百度頁面。

title 標簽:

用于設置網頁標題：

	<title>網頁的標題</title>

title標簽也是有助于SEO搜索引擎優化的。

base標簽：

<base href="/">

base 標簽用于指定基礎的路徑。指定之后，所有的 a 鏈接都是以這個路徑為基準。

3、<body>標簽

<body>標簽的屬性有：

bgcolor：設置整個網頁的背景顏色。
background：設置整個網頁的背景圖片。
text：設置網頁中的文本顏色。
leftmargin：網頁的左邊距。IE瀏覽器默認是8個像素。
topmargin：網頁的上邊距。
rightmargin：網頁的右邊距。
bottommargin：網頁的下邊距。

<body>標簽另外還有一些屬性，這里用個例子來解釋：

上方代碼中，當我們對點我點我這幾個字使用超鏈時，link屬性表示默認顯示的顏色、alink屬性表示鼠標點擊但是還沒有松開時的顏色、vlink屬性表示點擊完成之后顯示的顏色。效果如下：

計算機編碼介紹

計算機，不能直接存儲文字，存儲的是編碼。

計算機只能處理二進制的數據，其它數據，比如：0-9、a-z、A-Z，這些字符，我們可以定義一套規則來表示。假如：A用110表示，B用111表示等。

ASCII碼： 美國發布的，用1個字節(8位二進制)來表示一個字符，共可以表示2^8=256個字符。美國的國家語言是英語，只要能表示0-9、a-z、A-Z、特殊符號。

ANSI編碼： 每個國家為了顯示本國的語言，都對ASCII碼進行了擴展。用2個字節(16位二進制)來表示一個漢字，共可以表示2^16＝65536個漢字。例如：中國的ANSI編碼是GB2312編碼(簡體)，對6763漢字進行編碼，含600多特殊字符。另外還有GBK(簡體)。日本的ANSI編碼是JIS編碼。臺灣的ANSI編碼是BIG5編碼（繁體）。

GBK： 對GB2312進行了擴展，用來顯示罕見的、古漢語的漢字?，F在已經收錄了2.1萬左右。并提供了1890個漢字碼位。K的含義就是“擴展”。

Unicode編碼(統一編碼)： 用4個字節(32位二進制)來表示一個字符，想法不錯，但效率太低。例如，字母A用ASCII表示的話一個字節就夠，可用Unicode編碼的話，得用4個字節表示，造成了空間的極大浪費。A的Unicode編碼是0000 0000 0000 0000 0000 0000 0100 0000

UTF-8(Unicode Transform Format)編碼： 根據字符的不同，選擇其編碼的長度。比如：一個字符A用1個字節表示，一個漢字用2個字節表示。

毫無疑問，開發中，都用UTF-8編碼吧，準沒錯。

中文能夠使用的字符集兩種：

第一種：UTF-8。UTF-8是國際通用字庫，里面涵蓋了所有地球上所有人類的語言文字，比如阿拉伯文、漢語、鳥語……
第二種：GBK（對GB2312進行了擴展）。gb2312 是國標，是中國的字庫，里面僅涵蓋了漢字和一些常用外文，比如日文片假名，和常見的符號。

字庫規模： UTF-8（字很全） > gb2312（只有漢字）

重點1：避免亂碼

我們用meta標簽聲明的當前這個html文檔的字庫，一定要和保存的文件編碼類型一樣，否則亂碼（重點）。

拿 sublime編輯器舉例，當我們不設置的時候，sublime默認類型就是UTF-8。而一旦更改為gb2312的時候，就一定要記得設置一下sublime的保存類型：文件→ set File Encoding to → Chinese Simplified(GBK)。VS Code 的道理一樣。

重點2：UTF-8和gb2312的比較

保存大?。篣TF-8（更臃腫、加載更慢） > gb2312 （更小巧，加載更快）

總結：

UTF-8：字多，有各種國家的語言，但是保存尺寸大，文件臃腫；
gb2312：字少，只用中文和少數外語和符號，但是尺寸小，文件小巧。

列出2個使用情形：

1）你們公司是做日本動漫的，經常出現一些日語動漫的名字，網頁要使用UTF-8。如果用gb2312將無法顯示日語。 2）你們公司就是中文網頁，極度的追求網頁的顯示速度，要使用gb2312。如果使用UTF-8將每個漢字多一個byte，所以5000個漢字，多5kb。

我們親測：

qq網、網易、搜狐都是使用gb2312。這些公司，都追求顯示速度。
新華網藏語頻道，使用的是UTF-8，保證字符集的數量。

我們是怎么查看網頁的編碼方式的呢？在瀏覽器中打開網頁，右鍵，選擇“查看網頁源代碼”，找到meta標簽中的charset屬性即可。

那么，我們為什么可以查看網頁的源代碼呢？因為這個打開的html網頁已經存到我的臨時文件夾里了，臨時文件夾里的html是純文本文件，純文本文件自然可以查看網頁的源代碼。

HTML的規范

HTML不區分大小寫，但HTML的標簽名、類名、標簽屬性、大部分屬性值建議統一用小寫。
HTML頁面的后綴名是html或者htm(有一些系統不支持后綴名長度超過3個字符，比如dos系統)

1、編寫XHTML的規范：

（1）所有標記元素都要正確的嵌套，不能交叉嵌套。正確寫法舉例：<h1><font></font></h1>

（2）所有的標記都必須小寫。

（3）所有的標簽都必須閉合。

雙標簽：<span></span>
單標簽：<br> 建議寫成 <br /> <hr> 建議轉成 <hr />，還有<img src=“URL” />

（4）所有的屬性值必須加引號。<font color="red"></font>

（5）所有的屬性必須有值。<hr noshade="noshade">、<input type="radio" checked="checked" />

（6）XHTML文檔開頭必須要有DTD文檔類型定義。

2、HTML的基本語法特性

（1）HTML對換行不敏感，對tab不敏感

HTML只在乎標簽的嵌套結構，嵌套的關系。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。

也就是說，HTML不是依靠縮進來表示嵌套的，而是看標簽的嵌套關系。但是，我們發現有良好的縮進，代碼更易讀。建議大家都正確縮進標簽。

百度為了追求極致的顯示速度，所有HTML標簽都沒有換行、都沒有縮進（tab），HTML和換不換行無關，標簽的層次依然清晰，只不過程序員不可讀了。如下圖所示：

（2）空白折疊現象

HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示。