HTML_常用標簽

（一）常用標簽

div
span
ul
ol
a
img
form
button
input
table
h1, h2, h3
pre
em, i

（二）用法詳解

  • 1、<div>——可定義文檔中的分區(qū)或節(jié)
  • 語法：
<div>
      ...
</div>
  • NOTE：
    如果用 id 或 class 來標記<div>，那么該標簽的作用會變得更加有效。
    <div> 元素沒有特定的含義，屬于塊級元素
  • 2、<span>——組合文檔中的行內元素
  • 語法：
<span> some text </span>
  • NOTE：
    <span> 元素沒有特定的含義
    <span> 元素是內聯(lián)元素，可用作文本的容器。
  • 3、<ul>——ul-li是沒有前后順序的信息列表(無序列表)
  • 語法：
<ul> 
     <li>信息</li>
     <li>信息</li>
      ......
</ul>
  • NOTE：
    1、常用屬性 type（項目符號的類型）取值：disc(小黑點)、circle(空心圓)、square(實心方塊)
    2、默認樣式為：小黑點
    3、ul標簽是用來給一堆數(shù)據(jù)添加列表語義的, 而不是用來給他們添加小圓點的
    4、ul標簽和li標簽是一個組合，一般情況下ul標簽和li標簽都是一起出現(xiàn), 不會單個出現(xiàn)
    5、ul標簽中不推薦包含其它標簽，但是li標簽中還可以繼續(xù)放其它的標簽
  • 4、<ol>—— ol-li是有前后順序的信息列表(有序列表)
    • 語法：
<ol> 
      <li>信息</li>
      <li>信息</li>
      ......
</ol>

  • NOTE：
    1、常用屬性type（編號類型）取值：1、a、A、i、
    2、默認樣式為：從1開始

  • 5、<a>——可實現(xiàn)超鏈接

  • 使用 <a> 標簽的方式：
    1、通過使用 href 屬性 - 創(chuàng)建指向另一個文檔的鏈接(href：Hypertext Reference的縮寫)
    2、通過使用 name屬性 - 創(chuàng)建文檔內的書簽(可以使用 id 屬性來替代 name 屬性，命名錨同樣有效）

  • 語法：

<a href="目標網(wǎng)址" title="鼠標滑過顯示的文本"> 鏈接顯示的文本 </a>
  • target屬性的值：
    • _blank --在新窗口中打開鏈接
    • _parent --在父窗體中打開鏈接
    • _self --在當前窗體打開鏈接
    • _top --在當前窗體打開鏈接，并替換當前的整個窗體
      默認情況下：在當前瀏覽器窗口中打開
  • title屬性的作用：
    鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網(wǎng)頁開發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內容（語義化更友好）
  • NOTE：
    a標簽不僅可以讓文字可以點擊, 還可以讓圖片也能夠被點擊
  • 6、<img>——插入圖片
    • 語法：
  <img src = "myimage.gif" alt = "My Image" title = "My Image" />
  • NOTE：
* 1、`src`：標識圖像的位置
* 2、`alt`：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本
* 3、`title`：提供在圖像可見時對圖像的描述（鼠標滑過圖片時顯示的文本）
* 4、圖像可以是GIF，PNG，JPEG格式的圖像文件
* 5、路徑有兩種填寫方式：絕對路徑、相對路徑
* 6、相對路徑：相對于我們當前 html 文件的位置來寫路徑
* 7、./表示當前目錄，../表示上一級目錄
* 8、加載圖片是需要時間的，所以建議：慎用圖片
* 9、`<img>` 是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽
  • 7、<form>——與用戶進行交互
  • 語法：
<form method="傳送方式" action="服務器文件">
  • 舉例：
<form method="post" action="save.php">
      <label for="username">用戶名:</label>
         <input type="text" name="username" />
      <label for="pass">密碼:</label> 
        <input type="password" name="pass" />
 </form>

  • NOTE：

    • 1、action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個PHP頁面(save.php)。
    • 2、method ： 數(shù)據(jù)傳送的方式（get/post）。
    • 3、所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在<form></form>標簽內，否則用戶輸入的信息提交不到服務器上
    • 4、表單可以把瀏覽者輸入的數(shù)據(jù)傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數(shù)據(jù)

  • 8、<input>——用于搜集用戶信息

  • 語法：

<form>
      <input type="text / password" name="名稱" value="文本" /> 
</form>

根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等

  • type屬性：
    type="text"定義文本輸入框
    type="password" 定義密碼輸入框
    type="hidden" 定義隱藏輸入字段
    type="image "定義圖像作為提交按鈕
    type="number "定義帶有 spinner 控件的數(shù)字字段
    type="password" 定義密碼字段，字段中的字符會被遮蔽
    type="radio "定義單選按鈕
    type="checkbox" 定義復選框按鈕
    type="range" 定義帶有 slider 控件的數(shù)字字段
    type="reset" 定義重置按鈕。重置按鈕會將所有表單字段重置為初始值
    type="search" 定義用于搜索的文本字段
    type="submit" 定義提交按鈕

  • 舉例：

<form>
       姓名： <input type="text" name="myName" placeholder="請輸入姓名"/> <br/>
       密碼： <input type="password" name="pass"/>
 </form>
  • NOTE:
    1、name：為文本框命名，以備后臺程序使用。
    2、value：為文本輸入框設置默認值。(一般起到提示作用)
    3、placeholder：提供可描述輸入字段預期值的提示信息，該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。
    4、placeholder 屬性適用于以下的<input>類型：text, search, url, telephone, email ,password
    5、同一組的單選按鈕，name 取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用
  • 9、<table>——定義表格
  • 語法：
<table border="1">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
</table>

  • 常用屬性
    1、border：規(guī)定表格邊框的寬度
    2、cellpadding：單元格中的文本與單元格邊框的間距
    3、cellspacing：單元格之間的間距

  • 創(chuàng)建表格的四個元素：table、tbody、tr、th、td
    1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束
    2、<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內容全部下載完才會顯示
    3、<tr>…</tr>：表格的行
    4、<td>…</td>：表格的列
    5、<th>…</th>：表格表頭
    6、colspan：規(guī)定單元格可橫跨的列數(shù)，rowspan：規(guī)定單元格可橫跨的行數(shù)

  • NOTE：
    1、th標簽中的文本默認顯示為：粗體且居中
    2、表格標簽有一個邊框屬性,，這個屬性決定了邊框的寬度，默認情況下這個屬性的值是 0 ， 所以看不到邊框可用 css 樣式，為表格加入邊框

  • 10、<h1>……<h6>——標題標記
  • 語法：
<h1 align = “l(fā)eft | center | right”>標題</h1>
  • NOTE:
    1、屬性：align水平對齊方式
    2、取值：left、center、right
  • 11、<pre>——預格式化的文本
  • 語法：
<pre>內容</pre>
  • 舉例：
<pre>
var message="歡迎";
 for(var i=1;i<=10;i++) {
      alert(message);
 }
</pre>
  • NOTE：
    1、被包圍在 pre 元素中的文本通常會保留空格和換行符
    2、標簽不只是為顯示計算機的源代碼時用的，在你需要在網(wǎng)頁中預顯示格式時都可以使用它，只是<pre>標簽的一個常見應用就是用來展示計算機的源代碼

參考文章推薦：
HTML需要掌握標簽
HTML中級和進階
HTML學習

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • HTML標簽解釋大全 一、HTML標記 標簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,526評論 1贊 41
  • 文檔元數(shù)據(jù) 元數(shù)據(jù)（Metadata）含有頁面的相關信息，包括樣式、腳本及數(shù)據(jù)，能幫助一些軟件 (如搜索引擎， 瀏...
    PYFang閱讀 406評論 0贊 0
  • HTML中的標簽屬性可以賦予標簽更多的信息，屬性總是以key :value即名稱/值對的形式出現(xiàn)。屬性可分為全局屬...
    二吊子程序媛閱讀 5,123評論 1贊 7
  • 有人說：“你不能閑著，得找事干。把時間排滿了，就不會煩惱了?！?我笑了笑，好的。其實他們不了解我，就像‘身臨其境’...
    拾年_D閱讀 188評論 0贊 0
  • 我在想如果看過你看過的世界，走過你走過的路，我是不是就能更靠近你一些。而我也明白擁有就是失去的開始。哪些生命...
    西西女王閱讀 274評論 3贊 1

友情鏈接更多精彩內容