html經常使用標籤

時間 2019-12-08

標籤 html 經常使用標籤欄目 HTML 简体版

原文原文鏈接

目錄css

html的文件結構
- head
  - title
- body
  - hx
  - p
  - em/strong
  - span
  - q
  - blockquote
  - br
  - nbsp
  - hr
  - code
  - pre
  - ul-li
  - ol-li
  - div
  - table
  - a
  - img
- form
  - label
  - input
  - textarea
  - select-option

html的文件結構

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

head

head部分主要有：<title>、<script>、 <style>、<link>、 <meta>html

title

title標籤是網頁的標題信息
瀏覽器

body

body部分主要有：<h1>、<p>、<a>、<img>等網頁內容標籤，在這裏的標籤中的內容會在瀏覽器中顯示出來。服務器

hx

<hx>標籤是標題標籤，表示文章標題（x=1-6）框架

<body>
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>
</body>

p

做用：p標籤是段落標籤
語法：<p>段落文本</p>spa

em/strong

做用：強調文字，默認em是斜體，strong是粗體，均可以用css調整
用法：<em>強調文本</em>
用法：<strong>強調文本</strong>code

span

做用：span標籤爲文字單獨設置樣式（經過css）
用法：<span>單獨處理文本</span>orm

q

做用：q標籤是引用標籤，引用的文字會自動加上引號
用法：<q>引用文本</q>htm

blockquote

做用：長引用標籤，默認作法是縮進
用法：<blockquote>引用文本</blockquote>圖片

br

做用：換行 ( break )
用法：<br />

nbsp

做用：空格，你在html裏面輸入的空格最後都會被解析成1個空格，因此須要多個空格的使用能夠用nbsp（Non-breaking space）你也能夠記憶爲nb(牛逼) sp (space空格)

用法： 

hr

做用：分隔線 ( horizontal )
用法：<hr>

code

做用：代碼，防止瀏覽器誤認爲是要執行代碼，而沒顯示代碼。加了標籤瀏覽器就不會執行了，而是像文本同樣顯示出來
用法：<code>代碼語言</code>

pre

做用：在處理多段預覽文字或代碼時使用（保證顯示的格式，不須要<br />或&nbsp控制格式）
用法：<pre>語言代碼段</pre>

ul-li

做用：無序列表顯示
用法：

<ul>
  <li>新聞1</li>
  <li>新聞2</li>
   ......
</ul>

效果：

ol-li

做用：有序列表顯示
用法：

<ol>
  <li>新聞1</li>
  <li>新聞2</li>
   ......
</ol>

效果：

div

做用：劃分（division ），能夠根據邏輯組成把頁面劃分紅不一樣部分，而後經過css對不一樣部分進行裝飾。（就像屋內的房間劃分同樣）

用法：<div>…</div>

table

做用，產生一個表格
用法：主要是table、tbody、tr、th、td四元素的使用
<table>表示一個表格
<tbody>表示這個表格內容是一個總體（一次顯示而不是屢次加載）
<tr>表示一行
<td>表示一個單元格
<th>表示表頭
注意：默認是不代框的，若是加框能夠用css樣式

<table>
  <tbody>
    <tr>
      <th>班級</th>
      <th>學生數</th>
      <th>平均成績</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

caption

做用：表格標題

summary

做用：表格

a

做用1：實現超連接
用法：<a href="目標網址" title="鼠標滑過顯示的文本" target="_blank">連接顯示的文本</a>
target屬性表示是在當前窗口仍是新窗口打開，_blank表示新窗口，還有_self自身窗口，_top頂部框架,_parent父框架。

做用2：連接Email地址

<a href="mailto: hk2291976@hotmail.com ? cc=abc@hotmail.com ; bb@hotmail.com & subject=主題 & body =郵件內容 ">發送郵件</a>

img

做用：插入圖片
語法：<img src="圖片地址" title="鼠標滑過顯示文字" alt="下載失敗時的替換文本" title = "提示文本">

form

做用：表單數據，用於和用戶交互
語法：<form method="傳送方式" action="服務器文件">
傳送方式：POST,GET

label

做用：顯示文本和關聯控件
語法：<label for="關聯名字">顯示文本</label>

注意：用for屬性能夠關聯控件，有些像單選多選框這類不易點擊的，能夠用label關聯

<form>
   <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <br />
</form>

這樣就能夠點擊「男」或「女」觸發點擊單選的功能

input

做用：根據type類型
用法：<input type="類型">顯示文本</input
type類型：
text: 文本類型
password: 密碼類型
radio：name="name"name屬性相同的單選框
checkbox：複選框
file: 選擇文件
botton：按鈕（定義onclik觸發消息）
submit：提交數據
reset : 重置數據

H5中還加入了例如datatime,date,color,tel,range,number……等類型
詳細信息

注意：在H5中，能夠用placeholder屬性做爲佔位符，能夠實現提示信息，值能夠經過value設置和取得。

textarea

做用：文本域，支持多段文本
用法：<textarea rows="行數" cols="列數">文本</textarea>
注：屬性能夠經過css修改weight和height更改

select-option

做用：選擇框，節約空間
用法：<option value='提交值' selected="selected">顯示值</option>
其中：selected="selected"表示選中

<label>愛好:</label>
    <select>
      <option value="看書">看書</option>
      <option value="旅遊" selected="selected">旅遊</option>
      <option value="運動">運動</option>
      <option value="購物">購物</option>
    </select>

注意：下拉框能夠多選，select啓用屬性multiple="multiple",而後在選擇的時候，按ctrl（mac上command），就能夠多選