2023年HTML初級(jí)知識(shí)點(diǎn)總結(jié)最詳細(xì)的總結(jié)_第1頁(yè)
2023年HTML初級(jí)知識(shí)點(diǎn)總結(jié)最詳細(xì)的總結(jié)_第2頁(yè)
2023年HTML初級(jí)知識(shí)點(diǎn)總結(jié)最詳細(xì)的總結(jié)_第3頁(yè)
2023年HTML初級(jí)知識(shí)點(diǎn)總結(jié)最詳細(xì)的總結(jié)_第4頁(yè)
2023年HTML初級(jí)知識(shí)點(diǎn)總結(jié)最詳細(xì)的總結(jié)_第5頁(yè)
已閱讀5頁(yè),還剩13頁(yè)未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

HTML

。超文本標(biāo)記語(yǔ)言,一種規(guī)范

。預(yù)定義,已經(jīng)定義好的各種標(biāo)記,只需要我們把相應(yīng)的標(biāo)記放到合適的位置

HTML基本語(yǔ)法與基本結(jié)構(gòu)(重點(diǎn))

。。標(biāo)記的使用。

。。:L、標(biāo)記一般成對(duì)出現(xiàn),包含開始標(biāo)記和結(jié)束標(biāo)記

。2、標(biāo)記可以嵌套使用,但是不能交叉使用

。3、標(biāo)記不區(qū)分大小寫

。。屬性的使用(屬性控制內(nèi)容的格式,額外的格式)

。1、書寫位置在開始標(biāo)記中

2、格式:屬性名="屬性值”,多個(gè)屬性之間使用空格分割

。3、不同的標(biāo)記屬性也許相同也也許不同

。4、屬性使用的標(biāo)記中,只能對(duì)本標(biāo)中的內(nèi)容記產(chǎn)生影響

。5、屬性不沖突時(shí),效果疊加,屬性沖突時(shí),就近原則。。

。html的基本結(jié)構(gòu)

<html>------聲明網(wǎng)頁(yè)

。。<head>一—一網(wǎng)頁(yè)的頭部信息

。。<title>標(biāo)題</title>--網(wǎng)頁(yè)的標(biāo)題

匕o</head>

。。<body>..一?網(wǎng)頁(yè)的主體,網(wǎng)頁(yè)內(nèi)容重要展示的部分

。。網(wǎng)頁(yè)的重要內(nèi)容

oo</body>

o</html>

。二.文本格式的應(yīng)用

。。1、標(biāo)題標(biāo)記<hn>,n的取值1-6,3.級(jí)標(biāo)題最大

效果:加粗顯示,帶有自動(dòng)換行

。屬性:align控制標(biāo)題的對(duì)齊方式,取值left(左對(duì)齊,默認(rèn)值)|center(居中)|ri

ght(右對(duì)齊)

。。2、段落標(biāo)記Vp>

。。效果:把內(nèi)容分段展示,自動(dòng)換行

。屬性:align,控制段落內(nèi)容的對(duì)齊方式,取值left(左對(duì)齊,默認(rèn)值)|center

(居中)1right(右對(duì)齊)

。3、換行符<br/>,單標(biāo)記,不需要結(jié)束標(biāo)記,換行但不分段

??崭穹?hào): 表達(dá)一個(gè)空格

。強(qiáng)制換行符:Vbr/>

。4、水平線標(biāo)記<HR/>,單標(biāo)記

?效果:水平線,默認(rèn)是

。。屬性:size控制水平線的粗細(xì),取值為整數(shù),單位為像素(px)

??width控制水平線的長(zhǎng)度,取值可以是像素單位,也可以是百分?jǐn)?shù)(相對(duì)于瀏覽器

窗口比例)

-noshade設(shè)立水平線不帶有陰影,該屬性不需要取值

。color設(shè)立水平線的顏色,取值可以是英文的顏色值,也可以是十六進(jìn)制

的顏色代碼

。align控制水平線的對(duì)齊方式,取值left(左對(duì)齊)|center(居中,默認(rèn)

值)Iright(右對(duì)齊)

。5、分節(jié)標(biāo)記<div>

效果:把內(nèi)容設(shè)立為一節(jié),前后帶有自動(dòng)換行

。。屬性:align控制div中內(nèi)容的對(duì)齊方式,取值left(左對(duì)齊,默認(rèn)值)|center(居

中)Iright(右對(duì)齊)。

。6、居中標(biāo)記符<center>

效果:把center標(biāo)記中的內(nèi)容居中顯示

7、文本控制標(biāo)記<font>

。效果:控制字體的各種顯示樣式

。。屬性:size控制字體的大小,取值為絕對(duì)值時(shí),1--7,數(shù)字越大字體越大,取相對(duì)

值時(shí),參考的是默認(rèn)字體(3號(hào)),取值在-2--+4之間

。color控制字體的顏色

-?face控制字體的字體,取值可以是多個(gè)值,多個(gè)值之間使用逗號(hào)分割,取值時(shí)從左往右依

次取值,找到合適的值為止,假如都不支持,使用默認(rèn)格式顯示

0

。。8、字體的物理樣式

。加粗:<b>

斜體:<i>

。下劃線:Vu>

。刪除線:<s>

3上標(biāo):<sup>

。下標(biāo):<sub>

01.常用邏輯字符

。<ADDRESS>網(wǎng)頁(yè)設(shè)計(jì)者或維護(hù)者的信息,通常顯示為斜體

?<CITE>。表達(dá)文本屬于引用,通常顯示為斜體

XCODE>邸表達(dá)程序代碼,通常顯示為固定寬度字體

?<DFN>團(tuán)表達(dá)定義了的術(shù)語(yǔ),通常顯示為黑體或斜體

。<EM>,強(qiáng)調(diào)某些字詞,通常顯示為斜體

。<KBD>。表用戶的鍵盤輸入,通常顯示為固定寬度字體

??<SAMP>。表達(dá)文本樣本,通常顯示為固定寬度字體

。<STR0NG>?特別強(qiáng)調(diào)某些字詞,通常顯示為粗體

?<VAR>,表達(dá)變量,通常顯示為斜體

2、列表標(biāo)記

ol,有序列表,<o(jì)l>,需要配合<li>標(biāo)記使用

。一個(gè)<1i>標(biāo)記相應(yīng)一個(gè)選項(xiàng)

。1的屬性:type控制列表的符號(hào)樣式,取值1|AIa|iII,默認(rèn)是1

start控制列表的起始值,取值為任意的整數(shù)

li的屬性:type控制選項(xiàng)自身的符號(hào)樣式,取值

value控制選項(xiàng)自身的起始值,取值為任意整數(shù),但是修改自身

起始值之后,會(huì)對(duì)同一個(gè)列表中本選項(xiàng)之后的同級(jí)<li>標(biāo)記產(chǎn)生影響

2、無(wú)序列表,Vu1>,配合<1i>標(biāo)記使用

。一個(gè)<li>標(biāo)記相應(yīng)一個(gè)選項(xiàng)

。。111的屬性:type控制所有選項(xiàng)的符號(hào)樣式,取值disc(實(shí)心圓,默認(rèn)值)|circ1e(空

心圓)|square(方塊)

li的屬性:type控制選項(xiàng)自身的符號(hào)樣式

??跇?biāo)記用在ol中,type屬性的取值跟ol的type屬性取值走,用在ul中,

跟著u1的type屬性取值走

。3、定義列表,<d1>,完畢對(duì)定義列表的聲明

??<dt>,術(shù)語(yǔ)標(biāo)記,可以理解為類似于列表選項(xiàng)的標(biāo)題使用

<dd>,描述標(biāo)記,可以理解為類似于列表的選項(xiàng)使用

。三.在網(wǎng)頁(yè)中使用圖片

標(biāo)記:<img>,單標(biāo)記,不需要結(jié)束標(biāo)記

屬性:。src引入圖片資源的途徑

,絕對(duì)途徑:資源在服務(wù)器上的位置,該位置是從盤符出發(fā)

。相對(duì)途徑:資源在服務(wù)器上的相對(duì)位置,從網(wǎng)頁(yè)自身出發(fā)

。。..'返回上一層文獻(xiàn)夾

width控制顯示圖片的寬度,取值為像素或者百分?jǐn)?shù)

,oheight控制顯示圖片的高度,取值為像素或者是百分?jǐn)?shù)

0

。只設(shè)立寬度或高度時(shí),圖片保持等比縮放,同時(shí)設(shè)立時(shí),同時(shí)生效

?border控制顯示圖片的邊框,取值為像素,默認(rèn)不顯示邊框

。。hspace控制顯示圖片水平方向上的空白,取值為像素

。。vspace控制顯示圖片垂直方向上的空白,取值為像素

-align控制圖片和周邊文本的對(duì)齊方式

。。垂直方向上:top文本和圖片頂部對(duì)齊

。。bottom文本底部和圖片底部對(duì)齊

。。。middle文本的底部和圖片的中部對(duì)齊

。。absmiddle絕對(duì)中間對(duì)齊,文本的中部和圖片的中部對(duì)齊

。。水平方向上:left圖片在左,文本在右

。。right文本在左,圖片在右

。圖片的對(duì)齊方式:

。。。借助<div>或者<p>

0

。四.在網(wǎng)頁(yè)中使用超鏈接

4、超鏈接

。標(biāo)記:<a>…V/a>,通過(guò)鏈接跳轉(zhuǎn)到新的資源

屬性:href鏈接的目的資源的途徑

。鏈接外部資源時(shí),一定是絕對(duì)途徑,并且需要在途徑前加上【http://]這

個(gè)網(wǎng)絡(luò)通信協(xié)議

。target指定超鏈接的打開方式,_seIf在自身的頁(yè)面打開超鏈接(默認(rèn)

的打開方式),_blank重新打開一個(gè)新的瀏覽器窗口

建立錨點(diǎn)(書簽)

。內(nèi)部書簽

。1、設(shè)立錨點(diǎn)的名稱例如:<aname="錨點(diǎn)名"

?2、使用超鏈接完畢跳轉(zhuǎn)例如:<ahref="#錨點(diǎn)名"/a>

外部書簽

1、設(shè)立錨點(diǎn)的名稱例如:<aname="錨點(diǎn)名">...</a>

°2、使用超鏈接完畢跳轉(zhuǎn)例如:<ahref="錨點(diǎn)所在頁(yè)面的途徑#錨

點(diǎn)名">...V/a>

超鏈接

。。發(fā)送電子郵件,格式Vahref="maiIto:郵箱地址">發(fā)送郵件

</a>

。2、鏈接多媒體

。五.表格的應(yīng)用

表格的結(jié)構(gòu)

〈table>一聲明表格

?<caption>...</caption>一表格的標(biāo)題

bt><tr>-------表格的行

。。?Vtd>.>一表格的列

00....

。?t></tr>

表格的行

06<td>....</td>---表格的列

o</tr>

...

</table>?

<table〉標(biāo)記,定義表格,所有表格的內(nèi)容書寫在<tabie>開始和

</table>結(jié)束標(biāo)記之間

屬性:frame控制表格最外層的四個(gè)邊框

取值:。void默認(rèn)值,不顯示邊框

????above僅顯示上邊框

???below僅顯示下邊框

???hsides顯示上下邊框

????vsides顯示左右邊框

??1hs僅顯示左邊框

rhs僅顯示右邊框

??box>border顯示四個(gè)邊框

??rules控制表格內(nèi)部分割線

??取值:。none默認(rèn)值,不顯示

?rows顯示行分割線

00C0Is顯示列分割線

?oaII顯示所有分割線

。borderco1or控制邊框的顏色

。border控制表格的所有邊框,取值為像素

。cellspacing控制單元格與單元格之間的空白,取值為像素

cellpadding控制單元格內(nèi)容和單元格邊框之間的空白,取值為像

。Width設(shè)立單元格的寬度,取值為像素或者百分?jǐn)?shù)

height設(shè)立單元格的高度,取值為像素或者百分?jǐn)?shù)

align控制表格的對(duì)齊方式,取值1eft(默認(rèn)值)|cen

ter|right

?bgcolor設(shè)立表格的背景色

background設(shè)立表格的背景圖

。當(dāng)背景色和背景圖同時(shí)設(shè)定期,優(yōu)先使用背景圖

<caption>表格的標(biāo)題泌須書寫在<table>之間

。。屬性:a1ign控制表格標(biāo)題的位置,取值top(標(biāo)題在表格的頂部)Ibottom(標(biāo)題在

表格的底部)

。。<tr>定義表格的行

。屬性:align控制整行單元格內(nèi)容的水平對(duì)齊方式,取值Ieft(默認(rèn)值,

缺省值)1center)right

valign控制整行單元格內(nèi)容的垂直對(duì)齊方式,取值topImiddle(默認(rèn)

值)|bottom

-?height設(shè)立行的高度,取值為像素

。bgcolor設(shè)立行的背景色

。background設(shè)立行的背景圖

=??bordercolor設(shè)立行的邊框顏色

。<td>列標(biāo)記

。<th>列標(biāo)題標(biāo)記

。都可以作為列使用,<th>列標(biāo)題標(biāo)記,內(nèi)容有加粗顯示的效果,并且?guī)в凶詣?dòng)居中

。。屬性:align控制單元格內(nèi)容的水平方向?qū)R方式,取值1eft|center|right

。。valign控制單元格內(nèi)容的垂直方向?qū)R方式,取值top|middIe(默認(rèn)值)

|bottom

?height設(shè)立單元格的高度,取值以像素為單位,當(dāng)同一行中不同的單元

格設(shè)立的高度也不相同時(shí),整行的高度取值按最大值來(lái)

。?width設(shè)立單元格的寬度,取值以像素為單位,當(dāng)同一列中不同行的單元格設(shè)立的

寬度不相同時(shí),整列的寬度取值按最大值來(lái)

-bgcolor設(shè)立單元格的背景色

。bakground設(shè)立單元格的背景圖

。。rowspan合并行

°°colspan合并列

。合并行和合并列的取值都是整數(shù),合并幾個(gè)單元格取值就是兒

六.框架的應(yīng)用

1、框架

??蚣芗瘶?biāo)記<frameset>,在原有的html結(jié)構(gòu)基礎(chǔ)上,<frameset

>替換了Vbody>的位置,換句話說(shuō),<frameset>和Vbody>不能共存,只能

出現(xiàn)一個(gè)

。屬性:rows設(shè)立橫向框架的數(shù)量和高度,框架的數(shù)量取決于rows屬性的

取值個(gè)數(shù),每個(gè)框架的高度取決于值的大小

。cols設(shè)立縱向框架的數(shù)量和寬度,框架的數(shù)量取決于cols屬性的

取值個(gè)數(shù),每個(gè)框架的寬度取決于值的大小

。rows和cols的取值方式

。1、像素值

。。2、百分?jǐn)?shù)

。3、比例取值

rows和cols取值,可以有多個(gè)值,值與值之間使用逗號(hào)分割,并且不能

有空格格,cols和rows屬性一般不同時(shí)設(shè)定,要想實(shí)現(xiàn)頁(yè)面的縱向和橫向分割,可以

使用框架的嵌套來(lái)實(shí)現(xiàn)

。。frameborder使用在frameset中,可以控制框架集下的所有框架邊框是否顯

??蚣軜?biāo)記<frame/>,單標(biāo)記

。屬性:src引入目的資源的途徑

。。name給框架起名字,需要配合超鏈接的target屬性來(lái)使用,達(dá)成鏈接目

的框架的目的

。frameborder控制框架的邊框是否顯示,0表達(dá)不顯示,1顯示

默認(rèn)的3D邊框

。。SCro1Iing控制框架是否加入滾動(dòng)條,取值yes(加入滾動(dòng)條,需要時(shí)加

入)Ino(不加入滾動(dòng)條)Iauto(需要時(shí)加入滾動(dòng)條,默認(rèn)值)

。.noresjze固定框架的邊框,該屬性不需要取值

marginheight在框架中顯示內(nèi)容時(shí),控制內(nèi)容和框架上下邊框

之間的空白,取值以像素為單位,以上邊框?yàn)闇?zhǔn)

?marginwidth在框架中顯示內(nèi)容時(shí),控制內(nèi)容和框架左右邊

框之間的空白,取值以像素為單位,以左邊框?yàn)闇?zhǔn)

??<noframes>當(dāng)瀏覽器不支持框架時(shí),顯示的替換內(nèi)容,必須包含一對(duì)<body>標(biāo)

記使用

七、表單的應(yīng)用

表單

1.表單標(biāo)記<fOrm>,表單不能嵌套使用,所有表單的內(nèi)容必須書寫在表單的開始

標(biāo)記和結(jié)束標(biāo)記之間

表單結(jié)構(gòu):

<form>

<inputtype="text”>單行文本格式

<inputtype="password”>o密碼輸入框

<inputtype="checkboxw>復(fù)選框格式

<inputtype="radio"name="sex”>單選框格式

<inputtype=wsubmit">提交的格式

<inputtype="reset">重置格式

<inputtype=wbutton”>自定義格式

<select>下拉菜單格式

<option>漢族</option>

o<option>滿族</option>

<option>壯族</option>

<

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論