版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
（HTML張偉
Web頁(yè) Web頁(yè)面編特定的語(yǔ)言編寫(xiě)web方語(yǔ)1內(nèi)2樣3行HTML:HyperTextMarkup 一個(gè)簡(jiǎn)單的HTML
<!DOCTYPE<html
HTML該文檔是
en 檔 <title>我的第一個(gè)網(wǎng)頁(yè)檔 檔 <h1>這是一個(gè)一級(jí)標(biāo)題 <p>這是一個(gè)段落體
一個(gè)段落
HTML HTML點(diǎn)擊SaveHTML文件擴(kuò)展名HTML HTML選擇HTML<!DOCTYPE<html <metacharset="utf-一個(gè)簡(jiǎn)單的HTML文<!DOCTYPE<html
HTML該文檔是
en 檔 <title>我的第一個(gè)網(wǎng)頁(yè)檔 檔 <h1>這是一個(gè)一級(jí)標(biāo)題 <p>這是一個(gè)段落體
一個(gè)段落
為什么有這么多的尖括號(hào)
前面的HTML文檔中已經(jīng)出現(xiàn) htmlheadmetatitlebodyh1大部 <p>這是一個(gè)段落。開(kāi)（能包含
結(jié)必須包含少部 這個(gè)/可以沒(méi)<metacharset=“utf-8” （必 引號(hào)包圍在成對(duì)出現(xiàn) 開(kāi) 可以包含屬性；結(jié) 不能包含屬<html ”>…屬性 屬性 HTMLHTML對(duì)于成對(duì)出現(xiàn) 開(kāi) ＋結(jié) ＋兩者之間的內(nèi)<p這是一個(gè)段落 可以形成嵌套關(guān)
<p>這是一個(gè)段落HTML對(duì)于單獨(dú)出現(xiàn) 本身即形成一個(gè)HTML<metacharset="utf-HTML文檔結(jié)構(gòu)<!DOCTYPE<html 一個(gè)HTML文是通過(guò)HTML元素的嵌套順序排列<h1>這是一個(gè)一級(jí)標(biāo)題<p>這是一個(gè)段落HTML的不同HTMLHTMLHTMLHTMLXHTMLHTMLXHTML 但在語(yǔ)法上遵循HTML5 HTML通 /元 /元正文的最外 必須成對(duì)出現(xiàn)形成一個(gè)html元有其他HTML元素都包含 html元素 文一個(gè)HTML文檔包含且僅 文含一個(gè)html元
<!DOCTYPE<html <title>我的第一個(gè)網(wǎng)頁(yè)<h1>這是一個(gè)一級(jí)標(biāo)題<p>這是一個(gè)段落 /元文檔 必須成對(duì)出現(xiàn)形成一個(gè)head元只能直接嵌套在html元
<!DOCTYPE<html 檔 <title>我的第一個(gè)網(wǎng)頁(yè)<h1>這是一個(gè)一級(jí)標(biāo)題<p>這是一個(gè)段落 /元文檔主 必須成對(duì)出現(xiàn)形成一個(gè)body元元素（ContentElements）
<!DOCTYPE<html <title>我的第一個(gè)網(wǎng)頁(yè)<h1>這是一個(gè)一級(jí)標(biāo)題<p>這是一個(gè)段落內(nèi)容元用來(lái)組織HTML文檔內(nèi)容的HTML1段落元p用于表現(xiàn)一段普通文2標(biāo)題元h1h2h3h4h5用于表現(xiàn)一段標(biāo)題文3元用于表現(xiàn)一4 元a用于表現(xiàn)一個(gè)
<p>請(qǐng)?jiān)谶@里輸入段落文字<!DOCTYPE<head>… <p>“大話(huà)西游”之《月光h1h2h3h4h5<h1><!DOCTYPE<head>…<h1>這是一級(jí)標(biāo)題<h2>這是二級(jí)標(biāo)題<h3>這是三級(jí)標(biāo)題<h4>這是四級(jí)標(biāo)題<h5>這是五級(jí)標(biāo)題<h6>這是六級(jí)標(biāo)題標(biāo)題元素＋段落元素：組織文
于烤焙的嫩雞”）從運(yùn)第一節(jié)正文中<h2>飼養(yǎng)小雞的棚
<imgsrc=“…”
的
img元素的三個(gè)可選屬屬性取含一串字 加載失敗時(shí)，在網(wǎng)頁(yè)上顯示的文正整占用的顯示區(qū)域的寬度/高度（單位：像素如果沒(méi)有設(shè)置 以自身具有的高度/寬度顯 它 是 <img <p>下面是一個(gè)本 。它的路徑是<img
<ahref=“…”> 的名字對(duì)象的 本地對(duì)象的相對(duì)路徑名 它 是 <a /img/baidu_sylogo1.gif> <p>下面是一個(gè)指向本 的 。它的路徑是 內(nèi)容元用來(lái)用來(lái)組織HTML文檔內(nèi)容的HTML內(nèi)容元素缺省情況下塊級(jí)元素（塊級(jí)元素（Block行內(nèi)元素（Inline <img塊級(jí)元可以包行塊級(jí)元可以包行內(nèi)元素行內(nèi)元素只能包含行內(nèi)元元素名元素類(lèi)描塊級(jí)元用于對(duì)文檔中的任何一組元素進(jìn)行分行內(nèi)元用于對(duì)一組連續(xù)的行內(nèi)元素進(jìn)行標(biāo)在在缺省情況元素：div<h1>我是一級(jí)標(biāo)題。<ahref="images/tulip.jpg">我是一個(gè) <img <img<h1>下面是一個(gè)有序列ordered<h1>下面是一個(gè)有序列ordered<li>茶<li>咖啡<li>牛奶<li>果汁list<h1>下面是一個(gè)無(wú)序列<li>茶<li>咖啡<li>牛奶<li>果汁unodered缺省情況下列元素是列元素＋ 元<li><a
<li><a <li><a <li><a 理工大學(xué)<p>下面是一個(gè)表格 table <td>（第1行，第1列素 <td>（第1行，第2列素 素 素
table <td>（第2行，第1列素 <td>（第2行，第2列素
表格元素比較特殊列表<p>下面是一個(gè)表格<td>（第1行，第1列<td>（第1行，第2列<td>（第2行，第1列<td>（第2行，第2列
<th>（第1列表頭<th>（第2列表頭
table行表<p>下面是一個(gè)表格
<th>第1行表頭<td>（第1行，第1列<td>（第1行，第2列
<th>第2行表頭<td>（第2行，第1列<td>（第2行，第2列<p>下面是一個(gè)表格<td>（第1行，第1列<td>（第1行，第2列<td>（第2行，第1列<td>（第2行，第2列
column修改為：<tdcolspan=“2”>（第2行，第2列
刪除這個(gè)單元<p>下面是一個(gè)表格<td>（第1行，第1列<td>（第1行，第2列<td>（第2行，第1列<td>（第2行，第2列
row修改為：<tdrowspan=“2”>（第1行，第2列
刪除這個(gè)單元表格元素的兩種用112（在td元素中嵌入其它元素iframe元
<iframesrc=“…”對(duì)象的 本地對(duì)象的相對(duì)路徑名iframe元素的三個(gè)可選屬屬性取含一串字當(dāng)前iframe元素的名正整數(shù)或正整數(shù)：顯示區(qū)域的寬度/高度（單位：像素高度占父元素顯示區(qū)域iframe元<p>我 主頁(yè)嵌入進(jìn)來(lái)了<iframe "width="90%"iframe
用iframe實(shí)現(xiàn)多頁(yè)面導(dǎo)為 含義：當(dāng) <a " <a 大學(xué)<a " <iframename="myFrame"width="90%"這么山寨呢？…Web頁(yè)面編方語(yǔ)12樣3行(CascadingStyleSheets)層疊樣式存放了樣式規(guī)則（對(duì)元素顯示樣式的說(shuō)明<linkhref=“…”rel=“stylesheet”css文件的 本地css文件的相對(duì)路徑名為HTML文檔關(guān)聯(lián)css文<!DOCTYPE<html
式則 背景顏色設(shè)為黃式則
styles/test.css文件內(nèi)容body}式<metacharset="utf-8式
p則<title>我的第一個(gè)網(wǎng)頁(yè)</則
<h1>這是一個(gè)一級(jí)標(biāo)題<p>這是一個(gè)段落樣式規(guī) 當(dāng)前規(guī)則作用到哪些元 對(duì)元素的樣式做哪些設(shè)h1}
所有h1選擇器：從文檔中選擇一組元 四種基本選擇1元素名選擇2id選擇3class選擇4*選擇
選擇器相關(guān)的兩個(gè)元素屬元素名選擇
h1}body}p{}id選擇
h1}body}p{}#para1{ class選擇養(yǎng)的
h1}body}p
#para1｝.otherp 要出現(xiàn)在id＊選擇養(yǎng)的
h1}body}p{}#para1{}.otherp}}組合選擇在4種基本選擇器的基礎(chǔ)可以定義 種類(lèi)的組合選擇5分組選擇6后5分組選擇6后代元素選擇7子元素選擇8屬性選擇
組合選擇1元素名選擇2id選擇3class選擇4*選擇分組選擇h1
具有相 器的一組樣式規(guī)可以通過(guò)分組選擇器合并為一條樣式規(guī)}h2
h1,h2,h3{
}
}h3}divh1}所有div元素的所有h1的父元素名/類(lèi)名/id>div>h1}所有div元素的所有h1的h1.myClass}所有class屬性值為myClass的h1的Web頁(yè)面編特定的語(yǔ)言編寫(xiě)web方語(yǔ)1內(nèi)2樣3行 當(dāng)前規(guī)則作用到哪些元 對(duì)元素的樣式做哪些設(shè)素的盒模素的盒模外邊距屬可設(shè)置的方邊內(nèi)邊外邊尺內(nèi)容元素的默認(rèn)尺<!DOCTYPE<metacharset="utf-<h1>我是一級(jí)標(biāo)題。<p>我是一個(gè)段落。<ahref="images/tulip.jpg">我是一個(gè) <img內(nèi)容元素的默認(rèn)尺11塊級(jí)元素自動(dòng)擴(kuò)展到22行內(nèi)元素自動(dòng)“收縮包裹”塊級(jí)元素（塊級(jí)元素（Block行內(nèi)元素（Inline為頁(yè)面設(shè)置固定寬 <!DOCTYPE<metacharset="utf-<title>為頁(yè)面設(shè)置固定寬度
body{}<linkhref="styles/017.css"rel="stylesheet"為頁(yè)面設(shè)置固定寬<link 將body元素的左右外邊距設(shè)置為<!DOCTYPE<metacharset="utf-<title>為頁(yè)面設(shè)置固定寬度
bodywidth:960px;margin-left:auto;margin-right:auto;}<<<<顯示頁(yè)面的邊<!DOCTYPE<metacharset="utf-<title>為頁(yè)面設(shè)置固定寬度
bodywidth:960px;margin-left:auto;margin-right:auto;border-width:1px; border-style:solid;border-color:gray;border-radius:5px;}顯示頁(yè)面的邊body<!DOCTYPEbody…<!DOCTYPE<metacharset="utf-
設(shè)置內(nèi)邊body<title>為頁(yè)面設(shè)置固定寬度
width:>margin-left: >margin-right:auto;border-width:1px;border-style:solid;border-color:gray;border-radius:5px;padding-left:20px;padding-right:20px;}<!DOCTYPE><metacharset="utf->
設(shè)置內(nèi)邊body<title>為頁(yè)面設(shè)置固定寬度…
width:
不那么山寨了圖文混
<h1>花卉介紹<div<img<p>郁金香
bodywidth:960px;margin-left:auto;margin-right:auto;border-width:1px;border-style:solid;border-color:gray;border-radius:5px;padding-left:20px;padding-right:20px;}border-width:1px;border-style:solid;border-color:gray;border-radius:5px;}圖文混排：第一步浮<h1>花卉介紹<div<img<p>郁金香
bodywidth:960px;margin-left:auto;margin-right:auto;border-width:1px;border-style:solid;border-color:gray;border-radius:5px;padding-left:20px;padding-right:20px;}border-width:1px;border-style:solid;border-color:gray;border-radius:5px;}img{float:left;問(wèn)題 浮動(dòng)后，脫離了父元素的懷
圖文混
bodywidth:讓浮 重回父元素的懷<h1>花卉介紹<div<img<p>郁金香
margin-left:auto;margin-right:auto;border-width:1px;border-style:solid;border-color:gray;border-radius:5px;padding-left:20px;padding-right:20px;}border-width:1px;border-style:solid;border-color:gray;border-radius:5px;}img{float:left;}div.flower-end{clear:both;}對(duì)div元素的內(nèi)容進(jìn)行多欄布頭部區(qū)頭部區(qū)導(dǎo)域詳細(xì)內(nèi)容顯示區(qū)底部區(qū)
<div<p>頭部區(qū)域<div<div 區(qū)<li>郁金香 區(qū)<li>百合域<li>玫瑰域<div
bodywidth:960px;margin-left:auto;margin-right:auto;}border-width:1px;border-style:solid;border-color:gray;border-radius: margin:
<img <p>郁金香 <div<p>底部區(qū)域關(guān)鍵問(wèn)如何讓這兩個(gè)div橫向排<div<p>頭部區(qū)域<div<div<li>郁金香<li>百合<li>玫瑰<div
bodywidth:960px;margin-l
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 工況設(shè)備合同文本
- 工程項(xiàng)目合同重難點(diǎn)分析
- 《地震知識(shí)與預(yù)防》課件
- 2025年江蘇貨運(yùn)從業(yè)資格試題題庫(kù)
- 2025年伊犁貨運(yùn)從業(yè)資格證考試技巧
- 2025年哈爾濱貨運(yùn)從業(yè)資格實(shí)操題
- 2025年新鄉(xiāng)交通運(yùn)輸從業(yè)資格證怎樣考試
- 家政服務(wù)設(shè)備租賃合同
- 越南料理店標(biāo)線(xiàn)施工合同
- 大型農(nóng)業(yè)設(shè)施運(yùn)輸協(xié)議
- 國(guó)開(kāi)公共政策概論形考任務(wù)4試題及答案
- (完整版)馬克思主義基本原理概論知識(shí)點(diǎn)
- 鐘點(diǎn)工雇傭協(xié)議書(shū)3篇
- 電子耳蝸植入術(shù)后護(hù)理查房課件
- DB34∕T 2290-2022 水利工程質(zhì)量檢測(cè)規(guī)程
- 星巴克哈佛商學(xué)院案例
- ICS(國(guó)際標(biāo)準(zhǔn)分類(lèi)法)分類(lèi)
- 幼兒園課件：《認(rèn)識(shí)國(guó)旗》
- 張大千-ppt資料
- 【規(guī)劃】高中語(yǔ)文教師專(zhuān)業(yè)成長(zhǎng)五年規(guī)劃
- 華南農(nóng)業(yè)大學(xué)農(nóng)學(xué)院生物技術(shù)復(fù)習(xí)題附答案
評(píng)論
0/150
提交評(píng)論