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

下載本文檔

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

文檔簡介

1、HTML簡明講義第一節(jié)HTML基礎(chǔ)1.1什么是HTML是一種超文本標(biāo)記語言(HyperTextMarkupLanguage ) 超文本：包含有關(guān)系的文本，且包含多媒體對象的文件。1.2 HTML標(biāo)記的格式<ELEMENT ATTRIBUTE = value標(biāo)識標(biāo)記屬性="值” 1.3 HTML文檔的基本結(jié)構(gòu)<HTML><HEAD><TITLE>歡迎進入 HTML 世界 </TITLE></HEAD><BODY>這會是一種很有趣的體驗</BODY></HTML>第二節(jié)頁面的主體標(biāo)記如文

2、網(wǎng)頁的主體部分位于 body和/body這兩個標(biāo)記之間，放置的是頁面中的所有容, 字、圖片、表格、表單等。2.1文字顏色屬性Text在沒有對文字進行單獨定義顏色時，這個屬性對頁面中的所有文字產(chǎn)生作用?；菊Z法：<body text= ” color_value常用 color_value顏色顏色名稱十六進制代碼黑色black#000000綠色gree n#009900灰色gray#808080白色white#FFFFFF黃色yellow#FFFF00紅色red#FF0000藍色blue#0000FF示例：設(shè)定頁面文字顏色為藍色2.2背景顏色屬性 BgColor設(shè)定整個頁面的背景顏色?；?/p>

3、語法：<body bgcolor= ” color_value ” >示例：設(shè)定頁面背景顏色為深藍色（#336699），文字顏色為白色2.3背景圖片屬性 BackGround背景圖片位于網(wǎng)頁的最底層，文字和圖片等都位于它的上方。基本語法：<body background= ” img-file-url ” >示例：設(shè)定頁面背景平鋪效果顯示背景圖片固定，是指不論瀏覽器的滾動條如何拖動，背景永遠固定在相同位置，并 不會隨著文字的滾動而滾動?；菊Z法： <body bgproperties= ” fixed ” >示例：設(shè)定頁面效果背景圖片固定顯示2.5上邊距屬性

4、TopMargin定義頁面的上邊距，即容和瀏覽器上部邊框之間的距離?；菊Z法：<body topmargin= ” value ” >示例：設(shè)定頁面上邊距為302.6左邊距屬性LeftMargin定義頁面的左邊距，即容和瀏覽器左部邊框之間的距離。基本語法：<body leftmargin =” value ” >示例：設(shè)定頁面左邊距為30第三節(jié)文字容3.1輸入普通文字示例:3.2輸入空格符號示例：&n bsp3.3輸入常用特殊符號特殊符號符a&quot&& amp<& It>&gt示例:3.4注釋語句基本語法：

5、<comment></comme nt>基本語法：<!->示例:3.5標(biāo)題字標(biāo)記標(biāo)題文字就是以某幾種固定的字號去顯示文字基本語法：定義六級標(biāo)題，從一到六級，每級標(biāo)題的字體大小依次遞減標(biāo)記描述<"></h1>一級標(biāo)題<h2> </h2>二級標(biāo)題<h3> </h3>三級標(biāo)題<h4> </h4>四級標(biāo)題<h5> </h5>五級標(biāo)題<h6> -</h6>六級標(biāo)題示例:3.6定義標(biāo)題字對齊屬性基本語法:屬性描述<

6、;hn alig n=left-</hn>標(biāo)題左對齊<hn alig n=cen ter></h n>標(biāo)題中對齊<hn alig n=right>"-</hn>標(biāo)題右對齊示例:3.7文字修飾標(biāo)記標(biāo)記描述<b>粗體<str ong>粗體<i>斜體<em>斜體<cite>斜體<sup>上標(biāo)<sub>下標(biāo)<big>大字體<small>小字體<u>下劃線<s>刪除線<strike>刪除線3.

7、8字體標(biāo)記Font屬性描述face字體size字號從1到7逐漸增大color顏色示例:第四節(jié)段落標(biāo)記在html中，使用<p></p>標(biāo)記來表示段落。4.1定義段落對齊屬性基本語法:屬性描述<p alig n=left</p>段落左對齊<p alig n=cen ter>v/p>段洛中對齊vp alig n=right> -</p>段落右對齊示例:4.2換行標(biāo)記與強制換行標(biāo)記 <br>vnobr>標(biāo)記描述<br>換行<n obr>文字過長時，強制瀏覽器不換行。在默認情況下，瀏覽

8、器會對較 長文字進行自動換行。示例:4.3預(yù)格式化標(biāo)記vpre>保留文字在源代碼中的格式，瀏覽器在顯示容時，會完全按照其真正的文本格式來顯示。基本語法：<pre></pre>示例：第五節(jié)水平線標(biāo)記水平線用于段落與段落之間的分割，使文檔結(jié)構(gòu)更加清晰。5.1插入水平線基本語法：<hr>示例：5.2水平線屬性設(shè)置基本語法:屬性描述語法width設(shè)置水平線寬度<hr width=value><hr width=value%>size設(shè)置水平線高度<hr size=value>noshade水平線去除陰影<hr nosh

9、ade>color設(shè)置水平線顏色<hr color=value>alig n在水平方向上，設(shè)置居中、居 左和居右<hr alig n=left<hr alig n=cen ter><hralig n=right>示例:第六節(jié)列表標(biāo)記在html頁面中，列表可以起到提綱挈領(lǐng)的作用。列表分為兩種類型:列表類型描述有序列表按照數(shù)字或字母等順序排列列表項目無序列表按照項目符號來標(biāo)記無序的列表項目6.1有序列表設(shè)置基本語法：<ol type= ” value ” start= ” value ' > <li> 項目1<l

10、i>項目2<li>項目3</ol>標(biāo)記描述ol有序列表li列表項目屬性描述type1數(shù)字1、2、3a小與字母a、b、cA大寫字母A、BCi小寫羅馬數(shù)字I大寫羅馬數(shù)字start設(shè)置有序列表項目的起始值示例:6.2無序列表設(shè)置基本語法：<ul type= ” value ” ><li> 項目1<li>項目2<li>項目3</ul>標(biāo)記描述ul無序列表li列表項目屬性描述disctypecirclesquare示例:6.3無序列表和有序列表的嵌套（難點）示例:6.4定義列表標(biāo)記（選學(xué)）定義列表是一種兩個層次的列

11、表，用于解釋名詞的定義，名詞為第一層次，解釋為 第二層次，并且不包含項目符號，類似于字典詞條一樣?；菊Z法：dl dt 名詞一 dd解釋一dt名詞二dd解釋二dt名詞三dd解釋三</dl>標(biāo)記描述dl定義列表的聲明dt名詞標(biāo)題dd解釋名詞示例:6.5定義列表的嵌套（難點）示例:第七節(jié)插入圖片在html頁面中可以使用img標(biāo)記插入圖片，網(wǎng)頁中常用的圖片格式為JPEG和GIF。img標(biāo)記需要配合其它屬性來完成工作屬性描述src圖片所在路徑alt鼠標(biāo)移動到圖片上時顯示的提示文字width、height圖片寬度和高度border設(shè)置圖片邊框?qū)挾葀space設(shè)置圖片與文字的上下距離hspac

12、e設(shè)置圖片與文字的左右距離Top文字的中間線位于圖片上方Middle文字的中間線位于圖片中間alig nBottom文字的中間線位于圖片底部Left文字位于圖片左側(cè)Right文字位于圖片右側(cè)示例:第八節(jié)多媒體頁面之滾動文字在HTML頁面過<marquee></marquee>標(biāo)記可以實現(xiàn)如字幕一般的滾動文字效果,在一個排版整齊的頁面中，添加適當(dāng)?shù)臐L動文字可以使頁面更有動感。8.1滾動方向?qū)傩?Direction基本語法： <marquee direction=” value ” > 滾動文字 </marquee>direction 屬性值描述up

13、滾動文字向上dow n滾動文字向下left滾動文字向左right滾動文字向右示例:8.2滾動方式屬性 Behavior基本語法： <marquee behavior= ” value ” > 滾動文字 </marquee>behavior 屬性值描述scroll循環(huán)往復(fù)slide下只進行一次滾動alternate交替進仃滾動示例:8.3滾動速度屬性 ScrollAmount基本語法： <marquee scrollamount= ” value ” > 滾動文字 </marquee>示例:8.4滾動延遲屬性 ScrollDelay基本語法： &l

14、t;marquee scrolldelay= ” value ” > 滾動文字 </marquee>示例:8.5滾動循環(huán)屬性Loop基本語法： <marquee loop= ” value ” > 滾動文字 </marquee>示例:8.6滾動圍屬性Width、Height基本語法： <marquee width= ” value ” height= ” value ” >滾動文字 </marquee>示例:8.7滾動背景屬性BgColor基本語法： <marquee bgcolor= ” color_value ” &g

15、t; 滾動文字 </marquee>示例:第九節(jié)嵌入多媒體容在頁面中可以放置 mp3電影、swf動畫等多種多媒體容。基本語法： <embed src= ” file_url ” width= ” value ” height= ” value ” >滾動文 字 </embed>示例:第十節(jié)嵌入背景音樂使用<bgsound>標(biāo)記可以嵌入多種格式的背景音樂，最常用的為mid格式的文件。基本語法： <bgsound src= ” file_url ” >示例:背景音樂循環(huán)次數(shù)屬性基本語法：<bgsound src=” file_url

16、”loop= ” value ”>基本語法：<bgsound src=” file_url”loop= ” infinite ” >示例:第一節(jié)使用表格表格是用于排列容的最佳手段，在html頁面中，絕大多數(shù)頁面都是使用表格進行排版。11.1表格相關(guān)標(biāo)記標(biāo)記描述<table></table>表格標(biāo)記<tr></tr>行標(biāo)記<td></td>單元格標(biāo)記<capti on></captio n>表格標(biāo)題標(biāo)記<th></th>表格表頭標(biāo)記示例：制作一個三行兩列的表格

17、11.2表格標(biāo)記屬性設(shè)置<table>屬性描述border設(shè)置表格邊框線寬度width、height設(shè)置表格的寬度和高度bordercolor設(shè)置表格邊框顏色borderlight設(shè)置表格亮邊框顏色（左上邊框顏色）bordercolordark設(shè)置表格暗邊框顏色（右下邊框顏色）bgcolor設(shè)置表格背景顏色backgro und設(shè)置表格背景圖片alig n設(shè)置表格對齊方式cellspaci ng設(shè)置表格單元格和單元格之間的距離cellpaddi ng設(shè)置單元格容和邊框之間的距離示例11.3表格標(biāo)題標(biāo)記<caption>在html過在<table>標(biāo)記中使用&

18、lt;caption> </caption> 標(biāo)記為表格添加標(biāo)題，而且可以控制標(biāo)題文字的排列屬性?；菊Z法：<table><capti on > </capti on></table>屬性描述alig n設(shè)置標(biāo)題文字的水平對齊方式（left、center、right ） lvalig n設(shè)置標(biāo)題文字的垂直對齊方式（top、bottom ）示例11.4表格表頭標(biāo)記<th>表頭指的是表格的第一行，在html過在<table>標(biāo)記中使用<th></th>標(biāo)記為表格設(shè)置表頭，表頭中的文字可

19、以實現(xiàn)居中并且加粗顯示。基本語法：<table><tr><th> </th></tr><tr><td> </td></tr></table>示例11.5行標(biāo)記屬性設(shè)置<tr>屬性描述bordercolor設(shè)置行的邊框顏色borderlight設(shè)置行的亮邊框顏色（左上邊框顏色）bordercolordark設(shè)置行的暗邊框顏色（右下邊框顏色）bgcolor設(shè)置行的背景顏色backgro und設(shè)置行的背景圖片alig n設(shè)置行容水平對齊方式valig n設(shè)置行容垂直對

20、齊方式示例11.6單元格屬性設(shè)置 <td>、<th>屬性描述alig n設(shè)置單兀格容水平對齊方式valig n設(shè)置單兀格容垂直對齊方式width、height設(shè)置單元格的寬度和高度bgcolor設(shè)置單兀格背景顏色backgro und設(shè)置單元格背景圖片bordercolor設(shè)置單元格邊框顏色borderlight設(shè)置單元格亮邊框顏色（左上邊框顏色）bordercolordark設(shè)置單兀格暗邊框顏色（右下邊框顏色）示例11.7 跨行屬性 <rowspan>在復(fù)雜的表格結(jié)構(gòu)中，有的單元格在水平方向上是跨多個單元格的，這就需要使用 跨行屬性rowspan。基本語法

21、：語法解釋：<td rowspan= ” value ” > value代表單元格跨的行數(shù)。11.8 跨列屬性 <colspan>在復(fù)雜的表格結(jié)構(gòu)中，有的單元格在垂直方向上是跨多個單元格的，這就需要使用 跨列屬性colspan?；菊Z法：語法解釋：<td colspan= ” value ” >value代表單元格跨的列數(shù)。示例11.9表格嵌套（重點）示例第十二節(jié)建立超超是網(wǎng)頁頁面中最重要的元素之一，一個是由多個頁面組成的， 頁面之間依據(jù)確定相互的導(dǎo)航關(guān)系。12.1標(biāo)記雖然在設(shè)計中占有不可替代的地位，但是其標(biāo)記只有一個，那就是a標(biāo)記。標(biāo)記具有如下屬性：屬性描

22、述href指定地址n ame給命名title提示文字target指定的目標(biāo)窗口12.2關(guān)于路徑路徑類型描述絕對路徑.sin a.c n相對路徑1、要到冋一目錄下的文件時，只需要輸入要文 件的名稱2、要到下一級目錄中的文件，只需要先輸入目 錄名，然后加“ /”，再輸入文件名3、 要到上一級目錄中的文件，則先輸入“./ ”， 再輸入目錄名、文件名根路徑以“/”開頭，代表根目錄，再輸入目錄名、文件名示例12.3 部所謂部，是指在同一部，不同html頁面之間的關(guān)系。基本語法：<a href= ” file_url ” target= ” value ” >文字 </a>示例ta

23、rget 屬性描述pare nt在上一級窗口中打開，經(jīng)常使用于分幀的框架頁bla nk在新窗口中打開self在同一個窗口中打開，默認設(shè)置top在瀏覽器的整個窗口中打開，忽略任何框架12.4書簽建立書簽，分為兩步：一是建立書簽，二是為書簽建立。基本語法:<a name = ” bookmark_name” >書簽文字 </a><a href =<a href =#bookmark_name” > 文字 </a> file_url#bookmark_name ” > 文字 </a>示例target 屬性描述pare nt在上一

24、級窗口中打開，經(jīng)常使用于分幀的框架頁_bla nk在新窗口中打開self在同一個窗口中打開，默認設(shè)置top在瀏覽器的整個窗口中打開，忽略任何框架12.5外部服務(wù)url格式描述到外部ftpftp:/到文件傳輸服務(wù)器mailto:啟動所謂外部，是指跳轉(zhuǎn)到當(dāng)前外部，和其他中的頁面或者其他元素之間的關(guān)系?；菊Z法：<a href =” >文字</a><a href =” ftp:/ ” >文字 </a><a href =” mailto: ” >文字 </a>第十二節(jié)建立頁面表單Html 表單是html頁面與瀏覽器實現(xiàn)交互的主要手

25、段，利用表單可以收集客戶端提交 的有關(guān)信息。表單是實現(xiàn)交互功能的重要組成部分。13.1表單標(biāo)記<form>基本語法： <form name= ” form name” method= ” method ” action=url ” ></form>屬性描述Name表單的名稱Method定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，post一般有兩種：get、Actio n用來定義表單處理程序在<form>標(biāo)記中，可以包含以下四個標(biāo)記:標(biāo)記描述<i nput>表單輸入標(biāo)記<select>菜單和列表標(biāo)記<opti on>

26、菜單和列表項目標(biāo)記<textarea>文本域標(biāo)記13.2輸入標(biāo)記<input>輸入標(biāo)記<input>是表單中最常用的標(biāo)記之一，常用的文本域、按鈕等都使用這個筆記。基本語法：<form><input name=” field_name ” type= ” type_name ” ></form>屬性描述Name域的名稱Type域的類型在type屬性中，可以包含以下屬性值:Type屬性值描述Text文字域Password密碼域File文件域Checkbox復(fù)選框Radio單選框Button普通按鈕Submit提交按鈕Reset

27、HiddenImage重置按鈕隱藏域圖像域（圖像提交按鈕）13.3文字域text在文字域中可以輸入任何類型的文本、數(shù)字或字母，輸入容以單行顯示?；菊Z法：<input type=” text ” name=” field_name ” maxlength= ” valuesize= ” value ” value= ” field_value ” >屬性描述Name文字域的名稱Maxle ngth文字域最大輸入字符數(shù)Size文字域的寬度Value文字域的默認值13.4 密碼域 password在密碼域中可以輸入的文字以“ * ”星號顯示?；菊Z法：<input type= ”

28、 password ” name=” field_name ” maxlength= ” value size= ” value ” >13.5文件域file可以通過文件域上傳文件?；菊Z法：<input type= ” file ” name=” field_name ” >13.6 復(fù)選框 checkbox基本語法：<inputtype= ” checkbox ”name=' field_name ”checkedvalue= ” value ” >語法注釋：checked表示此項被默認選中；value表示選中項目后提交給服務(wù)器端的值。13.7單選框r

29、adio基本語法：<input type= ” radio ” name=” field_name ” checked value= ” value ” >語法注釋：checked表示此項被默認選中；value表示選中項目后提交給服務(wù)器端的值。13.8普通按鈕button基本語法：<in put type= ” butt on ” n ame= ” field_ name ” value= ” butt on _text ” >語法注釋：value表示表示顯示在按鈕上的文字。13.9提交按鈕submit單擊提交按鈕后，可以實現(xiàn)表單容的提交?；菊Z法：<in put

30、 type= ” submit ” n ame= ” field_ name ” value= ” butt on _text ” >13.10重置按鈕reset單擊重置按鈕后，可以清除表單的容，恢復(fù)成默認的表單容設(shè)定?；菊Z法：<in put type= ” reset ” n ame= ” field_ name ” value= ” butt on _text ” >13.11 圖像域 image圖像域是指可以用于提交按鈕位置上的圖片，這幅圖片具有按鈕功能?；菊Z法：<input type= ” image ” name= ” field_name ” src=

31、” image_url ” >13.12 隱藏域 hidden隱藏域在頁面中對于用戶是不可見的?；菊Z法：<input type= ” hidden ” name= ” field_name ” value= ” value ” >13.13菜單和列表標(biāo)記 <select>voption>基本語法:vselect name= ” name"size= ” valuemultiple>vopti on value=value ” selected>voption value= ”' value ” >v/select>

32、屬性描述Name菜單或列表名稱Multiple列表中的項目多選Size顯示的選項數(shù)目Value選項值Selected默認選項13.14文本域標(biāo)記 vtextarea >制作多行的文字域?；菊Z法:vtextareaname=' namW'rows=” value ”cols= ” valuevalue= ” value ” ></textarea>屬性描述Name文本域名稱Rows文本域的行數(shù)Cols文本域的列數(shù)Value文本域的默認值第十四節(jié)元信息標(biāo)記元信息標(biāo)記<meta>的功能是定義頁面中的信息，這些文件信息不會出現(xiàn)在網(wǎng)頁的顯示之中，只會

33、出現(xiàn)在原源代碼中。通過<meta>標(biāo)記的屬性可以提供頁面的關(guān)鍵字、作者、描述等多種信息。屬性描述http-equiv生成一個http標(biāo)題域Name元信息關(guān)鍵字Content關(guān)鍵字取值容14.1設(shè)定關(guān)鍵字關(guān)鍵字是為搜索引擎提供的，關(guān)鍵字之間用逗號隔開?；菊Z法：<meta name=” keywords ” content= ” value ” >14.2設(shè)定描述用以描述的主題，供搜索引擎尋找網(wǎng)頁?；菊Z法：<meta name=” discription ” content= ” value ” >14.3設(shè)定作者用以顯示頁面作者及個人信息?；菊Z法：<

34、;meta name=” author ” content=value ” >14.4設(shè)定字符集基本語法：<metahttp-equiv= ” content-typecontent= ” text/html;charset=value ” >將Charset設(shè)置為gb2312時，頁面字符集為簡體中文。14.5設(shè)定自動刷新基本語法：<meta http-equiv= ” refresh ” content= ” value ” > value為頁面刷新間隔秒數(shù)。14.6設(shè)定自動跳轉(zhuǎn)基本語法：<meta http-equiv= ” refresh ” cont

35、ent= ” value;url=url_value ” > value為頁面跳轉(zhuǎn)間隔秒數(shù)；url_value 為頁面跳轉(zhuǎn)后打開的文件地址。第十五節(jié)CSS樣式表概述15.1什么是CSSCSS( cascad ing style sheets )中文翻譯為"層疊樣式表”，簡稱樣式表。CSS可以彌補html對網(wǎng)頁格式化功能的不足，比如段落間距、行距；字體變化和大小; 頁面格式的動態(tài)更新；排版定位等。15.2 css 基本語法css樣式主要由三部分組成選擇器selector屬性名property屬性值value示例P fon t-size:25p x; color:bla nk15.3 css 的三種寫法嵌樣式(inline style )部樣式表(internal style sheet ) 外部樣式表(external style sheet )嵌樣式 inline style以屬性的形式直接在html標(biāo)記中給出，用于設(shè)置該標(biāo)記所定

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論