web前端習總結--HTML
web三要素:
瀏覽器:向服務器發起請求,下載服務器中的網頁(HTML),然後執行HTML顯示出內容
服務器:接受瀏覽器的請求,發送相應的頁面到瀏覽器
HTTP協議:瀏覽器與服務器的通訊協議.
HTML的工作原理:
HTML是部署在服務器上的文本文件
跟據HTTP協議,瀏覽器發出請求給服務器,服務器做出響應,給瀏覽器返回一個HTML
瀏覽器解釋執行HTML.從而顯示出內容
HTML部署在服務器上,運行在瀏覽器上
HTML
什麽是HTML?
HTML ( HyperText Markup Language ):超文本標記語言，一種純文本類型的語言
用來設計網頁的標記語言
用該語言編寫的文件，以.html或者.htm為後綴
由瀏覽器解釋執行
HTML頁面上，可以嵌套用腳本語言編寫的程序段，如: JavaScript
可以理解為標簽固定的XML
標記:
HTML標記通常也被稱為HTML標簽（HTML tag)
HTML標簽是由尖括號包圍的關鍵詞，比如<html>
HTML標簽通常是成對出現的,比如<p>和</p>
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
註釋:
添加註釋的語法如下:
<!- -註釋的內容- ->
註釋不可以嵌套
HTML文檔類型
<!DOCTYPE>聲明
HTML有多個不同的版本，只有完全明白頁面中使用的 確切HTML版本，瀏覽器才能完 全正確地顯示出HTML頁 面。這就是的用處
<!DOCTYPE>不是HTML標簽,他為瀏覽器提供了一項信息(聲明),即HTML是用什麽版本編寫的
<!DOCTYPE>聲明幫助瀏覽器正確地顯示網頁。
HTML版本
從Web誕生早期至今，已經發展出多個HTML版本：
HTML常用聲明
<head>元素
<head>元素的作用
<head >是所有頭部元素的容器
<head>內的元素可聲明元信息，指示瀏覽器在何處可以找到樣式表，包含的腳本，等等
以下標簽都可以添加到head部分：
<title>,<meta>,<link>,<style>,<script>等
<title>元素
<title>元素定義文檔的標題,能夠:
定義瀏覽器工具欄中的標題
提供頁面被添加到收藏夾時的標題
顯示在搜索引擎結果中的頁面標題
<!DOCTYPEhtml> <html> <head> <title>HELLO HTML!</title> </head> </html>
<meta>元素
<meta>元素提供關於HTML文檔的元數據
元數據不會顯示在頁面上,但是對於機器是可讀的
用於規定頁面的描述,關鍵字關鍵詞,文檔的作者,最後修改的時間以及其他的元數據
常用的屬性有:content,http_equiv,charset
文本元素
文本元素的作用
文本是網頁上的重要組成部分，直接書寫的文本會用瀏覽器默認的樣式顯示
文本元素列表
包含在文本元素中的文本，則會被顯示為元素所擁有的樣式，文本元素包括：
1,標題元素
標題元素讓文字以醒目的方式顯示，往往用於文章的標題
基本語法:<h#>...</h#>
# = 1,2,3,4,5,6
從<h1>到<h6>,即標題1-標題6
2,段落元素
<p>元素提供了結構化文本的一種方式
<p>元素中的文本會用單獨的段落顯示
前後的文本都換行分開
添加一段額外的垂直空白距離,作為段落間距
3,列表元素
列表是指將具有相似特征或者具有先後順序的幾行文字進行對齊排列
所有的列表都甶列表類型和列表項組成
列表類型：
有序列表
<ol>元素編寫有序列表,用於列出頁面上有特定次序的一些項目
<ol>元素中也只能包含列表項元素<li>
無序列表
<ul>元素表示無序列表,用於列出頁面上沒有特定次序的一些項目
<ul>元素中也只能包含列表項元素<li>
列表項: <li>,用於指示具體的列表內容
列表嵌套:
<ol> <li>web三要素 <ul> <li>服務器</li> <li>瀏覽器</li> <li>TTTP協議</li> </ul> </li> </ol>
4,分區元素
分區元素用於為元素分組，常用於頁面布局
塊分區元素:<div></div>
行內區分元素:<span></span>
元素的顯示方式
塊級元素
默認情況下,塊級元素會獨占一行,即元素前後都會自動換行
如:<p>,<div>,<h#>
行內元素
不會換行,可以和其他行內元素位於同一行
如:<span>,<a>
5,行內元素
<span>元素是內聯元素,可用作文本的容器
<span>元素也沒有特定的含義,當與CSS一同使用時<span>可用於為部分文本設置樣式屬性
<i>元素用來定義斜字體
<em>元素用來定義著重字體
<b>元素用來定義粗體文字
<strong>元素用來定義著重文字
<del>元素用來定義帶刪除線的文字
<u>元素用來定義帶下劃線的文字
空格折疊：默認情況下，HTML中多個空格、多個制表 符、多個換行符會壓縮成單個空格，即只顯示一個空格
<br>元素在任何地方創建手工換行
實體引用:HTML中常用的字符實體如下:
圖像
圖像元素
使用<img>元素將圖像添加到頁面
必須屬性: src
常用屬性:width,height
<img src="C:\Users\Administrator\Desktop\資料\WEB01\image\1.jpg"width=100%>
超鏈接
超鏈接元素
使用<a>元素創建一個超級鏈接,語法如下:
<a href = ” ” target = “ ”>文本</a>
href屬性:鏈接URL
target屬性:目標打開方式,可取值為_blanK,_self等
錨點
錨點是文檔中某行的一個幾號
用於鏈接到文檔中的某個位置
定義錨點
<a name = “anchorname1”>錨點--</a>
鏈接到錨點:在錨點名前加上#
<a href = “#anchomame1”>回到錨點--</a>
表格
表格的作用
表格通常用來組織結構化的信息
表格是一些被稱作單元格的矩形框按照從左到右,從上到下的順序排列到一起而形成的
表格的數據存儲在單元格裏
創建表格
定義表格:使用成對的<table></table>標記
創建行:使用成對的<tr></tr>標記
創建列(單元格):使用成對的<td></td>標記
表格常用的屬性
<table>元素
border 設置表格邊框的粗細
width/height 設置表格的長寬
align位置
cellpadding:單元格邊框與內容之間的間距
cellspacing:單元格之間的間距
<tr>元素
align/valign
<td>元素
align/valign/width/height/colspan/rowspan
跨行屬性
跨行rowspan
使當前單元格沿著垂直方向延伸,值為一正整數,代表此單元格垂直延伸的單元格數
跨列屬性
跨列colspan
使當前單元格沿著水平方向延伸,值為一正整數,代表此單元格水平延伸的單元格數
行分組
表格可以劃分為三個部分:表頭,表主體,和表尾
表頭行分組:<thead></thead>
表主體行分組<tbody></tbody>
表尾行分組<tfoot></tfoot>
表單的概述
什麽是表單?
表單用於顯示,收集信息,並提交信息到服務器
表單二要素
From元素
表單控件
表單就是從瀏覽器向服務器傳輸數據的手段
表單元素
定義表單:使用成對的<from></from>標記,表示要將此元素中所涵蓋的控件中的數據傳輸給服務器
主要屬性
action:表單提交的URL
method:指出表單數據提交的方式
GET:默認值
提交的數據追加在請求路徑上,例如:/1.html?username=jack&password=1234,數據格式k/v追加是使用?鏈接之後每一對數據使用&鏈接
因為請求的路徑長度有限,所以GET請求提交的數據有限
POST:
提交的數據不再請求路徑上追加(即不顯示在地址欄上)
enctype:表單數據進行編碼的方式
表單控件
表單可以包含很多不同類型的表單控件
表單控件是一種HTML元素,是信息輸入項
表單控件包括:
input元素(具有不用的外觀)
文本框,密碼框
單選框,復選框
按鈕
隱藏域,文本選擇框
其他元素
標簽,文本域,下拉選
<input>元素
文本框<input type=”text”/>
密碼框<input type=”password”/>
主要屬性
value屬性:由訪問者自由輸入的任何文本
maxlength屬性:限制輸入的字符數
readonly屬性:設置文本控件只讀
placeholder屬性:幫助用戶輸入信息
單選框:<input type=”radio”/>
復選框:<input type=”checkbox”/>
主要屬性:
value:文本,當提交form時,如果選中了此單選按鈕,那麽value就被發送到服務器
name:用於實現分組,一組單選框或者復選框的名字必須相同
checked:設置選中
按鈕
提交按鈕:<input type=”submit”/>
傳送表單數據給服務器端或其它程序處理
重置按鈕:<input type=”reset”/>
清空表單的內容並把所有表單控件設置為最初的默認值
普通按鈕:<input type=”button”/>d
主要屬性：
value：按鈕的名字
隱藏域，文件選擇框
隱藏域:<input type=”hidden”/>
在表單中包含不希望用戶看見的信息
文件選擇框:<input type=”file”/>
選擇要上傳的文件
其他元素
標簽
表單中的文本，用於給控件設置顯示名稱
語法:<label for=”控件ID”>文本</label>
主要屬性:
for:設置該文本所關聯的控件ID,關聯後點擊標簽等同於點擊控件
文本域
相當於多行文本框
語法:
<testarea>文本</testarea>
主要屬性
cols:指定文本區域的列數
rows:指定文本區域的行數
readonly:只讀
下拉選
下拉選擇內容
語法:
<select> <option value=”1”>java</option> <option value=”2”>php</option> <option value=”3”>.net</option> </select>
web前端習總結--HTML