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