給我做網(wǎng)站的人老是給我留點尾巴百度成都總部
目錄
一、HTML 格式化
1.HTML 文本格式化標(biāo)簽
2.HTML "計算機輸出" 標(biāo)簽
3.HTML 引文, 引用, 及標(biāo)簽定義
二、HTML?鏈接
1.HTML?鏈接
2.HTML 超鏈接
3.HTML 鏈接語法
4.文本鏈接
5.圖像鏈接
6.錨點鏈接
7.下載鏈接
8.Target 屬性
9.Id 屬性
三、HTML 頭部
1.head元素
2.title元素
3.base元素
4.link元素
5.style元素
6.meta元素
7.head標(biāo)簽
四、HTML?圖像
1.圖像標(biāo)簽（ ）和源屬性（Src）
2.Alt屬性
3.設(shè)置圖像的高度與寬度
五、HTML?表格
1.HTML?表格
2.HTML 表格和邊框?qū)傩?/p>
3.HTML 表格表頭
4.HTML 表格標(biāo)簽
一、HTML 格式化
通常標(biāo)簽 <strong> 替換加粗標(biāo)簽 <b> 來使用, <em> 替換 <i>標(biāo)簽使用。
然而，這些標(biāo)簽的含義是不同的：
<b> 與<i> 定義粗體或斜體文本。
<strong> 或者 <em>意味著要呈現(xiàn)的文本是重要的，所以要突出顯示。
1.HTML 文本格式化標(biāo)簽
| 標(biāo)簽 | 描述 |
| <b> | 定義粗體文本 |
| <em> | 定義著重文字 |
| <i> | 定義斜體字 |
| <small> | 定義小號字 |
| <strong> | 定義加重語氣 |
| <sub> | 定義下標(biāo)字 |
| <sup> | 定義上標(biāo)字 |
| <ins> | 定義插入字 |
| <del> | 定義刪除字 |
2.HTML "計算機輸出" 標(biāo)簽
| 標(biāo)簽 | 描述 |
| <code> | 定義計算機代碼 |
| <kbd> | 定義鍵盤碼 |
| <samp> | 定義計算機代碼樣本 |
| <var> | 定義變量 |
| <pre> | 定義預(yù)格式文本 |
3.HTML 引文, 引用, 及標(biāo)簽定義
| 標(biāo)簽 | 描述 |
| <abbr> | 定義縮寫 |
| <address> | 定義地址 |
| <bdo> | 定義文字方向 |
| <blockquote> | 定義長的引用 |
| <q> | 定義短的引用語 |
| <cite> | 定義引用、引證 |
| <dfn> | 定義一個定義項目。 |
二、HTML?鏈接
1.HTML?鏈接
HTML 使用超級鏈接與網(wǎng)絡(luò)上的另一個文檔相連，是一種用于在不同網(wǎng)頁之間導(dǎo)航的元素。
鏈接通常用于將一個網(wǎng)頁與另一個網(wǎng)頁或資源（如文檔、圖像、音頻文件等）相關(guān)聯(lián)，允許用戶在瀏覽網(wǎng)頁時單擊文本或圖像來跳轉(zhuǎn)到其他位置，從而實現(xiàn)網(wǎng)頁之間的互聯(lián)。
2.HTML 超鏈接
默認情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：
一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點擊鏈接時，鏈接顯示為紅色并帶有下劃線。
注：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會根據(jù) CSS 的設(shè)定而顯示。
3.HTML 鏈接語法
①HTML 中創(chuàng)建鏈接的基本語法：
<a>?元素：創(chuàng)建鏈接的主要HTML元素是<a>（錨）元素。
②<a>元素具有以下屬性：
href：指定鏈接目標(biāo)的URL，這是鏈接的最重要屬性。可以是另一個網(wǎng)頁的URL、文件的URL或其他資源的URL。
target（可選）：指定鏈接如何在瀏覽器中打開。常見的值包括?_blank（在新標(biāo)簽或窗口中打開鏈接）和?_self（在當(dāng)前標(biāo)簽或窗口中打開鏈接）。
title（可選）：提供鏈接的額外信息，通常在鼠標(biāo)懸停在鏈接上時顯示為工具提示。
rel（可選）：指定與鏈接目標(biāo)的關(guān)系，如 nofollow、noopener 等。
③鏈接的 HTML 代碼
<a href="url">鏈接文本</a>
href 屬性描述了鏈接的目標(biāo)。
④實例
<a href="https://www.baidu.com/">訪問百度</a>
上面這行代碼顯示為：訪問百度
點擊這個超鏈接會把用戶帶到百度的首頁。
提示:?"鏈接文本"?不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
4.文本鏈接
最常見的鏈接類型是文本鏈接，它使用 <a> 元素將一段文本轉(zhuǎn)化為可點擊的鏈接。
<a href="https://www.example.com">訪問示例網(wǎng)站</a>
5.圖像鏈接
在這種情況下，<a> 元素包圍著 <img> 元素。
<a href="https://www.example.com">
??<img src="example.jpg" alt="示例圖片">
</a>
6.錨點鏈接
在同一頁面內(nèi)創(chuàng)建內(nèi)部鏈接，稱為錨點鏈接。
要創(chuàng)建錨點鏈接，需要在目標(biāo)位置使用 <a> 元素定義一個標(biāo)記，并使用#符號引用該標(biāo)記。
<a href="#section2">跳轉(zhuǎn)到第二部分</a>
<!-- 在頁面中的某個位置 -->
<a name="section2"></a>
7.下載鏈接
鏈接用于下載文件，使用 download 屬性。
<a href="document.pdf" download>下載文檔</a>
8.Target 屬性
使用 target 屬性，可以定義被鏈接的文檔在何處顯示。
<a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer">訪問百度</a>
注：將 target 屬性設(shè)置為 "_blank", 鏈接將在新窗口打開。
9.Id 屬性
id 屬性可用于創(chuàng)建一個 HTML 文檔書簽。
注:?書簽不會以任何特殊方式顯示，即在 HTML 頁面中是不顯示的，所以對于讀者來說是隱藏的。
①在HTML文檔中插入ID:
<a id="tips">有用的提示部分</a>
②在HTML文檔中創(chuàng)建一個鏈接到"有用的提示部分(id="tips"）"：
<a href="#tips">訪問有用的提示部分</a>
③從另一個頁面創(chuàng)建一個鏈接到"有用的提示部分(id="tips"）"：
<a href="https://www.baidu.com/html/html-links.html#tips">
訪問有用的提示部分</a>
注：請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：href="https://www.baidu.com/html"，就會向服務(wù)器產(chǎn)生兩次 HTTP 請求。這是因為服務(wù)器會添加正斜杠到這個地址，然后創(chuàng)建一個新的請求，就像這樣：href="https://www.baidu.com/html/"。
三、HTML 頭部
1.head元素
<head> 元素包含了所有的頭部標(biāo)簽元素。
在 <head>元素中可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
2.title元素
①<title> 元素：
定義了瀏覽器工具欄、不同文檔的標(biāo)題；
當(dāng)網(wǎng)頁添加到收藏夾時，顯示在收藏夾中的標(biāo)題；
顯示在搜索引擎結(jié)果頁面的標(biāo)題；
<title> 在 HTML/XHTML 文檔中是必需的。
②一個簡單的 HTML 文檔：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標(biāo)題</title>
</head>
<body>
文檔內(nèi)容
</body>
</html>
3.base元素
<base> 標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo)，作為HTML文檔中所有的鏈接標(biāo)簽的默認鏈接:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
4.link元素
<link> 標(biāo)簽定義了文檔與外部資源之間的關(guān)系，通常用于鏈接到樣式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
5.style元素
<style> 標(biāo)簽定義了HTML文檔的樣式文件引用地址，可以直接添加樣式來渲染 HTML 文檔：
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>
</head>
6.meta元素
meta標(biāo)簽描述了一些基本的元數(shù)據(jù)。
<meta> 標(biāo)簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時間，作者，和其他元數(shù)據(jù)。
元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)。
<meta> 一般放置于 <head> 區(qū)域
①為搜索引擎定義關(guān)鍵詞：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
②為網(wǎng)頁定義描述內(nèi)容：
<meta name="description" content="免費 Web & 編程 教程">
③定義網(wǎng)頁作者：
<meta name="author" content="Rob">
④每30秒鐘刷新當(dāng)前頁面：
<meta http-equiv="refresh" content="30">
7.head標(biāo)簽
| 標(biāo)簽 | 描述 |
| <head> | 定義了文檔的信息 |
| <title> | 定義了文檔的標(biāo)題 |
| <base> | 定義了頁面鏈接標(biāo)簽的默認鏈接地址 |
| <link> | 定義了一個文檔和外部資源之間的關(guān)系 |
| <meta> | 定義了HTML文檔中的元數(shù)據(jù) |
| <script> | 定義了客戶端的腳本文件 |
| <style> | 定義了HTML文檔的樣式文件 |
四、HTML?圖像
1.圖像標(biāo)簽（ <img>）和源屬性（Src）
在 HTML 中，圖像由<img> 標(biāo)簽定義，<img> 是空標(biāo)簽，只包含屬性并且沒有閉合標(biāo)簽。
在頁面上顯示圖像，需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
定義圖像的語法是：
<img src="url" alt="some_text">
URL 指存儲圖像的位置。如果名為 "pit.jpg" 的圖像位于 www.baidu.com 的 images 目錄中，那么其 URL 為?http://www.baidu.com/images/pit.jpg。
瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方。如果你將圖像標(biāo)簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。
2.Alt屬性
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本，替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。
3.設(shè)置圖像的高度與寬度
height（高度） 與 width（寬度）屬性用于設(shè)置圖像的高度與寬度。
屬性值默認單位為像素:
<img src="pit.jpg" alt="Pit rock" width="304" height="228">
圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。
注：假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以建議是：慎用圖片。
注：加載頁面時，要注意插入頁面圖像的路徑，如果不能正確設(shè)置圖像的位置，瀏覽器無法加載圖片，圖像標(biāo)簽就會顯示一個破碎的圖片。
五、HTML?表格
1.HTML?表格
HTML 表格由?<table>?標(biāo)簽來定義，是一種用于展示結(jié)構(gòu)化數(shù)據(jù)的標(biāo)記語言元素。
每個表格均有若干行（由?<tr>?標(biāo)簽定義），每行被分割為若干單元格（由?<td>?標(biāo)簽定義），表格可以包含標(biāo)題行（由<th>標(biāo)簽定義）用于定義列的標(biāo)題。
tr：tr 是 table row 的縮寫，表示表格的一行。
td：td 是 table data 的縮寫，表示表格的數(shù)據(jù)單元格。
th：th 是 table header的縮寫，表示表格的表頭單元格。
數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。
HTML 表格實例：
<table>
??<thead>
? ??<tr>
? ? ??<th>列標(biāo)題1</th>
? ? ??<th>列標(biāo)題2</th>
? ? ??<th>列標(biāo)題3</th>
? ??</tr>
??</thead>
??<tbody>
? ??<tr>
? ? ??<td>行1，列1</td>
? ? ??<td>行1，列2</td>
? ? ??<td>行1，列3</td>
? ??</tr>
? ??<tr>
? ? ??<td>行2，列1</td>
? ? ??<td>行2，列2</td>
? ? ??<td>行2，列3</td>
? ??</tr>
??</tbody>
</table>
以上的表格實例代碼中
<table> 元素表示整個表格，它包含兩個主要部分：<thead> 和 <tbody>。
<thead > 用于定義表格的標(biāo)題部分：在 <thead > 中，使用 <th > 元素定義列的標(biāo)題，以上實例中列標(biāo)題分別為"列標(biāo)題1"，"列標(biāo)題2"和"列標(biāo)題3"。
<tbody > 用于定義表格的主體部分：在 <tbody > 中，使用 <tr > 元素定義行，并在每行中使用 <td > 元素定義單元格數(shù)據(jù)，以上實例中有兩行數(shù)據(jù)，每行包含三個單元格。
通過使用 <th > 元素定義列標(biāo)題，可以使其在表格中以粗體顯示，與普通單元格區(qū)分開來。
表格實例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下：
2.HTML 表格和邊框?qū)傩?/strong>
如果不定義邊框?qū)傩?#xff0c;表格將不顯示邊框。使用邊框?qū)傩詠盹@示一個帶有邊框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
3.HTML 表格表頭
表格的表頭使用 <th> 標(biāo)簽進行定義。大多數(shù)瀏覽器會把表頭顯示為粗體居中的文本：
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下：
4.HTML 表格標(biāo)簽
| 標(biāo)簽 | 描述 |
| <table> | 定義表格 |
| <th> | 定義表格的表頭 |
| <tr> | 定義表格的行 |
| <td> | 定義表格單元 |
| <caption> | 定義表格標(biāo)題 |
| <colgroup> | 定義表格列的組 |
| <col> | 定義用于表格列的屬性 |
| <thead> | 定義表格的頁眉 |
| <tbody> | 定義表格的主體 |
| <tfoot> | 定義表格的頁腳 |