經常使用的HTML標籤詳解與總結

對於不少HTML初學者來講，記憶和掌握標籤是一門很難搞的功課。今天，咱們就來詳細介紹經常使用的HTML標籤。

對於標籤的掌握，更多的是要經過練習，熟能生巧。

stlye標籤

用於定義元素的CSS樣式

<style>
  /*這裏寫css樣式*/
</style>

script標籤

用於定義頁面的JavaScript代碼，也能夠引入外部的JavaScript文件。

<script>
  /*這裏寫JavaScript代碼*/
</script>

link標籤

引入外部樣式css文件。

<link rel="stylesheet" href="css/style.css">

HTML註釋

又叫註釋標籤。

對關鍵代碼註釋是一個良好的習慣。在實際開發中，對功能模塊代碼進行註釋尤其重要。

<!-- 註釋的內容 -->

h(標題)標籤

共有六個級別的標題標籤：h一、h二、h三、h四、h五、h6。其中h是header的縮寫。

這裏要注意，一個頁面通常只有一個h1標籤，表示頁面的大標題。

<h1>hearder 1</h1>
<h2>hearder 2</h2>
...

p(段落)標籤

咱們能夠用來顯示一個段落的文字。

<p>Paragraph</p>

br標籤

對文字字符進行換行處理。

<br>

hr標籤

加入水平分割線。

<hr>

strong標籤

語義強調，表示重視。同時字符加粗。

<strong>xxx</strong>

div標籤

全稱「division(分區)」，用來劃分一個區域。div標籤內部能夠放入全部其餘標籤，例如p標籤、strong標籤等。

<div class="">
  <p> I love <strong>study</strong>. </p>
</div>

span標籤

段落式標籤，和div很是像。可是div是塊級元素，而span是內聯元素。

<span>xxx</span>

空格

表示一個空格。

 

ol標籤

有序列表標籤。默認以數字順序。<li></li>表示一個列表項。

<ol>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>

ul標籤

無序排列標籤，即unordered list。

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

dl標籤

定義列表，即definition list。引入兩個概念，dt和dd。

dt即definition term(定義名詞)，用於添加要解釋的名詞。

dd即definition description(定義描述)，用於添加該名詞的具體解釋。

<dl>
  <dt>term</dt>
  <dd>description</dd>
</dl>

table標籤

一個表格通常由幾個部分組成。

表格：table標籤

行：tr(table row)標籤

單元格：td(table data cell)標籤

標題：caption標籤

表頭單元格：th(table header cell)標籤

通常爲了使表格語義化結構更清晰也更有可讀性和維護性，引入thead、tbody、tfoot三個標籤，把表格劃分爲三部分：表頭、表身、表腳。

<table>
  <caption>xxx</caption>
  <thead>
    <tr>
      <th>xxx</th>
      <th>xxx</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
  </tfoot>
</table>

img標籤

用來顯示圖片。有三個屬性值：src、alt、tittle。

<img src="圖片路徑" alt="沒法加載時顯示的文字" tittle="鼠標移動顯示的文字">

a標籤

超連接標籤。主要有兩個屬性值：href和target。

<a href="連接地址" target="打開方式">

target屬性取值：


_self 默認值，在當前窗口打開連接

_blank 在新窗口打開連接

_parent 在父窗口打開連接

_top 在頂級窗口打開連接

form標籤

表單標籤。

<form name="" method="">
  /*各類表單標籤*/
</form>

通常經常使用的屬性有name和target兩個。

在一個頁面中通常不止一個表單。爲了區分這些表單，咱們使用name來對錶單進行命名。每一個form標籤對應一個表單。

method屬性用於指示表單數據使用哪種http提交方法。取值有兩個：get和post。通常使用post，向服務器提交時加密，安全性高。

input標籤

多數表單都用input標籤來實現，是自閉合標籤。

<input type="">

下面介紹標籤的幾種type屬性。

text

單行文本框。

name:<input type="text" value="默認顯示的字符">

password

密碼文本框。一種特殊的單行文本框，輸入時不可見。

password:<input type="password" size="最多可輸入字符數">

radio

單選框。name屬性表示單選按鈕所在組名，value表示按鈕取值。

Gender：
<input type="radio" name="gender" value="man"> Male
<input type="radio" name="gender" value="woman"> Female

checkbox

複選框。

checked屬性表示默認選取。

Fruit:
<input type="checkbox" name="fruit" value="apple" checked> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
<input type="checkbox" name="fruit" value="lemon"> Lemon

button

普通按鈕，通常配合JavaScript進行操做。

<input type="button" value="">

submit

提交按鈕。

<input type="submit" value="">

reset

重置按鈕，只能夠重置同一表單中的輸入內容。

<input type="reset" value="">

button標籤

和input標籤中的button實現效果相似，不過此標籤在不賦予屬性時會自動升級爲提交按鈕。

<button type="">xxx</botton>

textarea標籤

多行文本框。默認文本是在標籤內部設置的，而不是在value中。rows和cols屬性能夠調整文本框的行數列數，但通常使用css來設置寬高。

<textarea rows="" cols="" value="">默認內容</textarea>

select/option標籤

下拉列表，以select和option兩個標籤配合完成。


select屬性有：

multiple 設置下拉列表能夠選擇多項。

size 設置下拉列表顯示幾個項，取值整數。

option屬性有：

selected 設置該選項默認。

disabled 設置該選項不可選。

<select multiple size="4">
  <option>xx</option>
  <option selected>xx</option>
  <option>xx</option>
  <option disabled>xx</option>
  <option>xx</option>
  <option>xx</option>
</select>

iframe標籤

能夠用來實現內嵌框架，以及配合超連接來使用。

<iframe src="http://" width="" height="" name="">
</iframe>

或者

<iframe src="xxx" width="" height="" name="">
<a href="xxx" target="_blank"></a>
</iframe>

Written by：EdenSheng
Email：singlesaulwork@gmail.com