概述
1、Html就是超文本標記語言的簡寫,是最基礎的網頁語言
2、Html是通過標簽來定義的語言,代碼都是由標簽所組成
3、Html代碼不用區分大小寫
4、Html代碼由<html>開始</html>結束。里面由頭部分<head></head>和體部分<body></body>兩部分組成
5、頭部分是給Html頁面增加一些輔助或者屬性信息
6、身體部分是真正存放頁面數據的地方
多數標簽都是有開始標簽和結束標簽,其中有個別標簽因為只有單一功能,或者沒有要修飾的內容,可以在標簽內結束。例如<br />
想要對被標簽修飾的內容進行更豐富的操作,就用到了標簽中的屬性,通過對屬性的改變,增加了更多的效果選擇。
屬性與屬性值之間用”=”連接,屬性值可以用雙引號或單引號或者不用引號,一般都會用雙引號?;蛘吖疽幎〞鴮懸幏?br />格式:
<標簽名 屬性名=“屬性值”>數據內容</標簽名>
<標簽名 屬性名=“屬性值”/>
操作思想:
為了操作數據,都需要對數據進行不同的標簽封裝,通過標簽中的屬性對封裝的數據進行操作,標簽就相當于一個容器,對容器中的數據進行操作,就是在不斷的改變容器的屬性值。
字體標簽:<font>
例:<font size=5 color=red>字體標簽示例</font>
注:簡單顏色可以直接寫對應的英文,復雜的顏色用16進制表示,表現形式#FF0000兩個數為一組,按紅、綠、藍排列,如:#00FF00表示綠色,建議用工具選取
標題標簽:<h1><h2>…<h6>
因為標題是文本中常用的內容,為了方便操作而定義,使文章排版更加清晰。
特殊字符:
如果要在網頁上顯示一些特殊符號,比如< > &等,因為這些符號在代碼中會被瀏覽器識別并解釋,所以用一些特殊的方式來表示
列表標簽: <dl>
<dt>:上層標簽
<dd>:下層標簽
圖像標簽: <img>
<img src=”../dir/file” alt=”說明文字" height width border/>
src屬性中可用兩個點(../)代表上層目錄
alt屬性中的說明文字在鼠標懸停和圖片加載失敗時顯示
圖像地圖:用<img>封裝好圖像后,切換到DW設計視圖,在屬性中選擇熱點區域形狀并在圖像上拖動出一塊熱點區域,用熱點區域鏈接某個資源。在頁面中點擊熱點區域就會跳轉到相應資源。
表格標簽: <table>
組成:
標題標簽: <caption>給表格提供標題。
表頭標簽: <th> ,一般對表格的第一行或者第一列進行格式化,就是粗體顯示,并不常用。
行標簽: <tr>
單元格標簽: <td> ,加載行標簽的里面,可以簡單理解為,先有行,再在行中加入單元格。
格式:
屬性:
<table>
cellpadding:規定單元邊沿與其內容之間的空白。
cellspacing:規定單元格之間的空白。
<td>
rowspan:規定單元格可以橫跨的行數。
colspan:規定單元格可以橫跨的列數。
注:
table標簽中默認都有一個tbody標簽 thead、tbody、tfoot
瀏覽頁面時,瀏覽器解析由table標簽封裝的頁面數據時,讀到</table>表格結束標記才會顯示數據,若封裝頁面數據的表格很大,沒讀到結束標記就不顯示任何數據,用戶體驗不佳,所以將表格分為多個部分,讀一個</tbody>就顯示一部分。用tbody將表格分體
超鏈接標簽: <a>
兩種用法:
一、超鏈接 <a href=””>
屬性:
<table>
cellpadding:規定單元邊沿與其內容之間的空白。
cellspacing:規定單元格之間的空白。
<td>
rowspan:規定單元格可以橫跨的行數。
colspan:規定單元格可以橫跨的列數。
注:
table標簽中默認都有一個tbody標簽 thead、tbody、tfoot
瀏覽頁面時,瀏覽器解析由table標簽封裝的頁面數據時,讀到</table>表格結束標記才會顯示數據,若封裝頁面數據的表格很大,沒讀到結束標記就不顯示任何數據,用戶體驗不佳,所以將表格分為多個部分,讀一個</tbody>就顯示一部分。用tbody將表格分體
超鏈接標簽: <a>
兩種用法:
一、超鏈接 <a href=””>
表單標簽: <form>
表單標簽是最常用的標簽,用于與服務器端的交互。
<input>:輸入標簽;接受用戶輸入信息
其中type屬性指定輸入標簽的類型
文本框 text:輸入的文本信息直接顯示在框中。
密碼框 password:輸入的文本以圓點或者型號的形式顯示。
單選框 radio:如:性別選擇。
復選框 checkbox:如:興趣選擇。
隱藏字段 hidden:在頁面上不顯示,但在提交的時候隨其他內容一起提交。
提交按鈕 submit:用于提交表單中的內容。
重置按鈕 reset:將表單中填寫的內容設置為初始值
按鈕 button:可以為其自定義事件。
文件上傳 file :后期擴展內容,會自動生成一個文本框,和一個按鈕。
圖像 image 它可以替代 submit 按鈕
<select>:選擇標簽,提供用戶選擇內容。如:用戶所在省份。size屬性為顯示項目個數。
<option>:子項標簽,屬性 selected 沒有屬性值,加在子項上,其中一個子項上,子項就變成默認被選項。
<textarea>:多行文本框,如:個人信息描述。
<label>:用于給各元素定義快捷鍵。
for 屬性:指定快捷鍵作用的表單元素。必須與要作用的表單元素的 id 值相同。
accesskey 屬性:指定快捷鍵,此快捷鍵需要和 alt 鍵組合使用。
表單提交:
1、先定義 form 表單中的 action屬性值,指定表單數據提交的目的地(服務端)。
2、明確提交方式,通過指定 method 屬性值。如果不定義,那么 method 的值默認是 get。
get和post這兩種最常用的提交方式的區別:
1、get提交將數據顯示在地址欄,對于敏感信息不安全。post提交不顯示在地址欄。
2、地址欄中存放的數據是有限的,所以 get 方式對提交的數據體積有限制。post可以提交大體積數據。
3、對提交數據的封裝方式不同:get:將提交數據封裝到了消息頭前面,請求行中。post:將提交的數據封裝到消息頭后,數據體中。
其他標簽
<pre></pre> :此標簽內封裝的文本數據格式將保持原樣,包括空格和縮進等格式。常用于頁面中顯示帶有縮進層次的代碼。
<p></p> :段落標簽,兩個段落之間帶有空行
<b>加粗 <strong>加粗 <i>斜體 <u>下劃線 <sub>下標 <sup>上標
<marquee direction=”left/right/down/up” behavior=”scroll/alternate/slide”>此標簽內可以讓內容動起來,scroll滾動穿過/alternate來回彈/slide一下摔死: <form>
表單標簽是最常用的標簽,用于與服務器端的交互。
<input>:輸入標簽;接受用戶輸入信息
其中type屬性指定輸入標簽的類型
文本框 text:輸入的文本信息直接顯示在框中。
密碼框 password:輸入的文本以圓點或者型號的形式顯示。
單選框 radio:如:性別選擇。
復選框 checkbox:如:興趣選擇。
隱藏字段 hidden:在頁面上不顯示,但在提交的時候隨其他內容一起提交。
提交按鈕 submit:用于提交表單中的內容。
重置按鈕 reset:將表單中填寫的內容設置為初始值
按鈕 button:可以為其自定義事件。
文件上傳 file :后期擴展內容,會自動生成一個文本框,和一個按鈕。
圖像 image 它可以替代 submit 按鈕
<select>:選擇標簽,提供用戶選擇內容。如:用戶所在省份。size屬性為顯示項目個數。
<option>:子項標簽,屬性 selected 沒有屬性值,加在子項上,其中一個子項上,子項就變成默認被選項。
<textarea>:多行文本框,如:個人信息描述。
<label>:用于給各元素定義快捷鍵。
for 屬性:指定快捷鍵作用的表單元素。必須與要作用的表單元素的 id 值相同。
accesskey 屬性:指定快捷鍵,此快捷鍵需要和 alt 鍵組合使用。
表單提交:
1、先定義 form 表單中的 action屬性值,指定表單數據提交的目的地(服務端)。
2、明確提交方式,通過指定 method 屬性值。如果不定義,那么 method 的值默認是 get。
get和post這兩種最常用的提交方式的區別:
1、get提交將數據顯示在地址欄,對于敏感信息不安全。post提交不顯示在地址欄。
2、地址欄中存放的數據是有限的,所以 get 方式對提交的數據體積有限制。post可以提交大體積數據。
3、對提交數據的封裝方式不同:get:將提交數據封裝到了消息頭前面,請求行中。post:將提交的數據封裝到消息頭后,數據體中。
其他標簽
<pre></pre> :此標簽內封裝的文本數據格式將保持原樣,包括空格和縮進等格式。常用于頁面中顯示帶有縮進層次的代碼。
<p></p> :段落標簽,兩個段落之間帶有空行
<b>加粗 <strong>加粗 <i>斜體 <u>下劃線 <sub>下標 <sup>上標
<marquee direction=”left/right/down/up” behavior=”scroll/alternate/slide”>此標簽內可以讓內容動起來,scroll滾動穿過/alternate來回彈/slide一下摔死
今天就寫到這,再有其它HTML標簽需要學習下回再加上,持續更新。
|
新聞熱點
疑難解答
圖片精選