HTML基礎簡介、內容標簽、屬性、表格表單

TML基礎簡介
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

HTML是一個網頁文件的拓展名，和txt、jpg、mp3一樣，是一個文件格。.html文件就是網頁文件。

2.html 的格式化標簽

<!DOCTYPE>
<html>
--html是一個雙標簽開始標簽
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>
</title> --可能是標題
</head>
<body>--用來存放頁面中的內容
</body>
</html> --結束標簽

DOCTYPE----文檔類型聲明
meta標簽----設置頁面編碼格式，關鍵字，以及頁面的描述
<title></title>--------->標題部分
<head></head>------>頁面的頭部分
<body></body>------>頁面的主體部分

2.內容標簽

這其中<hr> <br> 是單標簽
<div></div> <span></span> 無意義區塊容器標簽
eg:
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網頁標題</h1></div>

HTML標記—注釋標記

<!--注釋語句-->

標題：
<h1>這是一個標題</h1>
<h2>這是一個標題</h2>
<h3>這是一個標題</h3>

段落：
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>

HTML 鏈接

<a >這是一個鏈接</a>
當您點擊 HTML 頁面中的某個鏈接時，對應的 <a> 標簽指向萬維網上的一個地址。
一個統一資源定位器(URL) 用于定位萬維網上的文檔。
URL - 統一資源定位器
scheme - 定義因特網服務的類型。最常見的類型是 http
host - 定義域主機（http 的默認主機是 www）
domain - 定義因特網域名，比如 runoob.com
:port - 定義主機上的端口號（http 的默認端口號是 80）
path - 定義服務器上的路徑（如果省略，則文檔必須位于網站的根目錄中）。
filename - 定義文檔/資源的名稱

這里需要注意:使用超鏈接做下載,并不是超鏈接完成的下載功能,而是通過超鏈接跳轉到了一個有下載功能的頁面。

常見的 URL Scheme

HTML 圖像

alt 屬性用來為圖像定義一串預備的可替換的文本。

3.HTML屬性

屬性實例:

HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定：<a >這是一個鏈接</a>

4.HTML 表格

表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標簽進行定義。

<table border="1">
<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>

5.HTML 表單

表單是一個包含表單元素的區域。

表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。

文本域（Text Fields）

文本域通過<input type="text"> 標簽來設定
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域
密碼字段
密碼字段通過標簽<input type="password"> 來定義:
<form>
FirstName: <input type="text" name="firstname"><br>
Password: <input type="password" name="pwd">
</form>

單選按鈕（Radio Buttons）

<input type="radio"> 標簽定義了表單單選框選項
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
單選有時需要設置默認選項,需要設置checked屬性:
<input type="radio" name="sex" checked ="checked"/>男

復選框（Checkboxes）

<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
多選框一般不需要設置默認選項,如果要設置,也是設置checked屬性

提交按鈕(Submit Button)

<input type="submit"> 定義了提交按鈕.

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
這里需要注意的是: Submit必須要和form一起使用才能達到效果
action 設置表單提交參數路徑
method 當前請求方式(同iOS開發網絡請求一樣,get/post)

假如您在上面的文本框內鍵入幾個字母，然后點擊確認按鈕，那么輸入數據會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。

圖片按鈕(使用不多)

Select下拉框

selected默認選項
<select>
<option selected="selected" >選項一</option>
<option>選項二</option>
</select>

Textarea文本域

<textarea></textarea>

6.HTML 列表

HTML 支持有序、無序和定義列表:

無序列表使用 <ul> 標簽
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
列表項項使用數字來標記。
<ol>
<li>第一個列表項</li>
<li>第二個列表項</li>
<li>第三個列表項</li>
</ol>
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
去除點去除下劃線
a {
text-decoration: none;
}
ul {
list-style: none;
}

7.內聯樣式- 在HTML元素中使用"style" 屬性

HTML樣式實例 - 背景顏色
<body style="background-color:yellow;">
<h2 style="background-color:red;">這是一個標題</h2>
<p style="background-color:green;">這是一個段落。</p>
</body>

HTML 樣式實例 - 字體, 字體顏色，字體大小

我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:

HTML 樣式實例 - 文本對齊方式

<h1 style="text-align:center;">居中對齊的標題</h1>

而關于其他CSS內容,這里就簡單介紹一下:

內部樣式表

當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標簽定義內部樣式表:

<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>

外部樣式表

當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 樣式標簽

最后提一下什么是Web安全色?

數年以前，當大多數計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標準被建議使用。其中的原因是，微軟和 Mac 操作系統使用了 40 種不同的保留的固定系統顏色（雙方大約各使用 20 種）。

216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調色板時，所有的計算機能夠正確地顯示所有的顏色。

言

前面已經學習相關html大部分知識，基本上可以制作出簡單的頁面，但是這些頁面都是靜態的，一個網站如果要實現用戶的互動交流，這時表單就起到關鍵的作用，表單的用途很多，它主要用來收集用戶的相關信息，是網頁具有交互的功能。例如，用戶注冊登錄，留言等。

下面會詳細介紹表單的使用方法，有以下內容：

表單標簽form的使用
表單控件使用

表單標簽 —— form

使用<form></form>標簽來創建一個表單，在其之間就是各種表單控件，如，輸入框，文本框，單選按鈕，多選按鈕，提交按鈕等。

語法代碼如下：

<form name="表單名稱" action="表單處理程序的服務地址" method="提交表單時所用的HTTP方法">
  ...... 表單控件......
  </form>

1、action —— 處理程序

這里的 action 屬性值表單提交的地址，就是表單收集好數據后要傳遞給遠程服務的地址，其地址可以是絕對路徑也可以是相對路徑，或者其它形式，如發送電子郵件。

使用表單發送電子郵件：

<form action="mailto:xxx@126.com">
  ...... 表單控件......
  </form>

提交到后臺程序地址：

<form action="action_page.php">
  ...... 表單控件......
  </form>

2、name —— 表單名稱

表單名稱，這一屬性不是必需的，但是為了防止表單信息提交到后臺處理程序時發生混亂，一般要設置一個名稱，且在同一頁面中最好是唯一的，不要和其它表單重復命名。

<form name="loginForm">
  ...... 表單控件......
  </form>

3、method —— 傳送數據方法

method 屬性用來定義處理程序使用那種方法來獲取數據信息，常用的有 get 和 post （http 協議定義的方法）。

<form name="loginForm" action="get 或 post">
  ...... 表單控件......
  </form>

何時使用 GET？

GET 最適合少量數據或不是很重要數據的提交，瀏覽器會設定容量限制，默認如何沒有設置method 屬性，表單則會使用get 方法。

當您使用 GET 時，表單數據在頁面地址欄中是可見的，會在表單提交的地址后面跟一個問號“?” ，問號后面是數據，以名稱1=值1&名稱2=值2 形式發送到后臺程序。

地址欄會看到如下：

action_page.php?firstname=Mickey&lastname=Mouse

關于 GET 的注意事項：
以名稱/值對的形式將表單數據追加到 URL
永遠不要使用 GET 發送敏感數據！（提交的表單數據在 URL 中可見！）
URL 的長度受到限制（2048 個字符）
對于用戶希望將結果添加為書簽的表單提交很有用
GET 適用于非安全數據，例如 Google 中的查詢字符串

何時使用 POST？

使用post 表單數據和url（表單提交地址）是分開發送的，在頁面地址欄中被提交的數據是不可見的，這樣安全性更好，用戶端會通知服務端獲取數據，所以這種情況沒有數據長度的限制，缺點是速度會慢些。

關于 POST 的注意事項：
將表單數據附加在 HTTP 請求的正文中（不在 URL 中顯示提交的表單數據）
POST 沒有大小限制，可用于發送大量數據。
帶有 POST 的表單提交后無法添加書簽

4、enctype —— 編碼方式

enctype 屬性規定在發送到服務器之前應該如何對表單數據進行編碼。

<form enctype="value">

有以下幾種值：

值	含義
application/x-www-form-urlencoded	在發送前編碼所有字符（默認編碼方式）
multipart/form-data	不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
text/plain	以純文本的方式，空格轉換為 "+" 加號，但不對特殊字符編碼。

5、target —— 目標顯示方式

target 屬性規定在何處打開 action URL。表單的目標窗口通常用來顯示表單返回的信息，例如是否成功提交了表單，是否出錯等。

<form target="value">

屬性值有以下：

值	描述
_blank	在新窗口中打開。
_self	默認。在表單當前的窗口中打開。
_parent	在父窗口中打開。
_top	在頂級窗口中打開。
framename	在指定的框架窗口中打開。

看到這里是不是想的了之前學習超鏈接時候，a標簽也有同樣的屬性，這里差不多一個意思，只是用途不一樣。

這里的窗口有可能是框架 frame 或浮動窗口 iframe ，后面會講到框架和浮動窗口，就是在一個頁面中可以嵌套一個子窗口。

表單控件的使用

什么是表單控件，就是收集數據的各種形式控件，比如輸入框，密碼框，單選、多選按鈕，下拉菜單，文本域，文件域，提交按鈕等等。

如下代碼：

<form name="form1">
<div>用戶名：<input name="username" type="text" ></div>
<div>密碼：<input name="password" type="password" ></div>
<div>性別：
<input type="radio" name="sex" value="male" checked> 男
<br>
<input type="radio" name="sex" value="female"> 女
</div>
<div> 車輛：
<select name="cars">
<option value="volvo">baom</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div>留言：
<textarea name="message" rows="10" cols="30">
請輸入文本
</textarea>
</div>
</select>
  </form>

效果如下：

這里顯示了一個基本表單，包含了輸入框，密碼框，單選，下拉菜單，文本域等組件，下面會按其使用類型介紹表單控件。

所有表單控件都一個name屬性和vaule屬性，用于和其它控件區別，后臺程序將會以此名稱獲取其表單控件對應的vaule值。

下篇會介紹各種表單控件的使用，感謝關注。

上篇：前端入門——html 表格的使用

下篇：前端入門——html 表單控件使用

程序員web前端分享HTML基本結構和基本語法

HTML基本結構

HTML的基本語法

1、<常規標記>

<標記屬性=“屬性值” 屬性=“屬性值”></標記>

標記也可叫標簽或叫元素

例如：<head></head>

2.空標記

<標記屬性=“屬性值” />

例如：<meta charset=”utf-8”>

說明：

1.寫在<>中的第一個單詞叫做標記，標簽，元素。

2.標記和屬性用空格隔開，屬性和屬性值用等號連接，屬性值必須放在“”號內。

3.一個標記可以沒有屬性也可以有多個屬性，屬性和屬性之間不分先后順序。

4.空標記沒有結束標簽，用“/”代替。

五、HTML常用標記

1、文本標題（h1-h6）

<h3>三級標題H3</h3>

<h4>四級標題H4</h4>

注：文本標題標簽自帶加粗，有自己的文本大小，并且獨占一行，有默認間距

2、段落文本(p)

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

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

3、空格

所占位置沒有一個確定的值,這與當前字體字號都有關系.

4、換行(br)

<br />

換行是一個空標記(強制換行)

5、水平線

<hr />空標記

6、加粗有兩個標記

A、<b>加粗內容</b>只是顯示加粗

B、<strong>強調的內容</strong>突出的文本

7、傾斜

8、擴展

<u>文本</u>下劃線

<del>文本</del>刪除線

<s>文本</s>刪除線

<sub></sub>下標

<sup></sup>上標

9、列表(ul,ol,dl)

HTML中有三種列表分別是：無序列表，有序列表，自定義列表

*無序列表

無序列表組成：

<ul>(unordered list)

．．．．．．

</ul>

*有序列表

有序列表組成：

<ol>(ordered list)

．．．．．．

</ol>

*自定義列表

<dl>(definition list)

(definition description)

．．．．．．

</dl>

知識擴展2----有序列表的屬性

1)、type:規定列表中的列表項目的項目符號的類型

語法：<ol type="a"></ol>

1 數字順序的有序列表（默認值）（1, 2, 3, 4）。

a 字母順序的有序列表，小寫（a, b, c, d）。

A 字母順序的有序列表，大寫（A,B,C,D)

i 羅馬數字，小寫（i, ii, iii, iv）。

I 羅馬數字，大寫（I, ii, iii, iv）。

2)、start 屬性規定有序列表的開始點。

語法：<ol start="5"></ol>

10、插入圖片

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

title的作用:圖片的標題；在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了，HTML的絕大多數標簽都支持title屬性，title屬性就是專門做提示信息的

alt的作用:提示文本必寫；alt屬性是在你的圖片因為某種原因不能加載時在頁面顯示的提示信息，它會直接輸出在原本加載圖片的地方。（優化圖片的）

*相對路徑的寫法：

1)當當前文件與目標文件在同一目錄下，直接書寫目標文件文件名+擴展名；<img src=”q12.jpg”/>

2)當當前文件與目標文件所處的文件夾在同一目錄下，寫法如下：

文件夾名/目標文件全稱+擴展名；<img src=”images/q12.jpg”/>

3)當當前文件所處的文件夾和目標文件所處的文件夾在同一目錄下，寫法如下：

../目標文件所處文件夾名/目標文件文件名+擴展名；

11、超鏈接的應用

語法：

<a href="#"></a>空鏈接

屬性：target:頁面打開方式，默認屬性值_self。

屬性值：_blank 新窗口打開

<a href="#" target="_blank">新頁面打開</a>

12、數據表格的作用及組成

作用：顯示數據

表格組成

<tr>

</tr>

</table>

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

<th></th>表格的列標題

*數據表格的相關屬性

1）width="表格的寬度"

2）height="表格的高度"

3）border="表格的邊框"

4）bgcolor="表格的背景色"

5）bordercolor="表格的邊框顏色"

6）cellspacing="單元格與單元格之間的間距"

7）cellpadding="單元格與內容之間的空隙"

8）水平對齊方式：align="left左對齊/center居中/right右對齊";

9) 垂直對齊方式：valign="top頂對齊/middle居中/bottom底對齊/baseline(基線);

10)合并單元格屬性：

colspan=“所要合并的單元格的列數"合并列;

rowspan=“所要合并單元格的行數”合并行;

13、表單的作用及組成

表單的作用：用來收集用戶的信息的;

表單組成：表單框（表單域form）

提示信息

表單控件/表單元素

1)、表單框

2）文本框

3)密碼框

4)提交按鈕

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

5）單選框/單選按鈕

單選按鈕里的name屬性必須寫，同一組單選按鈕的name屬性值必須一樣。

6）復選框

復選按鈕里的name屬性必須寫，同一組復選按鈕的name屬性值必須一樣。

checked="checked"表示默認被選中，可簡寫成checked

disabled="disabled"表示禁用，可簡寫成disabled

enabled:可用狀態

7)下拉菜單

</select>

8）多行文本框（文本域）

</textarea>

9)跳轉按鈕

button和submit的區別是：

submit是提交按鈕起到提交信息的作用，type類型是button只起到跳轉的作用，不進行提交。

提示信息標簽(作用：將提示信息及相應的表單控件進行關聯)

擴展知識點3：對于不同的輸入類型，value 屬性的用法的意義

value 屬性為 input 元素設定值。

對于不同的輸入類型，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本

type="text", "password" - 定義輸入字段的初始值

type="checkbox", "radio" - 定義與輸入相關聯的值

注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 他name屬性。

擴展知識點4：

Form中的獲取數據的兩個方式get和post的區別？

1. get是從服務器上獲取數據，post是向服務器傳送數據。

2. get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。

3. 對于get方式，服務器端用Request.QueryString獲取變量的值，對于post方式，服務器端用Request.Form獲取提交的數據。

4. get傳送的數據量較小，不能大于2KB。post傳送的數據量較大，一般被默認為不受限制。

5. get安全性非常低，post安全性較高。但是執行效率卻比Post方法好。

建議：

1、get方式的安全性較Post方式要差些，包含機密信息的話，建議用Post數據提交方式；

2、在做數據查詢時，建議用Get方式；而在做數據添加、修改或刪除時，建議用Post方式；

14、div和span的用法

沒有具體含義，除了獨占一行之外沒有任何其它的默認屬性，是頁面布局中常用的標簽；

文本結點標簽

可以是某一小段文本，或是某一個字。它除了不換行外，沒有任何其它的默認屬性；

在線咨詢

上一篇：用這10個jQuery/HTML5圖片滑塊動畫：為你的網頁點贊
下一篇：高級版HTML視頻教程（全網原創首發！）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML基礎簡介、內容標簽、屬性、表格表單

言

表單標簽 —— form

表單控件的使用

您的項目需求