1. 什麼是html?
Html是用來描述網頁的一種語言。
l HTML 指的是超文本標記語言 (Hyper Text Markup Language)
l HTML 不是一種編程語言,而是一種標記語言 (markup language)
l 標記語言是一套標記標籤 (markup tag)
l HTML 使用標記標籤來描述網頁
2. Html的作用?
Web瀏覽器的作用是讀取html文檔,並以網頁的形式顯示它們。瀏覽器不會顯示html標籤,而是使用標籤來解釋頁面上的內容.
簡單說,html就是用於展示信息的。
3. Html書寫規範
a) Html標籤
HTML 標記標籤通常被稱爲 HTML 標籤 (HTML tag)。
l HTML 標籤是由尖括號包圍的關鍵詞,比如 <html>
l HTML 標籤通常是成對出現的,比如 <b> 和 </b>
l 標籤對中的第一個標籤是開始標籤,第二個標籤是結束標籤
l 絕大多數的標籤都具有屬性,建議屬性值使用引號引起。例如:<body text=”red”>
l 大多數標籤是可以嵌套的
b) Html創建
Html文件可以直接使用文本編輯器來創建,保存時,後綴名爲html或htm
整個文件是在<html>與</html>標籤之間在<html>標籤間有<head>與<body>子標籤。
例如:
c) 空的html標籤
l 沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。
l <br> 就是沒有關閉標籤的空元素(<br> 標籤定義換行)。
l 在開始標籤中添加斜槓,比如 <br/>,是關閉空元素的正確方法,HTML、XHTML和 XML 都接受這種方式。
l 即使 <br> 在所有瀏覽器中都是有效的,但使用<br /> 其實是更長遠的保障。
d) Html大小寫不敏感
HTML 標籤對大小寫不敏感:<P> 等同於<p>。許多網站都使用大寫的 HTML 標籤。
W3School 使用的是小寫標籤,因爲萬維網聯盟(W3C)在HTML 4 中推薦使用小寫,而在未來 (X)HTML 版本中強制使用小寫
文件標籤
1. html標籤
整個文件都處於<html>標籤中.
<HTML>用以聲明這是 HTML 文件,讓瀏覽器認出並正確處理此 HTML 文件。
在HTML文件有兩部分<head>與<body>
2. head標籤
<head>用於加載一些重要的資訊
它的內容不會被顯示,只有<body>的內容纔會被顯示
3. title標籤
<title>只能出現於<head>中。
它代表的是標題
4. body標籤
<body>中的內容會被顯示。
常用屬性:
n text:用於設定文字顏色
n background:用於設定背景圖片
n bgcolor:用於設定背景色
5. 關於html中顏色取值
顏色由紅色、綠色、藍色混合而成
有三種取取值方式:
1.rgb(0,0,0) 值是在0-255之間
2.#000000 #ff0000 #00ff00 #0000ff #ffffff
3.red green blue
排版標籤
1. 註釋
在html中註釋是<!--註釋 -->
在html中使用註釋的目的與java中一樣。
2. p標籤
<p>標籤是段落標籤,可以將html文檔分割爲若干段落。瀏覽器會自動在段落前後添加空格。
<p>標籤常用屬性
l align:用於設定對齊方式 可選值 left right center 默認值是left.
3. br標籤
<br>標籤是換行標籤。
因爲瀏覽器會自動的忽略空白與換行,因此<br>標籤成爲了我們最常用的標籤。
4. hr標籤
<hr>標籤會生成一條水平線。
常用屬性:
l align:設置水平線對齊方式 可選值 left right center
l size:設置水平線厚度 以像素爲單位。默認爲2
l width:設置水平線長度.可以是絕對值或相對值。默認爲100%
l color:設置水平線顏色.默認爲黑色
5. 關於html中數值單位
Html的數值默認單位爲像素(px).
在有些位置可以使用百分比來設置。
例如:
<hr size=’3’>這個就代表水平線厚席爲3px.
<hr width=’30%’>這個就代表水平線長度爲總長度的30%.
塊標籤
1. div標籤
用於在文檔中設定一個塊區域。
常用屬性:
align:left center right
2. span標籤
用於在行內設定一個塊區域。
Html中絕大多數元素被定義爲塊級元素或內聯元素。
塊級元素在瀏覽器顯示時,通常會以新行來開始。例如 div p等
內聯元素在瀏覽器顯示時,通常不會以新行來開始。span
字體標籤
1. font
<font>標籤用於規定文本的字體,大小,顏色。
常用屬性:
n face:規定文本的字體
n size:規定文本的大小
n color:規定文本的顏色
2. h1-h6
<h1>-<h6>標籤用於定義標題.
<h1>最大標題
<h6>最小標題
列表標籤
1. ul
<ul>標籤表示的是一個無序列表。
常用屬性:
l type:規定列表的項目符號類型,可取值 disc,square,circle.默認值爲disc
2. li
<li>標籤表示的是一個列表項
常用屬性:
l type:這個屬性只適用於無序列表,用於設定項目符號,默認值爲disc
l value:這個屬性只適用於有序列表,用於設定列表的項目數字
3. ol
<ol>表示的是一個有序列表。
常用屬性:
l type:這個屬性規定列表中使用的標記類型。可取值1 A a I i.
l start:這個屬性規定列表的起始值
圖形標籤
1. img
<img>是一個圖片標籤,用於在頁面上引入圖片.
常用屬性:
l src:用於設定要引入的圖片的url
l alt:用於設定圖像的替代文字
l width:用於設定圖片的寬度
l height:用於設定圖片的高度
l border:圖片邊框厚度
l align:用於設定圖片的文字的對齊方式
鏈接標籤
1. a
<a>標籤用於定義超連接,用於從一個頁面鏈接到另一個頁面。
常用屬性:
l href:用於設定鏈接指向頁面的url.
l name:用於設定錨的名稱
l target:用於設定在何處打開鏈接頁面。
表格標籤
1. table
<table>標籤用於定義表格
常用屬性:
l align:用於設定表格的對齊方式
l bgcolor:用於設定表格的背景顏色。
l border:用於設定表格邊框的寬度
l width:用於規定表格的寬度。
2. tr
<tr>標籤用於定義表格的行,包含一個或多個th或td元素。
<tr>常用屬性:
align:用於設定表格中行的內容對齊方式。
bgcolor:用於設定表格中行的背景顏色。
3. td
<td>標籤用於定義表格單元
td元素中的文本一般顯示爲正常字體且左對齊。
<td>常用屬性:
l align:用於設定單元格內容的對齊方式。
l bgcolor:用於設定單元格背景顏色。
l height:用於設定單元格的高度。
l width:用於設定單元格的寬度。
l colspan:用於設定列合併
l rowspan:用於設定行合併。
4. caption
<caption>用於定義表格標題
<caption>標籤必須緊隨<table>標籤之後,一個表格只能有一個標題。通常這個標題會被居中於表格之上。
5. th
<th>標籤用於定義表格的表頭,<th>內部的文本通常呈現爲居中加粗文本。
Html表格中有兩種類型的單元格:
表頭單元格th:包含表頭信息。
標準單元格td:包含數據。
6. thead
<thead>標籤用於定義表格的頁眉
<thead>標籤用於組合HTML表格的表頭內容。
<thead>元素應該與<tbody>和<tfoot>元素結合起來使用。
注意:<thead>內部必須有<tr>標籤。
7. tbody
<tbody>標籤用於定義表格的主體
<tbody>標籤用於組合HTML表格的主體內容。
8. tfoot
<tfoot>標籤用於定義表格的頁腳
<tfoot>標籤用於組合HTML表格中的表注內容。
【內容:HTML表單標籤】
form標籤
<form>標籤代表一個表單,表單用於向服務器傳輸數據。
<form>標籤能夠包含<input>,可以是文本字段,複選框,單選框或提交按鈕等。還可以包含<textarea> <select>等。
<form>常用屬性:
l name:用於定義表單的名稱
l action:用於規定提交表單時向何處發送表單數據。
l method:用於規定提交的方式。一般取值 POST或GET
關於POST與GET方式區別:
1. get方式只能少量數據,而post可以攜帶大數據。
2. get方式提交時,數據會在地址欄上顯示,安全性差。Post方式提交不會在地址欄上顯示數據,更加安全。
input種類
<input>標籤用於蒐集用戶信息。
根據不同的 type 屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。
關於<input>標籤type屬性值說明 :
text
<input type=”text”>
定義單行的輸入字段,用戶可在其中輸入文本。默認寬度爲 20 個字符。
其它常用屬性:
l name:定義標籤名稱
l value:定義標籤值
l size:定義輸入字段的長度
l maxlength:定義可輸入最大字符個數
password
<input type=”password”>
定義密碼字段。該字段中的字符被掩碼.
其它常用屬性:
l name:定義標籤名稱
l value:定義標籤值
l size:定義輸入字段的長度
l maxlength:定義可輸入最大字符個數
radio
<input type=”radio”>
定義單選按鈕。
其它常用屬性:
l name:定義標籤名稱.注意,對於單選按鈕,如果要想做到單一選擇,多個radion的name值必一樣。
l value:定義標籤值
l checked:定義該標籤默認被選中。
checkbox
<input type=”checkbox”>
定義複選框。
其它常用屬性:
l name:定義標籤名稱.注意,一組的checkbox它們的name值應該是一樣的。
l value:定義標籤值
l checked:定義該標籤默認被選中。
button
<input type=”button”>
定義可點擊按鈕(多數情況下,用於通過 JavaScript 啓動腳本)
其它常用屬性:
l name:定義標籤名稱
l value:按鈕顯示名稱
hidden
<input type=”hidden”>
定義隱藏的輸入字段。
其它常用屬性:
l name:定義標籤名稱
l value:定義標籤值
file
<input type=”file”>
定義輸入字段和 "瀏覽"按鈕,供文件上傳。
其它常用屬性:
l name:定義標籤名稱
submit
<input type=”submit”>
定義提交按鈕。提交按鈕會把表單數據發送到服務器。
其它常用屬性:
l name:定義標籤名稱
l value:按鈕顯示名稱
reset
<input type=”reset”>
定義重置按鈕。重置按鈕會清除表單中的所有數據。
其它常用屬性:
l name:定義標籤名稱
l value:按鈕顯示名稱
image
<input type=”image”>
定義圖像形式的提交按鈕。
這個標籤主要是用了替換submit按鈕,因爲默認產生的提交按鈕並不漂亮,這個標籤允許你採用指定的圖片做爲提交按鈕。
其它常用屬性:
l name:定義標籤名稱
l src:定義作爲提交按鈕顯示的圖像的url
l alt:定義作用圖像的替代文本。
select與option標籤
1.<select>
用於定義一個下拉列表
常用屬性:
l name:定義下拉列表的名稱
l size:定義下拉列表中可見選項的數目
l multiple:定義可選擇多個選項
2.<option>
用於定義下拉列表中的選項。
<option>需要位於<select>標籤內部
常用屬性:
l value:定義送往服務器的選項值
l selected:定義選項爲選中狀態。