HTML和CSS的簡單教程_第1頁
HTML和CSS的簡單教程_第2頁
HTML和CSS的簡單教程_第3頁
HTML和CSS的簡單教程_第4頁
HTML和CSS的簡單教程_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、HTML 簡明講義第一節(jié) HTML 根底什么是 HTML是一種超文本標(biāo)記語言 HyperTextMarkupLanguage 超文本：包含有鏈接關(guān)系的文本，且包含多媒體對象的文件。1.2 HTML 標(biāo)記的格式<ELEMENT A TTRIBUTE = value><標(biāo)識標(biāo)記屬性 = “值 >1.3 HTML 文檔的根本結(jié)構(gòu)<HTML><HEAD><TITLE> 歡送進(jìn)入 HTML 世界 </TITLE></HEAD><BODY>這會是一種很有趣的體驗</BODY></HTML>

2、;第二節(jié) 頁面的主體標(biāo)記網(wǎng)頁的主體局部位于body和/body這兩個標(biāo)記之間，放置的是頁面中的所有內(nèi)容，如文字、圖片、鏈接、表格、表單等。文字顏色屬性Text在沒有對文字進(jìn)行單獨定義顏色時，這個屬性對頁面中的所有文字產(chǎn)生作用。根本語法：<body text= " color_value常用 color_value顏色顏色名稱十六進(jìn)制代碼黑色black#000000綠色green#009900灰色gray#808080白色white#FFFFFF原;色yellow#FFFF00紅色red#FF0000藍(lán)色blue#0000FF例如：設(shè)定頁面文字顏色為藍(lán)色背景顏色屬性 BgColo

3、r設(shè)定整個頁面的背景顏色。根本語法： <body bgcolor= " color_value" >例如：設(shè)定頁面背景顏色為深藍(lán)色#336699，文字顏色為白色背景圖片屬性BackGround背景圖片位于網(wǎng)頁的最底層，文字和圖片等都位于它的上方。根本語法： <body background-' img-file-url " >例如：設(shè)定頁面背景平鋪效果顯示背景圖片固定屬性 BgProperties背景圖片固定，是指不管瀏覽器的滾動條如何拖動，背景永遠(yuǎn)固定在相同位置，并 不會隨著文字的滾動而滾動。根本語法： <body bgpr

4、operties= " fixed" >例如：設(shè)定頁面效果背景圖片固定顯示上邊距屬性 TopMargin定義頁面的上邊距，即內(nèi)容和瀏覽器上部邊框之間的距離。根本語法： <body topmargin= " value" >例如：設(shè)定頁面上邊距為 30左邊距屬性 LeftMargin定義頁面的左邊距，即內(nèi)容和瀏覽器左部邊框之間的距離。根本語法： <body leftmargin = " value" >例如：設(shè)定頁面左邊距為 30第三節(jié)文字內(nèi)容輸入普通文字例如：輸入空格符號例如：&nbsp輸入常用特

5、殊符號特殊符號符號碼&quot&&amp<&lt>&gt例如:注釋語句根本語法：<comment></comment>根本語法：<!->例如：標(biāo)題字標(biāo)記標(biāo)題文字就是以某幾種固定的字號去顯示文字根本語法：定義六級標(biāo)題，從一到六級，每級標(biāo)題的字體大小依次遞減標(biāo)記描述<h1></h1>一級標(biāo)題<h2> </h2>二級標(biāo)題<h3> </h3>三級標(biāo)題<h4> </h4>四級標(biāo)題<h5> </h5>

6、五級標(biāo)題<h6> </h6>六級標(biāo)題例如:定義標(biāo)題字對齊屬性根本語法:屬性描述<hn align=left>1 </hn>標(biāo)題左對齊<hn align=center> ,</hn>標(biāo)題中對齊<hn align=right></hn>標(biāo)題右對齊例如:文字修飾標(biāo)記標(biāo)記描述<b>粗體<strong>粗體<i>斜體<em>斜體<cite>斜體<sup>上標(biāo)<sub>下標(biāo)<big>大字體<small>小

7、字體<u>下劃線<s>刪除線<strike>刪除線例如:字體標(biāo)記Font屬性描述face字體size字號從1到7逐漸增大color顏色例如:第四節(jié)段落標(biāo)記在html中，使用<p></p>標(biāo)記來表示段落。定義段落對齊屬性根本語法:屬性描述<p align=left>1 </p>段落左對齊<p align=center> ,</p>段洛中對齊<p align=right></p>段落后對齊例如:換行標(biāo)記與強(qiáng)制換行標(biāo)記 <br><nobr>標(biāo)記描

8、述<br>換行<nobr>文字過長時，強(qiáng)制瀏覽器不換行。在默認(rèn)情況下，瀏覽器會對較 長文字進(jìn)行自動換行。例如:預(yù)格式化標(biāo)記<pre>保存文字在源代碼中的格式，瀏覽器在顯示內(nèi)容時，會完全按照其真正的文本格式來 顯示。根本語法：<pre></pre>例如:第五節(jié)水平線標(biāo)記水平線用于段落與段落之間的分割，使文檔結(jié)構(gòu)更加清晰。插入水平線根本語法：<hr> 例如:水平線屬性設(shè)置根本語法:屬性描述語法width設(shè)置水平線寬度<hr width=value><hr width=value%>size設(shè)置水平線高度

9、<hr size=value>noshade水平線去除陰影<hr noshade>color設(shè)置水平線顏色<hr color=value>align在水平方向上，設(shè)置居中、居 左和居右<hr align=left><hr align=center><hralign=right>例如:第六節(jié)列表標(biāo)記在html頁面中，列表可以起到提綱挈領(lǐng)的作用。列表分為兩種類型:列表類型描述有序列表按照數(shù)字或字母等順序排列列表工程無序列表按照工程符號來標(biāo)記無序的列表工程有序列表設(shè)置根本語法：<ol type=" value&q

10、uot; start=" value'<li>工程1<li>工程2<li>工程3</ol>標(biāo)記描述ol有序列表li列表工程屬性描述type1數(shù)字1、2、3小與子母 a、b、caA iI大寫字母A、B、C小寫羅馬數(shù)字大寫羅馬數(shù)字start設(shè)置有序列表工程的起始值例如:無序列表設(shè)置根本語法：<ul type=" value" ><li>工程1<li>工程2<li>工程3</ul>標(biāo)記描述ul無序列表li列表工程屬性描述typedisc circlesqu

11、are例如:無序列表和有序列表的嵌套難點例如:定義列表標(biāo)記選學(xué)定義列表是一種兩個層次的列表，用于解釋名詞的定義，名詞為第一層次，解釋為 第二層次，并且不包含工程符號，類似于字典詞條一樣。根本語法：dl dt名詞一 dd解釋一dt名詞二dd解釋二dt名詞三dd解釋三</dl>標(biāo)記描述dl定義列表的聲明dt名詞標(biāo)題dd解釋名詞例如:定義列表的嵌套難點例如:第七節(jié)插入圖片在html頁面中可以使用img標(biāo)記插入圖片，網(wǎng)頁中常用的圖片格式為JPEG和GIF。img標(biāo)記需要配合其它屬性來完成工作屬性描述src圖片所在路徑alt鼠標(biāo)移動到圖片上時顯示的提示文字width、height圖片寬度和高

12、度border設(shè)置圖片邊框?qū)挾葀space設(shè)置圖片與文字的上下距離hspace設(shè)置圖片與文字的左右距離Top文字的中間線位于圖片上方Middle文字的中間線位于圖片中間alignBottom文字的中間線位于圖片底部Left文字位于圖片左側(cè)Right文字位于圖片右側(cè)例如:第八節(jié)多媒體頁面之滾動文字在HTML頁面中通過<marquee></marquee>標(biāo)記可以實現(xiàn)如字幕一般的滾動文字效果，在一個排版整齊的頁面中，添加適當(dāng)?shù)臐L動文字可以使頁面更有動感。滾動方向?qū)傩?Direction根本語法： <marquee direction= " value&quo

13、t; >滾動文字 </marquee>direction屬性值描述up滾動文字向上down流動文字問卜left滾動文字向左right滾動文字1可右例如:滾動方式屬性 Behavior根本語法： <marquee behavior=" value” >滾動文字 </marquee>behavior屬性值描述scroll循環(huán)往復(fù)slide下只進(jìn)彳L 次滾動alternate交替進(jìn)行滾動例如:滾動速度屬性ScrollAmount根本語法： <marquee scrollamount= " value" >滾動文字 &

14、lt;/marquee>例如:滾動延遲屬性ScrollDelay根本語法： <marquee scrolldelay= " value” >滾動文字 </marquee>例如:滾動循環(huán)屬性Loop根本語法： <marquee loop=" value" >滾動文字 </marquee>例如:滾動范圍屬性 Width、Height根本語法： <marquee width= " value"height= " value” >滾動文字 </marquee>例如:

15、滾動背景屬性BgColor根本語法： <marquee bgcolor= " color_value ” >滾動文字 </marquee>例如:第九節(jié)嵌入多媒體內(nèi)容在頁面中可以放置 mp3、電影、swf動畫等多種多媒體內(nèi)容。根本語法：embed src=" file_url " width= " value" height= " value" 滾動文字 /embed例如:第十節(jié)嵌入背景音樂使用bgsound標(biāo)記可以嵌入多種格式的背景音樂，最常用的為mid格式的文件。根本語法：bgsound src=&

16、quot; file_url " 例如：背景音樂循環(huán)次數(shù)屬性根本語法： <bgsound src=" file_url " loop= " value" >根本語法：<bgsound src=" file_url " loop= " infinite " >例如:第十一節(jié)使用表格表格是用于排列內(nèi)容的最正確手段，在html頁面中，絕大多數(shù)頁面都是使用表格進(jìn)行排版。表格相關(guān)標(biāo)記標(biāo)記描述<table></table>表格標(biāo)記<tr></tr>

17、;行標(biāo)記<td></td>單元格標(biāo)記<caption></caption>表格標(biāo)題標(biāo)記<th></th>表格表頭標(biāo)記例如：制作一個三行兩列的表格表格標(biāo)記屬性設(shè)置<table>屬性描述border設(shè)置表格邊框線寬度width、height設(shè)置表格的寬度和高度bordercolor設(shè)置表格邊框顏色borderlight設(shè)置表格亮邊框顏色左上邊框顏色bordercolordark設(shè)置表格暗邊框顏色右卜邊框顏色bgcolor設(shè)置表格背景顏色background設(shè)置表格背景圖片align設(shè)置表格對齊方式cellspaci

18、ng設(shè)置表格單元格和單元格之間的距離cellpadding設(shè)置單元格內(nèi)容和邊框之間的距離例如表格標(biāo)題標(biāo)記 <caption>在html中通過在<table>標(biāo)記中使用<caption></caption>標(biāo)記為表格添加標(biāo)題，而且可以控制標(biāo)題文字的排列屬性。根本語法：<table><caption ></caption></table>屬性描述align設(shè)置標(biāo)題文字的水平對齊方式left、center、rightlvalign設(shè)置標(biāo)題文字的垂直對齊方式 top、bottom例如表格表頭標(biāo)記<th

19、>表頭指的是表格的第一行，在 html中通過在<table>標(biāo)記中使用<th></th>標(biāo)記為表格設(shè)置表頭，表頭中的文字可以實現(xiàn)居中并且加粗顯示。根本語法：<table><tr><th>仙></tr><tr><td> </td></tr></table>例如行標(biāo)記屬性設(shè)置<tr>屬性描述bordercolor設(shè)置行的邊框顏色borderlight設(shè)置行的亮邊框顏色左上邊框顏色bordercolordark設(shè)置行的暗邊框顏色右卜邊

20、框顏色bgcolor設(shè)置行的背景顏色background設(shè)置行的背景圖片align設(shè)置行內(nèi)容水平對齊方式valign設(shè)置行內(nèi)容垂直對齊方式例如單元格屬性設(shè)置<td>、<th>屬性描述align設(shè)置單兀格內(nèi)容水平對齊方式valign設(shè)置單兀格內(nèi)容垂直對齊方式width、height設(shè)置單元格的寬度和高度bgcolor設(shè)置單兀格背景顏色background設(shè)置單元格背景圖片bordercolor設(shè)置單元格邊框顏色borderlight設(shè)置單元格亮邊框顏色左上邊框顏色bordercolordark設(shè)置單兀格暗邊框顏色右卜邊框顏色例如跨行屬性<rowspan>在復(fù)雜

21、的表格結(jié)構(gòu)中，有的單元格在水平方向上是跨多個單元格的，這就需要使用 跨行屬性rowspan。根本語法： <td rowspan= " value" >語法解釋：value代表單元格跨的行數(shù)。例如跨歹U屬性<colspan>在復(fù)雜的表格結(jié)構(gòu)中，有的單元格在垂直方向上是跨多個單元格的，這就需要使用 跨列屬性colspan。根本語法：<td colspan= " value" >語法解釋：value代表單元格跨的列數(shù)。例如表格嵌套重點例如第十二節(jié)建立超鏈接超鏈接是網(wǎng)頁頁面中最重要的元素之一，一個網(wǎng)站是由多個頁面組成的，頁面之

22、間依據(jù)鏈接確定相互的導(dǎo)航關(guān)系。鏈接標(biāo)記鏈接雖然在網(wǎng)站設(shè)計中占有不可替代的地位，但是其標(biāo)記只有一個，那就是<a>標(biāo)記。鏈接標(biāo)記具有如下屬性：屬性描述href指定鏈接地址name給鏈接命名title鏈接提示文字target指定鏈接的目標(biāo)窗口例如關(guān)于鏈接路徑鏈接路徑類型描述絕對路徑ftp:/相對路徑1、要鏈接到同一目錄下的文件時，只需要輸入 要鏈接文件的名稱2、要鏈接到下一級目錄中的文件，只需要先輸 入目錄名，然后加" /，再輸入文件名3、要鏈接到上一級目錄中的文件，那么先輸入 "./',再輸入目錄名、文件名根路徑以"/'開頭，代表根目錄，再

23、輸入目錄名、文件名例如內(nèi)部鏈接所謂內(nèi)部鏈接，是指在同一網(wǎng)站內(nèi)部，不同 html頁面之間的鏈接關(guān)系。根本語法：<a href= " file_url " target value" >鏈接文字 </a>例如target屬性描述_parent在上一級窗口中翻開，經(jīng)常使用于分幀的框架頁_blank在新窗口中翻開_self在同一個窗口中翻開，默認(rèn)設(shè)置_top在瀏覽器的整個窗口中翻開，忽略任何框架書簽鏈接建立書簽鏈接，分為兩步：一是建立書簽，二是為書簽建立鏈接。根本語法：<a name - ' bookmark_name” >書簽

24、鏈接文字 </a><a href = #bookmark_name” >鏈接文字 </a><a href = file_url#bookmark_name " >鏈接文字 </a>例如target屬性描述_parent在上一級窗口中翻開，經(jīng)常使用于分幀的框架頁_blank在新窗口中翻開_self在同一個窗口中翻開，默認(rèn)設(shè)置_top在瀏覽器的整個窗口中翻開，忽略任何框架所謂外部鏈接，是指跳轉(zhuǎn)到當(dāng)前網(wǎng)站外部，和其他網(wǎng)站中的頁面或者其他元素之間 的鏈接關(guān)系。效勞url格式描述WWW:鏈接到外部網(wǎng)站ftpftp:/鏈接到文件傳輸效勞

25、器e-mailmailto:啟動郵件根本語法：<a href =":" >鏈接文字</a><a href =" ftp:/" >鏈接文字 </a><a href =" mailto:" >鏈接文字 </a>第十三節(jié)建立頁面表單Html表單是html頁面與瀏覽器實現(xiàn)交互的主要手段，利用表單可以收集客戶端提交 的有關(guān)信息。表單是網(wǎng)站實現(xiàn)交互功能的重要組成局部。<form>根本語法： <form name= " form name "

26、; method= " method " action= " url" ></form>屬性描述Name表單的名稱Method定義表單結(jié)果從瀏覽器傳送到效勞器的方法，一般有兩種：get、postAction用來定義表單處理程序在form標(biāo)記中，可以包含以下四個標(biāo)記:標(biāo)記描述<input>表單輸入標(biāo)記<select>菜單和列表標(biāo)記<option>菜單和列表工程標(biāo)記<textarea>文本域標(biāo)記13.2輸入標(biāo)記input輸入標(biāo)記input是表單中最常用的標(biāo)記之一，常用的文本域、按鈕等都使用這個

27、筆 記。根本語法：<form><input name= " field_name " type=" type_name" ></form>屬性描述Name域的名稱Type域的類型在type屬性中，可以包含以下屬性值:Type屬性值描述Text文字域Password密碼域File文件域Checkbox復(fù)選框Radio單項選擇框Button普通按鈕Submit提交按鈕Reset重置按鈕Hidden隱藏域Image圖像域圖像提交按鈕在文字域中可以輸入任何類型的文本、數(shù)字或字母，輸入內(nèi)容以單行顯示。根本語法：<input

28、 type= " text" name=" field_name " maxlength= " value"size=" value " value=" field_value" >屬性描述Name文字域的名稱Maxlength文字域最大輸入字符數(shù)Size文字域的寬度Value文字域的默認(rèn)值在密碼域中可以輸入的文字以"*''星號顯示。根本語法：<input type= " password” size=" value" >

29、name="fieldname”maxlength=" value”可以通過文件域上傳文件。根本語法：<input type= " file " name=" field_name" >根本語法：<input type= checkbox name= field_name checked value= value語法注釋： checked 表示此項被默認(rèn)選中；value 表示選中工程后提交給效勞器端的值。單項選擇框 radio根本語法：<input type= radio name= field_name ch

30、ecked value= value >語法注釋： checked 表示此項被默認(rèn)選中；value 表示選中工程后提交給效勞器端的值。普通按鈕 button根本語法：<input type= button name= field_name value= button_text >語法注釋： value 表示表示顯示在按鈕上的文字。提交按鈕 submit單擊提交按鈕后，可以實現(xiàn)表單內(nèi)容的提交。根本語法：<input type= submit name= field_name value= button_text >單擊重置按鈕后，可以去除表單的內(nèi)容，恢復(fù)成默認(rèn)的表單

31、內(nèi)容設(shè)定。根本語法：<input type= resetname= field_name value= button_text >圖像域是指可以用于提交按鈕位置上的圖片，這幅圖片具有按鈕功能O根本語法:<input type= " image"name=" field_name" src= " image_url” >隱藏域在頁面中對于用戶是不可見的。根本語法：<input type= " hidden "name=" field_name " value=" va

32、lue" >菜單和歹U表標(biāo)，己 <select><option>根本語法：select name=" name" size=" value" multiple<option value= " value" selected><option value= " 'value" ></select>屬性描述Name來單或列表名稱Multiple列表中的工程多項選擇Size顯示的選項數(shù)目Value選項值Selected默認(rèn)選項13.14文本

33、域標(biāo)記<textarea >制作多行的文字域。根本語法：<textarea name= " name" rows= " value " cols= " value " value= value" ></textarea>屬性描述Name文本域名稱Rows文本域的行數(shù)Cols文本域的列數(shù)Value文本域的默認(rèn)值第十四節(jié)元信息標(biāo)記元信息標(biāo)記<meta>的功能是定義頁面中的信息，這些文件信息不會出現(xiàn)在網(wǎng)頁的顯示之中，只會出現(xiàn)在原源代碼中。通過<meta>標(biāo)記的屬性可以提供

34、頁面的關(guān)鍵字、作者、描述等多種信息。屬性描述-equiv生成一個標(biāo)題域Name元信息關(guān)鍵字Content關(guān)鍵字取值內(nèi)容關(guān)鍵字是為搜索引擎提供的，關(guān)鍵字之間用逗號隔開。根本語法：<meta name=" keywords " content value" >用以描述網(wǎng)站的主題，供搜索引擎尋找網(wǎng)頁。根本語法：<meta name=" discription " content value" >用以顯示頁面作者姓名及個人信息。根本語法：<meta name= author content=value >1

35、4.4 設(shè)定字符集根本語法：<meta -equiv= content-type content= text/html;charset=value > 將Charset設(shè)置為gb2312時，頁面字符集為簡體中文。自動刷新根本語法：<meta -equiv= refresh content= value > value 為頁面刷新間隔秒數(shù)。14.6 設(shè)定自動跳轉(zhuǎn)根本語法：<meta -equiv= refresh content= value;url=url_value > value 為頁面跳轉(zhuǎn)間隔秒數(shù)；url_value 為頁面跳轉(zhuǎn)后翻開的文件地址。第十五節(jié) CSS 樣式表概述CSScascading style sheets中文翻譯為“層疊樣式表"，簡稱樣式表。CSS 可以彌補(bǔ) html 對網(wǎng)頁格式化功能的缺乏， 比方段落間距、 行距； 字體變化和大小； 頁面格式的動態(tài)更新；排版定位等。15.2 css根本語法css 樣式主要由三局部組成選擇器 selector 屬性名 property 屬性值value例如P font-size:25px; color:blank15.3 css的三種

溫馨提示

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

最新文檔

評論

0/150

提交評論