HTML筆記（二） HTML標簽元素
一 常用的頭部元素標簽
<head>元素包含了所有的頭部標簽元素。
1、<title>
<title>標簽定義了HTML文檔的標題，在HTML/XHTML文檔中是必須的。
主要功能：
- 定義了瀏覽器工具欄的標題；
- 當網頁添加到收藏夾時，顯示在收藏夾中的標題；
- 顯示在搜索引擎結果頁面的標題；
2、<base>
<base>標簽描述了基本的鏈接地址或鏈接目標。
該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接，即如果HTML文檔中的超鏈接標簽沒有添加鏈接地址，則默認訪問<base>標簽中的鏈接。
語法格式：<base href="url" target="...">
3、<link>
<link>標簽定義了文檔與外部資源之間的關系，常用於鏈接到外部樣式表。
語法格式：<link rel="stylesheet" type="text/css" href="xxx.css">
4、<style>
<style>標簽定義了內部的CSS樣式。
語法格式：<style type="text/css">css樣式規則</style>
5、<meta>
<meta>標簽描述了一些基本的HTML頁面元數據，元數據不顯示在頁面上，但會被瀏覽器解析。
<meta>元素通常用於制定網頁的描述、關鍵詞、文件的最後修改時間、作者，以及其他元數據。
主要有http-equiv、name和content三個屬性。前兩個指定了元數據信息的名稱，content用於指定對應的值。
例如：<meta http-equiv="Content-Type" content="text/html;charset="utf-8" />
<meta name="author" content="LoveStory_Fish" />
6、<script>
<script>標簽用於加載腳本文件。
7、頭部標簽元素使用實例
<!DOCTYPE html>
<html>
<!-- 頭部標簽元素 -->
<head>
<!-- 定義文檔標題 -->
<title>This is my first html</title>
<!-- 定義網頁默認鏈接 -->
<base href="http://www.baidu.com" target="_blank"></base>
<!-- 定義引用的外部資源文件 -->
<link rel="stylesheet" type="text/css" href="test.css">
<!-- 定義文檔樣式 -->
<style type="text/css">
p {color: blue}
</style>
<!-- 定義網頁語言 -->
<meta charset="utf-8" />
<!-- 定義網頁作者 -->
<meta name="author" content="LoveStory_Fish" />
<!-- 每30秒刷新當前頁面 -->
<meta http-equiv="refresh" content="60" />
<!-- 執行javascript腳本代碼 -->
<script type="text/javascript">
alert("Hello World!")
</script>
</head>
<body>
<p>這是一個段落！</p>
</body>
</html>
二 常用的塊級元素標簽
瀏覽器中的塊級元素，前後顯示折行。
塊級元素的特點：
- 塊級元素，前後顯示折行，從新的一行開始，後面的元素需要另起一行；
- 元素的高度、寬度、行高、上下邊距等都可設置；
- 可以通過display:block屬性鍵值對將行級元素轉化成塊級元素；
1、標題標簽
HTML通過<h1> - <h6>六個標簽來定義標題。
字體大小按<h1> - <h6>逐漸減小，且重要性遞減，<h1>定義最大標題或作主標題（最重要的），<h6>定義最小標題。
標題的重要性：搜索引擎使用標題為網頁的結構和內容編制索引，用戶也可以通過標題來快速瀏覽網頁。
2、<p>
用於定義HTML文檔的段落。
3、<hr />
定義HTML文檔的水平線，一般用於分割內容。
4、<div>
HTML文檔的分區標簽，一幫當作HTML文檔的結構化塊狀元素使用。
用於對網頁進行整體分塊布局，當作容器來使用。
5、行級元素標簽使用實例
註意：一般情況下，段落與段落之間的行距要大於換行的行距。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is my first html</title> </head> <body> <!-- HTML註釋，不會在瀏覽器中顯示 --> <!-- HTML標題 --> <h1>我的第一個標題</h1> <h2>我的第一個標題</h2> <h3>我的第一個標題</h3> <h4>我的第一個標題</h4> <h5>我的第一個標題</h5> <h6>我的第一個標題</h6> <!-- HTML水平線 --> <hr/> <!-- HTML段落 --> <p>這是一個段落！ <!-- HTML折行 --> <br /> 這是段落的一部分內容...</p>
<div> <p>這是另一個段落！</p>
</div>
</body> </html>
三 常用的行級元素標簽
行級元素一般按行逐一顯示，前後不會自動換行。
行級元素的特點：
- 與其他元素在一行上顯示；
- 元素的高度、寬度、行高、上下邊距不能被設置，寬度為它所包含的內容的寬度；
- 可以通過display:inline屬性鍵值對將塊級元素轉化成塊級元素；
1、<a>
定義了HTML文檔的超鏈接。
超鏈接可以是文字或者一幅圖像，可以點擊這些內容來跳轉到新的網頁或者當前網頁中的某個部分。
語法格式：<a href="鏈接地址" target="目標窗口">鏈接文本或圖片</a>
（1）href屬性
href屬性用來描述鏈接的地址或目標。
註意：盡量使用正斜杠添加到子文件夾，如果使用反斜杠，則會向服務器產生兩次HTTP請求，因為服務器會添加正斜杠到這個地址，然後創建一個新的請求。
（2）target屬性
target屬性可以定義被鏈接的文檔在何處顯示。
_blank：在新窗口中打
2、<br />
定義HTML文檔的折行，在不產生一個新段落且需要進行換行的情況下使用，是一個空的HTML元素。
3、格式化標簽
格式化標簽可以對輸出的文本進行格式化。
（1）常用的文本格式化標簽
| 標簽 | 描述 |
| <b> | 定義粗體文字 |
| <strong> | 定義粗體文字，突出顯示重要的文本內容 |
| <i> | 定義斜體文字 |
| <em> | 定義斜體文字，突出顯示重要的文本內容 |
| <small> | 定義小號字 |
| <big> | 定義大號字 |
| <sub> | 定義下標 |
| <sup> | 定義上標 |
| <ins> | 定義插入字 |
| <del> | 定義刪除字 |
（2）常用的計算機輸出標簽
| 標簽 | 描述 |
| <code> | 定義計算機代碼 |
| <kdd> | 定義鍵盤碼 |
| <samp> | 定義計算機代碼樣本 |
| <var> | 定義變量 |
| <pre> | 定義與格式文本，控制空行和空格（會保留） |
（3）常用引文、引用標簽
| 標簽 | 描述 |
| <abbr> | 定義縮寫 |
| <address> | 定義地址 |
| <bdo> | 定義文字方向 |
| <blockquote> | 定義長的引用 |
| <q> | 定義短的引用 |
| <cite> | 定義引用、引證 |
| <dfn> | 定義一個定義項目 |
（4）文本格式化實例：
<body>
<b>文本加粗</b><br/>
<strong>文本加粗（強調）</strong><br/>
<i>文本斜體</i><br/>
<em>文本斜體（強調）</em><br/>
<big>文本放大</big><br/>
<small>文本縮小</small><br/>
文本<sup>上標</sup><br/>
文本<sub>下標</sub><br/>
<pre>
對連續空格 和空行
進行控制
</pre>
<p>該段文字從右往左顯示</p>
<p><bdo dir="rtl">該段文字從右往左顯示</p>
刪除錯誤字體<del>“宋體”</del>，新增字體<ins>華文新魏</ins><br/>
</body>
運行結果：
4、<span>
在HTML文檔中定義一個行內區域，一行內可以被 <span> 劃分成多個區域。
四 常用的行內塊級元素
1、<img>
定義HTML文檔中的圖像。
<img>是空標簽，只包含屬性，沒有閉合標簽。
語法格式：<img src="圖片地址" alt="提示文字">
（1）src屬性
用來定義圖像的URL地址。
src屬性的值是指圖像的位置，瀏覽器會將圖像顯示在文檔中圖像標簽出現的地方。
（2）alt屬性
alt屬性用來為圖像定義一串預備的可替換的文本，替換的文本屬性值是用戶自定義的。
當瀏覽器無法載入圖像時，瀏覽器將會顯示這個替代性的文本。
（3）height和width屬性
height和width屬性分別用於設置圖像的高度和寬度，屬性值默認單位為像素px。
指定圖像高度與寬度，當頁面加載時就會保留指定的尺寸，如果不指定圖片大小，加載頁面時有可能會破壞HTML頁面的整體布局。
註意：加載圖片需要時間，盡量慎用圖片。並且需要註意頁面圖像的路徑，如果不能正確設置圖像的位置，瀏覽器無法加載圖片，會顯示一個破碎的圖片。
2、鏈接與圖片綜合運用的實例展示：
<body> 文本鏈接：<a href="http://www.google.cn">鏈接</a> <br /> 圖片鏈接：<a href="http://www.google.cn"> <img src="google.JPG" alt="goole圖標" height="30" width="30"> </a> </body>
五 註釋
HTML註釋可以提高HTML文檔的可讀性，使代碼更易被人理解。
瀏覽器會忽略註釋，並且不會顯示它們。
語法格式：<!-- 註釋內容 -->
註意：顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行，所有連續的空格或空行都會被算作一個空格，HTML代碼中的所有連續的空行也被顯示為一個空格。
實例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is my first html</title> </head> <body> <h1>春曉</h1> <p> 春眠不覺曉， 處處聞啼鳥。 夜來風雨聲， 花落知多少。 </p> </body> </html>
運行結果：
HTML筆記（二） HTML標簽元素