常用的HTML標籤詳解與總結

weixin_34127717發表於2018-12-10
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(標題)標籤

共有六個級別的標題標籤：h1、h2、h3、h4、h5、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>

空格

表示一個空格。

&nbsp;

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

相關文章