1、Web基礎知識(了解)
1、Web 與 Internet
1.1 Internet
網際網路、網絡、網際網路 ...
服務：
Telnet，Email，WWW，BBS，FTP
資源共享
基本實作技術：
1、分組交換原理
2、TCP/IP協定簇
1.2 WEB與Internet
1、WEB
是一種應用在Internet上的一種流行的應用程式-網頁應用程式
www(World Wide Web)
W3C-World Wide Web Consortium(網際網路聯盟)
功能：将資訊和服務連接配接
服務：Telnet,Email,BBS
資訊：文字，圖檔，音頻，視訊
2、WEB的工作原理
1、基于 浏覽器/伺服器 模式(B/S)
1、B/S
B : Browser 浏覽器
S : Server 伺服器
通過 浏覽器 來通路 伺服器資訊的一種方式-WEB
2、C/S
C : Client 用戶端
S : Server 伺服器
通過 指定的用戶端 來通路 伺服器資訊的一種方式
2、組成
由 WEB伺服器、浏覽器、通信協定 組成
WEB伺服器：配置高的電腦
浏覽器：用戶端工具
通信協定：http(Hyper Text Transfer Protocol)-超文本傳輸協定
3、WEB的相關技術
1、WEB伺服器
1、功能
存儲WEB上的内容資訊，并且提供管理環境
響應浏覽器的請求，執行伺服器端程式
安全性功能
2、産品
TOMCAT
IIS
APACHE(php)
...
3、技術
php
jsp(Java Server Page)
asp
asp.net
2、WEB浏覽器
1、功能
1、代理使用者送出請求
(User Agent --> UA)
2、作為HTML解釋器和内嵌腳本的執行器
3、用圖形化的方式顯示HTML文檔
2、産品
1、IE -> Microsoft Internet Explor
2、Firefox -> Mozilla Firefox
3、Safari -> Apple
4、Chrome -> Google
5、Opera -> 歐鵬
3、技術
1、HTML
2、CSS
3、Javascript
2、HTML快速入門(重點)
1、HTML概述
1、什麼是HTML
HTML : Hyper Text Markup Language 超文本标記語言
超文本：超級文本
a : 第一個字元
超文本a : 超連結
标記：<a>
語言：表現形式，文法規範
HTML用來設計網頁的語言
由HTML所編寫的檔案，以.html或.htm作為字尾
2、HTML基礎文法
1、标記文法
1、什麼是标記
HTML中用于描述功能的符号稱之為"标記"
ex:
<p></p> - 段落
<a></a> - 超連結
... ...
2、文法
标記在使用時必須用尖括号<>括起來
分類：
1、封閉類型标記
也叫作 雙标記，必須成對出現
文法
<标記></标記>
<p></p>
<a></a>
<div></div>
2、非封閉類型标記
也叫作 空标記或單标記
文法
<标記>或<标記/>
ex:
<img> - 圖像
<br> - 換行
<hr> - 水準線
2、元素
也稱之為 标記
标記：實際上是文法規範
元素：強調的是标記中的内容
<div>這是一個div</div>
3、元素嵌套
元素之間可以實作嵌套，進而表現出更為複雜的頁面結構
<div><p>這是一個被嵌套的段落</p></div>
注意：
1、嵌套位置和順序
<div><p></div></p>
2、被嵌套的内容要通過"代碼縮進"來表示層級結構
<div><p>這是一個p</p></div>
<div>
<p>這是一個p</p>
</div>
<div>
<p>這是一個p</p>
</div>
4、屬性 和 值
1、作用
修飾元素
2、文法
1、屬性的聲明必須位于開始标記中
2、一個元素可以有多個屬性，多個屬性之間用空格隔開，并且排名不分先後
3、每個屬性都可以有值，值和屬性之間用 = 連接配接。值最好要放在引号中('' 或 "")
ex :
align 屬性 ：控制文本的水準對齊方式，
取值：
1、left ：左對齊
2、center ：居中對齊
3、right：右對齊
問題：控制 一個p标記的文本，是水準居中對齊
<p align='center'>This is a p</p>
在以上的基礎上，設定 p元素的id屬性值為 p1
<p align='center' id="p1">This is a p</p>
3、标準屬性
所有的元素都具備的屬性，稱之為标準屬性或通用屬性
id:定義元素在網頁中獨一無二的辨別
title:滑鼠移入到元素上的時候，所彈出的文字
class:定義元素所引用的類選擇器(CSS中使用)
style:定義元素的内聯樣式(CSS中使用)
5、注釋
1、什麼是注釋
允許出現在網頁源碼中，但是不會被浏覽器所解釋的文本，稱之為注釋。
通常情況下，會将 對代碼的解釋文本放在注釋中，以便讓其他的開發者去看。
2、注釋的文法
<!-- 注釋内容 -->
注意：
1、注釋不能嵌套
<!--
<!-- -->
-->
2、注釋不能出現在<>中
<p <!-- align="center" -->></p>
以上寫法是錯誤的。
6、HTML 和 XHTML
1999年12月24日 W3C推出HTML4.01标準規範
2000年1月26日 W3C推出XHTML1.0标準規範
XHTML1.0 版本 以 HTML4.01幾乎相同，但是它是更嚴格更純淨的HTML版本
比如：
1、要求标記必須要關閉
<p></p>
<br/>
2、要求屬性值必須用引号引起來
<p align=center></p>(html4.01和html5中都可以)
7、HTML5(H5)
h5的目标，為了實作更加簡潔的HTML代碼
1、空标記有無結束均可
<br>
<br/>
2、屬性值可以被引号括起來
<p align="center"></p>
<p align='center'></p>
<p align=center></p>
3、有些屬性可以不給值
<input readonly="readonly">(h5之前的寫法)
<input readlony>(h5寫法)
3、文檔結構
1、HTML文檔結構
由兩大部分組成
1、文檔類型聲明
用于指定網頁的版本和風格
2、html頁面
要顯示在頁面給别人去看的内容
2、文檔類型聲明
<!doctype html>
該段代碼要出現在網頁的最頂端
3、HTML頁面
1、由一對 html 元素表示，位于 文檔類型聲明之後
2、在 <html>元素中，包含兩個直接子元素
1、<head></head>
網頁頭部
作用：定義頁面全局資訊
包含：
<title></title> 定義網頁标題
<script></script> 定義或引入JS檔案/代碼
<style></style> 定義内部樣式表
<link/>:引入外部樣式表檔案
<meta/>:定義網頁中繼資料
比如：
1、編碼格式
設定網頁編碼格式為utf-8
<meta charset="utf-8">
2、網頁關鍵字
3、描述
2、<body></body>
網頁主體，所有顯示給使用者去看的東西都寫在body中
屬性：
1、text
取值：顔色
作用：控制整個頁面中所有文本的顔色
2、bgcolor
作用：設定頁面的背景顔色
取值：顔色
3、文本(重點)
1、文本标記的作用
會讓文本有不同的顯示方式
2、特殊字元表示方式
文檔中的 空格和回車 最終隻會被解釋成為一個空格
如果想表示特殊的字元效果，如 空格，<,>, ... 需要進行轉義
1、< --> less than
表示 <
2、> --> greater than
表示 >
3、
空格
4、©
©
5、¥
￥
3、文本标記
1、文本樣式
1、作用
對文本進行修飾，比如加粗，斜體，線條樣式等...
2、标記
1、<b></b>
加粗
2、<i></i>
斜體
3、<u></u>
下劃線
4、<s></s>
删除線
5、<sup></sup>
上标
6、<sub></sub>
下标
2、标題元素
1、作用
以醒目(改變字型大小、加粗方式、垂直空白)的方式顯示文本
2、文法
<h#></h#>
#:1~6
一級标題(<h1></h1>)字最大
...
六級标題(<h6></h6>)字最小
3、屬性
align ：文本的水準對齊方式
取值：
1、left
2、center
3、right
3、段落元素
1、作用
以特殊的方式來顯示文本即段落的上和下都有垂直的空白
2、文法
<p></p>
3、屬性
algin
4、換行元素
文法：
<br>或<br/>
5、塊分區元素
分區：可以對元素進行分組，多數用于頁面布局上
文法：<div></div>
作用：獨占一行，做布局!!!
6、行内分區元素
文法：<span></span>
作用：包裹文本，靈活的設定文本的樣式
7、分割線元素
1、作用
在網頁中顯示一條水準線
2、文法
<hr>或<hr/>
3、屬性
1、size
尺寸，相當于設定 水準線的 高度
取值 以 px 為機關的數值，px可以省略
2、width
寬度，以px為機關的數值，px可以省略
3、color
顔色
4、align
水準線自己的水準對齊方式
8、預格式化
1、作用
保留源文檔中的格式，即保留原來的換行和文本中的空格
2、文法
<pre>内容</pre>
9、元素分類
1、行内元素
不會換行，可以和其他的行内元素位于同一行
使用場合：包裹文本，去設定文本的顯示效果
display:inline
注意：所有的行内元素都不具備 align屬性
2、塊級元素
預設的情況下，每個元素獨占一行，适用場合，多數都會用于 布局上
display:block;
ex:
<div></div>
<p></p>
<h1>~<h6>
注意：
1、不要讓行内元素嵌套塊級元素
<span>
<div></div>
</span>
錯誤的。
2、p标記
p标記是不能嵌套塊級元素
<p>
<p></p>
</p>
4、圖像和連結
1、URL
1、目錄結構
目錄：檔案夾名稱，儲存網頁内容的檔案夾
2、URL
URL(Uniform Resource Locator)統一資源定位器,俗稱 路徑,用來表示 網絡資源的位址
資源：圖檔，音頻，視訊，檔案等...
路徑：從目前位置到目标資源位置所經過的路線。
三種表現形式:
1、絕對路徑
1、什麼是絕對路徑
從檔案最進階路徑下開始的完整路徑。
1、通路網絡資源
由 協定名稱、主機名(域名/IP位址)、目錄路徑、檔案名
ex ：擷取 百度 LOGO
協定名稱：https
主機名:www.baidu.com
目錄路徑：img
檔案名：bd_logo1.png
<img src="//www.baidu.com/img/bd_logo1.png" width="270" height="129">
2、通路本機資源
檔案所在的最進階目錄路徑：？--檔案所在的盤符
2、相對路徑
1、什麼是相對路徑
從目前檔案所在的位置處開始，去查找資源檔案所經過的路徑就是相對路徑
1、同目錄
直接通過 資源檔案名稱 進行引用即可
2、子目錄
先進入，再通過資源名稱進行引用
images/1.jpg
3、父目錄
先傳回，在通過資源檔案的名稱或路徑進行引用
傳回:../
3、根相對路徑
特點：永遠都是從網站所在的伺服器根目錄處開始查找
表現方式：/作為開始
2、圖像
1、圖像格式
1、jpeg
圖像圖像聯合專家組
.jpg 作為字尾來存儲的
2、gif
圖形接口格式
特點：支援動畫
.gif 作為字尾來存儲的
3、png
可移植網絡圖形
采用 無損壓縮，有8位，24位，32位三種形式
支援 透明色(PNG24位不支援)
.png 作為字尾存儲的
2、圖像元素
1、文法
<img>
2、屬性
1、src
要引用的圖像URL(絕對，相對，根相對)
注意：URL 要嚴格區分大小寫,伺服器路徑 嚴格區分大小寫。本機路徑則無所謂
2、width
寬度
3、height
高度
以 px 或 % 為機關的數值，如果省略機關不寫，預設為 px
<img src="../Images/a.jpg" height="300">
注意：width 和 height 如果隻給一個屬性的話，那麼另外一個屬性會跟着等比縮放
<img width="100px" src="a.jpg">
3、連結
1、作用
連結又叫超連結，允許使用者通過點選的操作完成頁面的跳轉。
2、文法
<a>内容</a>
屬性：
1、href
連結URL，隻有設定了 href 屬性之後，才是真正的超連結。
2、target
目标，打開新頁面的方式
取值：
_blank : 在新标簽頁中打開
_self:預設值，在目前頁中打開
3、連結的表現形式
1、目标文檔為下載下傳資源
href 屬性值，指定的檔案名稱，就是下載下傳操作(rar,zip)
2、電子郵件連結
前提：計算機中必須安裝 郵件用戶端，并且配置好了 郵件資訊。
<a href="mailto:[email protected]" target="_blank" rel="external nofollow" >聯系我們</a>
3、傳回頁面頂部的空連結
<a href="#" target="_blank" rel="external nofollow" >内容</a>
4、連結到Javascript
<a href="javascript:" target="_blank" rel="external nofollow" >内容</a>
![web OS —— goowy.com[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)