互聯網上標準資源的地址,能夠從互聯網上獲得的資源的位置和訪問方法。javascript
組成部分:協議,服務器地址,資源路徑。css
Web Browser
,中文名爲網頁瀏覽器,是一個顯示網頁服務器或者檔案系統內的HTML文件,並讓用戶與這些文件互動的軟件。Web Server
,中文名爲網頁服務器,WEB
服務器,主要是提供網上信息瀏覽服務。Web
服務器能夠解析HTTP
協議,當Web
服務器接收到一個HTTP
請求時,會返回一個HTTP
響應,客戶端就能夠從服務器上獲取網頁html
,包括css
,js
,視頻,音頻等。
web
開發主要分前端和後端兩部分。html,js,css
等。web
系統開發過程html
項目提出,需求分析,(設計,ui設計,系統設計),(開發,前端開發,後臺開發),系統測試,開發與維護。前端
XHTML
是可擴展超文本標記語言,是一種更純潔,更嚴格,更規範的html
代碼。html
文件由文件頭和文件體兩部分組成。雙標籤:由「開始標籤」和「結束標籤」兩部分構成,必須成對使用,且必須合理嵌套。單標籤:在開始標籤中進行關閉(以開始標籤的結束而結束)。java
在HTML
中,規定了8個全局標準屬性。web
class
用於定義元素的類名。id
用於指定元素的惟一id
。style
用於指定元素的行內樣式。title
用於指定元素的額外信息。accesskey
用於指定激活某個元素的快捷鍵。支持accesskey
屬性的元素有<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>
。
tabindex
用於指定元素在tab
鍵下的次序。支持tabindex
屬性的元素有<a>,<area>,<button>,<input>,<object>,<select>,<textarea>
dir
用於指定元素中內容的文本方向。dir
的屬性值只有ltr
和rtl
兩種,分別是left to right
和right to left
。
lang
用於指定元素內容的語言。Window
窗口事件onload
,在頁面加載結束後觸發。onunload
,在用戶從頁面離開時觸發,如單擊跳轉,頁面重載,關閉瀏覽器窗口等。Form
表單事件onblur
,當元素失去焦點時觸發。onchange
,在元素的元素值被改變時觸發。onfocus
,在元素得到焦點時觸發。onreset
,當表單中的重載按鈕被點擊時觸發。onselect
,在元素中文本被選中後觸發。onsubmit
,在提交表單時觸發。Keyboard
鍵盤事件onkeydown
,在用戶按下按鍵時觸發。onkeypress
,在用戶按下按鍵後,按着按鍵時觸發。該屬性不會對全部按鍵生效,不生效按鍵如:alt
,ctrl
,shift
,esc
。
onkeyup
,當用戶釋放按鍵時觸發。Mouse
鼠標事件onclick
,當在元素上單擊鼠標時觸發。ondblclick
,當在元素上雙擊鼠標時觸發。onmousedown
,當在元素上按下鼠標按鈕時觸發。onmousemove
,事件會在鼠標指針移動時發生。onmouseout
,當鼠標指針移出元素時觸發。onmouseover
,事件會在鼠標指針移動到指定的元素上時發生。onmouseup
,當在元素上釋放鼠標按鈕時觸發。onabort
,當退出媒體播放器時觸發。onwaiting
,當媒體已中止播放但打算繼續播放時觸發。一個HTML文檔包含的標籤
<!DOCTYPE>
,聲明文檔類型。<html>
,HTML元素真正的根元素。<head>
,定義html
文檔的文檔頭。head中包含的元素 title,定義HTML文檔的標題 base,爲頁面上的全部連接規定默認地址或者默認目標 link,用於定義文檔與外部資源之間的關係 meta,提供關於HTML的元數據 style,用於爲HTML文檔定義樣式信息 script,用於定義客戶端腳本 複製代碼
body
,定義html
文檔的文檔體。content-Type
,用於設定網頁的字符集,便於瀏覽器解析與渲染頁面。代碼:數據庫
<meta http-equiv="content-Type` content="text/html"; charset=utf-8"> 複製代碼
cache-control
,用於告訴瀏覽器如何緩存某個響應及緩存多長時間。參數:後端
no-cache,發送請求,與服務器確認該資源是否被更改,若是沒有,則使用緩存 no-store,容許緩存,每次都要去服務器上下載完整的響應 public,緩存全部響應 private,只爲單個用戶緩存 max-age,表示當前請求開始,相應響應在多久內能被緩存和重用,不去服務器從新請求,max-age=60表示響應能夠再緩存和重用60秒 <meta http-equiv=cache-control" content="no-cache"> 複製代碼
expires
,用於設定網頁的到期時間,過時後從新到服務器上從新傳輸。refresh
,網頁將在設定的時間內,自動刷新並轉向設定的網址Set-Cookie
,用於設置網頁過時。<span>,<div>
,<span>
是內聯標籤,用在一行文本中,<div>
是塊級標籤。DIV+CSS
div
用於存放須要顯示的數據,css
用於指定如何顯示數據樣式,作到結構與樣式相互分離。瀏覽器
查看div+css樣式HTML:點擊下方連接跳轉,可查看源碼:緩存
<b>
,定義粗體文本<big>
,定義大號字<em>
,定義着重文字<i>
,定義斜體字<small>
,定義小號字<strong>
,定義加劇語氣<sub>
,定義下標字<sup>
,定義上標字<ins>
,定義插入字<del>
,定義刪除字<code>
,定義計算機代碼<kbd>
,定義鍵盤輸出樣式<samp>
,定義計算機代碼樣本<tt>
,定義打字機輸入樣式<pre>
,定義預格式文本<abbr>
,定義縮寫<acronym>
,定義首字母縮寫<address>
,定義地址<bdo>
,定義文字方向<blockquote>
定義長的引用<q>
,定義短的引用語<cite>
,定義引用,引證<dfn>
,定義一個概念,項目<img src="圖片的url" alt = "圖像的替代文本"> 複製代碼
<a>
標籤的target
屬性,默認值爲_self
。值
說明
_self
在超連接所在框架或窗口中打開目標頁面
_blank
在新瀏覽器窗口中打開目標頁面
_parent
將目標頁面載入含有該連接框架的父框架集或父窗口中
_top
在當前的整個瀏覽器窗口中打開目標頁面,所以會刪除全部框架
<a></a>
標籤之間的元素內容爲文本內容。#+對應的錨點
,錨點一般用惟一屬性值id
設定。圖像熱區連接,是什麼呢?當你在看一些購物網頁的時候,一張圖片上,能夠在不一樣的地方連接到不一樣的目標位置,點擊不一樣的地方能夠跳轉到不一樣的網頁,這也是作商城項目通常要用到的技術。
這個時候不是<a>
標籤元素了,而是<area>
元素。
<area>
元素的屬性有兩個shape
,cords
屬性。
shape
屬性
說明
cords
屬性
說明
circle
圓形
x,y,r
(x,y)爲圓心座標,r爲半徑
rect
矩形
x1,y1; x2,y2
(x1,y1)爲左上角座標,(x2,y2)爲右下角座標
poly
多邊形
x1,y1;x2,y2;x3,y3;...
分別是各個點的點座標
<area>
的座標系,原點爲圖片的左上角,x軸正方向向右,y軸正方向向下
我畫個圖哈,反映<area>
的座標系:
圖像熱區連接的使用,<map>
標籤訂義一個image-map
,能夠含一個以上的熱區<area>
,每一個熱區都有獨立的連接。
要爲<map>
標籤賦予name
屬性。
將<img>
標籤的usemap
屬性與<map>
標籤的name
屬性相關聯。
爲了證實我學會了,我寫一個html頁面。
map -> name="image_link" img -> usemap="#image_link" 複製代碼
點擊跳轉:imgmap.html
e-mail連接主要是看到有不少官方網頁須要作的一個打開一封新的電子郵件。
點擊下方連接便可看到效果:
代碼:
<a href="mailto:xxxxxx@qq.com">聯繫咱們</a> 複製代碼
點擊JavaScript連接:
點擊彈窗
代碼:
<a href="javascript:alert('哈哈,你點擊了!');">點擊彈窗</a> 複製代碼
空連接的代碼:
javascript: void(0) <a href=""></a> <a href="#"></a> <a href="javascript:void(0)"></a> 複製代碼
整合列表html網頁,點擊跳轉:ul-ol.html
<ul>
定義無序列表,<li>
定義列表項。<ul>
的type
屬性值:disc
點,square
方塊,circle
圓,none
無.
<ol>
定義有序列表,<li>
定義列表項。<ol>
的type
屬性值:數字,大寫字母,大寫羅馬數字,小寫字母,小寫羅馬數字。
start
屬性定義序號的開始位置。
<dl>
,定義列表內部能夠有多個列表項標題,每一個列表項標題用<dt>
標籤訂義,列表項標題內部又能夠有多個列表項描述,用<dd>
標籤訂義。