1.2 常用HTML標籤1

尹成發表於2018-11-09
HTML

html標題

通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標籤可以在網頁上定義6種級別的標題。6種級別的標題表示文件的6級目錄層級關係，比如說： <h1>用作主標題（最重要的），其後是 <h2>（次重要的），再其次是 <h3>，以此類推。搜尋引擎會使用標題將網頁的結構和內容編制索引，所以網頁上使用標題是很重要的。

<h1>這是一級標題</h1>

<h2>這是二級標題</h2>

<h3>這是三級標題</h3>

html段落、換行與字元實體

html段落

<p>標籤定義一個文字段落，一個段落含有預設的上下間距，段落之間會用這種預設間距隔開，程式碼如下：

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

   <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文字標記語言，超

    文字指的是超連結，標記指的是標籤，是一種用來製作網頁的語言，這種語言由一個個的

    標籤組成，用這種語言製作的檔案儲存的是一個文字檔案，檔案的副檔名為html或者htm。

    </p>

    <p>一個html檔案就是一個網頁，html檔案用編輯器開啟顯示的是文字，可以用文字的方

    式編輯它，如果用瀏覽器開啟，瀏覽器會按照標籤描述內容將檔案渲染成網頁，顯示的網

    頁可以從一個網頁連結跳轉到另外一個網頁。</p>

</body>

</html>

html換行

程式碼中成段的文字，直接在程式碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在程式碼的段落中插入<br />來強制換行，程式碼如下：

<p>
一個html檔案就是一個網頁，html檔案用編輯器開啟顯示的是文字，可以用<br />
文字的方式編輯它，如果用瀏覽器開啟，瀏覽器會按照標籤描述內容將檔案<br />
渲染成網頁，顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。
</p>

html字元實體

程式碼中成段的文字，如果文字間想空多個空格，在程式碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字元實體,程式碼如下：

<!--  在段落前想縮排兩個文字的空格，使用空格的字元實體：&nbsp;   -->
<p>
&nbsp;&nbsp;一個html檔案就是一個網頁，html檔案用編輯器開啟顯示的是文字，可以用<br />

文字的方式編輯它，如果用瀏覽器開啟，瀏覽器會按照標籤描述內容將檔案<br />

渲染成網頁，顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。</p>

在網頁上顯示 “<” 和 “>” 會誤認為是標籤，想在網頁上顯示“<”和“>”可以使用它們的字元實體，比如：

<!-- “<” 和 “>” 的字元實體為 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

html塊、含樣式的標籤

html塊

1、div標籤 塊元素，表示一塊內容，沒有具體的語義。 
2、span標籤 行內元素，表示一行中的一小段內容，沒有具體的語義。

含樣式和語義的標籤

1、em標籤 行內元素，表示語氣中的強調詞 
2、i標籤 行內元素，原本沒有語義，w3c強加了語義，表示專業詞彙 
3、b標籤 行內元素，原本沒有語義，w3c強加了語義，表示文件中的關鍵字或者產品名 
4、strong標籤 行內元素，表示非常重要的內容

語義化的標籤

語義化的標籤，就是在佈局的時候多使用語義化的標籤，搜尋引擎在爬網的時候能認識這些標籤，理解文件的結構，方便網站的收錄。比如：h1標籤是表示標題，p標籤是表示段落，ul、li標籤是表示列表，a標籤表示連結，dl、dt、dd表示定義列表等，語義化的標籤不多。

html影象、絕對路徑和相對路徑

html影象

<img>標籤可以在網頁上插入一張圖片，它是獨立使用的標籤，通過“src”屬性定義圖片的地址，通過“alt”屬性定義圖片載入失敗時顯示的文字，以及對搜尋引擎和盲人讀屏軟體的支援。

<img src="images/pic.jpg" alt="產品圖片" />

絕對路徑和相對路徑

像網頁上插入圖片這種外部檔案，需要定義檔案的引用地址，引用外部檔案還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。

  • 絕對地址：相對於磁碟的位置去定位檔案的地址
  • 相對地址：相對於引用檔案本身去定位被引用的檔案地址

絕對地址在整體檔案遷移時會因為磁碟和頂層目錄的改變而找不到檔案，相對路徑就沒有這個問題。相對路徑的定義技巧：

  • “ ./ ” 表示當前檔案所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
  • “ ../ ” 表示當前檔案所在目錄下的上一級目錄，比如：“../images/pic.jpg” 
    表示當前目錄下的上一級目錄下的images資料夾中的pic.jpg的圖片。

html連結

html連結

<a>標籤可以在網頁上定義一個連結地址，通過src屬性定義跳轉的地址，通過title屬性定義滑鼠懸停時彈出的提示文字框。

<a href="#"></a> <!--  # 表示連結到頁面頂部   -->
<a href="http://www.163.com/" title="大黃易">大黃易</a>
<a href="2.html">測試頁面2</a>

定義頁面內滾動跳轉

頁面內定義了“id”或者“name”的元素，可以通過a標籤連結到它的頁面滾動位置，前提是頁面要足夠高，有滾動條，且元素不能在頁面頂部，否則頁面不會滾動。

<a href="#mao1">標題一</a>
......
......
<h3 id="mao1">跳轉到的標題</h3>

 

相關文章