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