一. 字體標簽:

h1~h6、<font>、<u>、<b>、<strong>、<em>、<sup>、<sub>

• 粗體標簽<b> 或 <strong> （已廢棄）
• 下劃線標記<u> 、中劃線標記<s> （已廢棄）、
• 斜體標記<i> 或 <em> （已廢棄）

二. 排版標簽:

<p>段落標簽, 裏面只能放文字,圖片,表單元素.

<div>塊級標簽 和 <span>行內標簽, 是專門定義css的.

在網頁中單獨加入<div>和<span>,不會對網頁產生影響.

<div>是容器標簽,

<span>是文本級標簽

只能放文字 圖片 表單元素

不能放 p h ul dl ol div

<br/>換行標簽

<hr/>水平分割線

三 超鏈接標簽<a>

1)外部連接: 連接到外部文件.

<a href=“new.html”>點擊進入到新網頁</a> 或

<a href=http://www.baidu.com target=“_blank”>進入百度</a>

“_blank”是新建一個窗口打開網頁

<a>文本級標簽

2)錨連接

指給超鏈接起一個名字，作用是在本頁面或者其他頁面的不同位置進行跳轉。比如說，在網頁底部有一個向上的箭頭，點擊箭頭後回到頂部，這個就是利用到了錨鏈接。

首先創建一個錨點,利用name或者id屬性給特定位置起個名字.比如

<h1 name="top">這是頂部標題</h1>

<a href="#top">回到頂部</a>

上述代碼中，h1標簽元素這個錨叫做top。然後在底部設置超鏈接a，點擊時將回到頂部（此時，網頁中的url的末尾也出現了#top），註意href值中的#不要忘記了，表示跳到名為top的特定位置，這是規定

如果我們將a標簽的代碼改成<a href="new.html#top">回到頂部</a>,就表示，點擊之後，跳轉到new.html頁面的top錨點中去。

3)郵件連接

4)特殊連接:

a、返回頁面頂部的位置：<a href="#">跳轉到頂部</a>

b、與js有關：

(1) javascript:; 表示什麽都不執行，這樣點擊<a>時就沒有任何反應，例如：

　　　　<a href="javascript:;">內容</a>　　　

　　　　<a href="javascript:void(0);">內容</a>

　　　　我們可以這樣寫來阻止a標簽的默認點擊行為。

　　(2) javascript: 是表示在觸發<a>默認動作時，執行一段javascript代碼。例如：

　　　　<a href="javascript:alert(1)">內容</a>

5)超鏈接的屬性

href：目標URL；

　　title：懸停文本；

　　name：主要用於設置一個錨點的名稱；

　　target：告訴瀏覽器用什麽方式來打開目標頁面；target屬性有以下幾個值：

　　　　_self：在同一個網頁中顯示（默認值）

　　　　_blank：在新的窗口中打開。

　　　　_parent：在父窗口中顯示

　　　　_top：在頂級窗口中顯示

　　　　blank就是“空白”的意思，表示新建一個空白窗口。為啥有一個_ ，就是規定，沒啥好解釋的。

　　　　也就是說，如果不寫target=”_blank”那麽就是在相同的標簽頁打開，如果寫了target=”_blank”，就是在新的空白標簽頁中打開。

四 圖片標簽<img/>

Img:代表一張圖片.

Img是自封閉標簽,也叫單標簽.

1) 能夠插入的圖片類型有：jpg（jpeg）、gif、png、bmp

2) Src屬性:圖片的相對路徑和絕對路徑

html頁面不是直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到服務器上。

這裏涉及到圖片的一個屬性：src屬性：指圖片的路徑。

路徑有2中寫法:相對路徑和絕度路徑.

a) 相對路徑

就是相對當前頁面的路徑. 有兩個標記一個點 . 表示當前目錄,兩個點 .. 表示父級目錄

當前目錄中的圖片寫法: <img src=”2.jpg”> 或者 <img src=”./2.jpg”>

上一級目錄中的圖片:<img src”../2.jpg”>

b) 絕對路徑

               從盤符開始的路徑, <img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">

              網絡路徑, <img src="http://www.baidu.com/2016040102.jpg">

相對路徑的好處：站點不管拷貝到哪裏，文件和圖片的相對路徑關系都是不變的。

相對路徑使用有一個前提，就是網頁文件和你的圖片，必須在一個服務器上。

3) img標簽的其他屬性

width:寬度

height:高

title:提示性文本,鼠標懸停時出現的文本

align:圖片水平對齊的方式,屬性有left right center

alt:圖片顯示不出來的時候,文本顯示的內容

4) 註意事項

a) 文本級標簽在瀏覽器上顯示的時候,不管圖片和文字差別有多高, 總會”底邊對齊, 高矮不齊”

b) 如果要保證圖片等比例縮放,只需要設置一個width 或者 height 一個就可以

c) 如果要實現圖文混合排放的效果, 就使用align 屬性,取值left或者 right

d) 如果想點擊圖片跳轉某一個連接的時候:

<a href="跳轉的目標地址">

<img src="images/bojie.jpeg" alt="波姐" title=‘波多野結衣‘>

　　　　</a>

五 特殊字符:

&nbsp;：空格 （non-breaking spacing，不斷打空格）

　　&lt;：小於號（less than）

　　&gt;：大於號（greater than）

　　&amp;：符號&

　　&quot;：雙引號

　　&apos;：單引號

　　&copy;：版權?

　　&trade;：商標?

比如說，你想把<p>作為一個文本在頁面上顯示，直接寫<p>是肯定不行的，因為這代表的是一個段落標簽，所以這裏需要用到特殊字符。代碼應該這麽寫：

這是一個HTML語言的&lt;p&gt;標簽. 效果顯示：

------------------------------------華麗分隔線---------------------------------

一 列表標簽

1. ul 無序列表標簽(常用的)

<ul>

<li>第一個</li>

<li>第二個</li>

<li>第三個</li>

</ul>

總結:li不能單獨存在; 列表之間可以嵌套(li是一個容器標簽,li裏面什麽都可以放. 甚至可以再放一個ul)

1. ol 有序列表標簽, 跟ul一樣. ol用的不多

<ol>

<li>第一個</li>

<li>第二個</li>

<li>第三個</li>

</ol>

1. dl 定義標簽

dl(definition list)沒有屬性,dl的子元素只有dt, dd

<dl> 標簽與 <dt> （定義項目/名字）和 <dd> （描述每一個項目/名字）一起使用。如下示例：

<dl>

<dt>站點信息</dt>

<dd>意見反饋</dd>

<dd>關於我們</dd>

<dd>免責聲明</dd>

<dd>文章歸檔</dd>

</dl>

或者：

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

總結：

1）dt（definition title）列表的標題，這個標簽是必須寫的；

2）dd（definition description）列表的列表項，如果不需要它，可以不加；

3）定義列表用法很靈活，可以一個dt配多個dd，也可以讓每一個dl裏只有一個dt和dd；

　　　　4）dt，dd都是容器級標簽，想放什麽都可以，所以現在應該更加清晰的知道：用什麽標簽，不是根據樣子來決定，而是語義（語義本質上是結構）；

二 table標簽

<table>表格標簽, 表格是由行<tr>組成的,行是由列<td>或者<th>組成的.

<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

1) 單元格的合並

如果要合並兩個單元格,肯定要刪除一個單元格

橫向合並:colspan, 例如colspan=”2”表示當前單元格在水平方向上要占據兩個單元格的位置

縱向合並: rowspan, 例如rowspan=”2”表示當前單元格在垂直方向上占據兩個單元格的位置

<table border="1">

<tr>

<th colspan="2">userinfo</th>

</tr>

<tr>

<td >First Name:</td>

<td>Bill Gates</td>

</tr>

<tr>

<td rowspan="2">Telephone:</td>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77 855</td>

</tr>

</table>

2) <caption>: 表格的標題,使用時和<tr>標簽並列

3) 表格的<thead>標簽,<tbody>標簽,<tfoot>標簽

a) 如果寫了，那麽這三部分的代碼順序可以任意，瀏覽器顯示的時候還是按照thead、tbody、tfoot的順序依次來顯示內容。如果不寫thead、tbody、tfoot，那麽瀏覽器解析並顯示表格內容的時候是從按照代碼的從上到下的順序來顯示

b) 當表格非常大內容非常多的時候，如果用thead、tbody、tfoot標簽的話，那麽數據可以邊獲取邊顯示。如果不寫，則必須等表格的內容全部從服務器獲取完成才能顯示出來。

三 form表單(結合JS)

表單標簽用<form>表示,用於和服務器的交互. 表單就是收集用戶信息,讓用戶填寫和選擇.

屬性:

1) action: 指定表單數據的處理程序, 一般是PHP, 比如 action=”login.php”

2) method: 表單數據的提交方式, 一般取值: get(默認) 和 post

action屬性就是表示將表單提交到哪裏。

method屬性表示用什麽http方法提交，有get、post兩種。

1. get方式:

將表單數據以”name=value”形式追加到action指定的處理程序後面. 兩者間用“？”隔開，每一個表單的“name=value”間用“&”號隔開。

特點：只適合提交少量信息，並且不太安全（不要提交敏感數據），url中能看到提交的數據，提交的數據類型只限於ASCII字符。

1. post方式:

將表單數據(隱藏,url中不顯示)直接發送到action指定的處理程序. Post發送的數據url不可見.

action指定的處理程序可以獲取到表單數據.

特點: 可以提交海量信息，相對來說安全一些，提交的數據格式是多樣的（word、excel、rar、img）

1. enctype:

表單數據的編碼方式(加密方式), 取值可以是application/x-www-form-urlencoded、multipart/form-data。

enctype只能在POST方式下使用。例如：

<form action="" method="post" enctype=""></form>

(1) Application/x-www-form-urlencoded：默認加密方式，除了上傳文件之外的數據都可以；

(2) Multipart/form-data：上傳附件時，必須使用這種編碼方式；

4. <input>輸入標簽(文本框)

用於接收用戶輸入, 例如：<input type=”text” />

屬性:

a、type=“屬性值”：

(1) text（默認）：文本類型；

(2) password：密碼類型；

(3) radio：單選按鈕，名字相同的按鈕作為一組進行單選（單選按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”）；

(4) checkbox：多選按鈕，名字相同的按鈕作為一組進行選擇；

(5) checked：將單選按鈕或多選按鈕默認處於選中狀態。當<input>標簽的type="radio"時，可以用這個屬性。屬性值也是checked，可以省略；

(6) hidden：隱藏框，在表單中包含不希望用戶看見的信息；

(7) button：普通按鈕，結合js代碼進行使用；

(8) submit：提交按鈕，傳送當前表單的數據給服務器或其他程序處理。這個按鈕不需要寫value自動就會有“提交”文字。這個按鈕真的有提交功能。點擊按鈕後，這個表單就會被提交到form標簽的action屬性中指定的那個頁面中去；

(9) reset：重置按鈕，清空當前表單的內容，並設置為最初的默認值；

(10) image：圖片按鈕，和提交按鈕的功能完全一致，只不過圖片按鈕可以顯示圖片；

(11) file：文件選擇框；

提示：如果要限制上傳文件的類型，需要配合JS來實現驗證。對上傳文件的安全檢查：一是擴展名的檢查，二是文件數據內容的檢查。

b、name：表單的名稱，用於JS來操作或控制表單時使用；

c、value=”內容”： 文本框裏的默認內容（已經被填好了的）；

d、id：表單的名稱，用於JS來操作或控制表單時使用；

e、size="50"：表示文本框內可以顯示五十個字符，一個英文或一個中文都算一個字符；

g、readonly：文本框只讀，不能編輯。因為它的屬性值也是readonly，所以屬性值可以不寫。用了這個屬性之後，在google瀏覽器中，光標點不進去；在IE瀏覽器中，光標可以點進去，但是文字不能編輯；

h、disabled：文本框只讀，不能編輯，光標點不進去。屬性值可以不寫；

5. <label>標簽

我們先來看這樣一段代碼：

<input type="radio" name="sex" /> 男

<input type="radio" name="sex" /> 女

對於上面這樣的單選框，我們只有點擊那個單選框（小圓圈）才可以選中，點擊“男”、“女”這兩個文字時是無法選中的；於是，label標簽派上了用場。

本質上來講，“男”、“女”這兩個文字和input標簽時沒有關系的，而label就是解決這個問題的。我們可以通過label把漢字包裹起來。

解決辦法:

<input type="radio" name="sex" id="nan" value=”man” /><label for="nan">男</label>

<input type="radio" name="sex" id="nv" value=”women” /><label for="nv">女</label>

上方代碼中，input元素要有一個id，然後label標簽有一個for屬性，和input標簽的id相同，那麽這個label和input就有綁定關系了。任何表單元素都有label。

6.<select>:下拉列表標簽

<select>標簽裏面的每一項用<option>表示。select就是“選擇”，option“選項”。

select標簽和ul、ol、dl一樣，都是組標簽。

屬性：

<select>標簽的屬性：

(1) multiple：可以對下拉列表中的選項進行多選。沒有屬性值；

(2) size="2"：如果屬性值大於2，則列表為滾動視圖。默認屬性值為1，下拉視圖；<option>標簽的屬性：

(1) selected：預選中。沒有屬性值。

例如:

<select multiple="" size=”2”>

<option>小學</option>

<option>初中</option>

<option selected="">高中</option>

<option selected="">大學</option>

<option>研究生</option>

</select>

7、<textarea>標簽：多行文本輸入框

屬性：

name：提交給服務器的key值；

　　　　value：提交給服務器的值；

　　　　rows="4"：指定文本區域的行數；

　　　　cols="20"：指定文本區域的列數；

　　　　readonly：只讀；

代碼示例：

<textarea name="txtInfo" rows="4" cols="20" value=””>路飛學城</textarea>

web前端HTML基礎