HTML 知識彌補

時間 2019-12-30

標籤 html 知識彌補欄目 HTML 简体版

原文原文鏈接

什麼是HTML

HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，它規定了本身的語法規則，用來表示比「文本」更豐富的意義，好比圖片，表格，連接等。瀏覽器（IE,FireFox等）軟件知道HTML語言的語法，能夠用來查看HTML文檔。目前互聯網上的絕大部分網頁都是使用HTML編寫的。html

HTML是什麼樣的

簡單地來講，HTML的語法就是給文本加上代表文本含義的標籤(Tag)，讓用戶（人或程序）能對文本獲得更好的理解。瀏覽器

下面是一個最簡單的HTML文檔：框架

<html>
  <head>
    <title>第一個Html文檔</title>
  </head>
  <body>
    歡迎訪問<a href="http://deerchao.net">deerchao的我的網頁</a>!
  </body>
</html>

全部的HTML文檔都應該有一個<html>標籤，<html>標籤能夠包含兩個部分:<head>和<body>。編輯器

<head>標籤用於包含整個文檔的通常信息，好比文檔的標題（<title>標籤用於包含標題），對整個文檔的描述，文檔的關鍵字等等。文檔的具體內容就要放在<body>標籤裏了。ide

<a>標籤用於表示連接，在瀏覽器（如IE,Firefox等）中查看HTML文檔時，點擊<a>標籤括起來的內容時，一般會跳轉到另外一個頁面。這個要跳轉到的頁面的地址由<a>標籤的href屬性指定。上面的<a href="http://deerchao.net">中，href屬性的值就是http://deerchao.net。佈局

HTML文檔能夠包含的內容

經過不一樣的標籤，HTML文檔能夠包含不一樣的內容，好比文本，連接，圖片，列表，表格，表單，框架等。學習

文本字體
HTML對文本的支持是最豐富的，你能夠設置不一樣級別的標題，分段和換行，能夠指定文本的語義和外觀，能夠說明文本是引用自其它的地方，等等等等。網站
連接spa
連接用來指出內容與另外一個頁面或當前頁面某個地方有關。
圖片
圖片用於使頁面更加美觀，或提供更多的信息。
列表
列表用於說明一系列條目是彼此相關的。
表格
表格是按行與列將數據組織在一塊兒的形式。也有很多人使用表格進行頁面佈局。
表單
表單一般由文本輸入框，按鈕，多選框，單選框，下拉列表等組成，使HTML頁面更有交互性。
框架
框架使頁面裏能包含其它的頁面。

HTML文檔格式詳細說明

前面介紹了HTML文檔的基本格式，下面再作一個詳細說明。

HTML文檔能夠用任何文本編輯器（好比記事本，UltraEdit等）建立，編輯，由於它的內容在本質也只是一些文本。

在HTML文本中，用尖括號括起來的部分稱爲標籤。若是想在正文裏使用尖括號（或者大與號小與號，總之是同一個東西），必須使用字符轉義，也就是說轉換字符的原有意義。<應該使用<代替，>則使用>，至於&符號自己,則應該使用&替代（不得不說的是有不少HTML文檔沒有遵循這個規則，經常使用的瀏覽器也都可以分析出&究竟是一個轉義的開始，仍是一個符號，可是這樣作是不推薦的）。

標籤本質上是對它所包含的內容的說明，可能會有屬性，來給出更多的信息。好比<img>（圖片）標籤有src屬性（用於指明圖片的地址），width和height屬性（用於說明圖片的寬度和高度）。HTML裏能使用哪些標籤，這些標籤分別能夠擁有哪些屬性，這些都是有規定的，知道了這裏說的基本知識以後，學習HTML其實也就是學習這些標籤了。本文後面會對經常使用的HTML標籤作出簡短的介紹。

標籤一般有開始部分和結束部分（也被稱爲開始標籤和結束標籤），它們一塊兒限定了這個標籤所包含的內容。屬性只能在開始標籤中指定，屬性值能夠用單引號或雙引號括起來。結束標籤都以/加上標籤名來表示。有時候，有些標籤並不包含其它內容（只包括本身的屬性，甚至連屬性都沒有），這種狀況下，能夠寫成相似這樣：<img src="logo.gif" />。注意最後的一個空格和一個反斜槓，它說明這個標籤已經結束，不須要單獨的結束標籤了。

某些標籤包含的內容中還能夠有新的標籤，新的標籤名甚至可能還能夠與包含它的標籤的名稱相同（哪些標籤能夠包含標籤，能夠包含哪些標籤也是有規定的）。好比：

<div>
  <div>分類目錄...</div>
  <div>當前分類內容列表...</div>
</div>

在這種狀況下，最後出現的標籤應該最早結束。

HTML文檔裏全部的空白符（空格，Tab，換行，回車）會被瀏覽器忽略，惟一的例外是空格，對空格的處理方式是全部連續的空格被當成一個空格，無論有一個，仍是兩個，仍是100個。之因此有這樣的規則是由於忽略空白符能讓使用HTML的做者以他以爲最方便的格式來排列內容，好比能夠在每一個標籤開始後增長縮進，標籤結束後減小縮進。因爲英語文本中空格用得很廣泛（用於分隔單詞），因此對空格作了這樣的特殊處理。若是要顯示連續的空格（好比爲了縮進），應該用 來表明空格。

經常使用標籤介紹

文本

最經常使用的標籤多是<font>了，它用於改變字體，字號，文字顏色。

<font size="6">6</font>
<font size="4">4</font>
<font color="red" size="5">紅色的5</font>
<font face="黑體">黑體的字</font>

加粗，下劃線，斜體字也是經常使用的文字效果，它們分別用<b>,<u>,<i>表示：

<b>Bold</b>
<i>italic</i>
<u>underline</u>

還有一些標籤，用來指出包含的文本有特殊的意義，好比<abbr>（表示縮寫），<em>（表示強調），<strong>（表示更強地強調）,<cite>（表示引用），<address>（表示地址）等等。這些標籤不是爲了定義顯示效果而存在的，因此從瀏覽器裏看它們可能沒有任何效果，也可能不一樣的瀏覽器對這些標籤的顯示效果徹底不一樣。

一篇很長的文章，若是有合適的小標題的話，就能夠快速地對它的內容進行大體的瞭解。在HTML裏，用來表示標題的標籤有：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>，它們分別表示一級標題，二級標題，三級標題...

<h1>HTML 30分鐘教程</h1>
<h2>什麼是HTML</h2>
...
<h2>HTML是什麼樣的</h2>
...

圖片

<hr>標籤用於在頁面上添加橫線。能夠經過指定width和color屬性來控制橫線的長度和顏色。

<hr width="90%" color="red" />
<img>標籤用於在頁面上添加圖片，src屬性指定圖片的地址，若是沒法打開src指定的圖片，瀏覽器一般會在頁面上須要顯示圖片的地方顯示alt屬性定義的文本。
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="圖片簡介" />

連接

超級連接用<a>標籤表示，href屬性指定了連接到的地址。<a>標籤能夠包含文本，也能夠包含圖片。

<a href="http://deerchao.net">deerchao的我的網站</a>
<a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="驗證HTML" /></a>

分段與換行

因爲HTML文檔會忽略空白符，因此要想保證正常的分段換行的話，必須指出哪些文字是屬於同一段落的，這就用到了標籤<p>。

<p>這是第一段。</p>
<p>這是第二段。</p>

也有人不用<p>，而用<br>。<br>只表示換行，不表示段落的開始或結束，因此一般沒有結束標籤。

這是第一段。<br>
這是第二段。<br />
這是第三段。

有時，要把文檔看做不一樣的部分組合起來的，好比一個典型的頁面可能包括三個部分：頁頭，主體，頁腳。<div>標籤專門用於標明不一樣的部分：

<div>頁頭內容</div>
<div>主體內容</div>
<div>頁腳內容</div>

表格

HTML文檔在瀏覽器裏一般是從左到右，從上到下地顯示的，到了窗口右邊就自動換行。爲了實現分欄的效果，不少人使用表格（<table>）進行頁面排版（雖然HTML裏提供表格的本意不是爲了排版）。

<table>標籤裏一般會包含幾個<tr>標籤，<tr>表明表格裏的一行。<tr>標籤又會包含<td>標籤，每一個<td>表明一個單元格。

<table>
  <tr>
    <td>2000</td><td>悉尼</td>
  </tr>
  <tr>
    <td>2004</td><td>雅典</td>
  </tr>
  <tr>
    <td>2008</td><td>北京</td>
  </tr>
</table>

<tr>標籤還能夠被<table>裏的<thead>或<tbody>或<tfoot>包含。它們分別表明表頭，表正文，表腳。在打印網頁的時候，若是表格很大，一頁打印不完，<thead>和<tfoot>將在每一頁出現。

<th>和<td>很是類似，也用在<tr>裏邊，不一樣的是<th>表明這個單元格是它所在的行或列的標題。

<table>
  <thead>
    <tr><th>時間</th><th>地點</th></tr>
  </thead>
  <tbody>
    <tr><td>2000</td><td>悉尼</td></tr>
    <tr><td>2004</td><td>雅典</td></tr>
    <tr><td>2000</td><td>北京</td></tr>
  </tbody>
</table>

列表

表格用於表示二維數據（行，列），一維數據則用列表表示。列表能夠分爲無序列表（<ul>），有序列表（<ol>）和定義列表（<dl>）。前兩種列表更常見一些，都用<li>標籤包含列表項目。

無序列表表示一系列相似的項目，它們之間沒有前後順序。

<ul>
  <li>蘋果</li>
  <li>桔子</li>
  <li>桃</li>
</ul>

有序列表中各個項目間的順序是很重要的，瀏覽器一般會自動給它們產生編號。

<ol>
  <li>打開冰箱門</li>
  <li>把大象趕進去</li>
  <li>關上冰箱門</li>
</ol>

框架

最後談一下框架，曾經很是流行的技術，框架使一個窗口裏能同時顯示多個文檔。主框架頁裏面沒有<body>標籤，取代它的是<frameset>。

<frameset>標籤的屬性Rows和Cols用於指定框架集(frameset)裏有多少行（列），以及每行（列）的高度（寬度）。

<frameset>標籤能夠包含<frame>標籤，每一個<frame>標籤表明一個文檔（src屬性指定文檔的地址）。

若是以爲這樣的頁面還不夠複雜的話，還能夠在<frameset>標籤裏包含<frameset>標籤。

<frameset rows="15%,*">
     <frame src="top.html" name=title scrolling=no>
     <frameset cols="20%,*">
          <frame src="left.html" name=sidebar>
          <frame src="right.html" name=recipes>
     </frameset>
</frameset>

轉載自：https://deerchao.net/tutorials/html/html.htm，謝謝做者

相關標籤/搜索

每日一句

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