DIV CSS學習筆記 上

第一部分 HTML

第一章 職業規劃和前景

職業方向規劃定位：

web

前端開發工程師

web

網站架構師

自己創業

轉崗管理或其他

web

前端開發的前景展望：

未來

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六 學完有工作推薦

IT

行業企業需求最多的人才

結合最新的

html5

搶佔移動端的市場

自己創業做老闆

隨著互聯網的普及

web

開發成為企業的寵兒和核心

web

職業發展目標：

起步階段：

提升階段：

成型階段：

基本知識的掌握

常用工具的掌握

溝通技巧的掌握（圍繞客戶的需求）

良好的開發習慣（加註釋、對齊方式）

熟悉掌握

HTML

基本標籤和屬性

熟練掌握

css

的基本語法和使用

瀏覽器兼容和w3c標準的掌握

結合

html

+

css

+

js

開始系統項目的開發

精通

DIV

+

CCS

布局

精通

css

樣式表控制

html

標籤

熟悉運用

js

製作動態網站的效果

能獨立開發完成網站

負責內容的

HTML

負責外觀的

css

（層疊樣式表）

負責行為的

js

ps

切圖

第一、梳理知識架構

第二、分解目標（起步階段、提升階段、成型階段）

第二章 html基本結構

認識HTML：

html

不是一種編程語言，是一種標誌語言

標記語言是由一套標識標籤組成的

html

使用標籤來描述網頁

html

結構：

不成對出現的標籤

HTML 基本標籤的講解：

用於強調文本，強度更深，表示重要文本--->用於

SEO

優化

只是視覺加粗效果--->單純為了產生加粗

標籤

----

僅僅用於標題文本，不要為了產生粗體文本使用它們

標籤 段落標籤

標籤

都會讓文字產生加粗效果

標籤

em

用於強調文本

i

只是視覺斜體效果

比

強調更強

特殊符號：

&nbsp

; ---->空格

&gt

; --->大於號

&lt

；--->小於號

&quot

；--->引號

&copy

;-->版權號

第三章 html基本標籤

HTMl

基本標籤：

可以創建一個內容滾動效果

錨點也是一種超鏈接，是頁面內進行跳轉的超鏈接

第一步：創建錨點

第二步：使用創建好的錨點名稱

內容

target

屬性：

_self

(在原來頁面打開)

_blank

（新窗口打開）

_top

（打開時忽略所有的框架）

_parent

（在父窗口中打開）

文字的格式按源碼的排版來顯示，我們稱之為預處理格式

對被用來組合文檔中的行內元素

注意：span沒有固定的格式表現，當對它應用樣式時，才會產生視覺上的變化

span

標籤

標籤

標籤--->他有一個必不可少的屬性 href

創建錨點和錨鏈接

marquee

標籤

direction

表示滾動方向，取值有（left,right,up,down,默認left）

loop

表示滾動循環的次數，默認為無限循環

onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滾動速度)

表示當滑鼠移上區域的時候停止滾動，滑鼠移開繼續滾動

第四章 img圖片標籤與路徑

圖片標籤與路徑：

常見圖片格式

jpg

png

gif

Gif

（只支持全透明）

Jpeg

/

jpg

Png

半/全透明都支持

圖片標籤寫法 ：

圖片四要素：

src=""

圖片路徑

alt=""

圖片含義

width=""

圖片寬度 和圖片大小保持一致

height=""

圖片高度 和圖片大小保持一致

title=""

路徑知識：

相對路徑：(Relative Path) 相對於該文件的路徑；

絕對路徑：(Absolute Path) 從磁碟出發的路徑；

相對路徑、絕對路徑：

align

屬性--設置圖片與後面文字的位置關係

值--

top

、

bottom

、

middle

、

absmiddle

、

left

、

right

在靜態頁面中：

/

開頭表示根目錄；

./

表示當前目錄；（斜畫線前面一個點）

../

上級目錄；（斜畫線前面兩個點）

直接用文件名不帶/也表示同一目錄

這些都是相對於當前文件的位置來說的，如果用絕對路徑的話就是寫全了。

第五章 三種列表的講解

三種列表的知識講解：

無序列表是一個沒有順序項目的列表，此列表項默認粗體圓點進行標識

無序列表

有序列表

有序列表也是一列項目，只是列表項目使用的是數字進行標記。 有序列表始於

標籤。每個列表項始於

標籤。

內容一

內容二

內容三

列表符號

type="A"

A B C D

type="a"

a b c d

type="1"

1 2 3 4 默認值type="I" I II III type="i" i ii iii

type="circle"

空心圓

type=「disc」

實心圓 默認值

type="square"

方塊符

無序列表-列表符號:

有序列表-列表符號

列表嵌套

無序列表-嵌套

柚子

沙田柚

蜜柚

荔枝

蘋果

有序列表-嵌套

茶

紅茶

綠茶

果汁

牛奶

定義列表

定義列表不僅僅是一列項目，而是項目及其注釋的組合。定義列表以

標籤開始。每個定義列表項以

開始。每個自定義列表項的定義以

開始。

pc網頁製作

學習DIV+CSS JS JQ 項目實戰

手機網頁製作

手機網頁製作實戰

dd

是對

dt

的解釋

用來創建一個普通的列表,

用來創建列表中的上層項目，

用來創建列表中最下層項目，

和

都必須放在

標誌對之間。

中國城市

北京

上海

廣州

美國城市

華盛頓

芝加哥

紐約

dl

是d

efinition list

的縮寫

dt

是

definition title

的縮寫

dd

是d

efinition description

的縮寫

list-style

屬性具有三個屬性分量：

list-style-position

：設置列表項圖標的位置，位於文本內或者文本外

list-style-type

： 設置列表項圖標的類型

list-style-image

：使用圖像設置列表項圖標

第六章 表單元素(上)

表單標籤:

表單是一個包含表單元素的區域，包括起來的都是表單的內容

表單標籤

HTML標籤 -

Action

和確認按鈕：

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

username:

HTML

標籤 - 隱藏域隱藏標籤：

隱藏域在頁面中對於用戶是不可見的，在表單中插入隱藏域的目的在於收集或發送信息，以利於被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一起發送到伺服器

標籤的掌握

type="text"

單行文本輸入框

type="password"

密碼（

maxlength=""

）

type="radio"

單項選擇（

checked="checked"

）

type="checkbox"

多項選擇

type="button"

按鈕

type="submit"

提交

type="image"

圖片提交

type="file"

上傳文件

type="reset"

重置

type="hidden"

隱藏

常用

type

類型：

關於表單中的設置默認值：

textarea

沒有默認值

標籤的使用

label

元素不會向用戶呈現任何特殊效果。

不過，它為滑鼠用戶改進了可用性。

如果您在

label

元素內點擊文本，就會觸發此控制項。

就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上。

標籤的

for

屬性應當與相關元素的

id

屬性相同。

例子：（重要---註冊表單--用戶體驗--必做）

單向選擇

男：女：

第七章 表單和表格(下)

表單和表格標籤：

文本域標籤

標籤：

是文本域標籤，可以在其中插入一段文字內容，它有兩個常用屬性

rows

和

cols

注意：

rows

表示這個文本域有多少行

cols

表示這個文本域有多少列

除了這兩個屬性它還有

readonly

（只讀，文本域的內容無法改變，相當於協議）和

title

（滑鼠放上提示）

標籤的掌握

註：當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，並且在將

表單數據提交給伺服器時包括

name

屬性

1月

2月

常用到的屬性：

disabled=「disabled」 name="sel" size="2"

表格標籤

表格標籤：

是表格標籤，可以用它定義一個表格。

注意：

的

border

屬性不能少

標籤的使用

可以定義表格中的一行，一個

表示一行。

行標籤：

單元格標籤:

可以定義表格中的一個單元格，

表示一個單元格。

border-collapse

屬性設置是否將表格邊框摺疊為單一邊框：

border-collapse:collapse

;

colspan

左右合併

rowspan

上下合併

第一部分總結：

非可視化標籤：

head

meta

style

scrpit.

..

可視化標籤：

img

div

span

a

ul

li

...

只有可視化標籤，才能用

css

改變它

單標籤：

meta

link

base

img

input

br

hr

雙標籤：

html

head

body

div

a

p

span

..

ul

li

ol

dl

....

常用可視化標籤

慢慢已經被淘汰了 被ul li代替

如果是合併豎排的就是合併行（

rowspan

）

如果是合併橫排的就是合併列（

colspan

）

列表

結論：只要將來設計頁面中有固定樣式的列表，就用ul和li

src

*屬性用來設置圖片的url數據

alt

提供給搜索引擎搜索的

width

height

結論 ：顯示圖片

href

*屬性：設置跳轉的網頁地址

target

屬性：設置跳轉的目標

結論：凡事頁面可以點擊跳轉或者表單提交的文字，都用

a

標籤

一般用它來布局

div

a 超鏈接標籤

img

ul li

table

caption

tr

td (th)

HTML部分導圖總結

HTML5標籤集合

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六 學完有工作推薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！