版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
1、HTML超文本標記語言,一種規(guī)范預定義,已經(jīng)定義好的各種標記,只需要我們把對應的標記放到合適的位置一. HTML 基本語法與基本結構(重點)標記的使用1、標記一般成對出現(xiàn),包含開始標記和結束標記2、標記可以嵌套使用,但是不能交叉使用3、標記不區(qū)分大小寫 屬性的使用(屬性控制內容的格式,額外的格式)1、書寫位置在開始標記中2、格式:屬性名 =“屬性值”,多個屬性之間使用空格分割3、不同的標記屬性可能相同也可能不同4、屬性使用的標記中,只能對本標中的內容記產(chǎn)生影響5、屬性不沖突時,效果疊加,屬性沖突時,就近原則html 的基本結構<html>聲明網(wǎng)頁<head>網(wǎng)頁的頭部信
2、息<title>標題</title>-網(wǎng)頁的標題</head><body>網(wǎng)頁的主體,網(wǎng)頁內容主要展示的部分網(wǎng)頁的主要內容</body></html>二 . 文本格式的應用1、標題標記 <hn> ,n 的取值 1-6,1 級標題最大效果:加粗顯示,帶有自動換行屬性: align 控制標題的對齊方式,取值 left (左對齊,默認值) | center (居中) | right (右對齊)2、段落標記 <p>效果:把內容分段展示,自動換行屬性:align,控制段落內容的對齊方式,取值left (左對齊
3、,默認值)|center (居中) |right (右對齊)3、換行符 <br />,單標記,不需要結束標記,換行但不分段空格符號:  ;表示一個空格強制換行符 : <br />4、水平線標記 <HR /> ,單標記效果:水平線,默認是一個粗細為 2px (像素)的線條屬性: size 控制水平線的粗細,取值為整數(shù),單位為像素(px)width 控制水平線的長度,取值可以是像素單位,也可以是百分數(shù)(相對于 瀏覽器窗口百分比)noshade 設置水平線不帶有陰影,該屬性不需要取值color 設置水平線的顏色,取值可以是英文的顏色值,也可以是十六
4、進制的 顏色代碼align 控制水平線的對齊方式,取值left(左對齊)|center (居中,默認值)|right(右對齊)5、分節(jié)標記 <div>效果:把內容設置為一節(jié),前后帶有自動換行屬性:align控制div中內容的對齊方式,取值 left (左對齊,默認值)|center (居 中)| right (右對齊)6、居中標記符 <center>效果:把 center 標記中的內容居中顯示7、文本控制標記 <font>效果:控制字體的各種顯示樣式屬性:size 控制字體的大小,取值為絕對值時,1-7,數(shù)字越大字體越大,取相對值時,參考的是默認字體 (3號
5、),取值在 -2-+4 之間color 控制字體的顏色face 控制字體的字體,取值可以是多個值,多個值之間使用逗號分割,取值 時從左往右依次取值,找到合適的值為止,假如都不支持,使用默認格式顯示8、字體的物理樣式加粗: <b>斜體: <i>下劃線: <u>刪除線: <s>上標: <sup>下標: <sub>1、常用邏輯字符<ADDRESS>網(wǎng)頁設計者或維護者的信息,通常顯示為斜體<CITE>表示文本屬于引用,通常顯示為斜體<CODE>? 表示程序代碼,通常顯示為固定寬度字體<DF
6、N>? 表示定義了的術語,通常顯示為黑體或斜體<EM>強調某些字詞,通常顯示為斜體<KBD>表用戶的鍵盤輸入,通常顯示為固定寬度字體<SAMP>表示文本樣本,通常顯示為固定寬度字體<STRONG>特別強調某些字詞,通常顯示為粗體<VAR>表示變量,通常顯示為斜體2、列表標記1、有序列表,ol,需要配合li標記使用一個li標記對應一個選項ol 的屬性: type 控制列表的符號樣式,取值 1|A|a|i|I ,默認是 1start控制列表的起始值,取值為任意的整數(shù)li 的屬性: type 控制選項自身的符號樣式,取值 1|A|a|
7、i|Ivalue 控制選項本身的起始值, 取值為任意整數(shù), 但是修改自身起始值之后,會對同一個列表中本選項之后的同級li標記產(chǎn)生影響2、無序列表,ul,配合li標記使用一個li標記對應一個選項ul的屬性:type控制所有選項的符號樣式,取值disc (實心圓,默認值)|circle (空心圓)|square (方塊)li 的屬性: type 控制選項本身的符號樣式li 標記用在 ol 中, type 屬性的取值跟 ol 的 type 屬性取值走,用在 ul 中,跟著ul 的 type 屬性取值走3、定義列表,Vdl>,完成對定義列表的聲明<dt>,術語標記,可以理解為類似于列
8、表選項的標題使用<dd>,描述標記,可以理解為類似于列表的選項使用三. 在網(wǎng)頁中使用圖片標記:<img>,單標記,不需要結束標記屬性: src引入圖片資源的路徑絕對路徑:資源在服務器上的位置,該位置是從盤符出發(fā)相對路徑:資源在服務器上的相對位置,從網(wǎng)頁本身出發(fā)返回上一層文件夾width 控制顯示圖片的寬度,取值為像素或者百分數(shù)height 控制顯示圖片的高度,取值為像素或者是百分數(shù)只設置寬度或高度時,圖片保持等比縮放,同時設置時,同時生效border 控制顯示圖片的邊框,取值為像素,默認不顯示邊框hspace 控制顯示圖片水平方向上的空白,取值為像素vspace 控制顯
9、示圖片垂直方向上的空白,取值為像素align 控制圖片和周圍文本的對齊方式垂直方向上 :top 文本和圖片頂部對齊bottom 文本底部和圖片底部對齊middle 文本的底部和圖片的中部對齊absmiddle 絕對中間對齊,文本的中部和圖片的中部對齊水平方向上: left 圖片在左,文本在右right 文本在左,圖片在右圖片的對齊方式:借助<div>或者vp>四 . 在網(wǎng)頁中使用超鏈接4、超鏈接標記:<a>v/a>,通過鏈接跳轉到新的資源屬性: href 鏈接的目標資源的路徑鏈接外部資源時,一定是絕對路徑,并且需要在路徑前加上【http:/ 】 這個網(wǎng)絡通信
10、協(xié)議target 指定超鏈接的打開方式, _self 在自身的頁面打開超鏈接 (默認的打開方式 ), _blank 重新打開一個新的瀏覽器窗口建立錨點(書簽)內部書簽1、 設置錨點的名稱例如:<a name="錨點名">.v/a>2、使用超鏈接完成跳轉 例如:va href="#錨點名">.</a>外部書簽1、 設置錨點的名稱例如:<a name="錨點名">.</a>2、使用超鏈接完成跳轉 例如:<a href二"錨點所在頁面的路徑#錨點名">
11、;.v/a>超鏈接發(fā)送電子郵件,格式<a href二"mailto:郵箱地址">發(fā)送郵件</a>2、鏈接多媒體五. 表格的應用表格的結構vtable>-聲明表格vcaption>.v/caption>-表格的標題vtr>表格的行<td></td>- 表格的列</tr><tr>表格的行<td></td>- 表格的列</tr></table>之間<table>標記,定義表格,所有表格的內容書寫在 <table&g
12、t;開始和</table>結束標記屬性: frame 控制表格最外層的四個邊框取值: void 默認值,不顯示邊框above 僅顯示上邊框below 僅顯示下邊框hsides 顯示上下邊框vsides 顯示左右邊框lhs 僅顯示左邊框rhs 僅顯示右邊框box、 border 顯示四個邊框rules 控制表格內部分割線取值: none 默認值,不顯示rows 顯示行分割線cols 顯示列分割線all 顯示所有分割線bordercolor 控制邊框的顏色border 控制表格的所有邊框,取值為像素cellspacing 控制單元格與單元格之間的空白,取值為像素cellpadding
13、控制單元格內容和單元格邊框之間的空白,取值 為像素width 設置單元格的寬度,取值為像素或者百分數(shù)height 設置單元格的高度,取值為像素或者百分數(shù)alig n 控制表格的對齊方式,取值left(默認值)|ce nter|rightbgcolor 設置表格的背景色background 設置表格的背景圖當背景色和背景圖同時設定時,優(yōu)先使用背景圖vcaption表格的標題,必須書寫在table之間屬性:align 控制表格標題的位置,取值top(標題在表格的頂部)| bottom (標題在表格的底部)tr 定義表格的行屬性: align 控制整行單元格內容的水平對齊方式,取值left (默認值
14、,缺省值) | center|rightvalign 控制整行單元格內容的垂直對齊方式, 取值 top|middle (默認值) | bottom height 設置行的高度,取值為像素bgcolor 設置行的背景色background 設置行的背景圖bordercolor 設置行的邊框顏色<td> 列標記<th>列標題標記都可以作為列使用,<th>列標題標記,內容有加粗顯示的效果,并且?guī)в凶詣泳又袑傩裕?align 控制單元格內容的水平方向對齊方式,取值 left|center|rightvalign 控制單元格內容的垂直方向對齊方式, 取值 top|mi
15、ddle (默認值) |bottomheight 設置單元格的高度, 取值以像素為單位, 當同一行中不同的單元格設 置的高度也不相同時,整行的高度取值按最大值來width 設置單元格的寬度,取值以像素為單位,當同一列中不同行的單元格設置的寬度不相同時,整列的寬度取值按最大值來bgcolor 設置單元格的背景色bakground 設置單元格的背景圖rowspan 合并行colspan 合并列合并行和合并列的取值都是整數(shù),合并幾個單元格取值就是幾六 . 框架的應用1、框架框架集標記vframeset,在原有的 html結構基礎上,vframeset替換了 vbody 的位置,換句話說, vfram
16、eset禾口 body不能共存,只能出現(xiàn)一個屬性:rows設置橫向框架的數(shù)量和高度,框架的數(shù)量取決于rows屬性的取值 個數(shù),每個框架的高度取決于值的大小cols設置縱向框架的數(shù)量和寬度,框架的數(shù)量取決于 cols屬性的取值個數(shù),每個框架的寬度取決于值的大小rows 和 cols 的取值方式1、像素值2、百分數(shù)3、比例取值rows 和 cols 取值,可以有多個值,值與值之間使用逗號分割,并且不能有空格 格, cols 和 rows 屬性一般不同時設定,要想實現(xiàn)頁面的縱向和橫向分割,可以使用框架 的嵌套來實現(xiàn)frameborder 使用在 frameset 中,可以控制框架集下的所有框架邊框是
17、否 顯示框架標記 <frame /> ,單標記屬性: src 引入目標資源的路徑name 給框架起名字,需要配合超鏈接的 target 屬性來使用,達到鏈接目 標框架的目的frameborder 控制框架的邊框是否顯示, 0 表示不顯示 ,1 顯示默認的 3D 邊框scrolli ng 控制框架是否加入滾動條,取值yes(加入滾動條,需要時加入)|no(不加入滾動條)iauto(需要時加入滾動條,默認值 )noresize 固定框架的邊框,該屬性不需要取值marginheight 在框架中顯示內容時,控制內容和框架上下邊框之間的空白,取值以像素為單位,以上邊框為準marginwid
18、th 在框架中顯示內容時,控制內容和框架左右邊框之間的空白,取值以像素為單位,以左邊框為準<noframes> 當瀏覽器不支持框架時,顯示的替換內容,必須包含一對<body>標記使用七、表單的應用表單1表單標記<form>,表單不能嵌套使用,所有表單的內容必須書寫在表單的開始標記和 結束標記之間表單結構:<form><input type= ”text ”> 單行文本格式<input type= ”password”> 密碼輸入框<input type= ”checkbox”> 復選框格式vinput type
19、二"radio” name二”sex”>單選框格式vin put type= ” submit ”提交的格式<in put type= "reset” 重置格式vinput type= ”button ”>自定義格式vselect>下拉菜單格式vopti on> 漢族 v/opti on>vopti on> 滿族 v/opti on>vopti on> 壯族 v/opti on>vopti on> 土家族 v/opti on>v/select>vtextarea >cols="50"
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 租別人的地方養(yǎng)雞合同(2篇)
- 預售房轉賣合同(2篇)
- 長江 黃河 課件
- 薩克斯教學課件
- 植物描寫 課件
- 高考地理一輪復習第二章宇宙中的地球及其運動第四節(jié)地球公轉及其地理意義課件
- 西南林業(yè)大學《C語言程序設計》2023-2024學年期末試卷
- 西京學院《網(wǎng)絡程序設計》2023-2024學年期末試卷
- 課件 孝悌文化
- 6以內的加減法練習
- 年產(chǎn)噸方便面工廠設計說明書
- 仁愛英語 九年級上冊Unit 4 Topic 2 課文翻譯
- 花卉園藝師國家職業(yè)標準
- 中學體育對接競技體育后備人才的路徑構建
- 自動化控制系統(tǒng)管理規(guī)定【精選文檔】
- 醫(yī)學論文結果部分常用統(tǒng)計表格(可復制利用)
- 漢德車橋明細爆炸圖20__14
- 2013年12月---2018年6月大學英語四級段落翻譯真題及參考答案
- 《江西省普通小學基本辦學條件標準試行》
- 稀土熒光探針檢測多巴胺及類似物.
- 完整版幸福感指數(shù)測量量表
評論
0/150
提交評論