HTML常用標記

HTML常用標記

1.文字標題（h1-h6）
<h1></h1>//logo，文章的大標題
<h2></h2>//大模組的標題
<h3></h3>//小模組的標題

注：文字標題標籤自帶加粗，字號從大到小，有自己的文字大小，並且獨佔一行，有預設間距，豎著排列，

2.段落文字

<p>段落文字內容</p>

標識一個段落(段落與段落之間有段間距)

3.空格

 

所佔位置沒有一個確定的值,這與當前字型字號都有關係.

4.版權

©

5.商標

®

6.左右箭號

<&ht;

7.換行

<br/>//空標記(強制換行)

8.水平線

<hr/>//雙線 空標記

9.加粗

<b></b>//只是顯示加粗
<strong></strong>//強調突出文字內容

10.傾斜

<em></em>//強調文字
<i></i>

11.擴充套件

<u></u>下劃線
<del></del>刪除線
<s></s>刪除線
<sub></sub>下標
<sup></sup>上標

12.列表
無序列表

<ul type="circle“>//空心圓
    <li></li>
    <li></li>
</ul>    
<ul type="square”>//實心方塊
    <li></li>
    <li></li>
</ul>  
<ul type="disc”>//實心圓 預設
    <li></li>
    <li></li>
</ul>   

有序列表

<ol type="1">//預設為數字
    <li></li>
    <li></li>
</ol>
<ol type="a">//小寫字母
    <li></li>
    <li></li>
</ol>
<ol type="A" start="3">//大寫字母，start屬性：規定有序列表的開始點
    <li></li>
    <li></li>
</ol>
<ol type="i">//小寫羅馬數字
    <li></li>
    <li></li>
</ol>
<ol type="I">//大寫羅馬數字
    <li></li>
    <li></li>
</ol>

自定義列表

<dl>
    <dt>描述的物件</dt>//可以是文字或圖片，規定只能寫一個
    <dd>描述的文字</dd>
</dl>

13.插入圖片

<img src="圖片路徑" width="400px" title="滑鼠懸停上後的提示資訊" alt="圖片丟失或不顯示的提示資訊"/>

…/後退一步
…/…/後退兩步

注:所要插入的圖片必須放在站點下

title的作用:圖片的標題； 在你滑鼠懸停在該圖片上時顯示一個小提示，滑鼠離開就沒有了，HTML的絕大多數標籤都支援title屬性，title屬性就是專門做提示資訊的
alt的作用:提示文字 必寫；alt屬性是在你的圖片因為某種原因不能載入時在頁面顯示的提示資訊，它會直接輸出在原本載入圖片的地方。（優化圖片的）

相對路徑的寫法：
1)噹噹前檔案與目標檔案在同一目錄下，直接書寫目標檔案檔名+副檔名；<img src=”q12.jpg”/>
2)噹噹前檔案與目標檔案所處的資料夾在同一目錄下，寫法如下：
資料夾名/目標檔案全稱+副檔名；<img src=”images/q12.jpg”/>
3)噹噹前檔案所處的資料夾和目標檔案所處的資料夾在同一目錄下，寫法如下：
…/目標檔案所處資料夾名/目標檔案檔名+副檔名；

<img src=”../images/q12.jpg”/>

通過IP訪問會有載入過程，時間或長或短
通過本地訪問不需載入過程，但需手動重新整理
alt在HB裡一直載入時不會顯示，停止載入後顯示

14.超連結
語法

<a href="目標檔案路徑及全稱/連線地址" title="提示文字" target="_blank">連結文字/圖片</a>

空連結

<a href="#"></a>

跳轉外網地址加http://

<a href="http://www.baidu.com"></a>

跳轉本地專案路徑不加

<a href="02文字標題"></a>

設定視窗開啟方式：target:頁面開啟方式，預設屬性值_self

<a href="跳轉路徑" target="_blank">連結文字/圖片</a>//新視窗開啟
<a href="跳轉路徑" target="_self">連結文字/圖片</a>//原視窗開啟，預設

15.區域劃分

<div></div>

沒有具體含義， 除了獨佔一行之外沒有任何其它的預設屬性，是頁面佈局中常用的標籤；
16.文字節點

<span></span>

可以是某一小段文字，或是某一個字。 它除了不換行外，沒有任何其它的預設屬性；
17.表單
作用：用來收集使用者的資訊
表單組成：表單框（表單域form）
提示資訊
表單控制元件（表單元素）

1)、表單框

<form name="表單名稱（英文字母開頭的）" method（提交方式）="post/get" action="表單提交的地址"></form>

2）文字框

<input type="text" value="預設值"maxlength="5" placeholder="提示文字" maxlength="最大長度" />

placeholder:HTML5新增加的，在IE10以下不相容
maxlength：HTML5新增加的，在IE10以下不相容
3)密碼框

<input type="password" placeholder="密碼"/>

4)提交按鈕

<input type="submit" value="按鈕內容" />
<input type="reset" value="按鈕內容"/>重置按鈕

5）單選框/單選按鈕

<input type="radio" name="ral" value="radiovalue"/>
<input type="radio" name="ral" checked="checked" />

單選按鈕裡的name屬性必須寫，同一組單選按鈕的name屬性值必須一樣。
6）核取方塊

<input type="checkbox" name="like" value="checkboxvalue" />

核取按鈕裡的name屬性必須寫，同一組核取按鈕的name屬性值必須一樣。
checked="checked"表示預設被選中，可簡寫成checked
disabled="disabled"表示禁用，可簡寫成disabled
enabled:可用狀態
7)下拉選單

<select name="">
<option name="" value="表單被提交時被髮送到伺服器的值" selected="selected">選單內容</option>
</select>

value可以省略

selected預設
8）多行文字框（文字域）

<textarea name="textareal" cols="字元寬度" rows="行數">
</textarea>

cols表示字元寬度，一個漢字兩個字元寬度
9)跳轉按鈕

<input name="'" type="button" value=“按鈕內容” />
<button></button>

button和submit的區別是：
submit是提交按鈕起到提交資訊的作用，type型別是button只起到跳轉的作用，不進行提交。
10)上傳檔案框
檔案域：<input type="file" />

11)影像域

<input type="image" src="" width="100" height="100" alt="上傳圖片" />

12)隱藏文字框
<input type="hidden" value="值" />上傳隱藏的值/欄位

13)提示資訊標籤
(作用：將提示資訊及相應的表單控制元件進行關聯)

<input type="text" id="user"/>
<label   for="user">提示資訊</label>

必須繫結才能使用，繫結方法：input給id屬性，label給for屬性，兩個屬性值一樣
14)表單欄位集：

<fieldset>
    <legend>欄位集標題</legend>
</fieldset>

於對錶單中的元素進行分組,可以巢狀。 fieldset功能：相當於一個方框，在欄位集中可以包含文字和其他元素。該元素用於對錶單中的元素進行分組並在文件中區別標出文字。fieldset元素可以巢狀，在其內部可以在設定多個fieldset物件。 legend功能：legend元素可以在fieldset物件繪製的方框內插入一個標題。legend元素必須是fieldset內的第一個元素。

對於不同的輸入型別，value 屬性的用法的意義：
value 屬性為 input 元素設定值。
對於不同的輸入型別，value 屬性的用法也不同：
type=“button”, “reset”, “submit” - 定義按鈕上的顯示的文字
type=“text”, “password” - 定義輸入欄位的初始值
type=“checkbox”, “radio” - 定義與輸入相關聯的值
註釋： 和 <input type="radio"> 中必須設定 value 他name屬性。

Form中的獲取資料的兩個方式get和post的區別？

1. get請求通常是從伺服器上獲取資料，post請求通常表示向伺服器提交資料。
2. get請求傳送的資料都寫在位址列上，使用者可見。而post請求傳送的資料使用者不可見。
3. get請求不能提交大量的資料，但post可以，因此不要混用。
   建議：
   1、get方式的安全性較Post方式要差些，包含機密資訊的話，建議用Post資料提交方式；
   2、在做資料查詢時，建議用Get方式；而在做資料新增、修改或刪除時，建議用Post方式；

18.表格
作用：顯示資料
表格組成

<table width="value" height="value" border="value">
      <tr>
            <td></td>
            <td></td>
     </tr>
</table>

注：一個tr表示一行;一個td表示一列(一個單元格)

行分組：
<thead></thead> 表頭
<tbody></tbody> 表體必需存在的標籤
<tfoot></tfoot> 表尾
說明：一個Table中，只能包含一個thead,一個tfoot,但可包含多個tbody,tbody標籤是寫表格時必備的標籤。

表格的相關屬性
1）width=“表格的寬度”
2）height=“表格的高度”
3）border=“表格的邊框”
4）bgcolor=“表格的背景色”
5）bordercolor=“表格的邊框顏色”
6）cellspacing=“單元格與單元格之間的間距”
7）cellpadding=“單元格與內容之間的空隙”
8）水平對齊方式：align=“left左對齊/center居中/right右對齊”;
9) 垂直對齊方式 ：valign="top頂對齊/middle居中/bottom底對齊
10)合併單元格屬性：
colspan=“所要合併的單元格的列數"合併列;
rowspan=“所要合併單元格的行數”合併行;
注：邊框只能給table，背景顏色都可以
單元格的寬高不是固定的，會被內容撐開
valign給td
align都可以

快捷打法：
table>tr>td+tab
table>tr9>td10
table>tr9>td10{文字} 在哪加文字就在誰後加{}

td和th的區別：th有居中和加粗效果