2-HTML網(wǎng)頁設(shè)計基礎(chǔ)_第1頁
2-HTML網(wǎng)頁設(shè)計基礎(chǔ)_第2頁
2-HTML網(wǎng)頁設(shè)計基礎(chǔ)_第3頁
2-HTML網(wǎng)頁設(shè)計基礎(chǔ)_第4頁
2-HTML網(wǎng)頁設(shè)計基礎(chǔ)_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTML網(wǎng)頁設(shè)計基礎(chǔ)HTML語言簡介HTML-HyperTextMakeupLanguage超文本標(biāo)記語言，是Web信息的描述語言。Web上大部分網(wǎng)頁都是HTML格式的文檔。HTML文檔的擴(kuò)展名是htm或html，是由HTML命令組成的純文本文件。HTML語言特征超文本（可說明文字、圖片、表格、音視頻、鏈接等）標(biāo)記語言（瀏覽器根據(jù)標(biāo)記顯示內(nèi)容）專用于在Web上傳遞信息是寫給瀏覽器的語言，由瀏覽器解釋并顯示編輯與運(yùn)行環(huán)境運(yùn)行環(huán)境直接運(yùn)行在Web瀏覽器上編輯環(huán)境記事本網(wǎng)頁設(shè)計三劍客：DreamweaverFireworksFlash基本語法結(jié)構(gòu)及文件結(jié)構(gòu)基本語法結(jié)構(gòu)：一個HTML文件是由一系列的元素和標(biāo)簽組成。文件的基本結(jié)構(gòu)：<html>//文件開始

<head>//文件頭

<title>網(wǎng)頁標(biāo)題</title>//網(wǎng)頁標(biāo)題

</head>//文件頭

<body>//文件體網(wǎng)頁正文

</body>//文件體</html>//文件結(jié)束HTML書寫注意事項“<”

和“>”是所有標(biāo)記的開始和結(jié)束，要成對出現(xiàn)。標(biāo)簽和標(biāo)簽之間是可以互相嵌套的。在源代碼中不區(qū)分大小寫?；剀囨I和空格鍵在源代碼中不起作用。屬性值可以直接書寫。源代碼中以“<!--”開始，以“-->”結(jié)束的代碼為注釋代碼。一個簡單的HTML實例網(wǎng)頁的文字顏色屬性text<bodytext=顏色值>網(wǎng)頁背景顏色屬性bgcolor<bodybgcolor=顏色值>網(wǎng)頁背景圖屬性background<bodybackground=背景圖片所在文件位置>鏈接文字顏色屬性link,vlink,alink<bodylink=顏色alink=顏色vlink=顏色>上邊距屬性topmargin<bodytopmargin=值>左邊距屬性leftmargin<bodyleftmargin=值>示例代碼如下：

一個簡單的HTML實例<html><head> <title>歡迎來到我的個人網(wǎng)頁</title></head><bodytext="red"background=bg.jpgleftmargin=10topmargin=10> <center>歡迎來到我的站點</center></body></html>示例代碼執(zhí)行結(jié)果如下：

一個簡單的HTML實例<html>標(biāo)簽<html>標(biāo)簽是HTML文檔標(biāo)識符，它成對出現(xiàn)。首標(biāo)簽<html>和尾標(biāo)簽</html>分為位于文檔的開頭和結(jié)尾處，用來表明這是一個HTML文檔。雖然常用的Web瀏覽器可以自動識別HTML文檔，不需要這個標(biāo)簽，但是為了保持文檔的完備性，最好保留這個標(biāo)簽。<head>標(biāo)簽及其中的常用標(biāo)簽<head>元素出現(xiàn)在文檔的開頭部分。<head>與</head>之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。<title>文字</title>“文字”將顯示在瀏覽器標(biāo)題欄上<meta>：用于設(shè)置一些頭信息<metahttp-equiv=“content-type”content=“text/html;charset=gb2312”><style>…</style>（見本課程CSS部分）定義CSS格式<Scriptlanguage="...">…</Script>（見本課程JavaScript部分）用于定義腳本，比如JavaScript<body>標(biāo)簽在<body>標(biāo)簽中可以規(guī)定整個文檔的一些基本屬性<bodybgcolor=text=link=alink=vlink=....

>bgcolor---背景色彩text---非可鏈接文字的色彩link---可鏈接文字的色彩alink---正被點擊的可鏈接文字的色彩vlink---已經(jīng)點擊(訪問)過的可鏈接文字的色彩background---背景圖片leftmargin---左邊距topmargin---上邊距文字編排標(biāo)簽換行標(biāo)簽<br>分段控制標(biāo)簽<p>屬性有align,其屬性可選值：right,left,center.例如：<palign="center">此段居中顯示</p>居中對齊標(biāo)簽<center>是一個雙標(biāo)簽，其作用是進(jìn)行居中控制。例如：<center>居中文字</center>水平分隔線標(biāo)簽<hr>是一個單標(biāo)簽，其作用是在標(biāo)簽所在位置插入一條水平線，用以分割頁面中的不同部分.屬性有：align,size,width,color,noshade例如：<hralign="center"size="6"color="blue"width="60%"noshade>插入特殊符號HTML常見特殊字符及其代碼表特殊或?qū)Ｓ米址麛?shù)字代碼字符代碼<<<>>>&&&“""!!?©©：;?®®空格

標(biāo)簽小總結(jié)換行標(biāo)簽<br>分段控制標(biāo)簽<p>居中對齊標(biāo)簽<center>水平分隔線標(biāo)簽<hr>插入特殊符號文字編排小例子頁面顯示效果：文字編排小例子例子代碼：<html><head><title>例2-1</title></head><body><center><p>要<br>在一段<br>里<br>換行<br>請使用<br>br這個Tag</p><p>用hr這個Tag可以在HTML文件里加一條橫線。</p><hrsize="6"color="blue"width="60%"noshade><p>村婦想像皇宮的生活：皇后得用金扁擔(dān)挑水吧。</p><p>設(shè)計 ©</p></center></body></html>文字美化工作字體設(shè)置文字修飾列表與項目符號標(biāo)題字體<h#>…</h#>#=1、2、3、4、5、6按標(biāo)題級別用黑體字顯示標(biāo)題內(nèi)容，并自動插入空行<h1>最大，<h6>最小<h1>最大字體</h1>

<h2>

...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>最小字體</h6>

<hn>---</hn>這些標(biāo)記自動插入一個空行，不必用<p>標(biāo)記再加空行。因此在一行中無法使用不同大小的字體。字體設(shè)置<fontface=...size=...color=...>…</font>face定義字體絕對字號size1234567實際8101214182436（pixels）相對字號<fontsize=“+1”><fontsize=“-1”>Color可以使用預(yù)定義的名字,也可以使用數(shù)字red、blue、black…文字修飾比較常用的文字修飾標(biāo)簽標(biāo)簽顯示效果粗體字<b></b>文字將以粗體的方式顯示斜體字<i></i>文字將以斜體的方式顯示加下劃線<u></u>文字將以加下劃線的方式顯示刪除線<s></s>文字將以加刪除線的方式顯示放大<big></big>將文字以放大字體的方式顯示縮小<small></small>將文字以縮小字體的方式顯示上標(biāo)<sup></sup>將文字以上標(biāo)字體的方式顯示下標(biāo)<sub></sub>將文字以下標(biāo)字體的方式顯示列表無序列表<ul

type=...><li>...</ul>屬性type用來指定控制符號，取值：disc,circle,square<ultype="Square">

<li>列表項1<li>列表項2

</ul>有序列表<oltype=值1start=值2><li>...</ol>屬性start設(shè)定列表的符號從第幾項開始屬性type設(shè)定符號類型，屬性值有1,A,a,i,I等<oltype="a"start=2>

<li>列表項1

<li>列表項2

</ol>列表項1列表項2b.列表項1c.列表項2標(biāo)簽小總結(jié)標(biāo)題文字標(biāo)簽<hn>文字格式控制標(biāo)簽<font>文字修飾標(biāo)簽無序列表標(biāo)簽<ul>有序列表標(biāo)簽<ol>文字美化小例子用瀏覽器打開例子如圖所示：文字美化小例子此例子的代碼如下：<html><head><title>例2-2</title></head><body><h2align="center">這是標(biāo)題</h2><p><b><fontsize="3"color="#FF0000"face="arial">

這段文字的字體大小值為3。</font></b></p><h4>Type設(shè)為disc的列表，列表項前面的符號是圓黑點：</h4><ultype="disc"> <li>網(wǎng)頁課程</li> <li>網(wǎng)頁代碼</li> <li>魔獸世界</li></ul>

文字美化小例子此例子的代碼(續(xù)）：<h4>一個排序列表(OrderedList)：</h4><ol> <li>網(wǎng)頁課程</li> <li>網(wǎng)頁代碼</li> <li>魔獸世界</li></ol></body></html><h4>一個排序列表(OrderedList)：</h4><ol> <li>網(wǎng)頁課程</li> <li>網(wǎng)頁代碼</li> <li>魔獸世界</li></ol></body></html>插入圖像圖像插入尺寸定位文字說明圖像邊框圖像布局插入圖像插入圖像標(biāo)簽<img>是一個單標(biāo)簽.語法格式為：<imgsrc=參數(shù)值alt=參數(shù)值border=參數(shù)值align=參數(shù)值height=參數(shù)值width=參數(shù)值vspace=參數(shù)值hspace=參數(shù)值><img>的屬性說明：src：指定圖像的URLalt：設(shè)定圖形的替代文字將鼠標(biāo)懸停在圖片上時，會出現(xiàn)提示性的文字。當(dāng)瀏覽器不能顯示所指定的圖片時，則顯示一段說明該圖片的文字，代替圖文件。例：<imgsrc=yl.jpgalt=原理圖>height/width：圖形高度與寬度以像素作單位，也可以是百分比作單位。若<img>沒有設(shè)置height/width屬性，網(wǎng)頁中將以圖片原始尺寸顯示。例：<imgsrc=xp.jpgwidth=20%

溫馨提示

  • 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

提交評論