1. 程式人生 > >常用的HTML標記整理

常用的HTML標記整理

常用的HTML4.01標記整理

<!Doctype html>
   <html>
      <head>
           <title>標題</title>
            <meta charset="utf-8">(記事本為gb2312)
         <body>
       
         </body>
      </head>
   </html>

二、 1.超連結標記

     <a href="要訪問的資源地址" target="_self預設本視窗覆蓋顯示/_blank新視窗顯示/框架名-指定框架中顯示"
title="提示資訊"></a> 郵件超連結:點選郵件超連結,會自動開啟你電腦上郵件傳送軟體,將收件人地址自動填充(foxmail ) <a href="mailto:[email protected]"></a> 錨鏈接(書籤連結): 訪問連結<a href="url#name"></a> 定義錨點:<a name="錨名"></a>

2.<br> 換行

3.&nbsp; 空格

4.<meta http-equiv="refresh"content="10">

refresh設定本網頁自動重新整理時間間隔秒數(10秒)

5.<meta http-equiv="refresh"content="10";url=http://www.baidu.com> 設定本網頁十秒後跳轉到其他介面或網頁

6.網站前端三層 : (x)html         結構層       html結構 css              表現層       決定html的樣式 javascript     動作層       決定html如何互動

7.HTML基本語法: <標記名 屬性=“值” 屬性=“值” ></標記名>

舉例子:

<font color="red" size="7" face="隸書">
  我是帥哥
</font>

8.標記的屬性和標記不能分離 一說屬性必須得說哪一個標記的屬性,屬性不能單獨說

<font color="" face=" size="" ></font>

   <p align=""></p>

9.HTML裡面的註釋

 <!-- -->

說明:註釋是給程式設計師看的

10.規範:

--標記和屬性全部小寫
--屬性值必須加""
--雙標記必須雙著用
--單標記必須關閉 <img /> <input />
--標記只能巢狀不能交叉

11.文字標記

 <font color="文字顏色" face="字型名稱" size="1-7文字大小預設3"></font>

12.文字修飾標記 加粗 <b></b> <strong></strong> 傾斜 <i></i> <em></em> 下劃線 <u></u> 刪除線<del></del> 地址<address></address> 上標 <sup></sup> 下標 <sub></sub>

13.段落標記:一個p相當於一個回車換行,/p相當於一個回車換行

<p align="水平對齊方式left預設/center/right"></p>

14.橫線:

<hr width="寬度" size="粗細" color="顏色" align="水平對齊方式left/center預設/right" noshade是否有陰影>

15.預格式化:保留原始碼中空格,不忽略原始碼中的空格

<pre></pre>

16.忽略HTML標記 <xmp></xmp>

17.設定段落縮排

<blockquote></blockquote> 

無序列表 ul 有序列表 ol 定義列表 dl 目錄列表 dir 選單列表 menu

無序列表

<ul type="disc/circle/square">
   <li type="disc/circle/square">
</li>
</ul>

有序列表

<ol type="1/A/a/i/I" start="從第幾項開始">
<li>
</li>
</ol>

定義列表:

   <dl>
      <dt>定義</dt>
      <dd>解釋1</dd>
      <dd>解釋2</dd>
      <dd>解釋3</dd>
      <dt>定義</dt>
      <dd>解釋1</dd>
      <dd>解釋2</dd>
      <dd>解釋3</dd>
      <dt>定義</dt>
      <dd>解釋1</dd>
      <dd>解釋2</dd>
      <dd>解釋3</dd>
   </dl>

19.圖片

 <img src="圖片來源" alt="替換文字" title="全域性屬性每個標記都會有提示資訊" align="圖片水平對齊方式left預設/right-----top/middle/bottom圖片後面文字的對齊方式" width="畫素/百分比" height="畫素/百分比">

說明:路徑分為 相對路徑(從當前文件開始) 絕對路徑(從碟符開始)—不可能用

20.移動

<marquee bgcolor="背景顏色" behavior="slide一次/scroll迴圈/alternate來回動" scrollamount="速度" scrolldelay="延遲" direction="移動方向left預設/right/up/down"/></marquee>

21.表格

 <table border="表格邊框" width="表格寬度" height="表格高度" bgcolor="背景顏色" background="表格背景圖片"cellspacing="單元格之間的距離" cellpadding="單元格里邊的內容距離邊框的距離" align="表格對齊方式">
     <tr align="單元格中水平對齊方式
left/center/right" valign="單元格中內容垂直對齊方式top/middle/bottom ">
         <td colspan="跨列合併單元格" rowspan="跨行合併單元格"></td>
         <td></td>
         <td></td>
     </tr>
     <tr><td></td>
         <td></td>
         <td></td>
     </tr>
    </table>

22.框架集和框架

   <frameset cois="豎著分割" rows="橫著分割"/>
        <frame name="框架的名字" src="連線的資源"/>
        <frame name="框架的名字" src="連結的資源"/>
    </frameset>

 例子:<frameset rows="25,75/*">
         <frame name="  " src="  "/>
      </frameset>

  浮動框架:講一個獨立的HTML頁面嵌入到當前頁面中
  <iframe name=""src="" width="" height=""></iframe>

23.

 ※ method="get/post"
    相同點:都是資料提交的方式,提交的資料是相同的
    不同點:
         ①get原理 :資料和HTML文件的頭部<head></head>資訊一起提交
              特點 :大小受到文件頭部大小限制
                     資料附加到url?後面
         ②post原理:資料和HTML文件正文<body></body>之間資訊一起提交
               特點:大小沒有限制
                     資料不會附加到url?後面

說明:什麼是資料?答:資料是使用者填寫的或選擇的表單項(資訊)

表單項:表單裡面的專案
輸入元素:<input type="text預設"/>輸入文字框
                         "password"密碼框
                         "radio"單選按鈕
                         "checkbox"複選框
                         "file"檔案域
                         "image"影象域
                         "hidden"隱藏域
                         "button"按鈕
                         "reset"重置
                         "submit"提交
<select></select>      <textarea></textarea>
  • (1)輸入文字框:

<input type=“text” name="" value=“預設值” max-length=“最大字元數” size=“多少個字元的寬度” readonly只讀 disabled禁用/>

  • (2)密碼框:<input type="password" name="" max-length="" size="" readonly disabled/>

  • (3)單選按鈕:

單選按鈕要是同一組的 那麼name值相同;如果不同,name值不同。 提示 提示

  • (4)複選框:

多選,name值相同也行,不同也行<input type="checkbox" name="" value="">

  • (5)檔案域:

<input type="file" name="">

  • (6)影象域:

代替submit樣子,如果你覺得submit不好看,那麼你可以使用PS做一個圖代替submit。

<input type="image" src="">
  • (7)按鈕:

<input type="button" name="" value="按鈕">

  • (8)重置按鈕:

將所有表單項重置為預設值而不是清空<input type="reset" name="" value="">

  • (9)提交按鈕:

點選提交按鈕後瀏覽器自動將表單項資料傳送給action所以所指地址 <input type="submit" name="sub" value="">

  • (10)select標籤;

①單選下拉選單 :

<select name="">
                   <option value=""></option>
                   <option value=""></option>
                   <option value=""></option>
                  <option value=""></option>
               </select>

②多選列表

<select name="" size="大小" multiple多選ctrl shift>
                  <option value=""></option>
                  <option value=""></option>
                  <option value=""></option>
                  <option value=""></option>
              </select>
  • (11)文字域:例如新浪微博,發表微博。百度貼吧,釋出帖子

               <textarea name="" cols="多少個字元寬度" rows="多少個字元高度"><>