2018-6-7 seo達人
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
一、WEB概述 (!!掌握web發(fā)展過程圖、B/S和C/S架構(gòu)的特點)
B/S: Browser-Server 瀏覽器服務(wù)器模型 WEBQQ 網(wǎng)頁游戲
優(yōu)點: 不需要下載客戶端程序, 使用瀏覽器可以直接訪問. 程序的升級操作是在服務(wù)器端進行的. 瀏覽器只需要刷新頁面就可以看到升級后的效果
缺點: 瀏覽器具有一定的局限性, 頁面的展示能力仍然是很差. 所有的頁面數(shù)據(jù)都需要從服務(wù)器實時的獲取, 所以對網(wǎng)速的依賴很高
C/S: Client-Server 客戶端服務(wù)器模型 QQ LOL
優(yōu)點: 客戶端可以任意的設(shè)計, 頁面的展示能力就可以很強. 由于大量的資源都已經(jīng)保存在了客戶端, 和服務(wù)器交互的僅僅是一些變化的數(shù)據(jù), 所以對網(wǎng)速的依賴很低
缺點: 第一次使用時需要下載客戶端程序, 一旦程序需要升級操作, 所有的客戶端程序都需要升級. 在有些場景中是不能被接受的.
二、HTML
1.HTML是什么
超文本標(biāo)記語言 最基礎(chǔ)的網(wǎng)頁語言 W3C
HTML不是一門編程語言 而是一門標(biāo)記語言
HTML是用標(biāo)記(標(biāo)簽/元素)來描述網(wǎng)頁內(nèi)容的
HTML是文檔的一種
2.html的結(jié)構(gòu) (掌握)
<!DOCTYPE HTML>
<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>
<!DOCTYPE HTML>用來指定當(dāng)前頁面所遵循的html的版本
頭部分用來存放html頁面的基本屬性信息 優(yōu)先被加載
體部分用來存放頁面數(shù)據(jù),是可見的頁面內(nèi)容
<title></title>指定網(wǎng)頁的標(biāo)題
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />其中的charset的值用來指定瀏覽器用什么編碼解析當(dāng)前頁面
3.html語法 (掌握)
html標(biāo)簽分為開始標(biāo)簽和結(jié)束標(biāo)簽,如果標(biāo)簽內(nèi)沒有修飾的內(nèi)容, 開始標(biāo)簽和結(jié)束標(biāo)簽可以合并為一個自閉標(biāo)簽
如: <br/> <hr/>
標(biāo)簽通常都可以具有屬性 屬性與屬性值用"="連接,屬性的值可以用雙引號、單引號引起來或者不用引號 一般會用雙引號引起來
<!-- html的注釋 -->
html中多個連續(xù)的空白字符(制表符,空格,換行)默認(rèn)會合并為一個空格來顯示
如果非要輸入空格,可以用轉(zhuǎn)義字符來替代
如果非要輸入換行,可以用 <br/> 來替代
4.font標(biāo)簽 -- 用來指定文本的字體/大小/顏色 (了解)
size:指定字體大小 范圍是 1~7 默認(rèn)值為3
color:指定字體顏色
值可以指定為顏色名 如red
或 十六進制的顏色值 如#000000
或 rgb三原色值 如rgb(255,255,255)
face:指定字體 中文默認(rèn)是宋體
5.標(biāo)題標(biāo)簽 -- 指定特定樣式字體的一組標(biāo)簽 (掌握)
<h1>一級標(biāo)簽</h1>
<h2>二級標(biāo)簽</h2>
<h3>三級標(biāo)簽</h3>
<h4>四級標(biāo)簽</h4>
<h5>五級標(biāo)簽</h5>
<h6>六級標(biāo)簽</h6>
屬性:
align:指定文本的排列
left
center
right
justify
6.轉(zhuǎn)義字符 (掌握)
< <
> >
" "
' '
空格
7.列表標(biāo)簽
(1)定義列表 (了解)
<dl> 定義一個定義列表
<dt> 定義定義列表中的標(biāo)題
<dd> 定義定義列表中的項
(2)有序列表 (了解)
<ol> 定義一個有序列表
<li> 定義列表中的項
屬性:
type:定義項目符號的類型
A a I i 1(默認(rèn))
start:定義項目符號的起始值
(3)無序列表 (掌握)
<ul> 定義一個無序列表
<li> 定義列表中的項
屬性:
type:定義項目符號的類型
disc square circle
8.img標(biāo)簽 -- 圖像標(biāo)簽 (!!掌握)
<img src="圖片的路徑" alt="圖像的替代文本"/>
必選屬性:
src:圖片的路徑
alt:圖像的替代文本
可選屬性:
width:寬度 px %
height:高度 px %
border:邊框的寬度 px
9.map標(biāo)簽 (了解)
為圖像綁定可點擊區(qū)域的圖像映射
<map name="" id="">
<area shape="circle" coords="640,410,64" href="#" />
</map>
屬性:
shape: 指定區(qū)域的形狀
coords: 指定區(qū)域的坐標(biāo)
href: 點擊區(qū)域后跳轉(zhuǎn)資源的URL
10.超鏈接 -- <a> 錨 (!!掌握)
用于指向當(dāng)前位置以外的資源
(1) 用于創(chuàng)建指向另外一個文檔的超鏈接
(2) 用于在當(dāng)前頁面的不同位置之間進行跳轉(zhuǎn)
重要屬性:
href: 所指向資源的URL
name: 指定錨的名字
target: 指定瀏覽器打開目標(biāo)URL的方式。
_blank 在新窗口中打開目標(biāo)url
_self 在當(dāng)前窗口中打開目標(biāo)url
11.表格標(biāo)簽 -- <table> (!!!掌握)
<table> 定義一個HTML表格
<tr> 定義表格中的行
<td> 定義表格中的單元格
<th> 定義表格中的表頭
table的重要屬性:
border 邊框?qū)挾?/span>
cellspacing 單元格之間的空白
cellpadding 邊框與單元格內(nèi)容之間的距離
bgcolor 背景顏色
bordercolor 邊框顏色
width 寬度
align 對齊方式
tr重要屬性:
align 對齊方式
bgcolor 背景顏色
th/td重要屬性:
align 對齊方式
bgcolor 背景顏色
width 寬度
height 高度
colspan 可橫跨的列數(shù)
rowspan 可豎跨的行數(shù)
<caption> 定義表格的標(biāo)題
<thead>
<tfoot>
<tbody>(可以出現(xiàn)多次).
三個標(biāo)簽要么都沒有,要么就必須一起使用,并且出現(xiàn)的順序必須是thead,tfoot,tbody
如果沒有使用這三個標(biāo)簽, 那么<table>里面所有的內(nèi)容都會隱含在一個隱藏的<tbody>標(biāo)簽內(nèi)
12.框架標(biāo)簽 (了解)
<frameset>
<frame>
框架標(biāo)簽需要寫在head和body的中間
<frameset>屬性:
rows 定義框架集中行的數(shù)目和尺寸
cols 定義框架集中列的數(shù)目和尺寸
<frame>屬性:
src 定義目標(biāo)文檔的URL
noresize 規(guī)定無法調(diào)整框架的大小
frameborder 是否顯示框架周圍的邊框
name 框架的名字
target 打開目標(biāo)URL的方式
_blank 在新窗口中打開目標(biāo)url
_self 在當(dāng)前窗口打開目標(biāo)URL
_parent 在父窗口中打開目標(biāo)URL
_top 打開時忽略所有框架在當(dāng)前頁面打開url
framename
<iframe>
創(chuàng)建包含另一個文檔的行內(nèi)框架
<iframe>標(biāo)簽永遠(yuǎn)不要自閉!! 可以在標(biāo)簽內(nèi)部存放提示文本 如果瀏覽器不支持iframe 該文本會顯示
屬性:
src
width
height
13.表單 (!!!掌握)
(1)瀏覽器向服務(wù)器發(fā)送數(shù)據(jù)的方式, 有兩種
a)利用超鏈接向服務(wù)器發(fā)送數(shù)據(jù) -- 請求參數(shù)
在超鏈接的后面拼接上要發(fā)送的請求參數(shù), 鏈接和請求參數(shù)之間用?分割, 參數(shù)名和參數(shù)值用 = 連接, 多個參數(shù)之間用 & 分割, 可以存在多個同名的參數(shù)
b)利用表單向服務(wù)器發(fā)送數(shù)據(jù)
利用HTML中的<form>標(biāo)簽以及一些表單項標(biāo)簽, 用戶可以輸入數(shù)據(jù), 通過提交表單發(fā)送數(shù)據(jù)給服務(wù)器
(2)form
必須存在的屬性:
action: 指定表單發(fā)送的目標(biāo)URL地址
可選的屬性:
method: 指定以何種方式發(fā)送表單
http協(xié)議指定了7種提交方式, 其中5種不用, 只用GET提交和POST提交
只有使用表單并且明確的指定提交方式為post時(也就是設(shè)置method="POST")才是POST提交，其他提交都是GET提交．
GET提交和POST提交的區(qū)別：
主要區(qū)別體現(xiàn)在數(shù)據(jù)傳輸方式的不相同
a)GET提交: 請求參數(shù)會賦在地址欄后進行傳輸
這種方式發(fā)送的數(shù)據(jù)量有限, 最大不超過1kb(4kb)
數(shù)據(jù)顯示在地址欄, 安全性差
b)POST提交: 請求參數(shù)在底層流中傳輸
這種方式發(fā)送的數(shù)據(jù)量無限制
地址欄上看不到數(shù)據(jù), 比較安全
14.表單中的項 (!!!掌握)
表單中可以有多個輸入項，輸入項必須有name屬性才可以被提交，如果輸入項沒有name屬性，則表單在提交時會忽略它
(1)<input> 輸入框
重要屬性:
type屬性
文本框 text 輸入的文本信息直接顯示在框中
密碼框 password 輸入的文本以圓點或者星號的形式顯示
單選框 radio 進行單項的選擇 如性別選擇 多個radio的name屬性相同會被當(dāng)作一組來使用 必須用value為選項指定提交的值
復(fù)選框 checkbox 進行多項選擇，愛好的選擇。 多個checkbox具有相同的name屬性時會被當(dāng)作一組來使用 必須用value為選項指定提交的值
隱藏字段 hidden 如果有一些信息，不希望用戶看見，又希望表單能夠提交，就可以用隱藏字段隱含在表單中
提交按鈕 submit 實現(xiàn)表單提交操作的按鈕 可以通過value屬性指定按鈕顯示的文字
重置按鈕 reset 重置表單到初始狀態(tài)
按鈕 button 普通按鈕, 沒有任何功能 需要配合JavaScript為按鈕指定具體的行為。可以用value屬性指定按鈕顯示的文字。
文件上傳項 file 提供選擇文件進行上傳的功能。
圖像 image 利用一張圖片替代提交按鈕的功能, 不常用
name屬性
表單中可以有多個輸入項，輸入項必須有name屬性才可以被提交，如果輸入項沒有name屬性，則表單在提交時會忽略它. 另外name屬性的值是可以重復(fù)的
value屬性 可以給input輸入框設(shè)置一個初始值
readonly屬性
使當(dāng)前輸入項變?yōu)橹蛔x,不能修改,但是提交時仍會被提交
disabled
使當(dāng)前輸入項不可用,不能修改值,也不會被提交
size屬性
指定當(dāng)前輸入框的寬度
checked屬性
指定單選框/復(fù)選框被選中
(2)<textarea> 文本域
屬性:
rows 指定文本域的行數(shù)(高度)
cols 指定文本域的列數(shù)(寬度)
readonly 只讀
disabled 禁用
(3)<select> <option>
select 提供下拉選擇功能
option 下拉選框中的選項 可以用value屬性指定提交的值,如果不指定,將會提交標(biāo)簽內(nèi)的文本
重要屬性:
name: 下拉列表的名稱
size: 設(shè)置下拉選項中可見選項的個數(shù)
disabled 禁用下拉選框
multiple 是否支持多選
(4)<fieldset><legend> (了解 可以不練習(xí))
<fieldset> 對表單中的表單項進行分組
<legend> 為分組設(shè)置標(biāo)題
15.其他標(biāo)簽 (了解 可以不練習(xí))
<marquee>
屬性:
scrollAmount 設(shè)置文字滾動速度 默認(rèn)值是6
direction 滾動方向 left right down up
behavior 滾動行為 scroll alternate slide
<pre>
可以將文本內(nèi)容按照代碼區(qū)的樣子顯示在頁面上
<b> 加粗
<i> 斜體
<u> 下劃線
<s> 刪除線
<em> 強調(diào)
<strong> 更加強烈的強調(diào)
<sub> 下標(biāo)
<sup> 上標(biāo)
16.注冊表單練習(xí) (!!!掌握 自己能夠獨立的做出來)
略
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.teruid.com