HTML 基本標籤

時間 2019-11-19

標籤 html 基本標籤欄目 HTML 简体版

原文原文鏈接

Html和CSS的關係

學習web前端開發基礎技術須要掌握：HTML、CSS、JavaScript語言。下面咱們就來了解下這三門技術都是用來實現什麼的：css

1. HTML是網頁內容的載體。內容就是網頁製做者放在頁面上想要讓用戶瀏覽的信息，能夠包含文字、圖片、視頻等。html

2. CSS樣式是表現。就像網頁的外衣。好比，標題字體、顏色變化，或爲標題加入背景圖片、邊框等。全部這些用來改變內容外觀的東西稱之爲表現。前端

3. JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。能夠這麼理解，有動畫的，有交互的通常都是用JavaScript來實現的。程序員

標籤的語法

1. 標籤由英文尖括號<和>括起來，如<html>就是一個標籤。web

2. html中的標籤通常都是成對出現的，分開始標籤和結束標籤。結束標籤比開始標籤多了一個/。面試

如：編程

（1） <p></p>瀏覽器

（2） <div></div>編輯器

（3） <span></span>學習

3. 標籤與標籤之間是能夠嵌套的，但前後順序必須保持一致。

如：<div>裏嵌套<p>，那麼</p>必須放在</div>的前面。以下圖所示。

4. HTML標籤不區分大小寫，<h1>和<H1>是同樣的，但建議小寫，由於大部分程序員都以小寫爲準。

html文件基本結構

這一節中咱們來學習html文件的結構：一個HTML文件是有本身固定的結構的。

<html>
    <head>...</head>
    <body>...</body>
</html>

代碼講解：

1. <html></html>稱爲根標籤，全部的網頁標籤都在<html></html>中。

2. <head> 標籤用於定義文檔的頭部，它是全部頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤，頭部標籤在下一小節中會有詳細介紹。

3. 在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在這裏的標籤中的內容會在瀏覽器中顯示出來。

head標籤

<head>標籤的做用。文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正做爲內容顯示給讀者。

下面這些標籤可用在 head 部分：

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

<title>標籤：在<title>和</title>標籤之間的文字內容是網頁的標題信息，它會出如今瀏覽器的標題欄中。網頁的title標籤用於告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出網頁的主題。每一個網頁的內容都是不一樣的，每一個網頁都應該有一個獨一無二的title。

例如：

<head>
    <title>hello world</title>
</head>

<title>標籤的內容「hello world」會在瀏覽器中的標題欄上顯示出來，以下圖所示：

<!--註釋文字 –>

<body>標籤，網頁上顯示的內容放在這裏

在網頁上要展現出來的頁面內容必定要放在body標籤中。

<p>標籤，添加段落

若是想在網頁上顯示文章，這時就須要<p>標籤了，把文章的段落放到<p>標籤中。

語法：

<p>段落文本</p>

注意一段文字一個<p>標籤，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個<p>標籤中。以下圖所示。

在瀏覽器中顯示的效果：

<p>標籤的默認樣式，能夠在上圖中看出來，段前段後都會有空白，若是不喜歡這個空白，能夠用css樣式來刪除或改變它。

<hx>標籤，爲你的網頁添加標題

文章的段落用<p>標籤，那麼文章的標題用什麼標籤呢？在本節咱們將使用<hx>標籤來製做文章的標題。
標題標籤一共有6個，h一、h二、h三、h四、h五、h6分別爲一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。而且依據重要性遞減。<h1>是最高的等級。
語法：
<hx>標題文本</hx> (x爲1-6)
文章的標題前面已經說過了，可使用標題標籤，另外網頁上的各個欄目的標題也可以使用它們。以下圖爲騰訊網站。

注意：由於h1標籤在網頁中比較重要，因此通常h1標籤被用在網站名稱上。騰訊網站就是這樣作的。如：<h1>騰訊網</h1>

h1-h6標籤的默認樣式：

標籤代碼：

在瀏覽器中顯示的樣式：

從上面的圖片能夠看出標題標籤的樣式都會加粗，h1標籤字號最大，h2標籤字號相對h1要小，以此類推h6標籤的字號最小。

<strong>和<em>，加入強調語氣

有了段落又有了標題，如今若是想在一段話中特別強調某幾個文字，這時候就能夠用到<em>或<strong>標籤。

但二者在強調的語氣上有區別:<em> 表示強調，<strong> 表示更強烈的強調。

而且在瀏覽器中<em> 默認用斜體表示，<strong> 用粗體表示。兩個標籤相比，目前國內前端程序員更喜歡使用<strong>表示強調。

語法：

<em>須要強調的文本</em>

<strong>須要強調的文本</strong>

如，在網上商城中，某產品的打折後的價格是須要強調的。以下圖。

代碼實現：

在瀏覽器中默認樣式是有區別的：

原代碼，以下圖。

瀏覽器中的樣子，以下圖。

<em>的內容在瀏覽中顯示爲斜體，<strong>顯示爲加粗。之後可使用css樣式去改變這種樣式。

<span>標籤，爲文字設置單獨樣式

對<em>、<strong>、<span>這三個標籤進行一下總結：

1. <em>和<strong>標籤是爲了強調一段話中的關鍵字時使用，它們的語義是強調。

2. <span>標籤是沒有語義的，它的做用就是爲了設置單獨的樣式用的。

若是如今咱們想把「美國夢」三個字設置成blue（藍色），但注意不是爲了強調「美國夢」，而只是想爲它設置和其它文字不一樣的樣式（並不想讓屏幕閱讀器對「美國夢」這三個字加劇音讀出），因此這樣狀況下就能夠用到<span>標籤了。

語法：

<span>文本</span>

<q>標籤，短文本引用

語法：

<q>引用文本</q>

以下面例子：

<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心託杜鵑。</q>開始的。雖然當時不知道是什麼意思，只是以爲詩句挺特別。後來才明白這個典故出自是莊子的《逍遙遊》，《逍遙遊》表明了莊子思想的最高境界，是對世俗社會的功名利祿及本身的捨棄。</p>

講解：

1. 在上面的例子中，「莊生曉夢迷蝴蝶。望帝春心託杜鵑。」這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》。由於不是做者本身的文字，因此須要使用<q></q>實現引用。

2. 注意要引用的文本不用加雙引號，瀏覽器會對q標籤自動添加雙引號。

下圖是代碼顯示結果：

注意這裏用<q>標籤的真正關鍵點不是它的默認樣式雙引號（若是這樣咱們不如本身在鍵盤上輸入雙引號就好了），而是它的語義：引用別人的話。

<blockquote>標籤，長文本引用

<blockquote>的做用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名做家的文字，這時須要這個標籤。

<q>標籤是對簡短文本的引用，好比說引用一句話就用到<q>標籤。

如想在個人文章中引用李白《關山月》中的詩句，由於引用文本比較長，因此使用<blockquote>。

語法:

<blockquote>引用文本</blockquote>

以下面例子：

<blockquote>明月出天山，蒼茫雲海間。長風幾萬裏，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。 戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閒。</blockquote>

瀏覽器對<blockquote>標籤的解析是縮進樣式。以下圖所示：

<br>標籤，分行顯示文本

<br />標籤做用至關於word文檔中的回車。

上節的代碼改成：

語法：

xhtml1.0寫法：

<br />

html4.01寫法：

<br>

你們注意，如今通常使用 xhtml1.0 的版本的寫法（其它標籤也是），這種版本比較規範。

與之前咱們學過的標籤不同，<br />標籤是一個空標籤，沒有HTML內容的標籤就是空標籤，空標籤只須要寫一個開始標籤，這樣的標籤有<br />、<hr />和<img />。

講到這裏，你是否是有個疑問，想折行還很差說嘛，就像在 word 文件檔或記事本中，在想要折行的前面輸入回車不就好了嗎？很遺憾，在 html 中是忽略回車和空格的，你輸入的再多回車和空格也是顯示不出來的。

總結：在 html 代碼中輸入回車、空格都是沒有做用的。在html文本中想輸入回車換行，就必須輸入<br />。

`&nbsp，`網頁中添加一些空格

要想輸入空格，必須寫入 。

語法：

 

在html代碼中輸入空格是不起做用的。

<hr>標籤，添加水平橫線

在信息展現時，有時會須要加一些用於分隔的橫線，這樣會使文章看起來整齊些。以下圖所示：

語法：

html4.01版本<hr>

xhtml1.0版本 <hr />

注意：

1. <hr />標籤和<br />標籤同樣也是一個空標籤，因此只有一個開始標籤，沒有結束標籤。

2. <hr />標籤的在瀏覽器中的默認樣式線條比較粗，顏色爲灰色，可能有些人以爲這種樣式不美觀，沒有關係，這些外在樣式在咱們之後學習了css樣式表以後，均可以對其修改。

3. 你們注意，如今通常使用 xhtml1.0 的版本（其它標籤也是），這種版本比較規範。

<address>標籤，爲網頁加入地址信息

通常網頁中會有一些網站的聯繫地址信息須要在網頁中展現出來，這些聯繫地址信息如公司的地址就能夠<address>標籤。也能夠定義一個地址（好比電子郵件地址）、簽名或者文檔的做者身份。

語法：

<address>聯繫地址信息</address>

如：

<address>文檔編寫：lilian 北京市西城區德外大街10號</address>

<address>
本文的做者：<a href="mailto:lilian@imooc.com">lilian</a>
</address>

在瀏覽器上顯示的樣式爲斜體，若是不喜歡斜體，固然能夠，能夠在後面的課程中使用 css 樣式來修改它<address>標籤的默認樣式。

<code>標籤，加入一行代碼

在網頁中顯示一些計算機專業的編程代碼，當代碼爲一行代碼時，你就可使用<code>標籤了，以下面例子：

<code>var i=i+300;</code>

注意：在文章中通常若是要插入多行代碼時不能使用<code>標籤了。

語法：

<code>代碼語言</code>

注：若是是多行代碼，可使用<pre>標籤。

<pre>標籤，爲網頁加入大段代碼

加入一行代碼的標籤爲<code>，可是在大多數狀況下是須要加入大段代碼的，以下圖：

怎麼辦？不會是每一代碼都加入一個<code>標籤吧，沒有這麼複雜，這時候就可使用<pre>標籤。

語法：

<pre>語言代碼段</pre>

<pre> 標籤的主要做用:預格式化的文本。被包圍在 pre 元素中的文本一般會保留空格和換行符。

以下代碼：

<pre>
    var message="歡迎";
    for(var i=1;i<=10;i++)
    {
        alert(message);
    }
</pre>

在瀏覽器中的顯示結果爲：

在上面的例子中能夠看到代碼中的空格，換行符都保留下來。若是用之前的方法，回車須要輸入<br>籤，空格須要輸入 

注意：<pre> 標籤不僅是爲顯示計算機的源代碼時用的，在你須要在網頁中預顯示格式時均可以使用它，只是<pre>標籤的一個常見應用就是用來展現計算機的源代碼。

ul，無序列表

ul-li是沒有先後順序的信息列表。

語法：

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

舉例：

<ul>
  <li>精彩少年</li>
  <li>美麗忽然出現</li>
  <li>觸動心靈的旋律</li>
</ul>

ul-li在網頁中顯示的默認樣式通常爲：每項li前都自帶一個圓點，以下圖所示：

ol，有序列表

在網頁中展現有先後順序的信息列表

語法：

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

舉例：

下面是一個熱點課程下載排行榜：

<ol>
   <li>前端開發面試心法 </li>
   <li>零基礎學習html</li>
   <li>JavaScript全攻略</li>
</ol>

<ol>在網頁中顯示的默認樣式通常爲：每項<li>前都自帶一個序號，序號默認從1開始，以下圖所示：

div在排版中的做用

在網頁製做過程過中，能夠把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中。

這個<div>標籤的做用就至關於一個容器。

語法：

<div>…</div>

肯定邏輯部分：

什麼是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。以下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可使用<div>標籤做爲容器。

給div命名，使邏輯更加清晰

在上一小節中，咱們把一些標籤放進<div>裏，劃分出一個獨立的邏輯部分。爲了使邏輯更加清晰，咱們能夠爲這一個獨立的邏輯部分設置一個名稱，用id屬性來爲<div>提供惟一的名稱，這個就像咱們每一個人都有一個身份證號，這個身份證號是惟一標識咱們的身份的，也是必須惟一的。

以下兩圖進行比較，若是設計師把兩個圖給你，哪一個圖你看上去能更快的理解呢？是否是右邊的那幅圖呢。

語法：

<div id="版塊名稱">…</div>

table標籤，認識網頁上的表格

有時候咱們須要在網頁上展現一些數據，如某公司想在網頁上展現公司的庫存清單。以下表：

想在網頁上展現上述表格效果可使用如下代碼：

建立表格的四個元素：

table、tbody、tr、th、td

一、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。

二、<tbody>…</tbody>：當表格內容很是多時，表格會下載一點顯示一點，但若是加上<tbody>標籤後，這個表格就要等表格內容所有下載完纔會顯示。如右側代碼編輯器中的代碼。

三、<tr>…</tr>：表格的一行，因此有幾對tr 表格就有幾行。

四、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。

五、<th>…</th>：表格的頭部的一個單元格，表格表頭。

六、表格中列的個數，取決於一行中數據單元格的個數。

上述代碼在瀏覽器中顯示的默認的樣式爲：

總結：

一、table表格在沒有添加css樣式以前，在瀏覽器中顯示是沒有表格線的

二、表頭，也就是th標籤中的文本默認爲粗體而且居中顯示

用css樣式，爲表格加入邊框

Table 表格在沒有添加 css 樣式以前，是沒有邊框的。這樣不便於咱們後期合併單元格知識點的講解，因此在這一節中咱們爲表格添加一些樣式，爲它添加邊框。

在右側代碼編輯器中添加以下代碼：

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

上述代碼是用 css 樣式代碼（後面章節會詳細講解），爲th，td單元格添加粗細爲一個像素的黑色邊框。

結果窗口顯示出結果樣式：

caption標籤，爲表格添加標題和摘要

表格仍是須要添加一些標籤進行優化，能夠添加標題和摘要。

摘要

摘要的內容是不會在瀏覽器中顯示出來的。它的做用是增長表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。

語法：<table summary="表格簡介文本">

標題

用以描述表格內容，標題的顯示位置：表格上方。

語法：

<table>
    <caption>標題文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>

<a>標籤，連接到另外一個頁面

使用<a>標籤可實現超連接，它在網頁製做中能夠說是無處不在，只要有連接的地方，就會有這個標籤。

語法：

<a  href="目標網址"  title="鼠標滑過顯示的文本">連接顯示的文本</a>

例如：

<a  href="http://www.imooc.com"  title="點擊進入慕課網">click here!</a>

上面例子做用是單擊click here!文字，網頁連接到http://www.imooc.com這個網頁。

title屬性的做用，鼠標滑過連接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中做用很大，主要方便搜索引擎瞭解連接地址的內容（語義化更友好），以下

注意：還有一個有趣的現象，只要爲文本加入a標籤後，文字的顏色就會自動變爲藍色（被點擊過的文本顏色爲紫色），顏色很難看吧，不過沒有關係後面咱們學習了css樣子就能夠設置過來（a{color:#000}),後面會詳細講解。

在新建瀏覽器窗口中打開連接

<a>標籤在默認狀況下，連接的網頁是在當前瀏覽器窗口中打開，有時咱們須要在新的瀏覽器窗口中打開。

以下代碼：

<a href="目標網址" target="_blank">click here!</a>

使用mailto在網頁中連接Email地址

<a>標籤還有一個做用是能夠連接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。

咱們還能夠利用mailto作許多其它事情。下面一一進行講解，請看詳細圖示：

注意：若是mailto後面同時有多個參數的話，第一個參數必須以「?」開頭，後面的參數每個都以「&」分隔。

下面是一個完整的實例:

在瀏覽器中顯示的結果：

發送

點擊連接會打開電子郵件應用，並自動填寫收件人等設置好的信息，以下圖：

「對此影評有何感想，發送郵件給我」加入連接，使其單擊後能夠自動發送郵件，具體要求：

一、發送人郵箱地址：yy@imooc.com。

二、郵件主題：觀了不得的蓋茨比有感。

三、郵件內容：你好，對此評論有些想法。

<img>標籤，爲網頁插入圖片

語法：

<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">

舉例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

講解：

1、src：標識圖像的位置；

2、alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；

3、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；

四、圖像能夠是GIF，PNG，JPEG格式的圖像文件。

相關標籤/搜索

每日一句

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

HTML 基本標籤

Html和CSS的關係

標籤的語法

html文件基本結構

head標籤

<body>標籤，網頁上顯示的內容放在這裏

<p>標籤，添加段落

<hx>標籤，爲你的網頁添加標題

<strong>和<em>，加入強調語氣

<span>標籤，爲文字設置單獨樣式

<q>標籤，短文本引用

<blockquote>標籤，長文本引用

<br>標籤，分行顯示文本

&nbsp，網頁中添加一些空格

<hr>標籤，添加水平橫線

<address>標籤，爲網頁加入地址信息

<code>標籤，加入一行代碼

<pre>標籤，爲網頁加入大段代碼

ul，無序列表

ol，有序列表

div在排版中的做用

給div命名，使邏輯更加清晰

table標籤，認識網頁上的表格

用css樣式，爲表格加入邊框

caption標籤，爲表格添加標題和摘要

<a>標籤，連接到另外一個頁面

在新建瀏覽器窗口中打開連接

使用mailto在網頁中連接Email地址

<img>標籤，爲網頁插入圖片

`&nbsp，`網頁中添加一些空格