HTML與CSS入門經(jīng)典筆記

argin和padding屬性--------用于添加元素周圍的間距（順時鐘順序，都是上右下左）

align和float屬性--------用于將元素相對其它內(nèi)容放置

text-align和vertical-align------------控制網(wǎng)頁內(nèi)容的對齊

邊距在元素之外，填充在元素之內(nèi)

1.margin 樣式單邊距此屬性是處理元素外面的間距

可以設(shè)置邊距為具體的長度（像素，點，ems）或者百分比。如是百分比，百分比是基于整個網(wǎng)頁而不是元素大小的（margin-left=25%，表示元素的左邊距將是整個頁面寬度的25%）

margin屬性包括margin-top;margin-right;margin-bottom;margin-left 分別是上,右,下,左邊框的寬度值

2.padding 填充在元素的矩形區(qū)域內(nèi)部添加空間

3.border-width 定義四個邊框的寬度：

border-width:border-top-width border-right-width border-bottom-width border-left-width; 分別是上,右,下,左邊框的寬度值

4.text-align樣式使其元素在其定界區(qū)域內(nèi)水平對齊

5.vertical-align屬性使元素在垂直對齊。指定元素如何與其父元素對齊（在有些情況下，是與網(wǎng)頁中元素的當(dāng)前行對齊）。“當(dāng)前行”指的是顯示在元素內(nèi)的元素所處的垂直位置，換句話說，就是內(nèi)聯(lián)元素。

屬性取值

top:將元素的頂部與當(dāng)前行對齊
middle:將元素的中心與當(dāng)前行對齊
bottom:將元素的底部與當(dāng)前行對齊
text-top:將元素的頂部與父元素的頂部對齊
baseline:將元素的基線與父元素的基線對齊
text-bottom:將元素的底部與父元素的底部對齊

6.float屬性使元素能在設(shè)計中到處移動，從而讓其他元素圍繞它們。元素的浮動是水平而不是垂直方向的，只有兩種可能值：right和left.使用這兩個值時，浮動元素將浮動到容器元素所允許的最右或者最左.

7.clear屬性清除浮動元素

取值：left,right,both,none ,inherit

8.盒子模型

邊距（margin）--> 邊框（border）-->填充（padding）-->內(nèi)容（content）

9.position屬性定位類型

relative:相對定位，默認(rèn)定位類型。理解為棋盤上棋子的排列：棋子從左往右排列，達(dá)到邊緣時移到下一行。棋子排列方式是由display決定。

樣式屬性display的值為block的元素自動放在下一行(默認(rèn))，而為inline的元素自動放在同一行，位于前一個元素后面

absolute:絕對定位，能夠指定元素的矩形局域相對于父元素區(qū)域的位置

屬性值：

left:左邊的位置偏移

right:右邊的位置偏移

top:頂部的位置偏移

bottom:底部的位置偏移

10.z-index屬性控制元素的堆疊順序。z-index值較大的元素在z-index值較小的元素上面

11.文本流（即內(nèi)容流）控制的樣式屬性有如下：

float: 決定文本如何沿元素繞排可設(shè)置為left或right 如將圖像的float屬性設(shè)置為left，圖像將放在文本的左邊

clear:禁止文本沿元素繞排

overflow:在元素太小而不能包含所有文本時控制文本的溢出方式，可設(shè)置為visible,hidden,scroll

行一行的吸引人

表單呀表單

W3C標(biāo)準(zhǔn)

World Wide WebConsortium(萬維網(wǎng)聯(lián)盟)

成立于1994.web技術(shù)領(lǐng)域,最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機構(gòu)

http://www.w3.org/

http://www.chinaw3c.org/

W3C標(biāo)準(zhǔn)包括

結(jié)構(gòu)化標(biāo)準(zhǔn)語言(HTML,XHTML,XML)

表現(xiàn)標(biāo)準(zhǔn)語言(CSS)

行為標(biāo)準(zhǔn)(DOM,ECMAScript)

編輯工具

>記事本

>Dreamweaver

>WebStorm (企業(yè)主流)

基本結(jié)構(gòu)

<!doctype html>

<html>

<head>

網(wǎng)頁頭部

</head>

<body>

網(wǎng)頁主體

顯示的網(wǎng)頁主題內(nèi)容

</body>

</html>

===========================================================

網(wǎng)頁的基本標(biāo)簽

>標(biāo)題標(biāo)簽

>段落標(biāo)簽

<p></p>

>換行標(biāo)簽

>水平線標(biāo)簽

<hr/>

>字體樣式標(biāo)簽

>注釋以及特殊代碼

空格 &nbsp

大于號 &gt

小于號 &lt

引號 &quot

版權(quán)符號 &copy

>圖像標(biāo)簽

常見的圖像格式:JPG GIF PNG BMP

>超鏈接標(biāo)簽

<a href="path" target="_self ^ _blank">連接文本或頭像</a>

>錨鏈接標(biāo)簽

實現(xiàn)由甲位置跳轉(zhuǎn)到乙位置

>功能性鏈接

===========================================================

行內(nèi)元素和塊元素

行內(nèi)元素排在一行

塊元素獨占一行<p></p> <h1></h1>

===========================================================

列表

>有序列表

<ul>

</ul>

>無序列表

<ul>

</ul>

>定義列表

<dl>

</dl>

===========================================================

表格

特點

簡單通用

結(jié)構(gòu)穩(wěn)定

基本結(jié)構(gòu)

行

列

單元格

</tr>

<tr>

</tr>

</tr>

</table>

===========================================================

網(wǎng)頁中的媒體元素

如何實現(xiàn)在網(wǎng)頁上播放視頻和音頻

1,第三方自主開發(fā)的播放器

2,FLash

3,HTML5媒體元素

視頻元素

</video>

音頻元素

</oudio>

===========================================================

iframe框架

===========================================================

表單

表單元素

>單選按鈕 type="radio"

<from>

</from>

-----------------------------------------------------------

>復(fù)選框 type="checkbox"

<from>

<input name="名字" type="checkbox" value="選擇值1" checked默認(rèn)選中/>提示1

<input name="名字" type="checkbox" value="選擇值2" checked默認(rèn)選中/>提示2

<input name="名字" type="checkbox" value="選擇值3" checked默認(rèn)選中/>提示3

</from>

-----------------------------------------------------------

>下拉列表框

</select>

-----------------------------------------------------------

按鈕

>重置按鈕type="reset"

>提交按鈕type="submit"

>button按鈕

>圖片按鈕 type="image"

>文件域 type="file"

>郵箱type="emil"

>網(wǎng)址type="url"

>數(shù)字 type="number"

>滑塊 type="range"

>搜索框 type="search"

表單元素的語法

method和action屬性

常見的表單元素

input(text、password、radio、checkbox、submit、reset、email、url、number、range、search)、select、textare

===========================================================

表單的高級應(yīng)用

>隱藏<input name="名字" type="text" value="值1" readonly/>

>禁用<input type="submit" value="保存" disabled/>

>標(biāo)注

===========================================================

表單的初級驗證

1,減輕服務(wù)器的壓力

2,保證數(shù)據(jù)的可行型和安全性

>初級驗證的方法

>placeholder屬性(提示信息)

>required屬性(必填項)

>pattern屬性(符合正則表達(dá)式)

、系統(tǒng)結(jié)構(gòu)：

① B/S架構(gòu)：Browser/Server（瀏覽器/服務(wù)器的交互形式。）

Browser支持的語言：HTML、CSS、JavaScript；S是服務(wù)器端Server支持的語言有：C、C++、Java等
B/S架構(gòu)系統(tǒng)有什么優(yōu)點和缺點？ 優(yōu)點：升級方便，只升級服務(wù)器代碼即可，維護成本低。缺點：速度慢、體驗不好、界面不炫酷
企業(yè)大部分使用B/S架構(gòu)
B/S架構(gòu)的系統(tǒng)代表有：京東、百度、天貓等

② C/S架構(gòu)：Client/Server（客戶端/服務(wù)器的交互形式。）

C/S架構(gòu)的優(yōu)點和缺點？
優(yōu)點：速度快、體驗好、界面炫酷（娛樂性多數(shù)是C/S架構(gòu)）
缺點：升級麻煩、維護成本較高。
C/S架構(gòu)的系統(tǒng)代表有：QQ、微信、支付寶等

2、 HTML概述

① 什么是HTML？② 怎么開發(fā)HTML？③ 怎么運行HTML?

① HTML：Hyper Text Markup Language（超文本標(biāo)記語言）

?由大量的標(biāo)簽組成，每一個標(biāo)簽都有開始標(biāo)簽和結(jié)束標(biāo)簽。

?超文本：圖片、聲音、視頻等

② HTML開發(fā)使用普通的文本編輯器就行，創(chuàng)建擴展名是.html或.htm

?編輯器有：HBuilder、vscode等

③ 直接采用瀏覽器打開HTML文件就能運行

④ HTML是誰制定的？

④ W3C：世界萬維網(wǎng)聯(lián)盟

?W3C制定了HTML的規(guī)范：每個瀏覽器生產(chǎn)廠家都會遵守規(guī)范。HTML也會按照規(guī)范去寫代碼

?HTML規(guī)范目前最高的版本是：HTML5.0，簡稱H5

?我們現(xiàn)在主要學(xué)的HTML4.0（基本用法）

為了方便中國Web前端程序員開發(fā)，提供了大量幫助文檔。為開發(fā)提供方便。

?w3school：先出現(xiàn)的，和W3C無關(guān)

?w3cschool：后出現(xiàn)的，和W3C無關(guān)

?W3C制定了很多規(guī)范：HTML/XML/http協(xié)議/https協(xié)議……

3、第一個HTML

4、基本標(biāo)簽

p：段落標(biāo)記
h1~h6：標(biāo)題字，與word的標(biāo)題字相同
br：換行標(biāo)記（獨目標(biāo)記）
hr：橫線（獨目標(biāo)記）
color：橫線顏色
width：橫線寬度（可以px和%）
pre：預(yù)留格式
del：刪除字
ins：插入字（有下劃線）
b：粗體字
i：斜體字
sup：上標(biāo)
sub：下標(biāo)
font：字體標(biāo)簽
color：字體顏色
size：字體大小（1~7）

頁面效果圖：

5、實體符號：為了避免和標(biāo)簽沖突，所以需要使用實體符號

<：<
>：>
空格：
注：html中按多個空格鍵，在網(wǎng)頁中只顯示一個空格。

6、HTML表格

table：表格
tr：行
td：列
th：列（比td加粗居中）
合并行：rowspan（一個格占兩個位置）
注：row合并的時候，刪除下面的單元格
合并列：colspan（一個格占兩個位置）
注：col合并的時候，刪除哪個沒有要求

7、thead、tbody、tfoot標(biāo)簽

thead、tbody、tfoot不是必須的，便于后期JS編寫。

8、body的背景顏色和背景圖片

bgcolor：背景色
background：背景圖片
背景圖片在背景色的上面

9、img標(biāo)簽

src：圖片的路徑
只設(shè)置width，height會等比例縮放
只設(shè)置height，不起作用
title：鼠標(biāo)懸停時顯示的信息
alt：設(shè)置圖片加載失敗時顯示的提示信息

10、超鏈接或熱鏈接

href：hot references 熱引用；
后面一定是一個資源的地址。
后面的路徑可以是絕對路徑也可以是相對路徑，可以是網(wǎng)絡(luò)某個資源的路徑。
target：
_blank：新窗口
_self：當(dāng)前窗口（默認(rèn)）
_top：頂級窗口
_parent：父級窗口

超鏈接的作用：

通過超鏈接可以從瀏覽器向服務(wù)器發(fā)送請求。

11、request與response的概念

request：瀏覽器向服務(wù)器發(fā)送數(shù)據(jù)（請求）
B --》S
response：服務(wù)器向瀏覽器發(fā)送數(shù)據(jù)（響應(yīng)）
S--》B

12、列表

有序列表：ol
type：1、A、a、I、i
無序列表：ul
type：circle（○）、square（□）、disc（●）

13、表單（重點）

action：寫提交的URL地址
method：默認(rèn)get；還有post
表單有什么用？
答：收集用戶的信息。表單展現(xiàn)之后，用戶填寫表單，點擊提交。（submit）
怎么畫一個表單？
答：用form標(biāo)簽
一個網(wǎng)頁可以有多個表單form
表單最終是需要提交數(shù)據(jù)給服務(wù)器的，form標(biāo)簽有一個action屬性，這個屬性用來指定服務(wù)器地址。
action屬性用來指定數(shù)據(jù)提交給哪個服務(wù)器
action屬性和超鏈接中的href屬性一樣。都可以向服務(wù)器發(fā)送請求（request）
http://192.168.111.3:8080/oa/save 這是請求路徑，
表單提交數(shù)據(jù)最終提交給192.168.111.3機器上的8080端口對應(yīng)的軟件。
input中的type取值:
radio：單選控件
checkbox：多選控件
submit：提交控件
reset：重置控件
button：普通控件
text：文本控件
password：密碼控
file：文件控件
上傳文件專用
hidden：隱藏域
網(wǎng)頁上看不到，但是表單提交的時候數(shù)據(jù)會自動提交給服務(wù)器。
input中的value屬性用來指定按鈕上顯示的文本信息。
超鏈接a與表單form的區(qū)別？
答：表達(dá)form可以收集信息，而超鏈接a無法收集信息。
表單提交里面的按鈕input中屬性必須定義name，不然提交不了。
表單是以什么格式提交數(shù)據(jù)給服務(wù)器的？
格式：action?name=value&name=value&name=value..
HTTP協(xié)議規(guī)定的，必須以這種格式提交給服務(wù)器
java中String split('&');
重點強調(diào)：表單項寫了name屬性的，一律會提交給服務(wù)器。不想提交就不要寫name屬性。
文本框和密碼框的value不需要程序員指定，用戶輸入什么value就是什么。
當(dāng)name沒有寫的時候，該項不會提交給服務(wù)器
但是當(dāng)value沒有寫的時候，value的默認(rèn)值是空字符串"",將空字符串提交給服務(wù)器。java代碼得到的是：String s = "";

效果圖：

地址欄提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=

14、表單的說明：

① 用戶手動輸入的文本框，都不需要給value賦值
② textarea沒有value屬性
③ radio、checkbox默認(rèn)選項需要使用，checked="checked"（簡寫：checked）
④ select中的option屬性：? selected="selected" 為默認(rèn)選中 ?size：顯示條目數(shù)量
multiple="multiple" 支持多選(select的屬性)
⑤ input的屬性
readonly和disabled：
都是只讀不能修改
數(shù)據(jù)不會提交
maxlength：設(shè)置文本框中輸入的字符數(shù)量。

15、HTML中的結(jié)點

在HTML文檔中，任何元素（結(jié)點）都有id屬性，id屬性是該節(jié)點的唯一標(biāo)識。所以在同一個HTML文檔中id值不能重復(fù)。
注意：表單提交數(shù)據(jù)的時候，只和name有關(guān)系，和id無關(guān)
id有什么作用？
javascript語言：可以對HTML文檔中的任何節(jié)點進行增刪改操作。
獲取節(jié)點時，通常通過id來獲取節(jié)點
HTML文檔是一棵樹，樹上有很多節(jié)點，每一個節(jié)點都有唯一的id（DOM樹）

16、div和span

div和span有什么用？
div和span都可以稱為圖層。
有什么用？
圖層的作用為了保證頁面可以靈活的布局。
div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標(biāo)即可。
div和span的區(qū)別？
di獨占一行
span不會獨占一行

在線咨詢

上一篇：讓Chrome“滾”得更流暢：微軟推薦Edge HTML風(fēng)格滾動特性
下一篇：CSS代碼實現(xiàn)用戶跟蹤及反跟蹤方法

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML與CSS入門經(jīng)典 筆記

、系統(tǒng)結(jié)構(gòu)：

2、 HTML概述

3、 第一個HTML

4、基本標(biāo)簽

5、實體符號：為了避免和標(biāo)簽沖突，所以需要使用實體符號

6、HTML表格

7、thead、tbody、tfoot標(biāo)簽

8、body的背景顏色和背景圖片

9、img標(biāo)簽

10、 超鏈接或熱鏈接

11、request與response的概念

12、列表

13、表單（重點）

15、HTML中的結(jié)點

16、div和span

您的項目需求

HTML與CSS入門經(jīng)典筆記

3、第一個HTML

10、超鏈接或熱鏈接