網(wǎng)頁設(shè)計與制作(代碼介紹)參考模板_第1頁
網(wǎng)頁設(shè)計與制作(代碼介紹)參考模板_第2頁
網(wǎng)頁設(shè)計與制作(代碼介紹)參考模板_第3頁
網(wǎng)頁設(shè)計與制作(代碼介紹)參考模板_第4頁
網(wǎng)頁設(shè)計與制作(代碼介紹)參考模板_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、網(wǎng)頁設(shè)計與制作一、HTML基本語言：1.HTML基本語法：（如圖）<html>.</html>:表示HTML文檔的開始和結(jié)束<head></head>:表示HTML文檔的頭部。最常用的標(biāo)記是<title></title>,<title>標(biāo)記中的內(nèi)容對應(yīng)瀏覽窗口標(biāo)題的信息。<body></dody>：<body>標(biāo)記之內(nèi)的內(nèi)容對應(yīng)的是瀏覽器中的內(nèi)容。2.<body>標(biāo)記的使用：（如圖）Bgcolor="顏色":設(shè)置頁面背景色。Background

2、="圖像文件的名字及路徑"：設(shè)置背景文件。Text="顏色"：設(shè)置頁面文字默認(rèn)顏色。標(biāo)記屬性用來對標(biāo)記之間的內(nèi)容修飾，標(biāo)記其屬性必須放到“< >”中，各屬性間必須用空格隔開。色彩的表示方法有兩各種：1.RGB 模式，用16進(jìn)制的紅(Red)、綠(Green)、藍(lán)(Blue)的值來表示，格式為“#RRGGBB”，字符包括數(shù)字09和字母AF，如紅色為“#FF0000”2.用英文單詞表示彩色，如紅色“red”。二、常用的HTML標(biāo)記及其屬性制作網(wǎng)頁.以下標(biāo)記都出現(xiàn)在<body>中出現(xiàn),標(biāo)記必須以成對出現(xiàn)，如<body&g

3、t;.</dody>.：1.頁面屬性、排版標(biāo)志.標(biāo)題標(biāo)記： 格式：<h#>.<h#>, 其中“#”的取值范國為1（字體最大）6（字體最?。?。 作用：設(shè)置文檔的各級標(biāo)題。 常見屬性：align,用于定義標(biāo)題的對齊方式，默認(rèn)為左對齊，標(biāo)題標(biāo)記屬性：（如表）1 / 9值表示的對方試示例left左對齊<h1 align="left">文字內(nèi)容<h1>right右對齊<h1 align="right">文字內(nèi)容<h1>center居中對齊<h1 align="cen

4、ter">文字內(nèi)容<h1>.版面格式標(biāo)記.分段與換行：（如表）標(biāo)記名稱格式作用段落標(biāo)記<p>.</p>或者<p>使標(biāo)記后面的內(nèi)容另起一段。常用屬性：align,用于定義段落的對齊方式，與標(biāo)題標(biāo)記類似換行標(biāo)記.<br>使標(biāo)記后面的文字內(nèi)容換行顯示.文本對齊標(biāo)記可以在<p>標(biāo)記中使用align屬性指定文本對齊方式。另外，居中對齊可以通過居中對齊方式進(jìn)行設(shè)置。格式：<center><center>作用：使標(biāo)記間的內(nèi)容以居中對齊方式顯示。.水平線標(biāo)記 格式：<hr>作用：在文檔中

5、插入水平線。屬性名稱屬性含義示例align定義水平線的對齊方式，默認(rèn)為“center”右對齊水平線:<hr align="right">color定義水平線的顏色綠色水平線：<hr color="green">noshade定義水平線為無陰影無陰影水平線：<hr noshade color="green">size定義水平線的寬度，單位默認(rèn)為像素寬度為4像素的水平線:<hr size="4">width定義水平線的長度，單位為像素或百分比（相于頁面寬度）占頁面寬度80

6、%的水平線：<hr width="80%">常用水平線標(biāo)記屬性：（如表）.字體標(biāo)記 格式：<font></font>作用：設(shè)置標(biāo)記間文體的字體、大小、顏色等。常用字體標(biāo)記屬性：（如表）屬性名稱屬性含義示例face設(shè)置標(biāo)記間文本的字體<font face="隸書">文字內(nèi)容</font>size設(shè)置標(biāo)記間文本的大小，取值范圍為17<font size="2">文字內(nèi)容</font>color設(shè)置標(biāo)記間文本的顏色<font color="r

7、ed">文字內(nèi)容</font>title設(shè)置鼠標(biāo)指向文本時，出現(xiàn)的提示信息<font title="信息">文字內(nèi)容</font>.字體修飾標(biāo)記作用：設(shè)置標(biāo)記間文本的樣式，如粗體、斜體、下劃線等。字體修飾標(biāo)記（如表）功能格式粗體<b>.</b>或者<strong>.</strong>斜體<i>.</i>下劃線<u>.</u>上標(biāo)<sup>.</sup>下標(biāo)<sub>.<sub>刪除

8、線<s>.</s>或者<strike>.</strike>大字體<big>.</big>小字體<small>.</small>.特殊字符作用：在頁面上顯示特殊符號。字符名稱顯示結(jié)果&nbsp;空格&lt;<（小于號）&gt;>(大于號)&quot;"(雙引號)&copy;©&reg;®&times;×（乘號）特殊字符（如表）項目符號標(biāo)記作用：在HTML頁面中，合理地使用列表標(biāo)記，可以起提綱和格

9、式排序文作用。列表分為無序列表和有序列表兩類無序列表的主要標(biāo)記為<ul>和<li>.作用：生成沒有編號的列表，每一個列表前使用<li>標(biāo)簽區(qū)分。（格式如右）<ul>標(biāo)記的主要屬性為type（如表）值代表disc實心加點（默認(rèn)）circle空心圓square實心小方塊。注意：項目符號標(biāo)記在網(wǎng)頁中的應(yīng)用比較廣泛，它能清楚地標(biāo)注文本的層次結(jié)構(gòu)，使用戶瀏覽網(wǎng)頁時能對該網(wǎng)頁的架構(gòu)一目了然。其中，項目符號標(biāo)記使用<ul></ul>時，必須是成對出現(xiàn)的，并且其中，項目插入多對<li><li>列表項標(biāo)記組成完整的列

10、表。例：結(jié)果圖為：2.超鏈接標(biāo)記 格式：<a>.</a> 作用：把當(dāng)前位置的文本或圖像連接到其他的頁面、文本或圖像。常用超鏈接標(biāo)記屬性（如表）屬性名稱屬性含義示例href指定鏈接的目標(biāo)地址，可以是站內(nèi)的文件，也可以某個網(wǎng)站<a href="a.html">.</a><a href="">.<a>target指定鏈接的目標(biāo)窗口，其值是一個窗口的名稱，也可以是_blank、_parent、_self、_top,默認(rèn)為_self<a href="a.html" t

11、arget="_blank”.</a>title鼠標(biāo)指向鏈接時，所顯示的信息<a href="a.html" title="信息".</a>target屬性target取值作用_blank在新窗口中打開_parent在上一級窗口中打開_self在當(dāng)前窗口中打開，此項為默認(rèn)值_top在瀏覽器的整個窗口中打開，忽略任何框架絕對路徑與相對路徑：在網(wǎng)頁文檔中引用一個文件時，需要給出該文件的路徑，這個可以是網(wǎng)絡(luò)資源，也可以是本地計算機上的文件資源。HTML有兩種路徑：絕對路徑與相對路徑。 1.絕對路徑：從協(xié)議開始的URL地址

12、或從驅(qū)動名稱開始的本地文件路徑都稱為絕對路徑。如或d:11.html 2.相對路徑：從文件存儲位置開始的路徑叫相對路徑。 在描述相對路徑時，需要注意：.如果源文件和引用的文件在同一級目錄里，直接寫引用文件名即可。.“./”表示源文件所在目錄的上一級，“././”表示源文件所在目錄的上上級目錄，以此類推。.引用下級的文件，直接寫下級目錄文件的路徑即可。例如，站點文件夾中有主頁文件index.html和圖像文件夾images,index.html文件中使用了images文件夾中的01.jpg圖像文件，那么圖像01.jpg相對于index.html的相對路徑就是imges01.jpg 3.圖像標(biāo)記格

13、式：<img>作用：在頁面中插入圖像或視頻文件，圖像格式可以是：GIF、JPG、PNG。常用圖像標(biāo)記屬性（如表）屬性名稱屬性含義示例src指定插入圖像名稱或路徑<img src="a.gif">或者<img src="imagesa.gif">alt替換文本，當(dāng)瀏覽器不能顯示圖像時、在鼠標(biāo)指向圖像時、或圖像加載時間過長時，所要顯示的文本 使標(biāo)記后面的文字進(jìn)行換行顯示width指定圖像寬度，單位是像素<img src= "imagesa.gif " width= "100 "

14、 height= "200 ">height指定圖像高度，單位是像素border指定圖像邊框，默認(rèn)為0hspace指定圖像左右兩側(cè)與其他對象（如文本）之間的距離，單位為對象<img src= "imagesa.gif " hspace= "30 " vspace= "20 "vspace指定圖像上下兩端與其他對象（如文本）之間的距離，單位為像素align指定圖像與文本的對齊方式，取值有：top、middle、bottom、left、right。當(dāng)取值為left、right時，可以實現(xiàn)圖像文字左右繞排的效

15、果<img src= "imagesa.jpg " align= "left "> 4.表格標(biāo)記 表格的幾種標(biāo)記 作用表格是最基本的網(wǎng)頁布局的技術(shù)表格的主要標(biāo)記（如表）標(biāo)記描述<table>.</table>表示整個表格的開始、結(jié)束<caption>.</caption>用來設(shè)置整個表格的名稱，表格中可不用此標(biāo)記<tr>.</tr>代表表格中一行<td>.<td>代表單個普通的單元格，此標(biāo)記必須放在一對<tr>標(biāo)記內(nèi)<th>

16、.</th>用于定義表頭單元格，單元格中的文字將以粗體顯示，此標(biāo)簽必須放在一對<tr>標(biāo)記內(nèi)，在表格中也可以不用此標(biāo)記格式（如圖）<table>標(biāo)記的主要屬性（如表）屬性名稱屬性含義border表格邊框的寬度（以像素為單位）；若不設(shè)置此屬性，則邊框的寬度默認(rèn)為0，即不顯示邊框bordercolor表格邊框顏色background設(shè)置表格的背景圖像bgcolor設(shè)置表格的背景顏色width表格寬度；其值可用像素表示，也可用占窗口的百分比表示height表格高度；其值 可用像素表示，也可用占窗口的百分比表示align表格在頁面的水平位置；取值為：left、rig

17、ht、center;默認(rèn)為在對齊cellspacing單元格之間的間距；其值可用像素來表示cellpadding單元格內(nèi)容與單元格邊界之間的距離;其值可用像素來表示<tr>標(biāo)記屬性屬性名稱屬性含義align行內(nèi)容的水平對齊方式；取值為：left、right、center；默認(rèn)為左對齊valign行內(nèi)容的垂垂直對齊方式；取值為：top、middle、bottom；默認(rèn)為局中對齊height行高；其值可用像素或表格高度百分比表示title鼠標(biāo)指向該行時，顯示的指示信息bgcolor行的背景顏色bordercolor行的邊框顏色nowrap本行所有單元格內(nèi)容不能自動換行<td>

18、;和<th>標(biāo)記主要屬性屬性名稱屬性含義align單元格內(nèi)容的水平對齊方式；取值為：left、right、center；默認(rèn)為左對齊（若與<tr>標(biāo)簽的屬性沖突時，以單元格自身的設(shè)置為主valign單元格內(nèi)容的垂直對齊方式；取值為：top、middle、bottom;默認(rèn)為垂直居中（若與<tr>標(biāo)簽的屬性沖突時，以單元格自身的設(shè)置為主）（續(xù)表）屬性名稱屬性含義width單元格的寬度，可用像素值或表格寬度的百分比來表示height單元格的高度，可用像素值或表格高度的百分比來表示bgcolor單元格的背景顏色bordercolor單元格的邊框顏色nowrap單元

19、格內(nèi)容不能自動換行rowspan單元格所占的行數(shù)colspan單元格據(jù)占的列數(shù)合并單元格若需要建立不規(guī)則表格，就要用到<td>標(biāo)記的rowspan屬性和colspan屬性來合并單元格。如實現(xiàn)下圖到下圖的轉(zhuǎn)化。進(jìn)行單元格合并時，需要遵循如下幾條原則：.整個表格中，每行的列數(shù)要相同。.若某個單元格中，設(shè)置了屬性colspan="2"，表示該單元格在橫向占據(jù)了兩個單元格的位置，所以，在當(dāng)前行<tr>中，就需要少寫一個<tr>標(biāo)簽（如B3單元格）.依此類推，若設(shè)置了屬性colspan="3",當(dāng)前行<tr>中，就需

20、要少寫兩個<td>標(biāo)簽（如C2單元格）。.若某個單元格中，設(shè)置了屬性rowspan="2",表示該單元格在縱向占據(jù)了兩個單元格的位置，所以，在下一個<tr>中，該列處就需要少寫一個<td>標(biāo)簽（如A2單元格）。若設(shè)置了屬性rowspan="3"在下兩行<tr>中，該列處都需要少一個<td>s標(biāo)簽，依此類推。合并后的表格代碼為：5.框架標(biāo)記 框架的主要標(biāo)記有：<frameset>和<frame>,分別表示整個框架和單個框架。 框架集標(biāo)記<frameset>的幾種常用屬性有cols、rows、frameborder.cols:創(chuàng)建縱向分割框架時，通過該屬性指定各框架的列寬，取值可以是“像素”和“%”，分割左右窗口，用“*”表示剩余部分。rows:創(chuàng)建橫向分割

溫馨提示

  • 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

提交評論