版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
（HTML張偉
Web頁 Web頁面編特定的語言編寫web方語1內(nèi)2樣3行HTML:HyperTextMarkup 一個(gè)簡單的HTML
<!DOCTYPE<html
HTML該文檔是
en 檔 <title>我的第一個(gè)網(wǎng)頁檔 檔 <h1>這是一個(gè)一級標(biāo)題 <p>這是一個(gè)段落體
一個(gè)段落
HTML HTML點(diǎn)擊SaveHTML文件擴(kuò)展名HTML HTML選擇HTML<!DOCTYPE<html <metacharset="utf-一個(gè)簡單的HTML文<!DOCTYPE<html
HTML該文檔是
en 檔 <title>我的第一個(gè)網(wǎng)頁檔 檔 <h1>這是一個(gè)一級標(biāo)題 <p>這是一個(gè)段落體
一個(gè)段落
為什么有這么多的尖括號
前面的HTML文檔中已經(jīng)出現(xiàn) htmlheadmetatitlebodyh1大部 <p>這是一個(gè)段落。開（能包含
結(jié)必須包含少部 這個(gè)/可以沒<metacharset=“utf-8” （必 引號包圍在成對出現(xiàn) 開 可以包含屬性；結(jié) 不能包含屬<html ”>…屬性 屬性 HTMLHTML對于成對出現(xiàn) 開 ＋結(jié) ＋兩者之間的內(nèi)<p這是一個(gè)段落 可以形成嵌套關(guān)
<p>這是一個(gè)段落HTML對于單獨(dú)出現(xiàn) 本身即形成一個(gè)HTML<metacharset="utf-HTML文檔結(jié)構(gòu)<!DOCTYPE<html 一個(gè)HTML文是通過HTML元素的嵌套順序排列<h1>這是一個(gè)一級標(biāo)題<p>這是一個(gè)段落HTML的不同HTMLHTMLHTMLHTMLXHTMLHTMLXHTML 但在語法上遵循HTML5 HTML通 /元 /元正文的最外 必須成對出現(xiàn)形成一個(gè)html元有其他HTML元素都包含 html元素 文一個(gè)HTML文檔包含且僅 文含一個(gè)html元
<!DOCTYPE<html <title>我的第一個(gè)網(wǎng)頁<h1>這是一個(gè)一級標(biāo)題<p>這是一個(gè)段落 /元文檔 必須成對出現(xiàn)形成一個(gè)head元只能直接嵌套在html元
<!DOCTYPE<html 檔 <title>我的第一個(gè)網(wǎng)頁<h1>這是一個(gè)一級標(biāo)題<p>這是一個(gè)段落 /元文檔主 必須成對出現(xiàn)形成一個(gè)body元元素（ContentElements）
<!DOCTYPE<html <title>我的第一個(gè)網(wǎng)頁<h1>這是一個(gè)一級標(biāo)題<p>這是一個(gè)段落內(nè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>請?jiān)谶@里輸入段落文字<!DOCTYPE<head>… <p>“大話西游”之《月光h1h2h3h4h5<h1><!DOCTYPE<head>…<h1>這是一級標(biāo)題<h2>這是二級標(biāo)題<h3>這是三級標(biāo)題<h4>這是四級標(biāo)題<h5>這是五級標(biāo)題<h6>這是六級標(biāo)題標(biāo)題元素＋段落元素：組織文
于烤焙的嫩雞”）從運(yùn)第一節(jié)正文中<h2>飼養(yǎng)小雞的棚
<imgsrc=“…”
的
img元素的三個(gè)可選屬屬性取含一串字 加載失敗時(shí)，在網(wǎng)頁上顯示的文正整占用的顯示區(qū)域的寬度/高度（單位：像素如果沒有設(shè)置 以自身具有的高度/寬度顯 它 是 <img <p>下面是一個(gè)本 。它的路徑是<img
<ahref=“…”> 的名字對象的 本地對象的相對路徑名 它 是 <a /img/baidu_sylogo1.gif> <p>下面是一個(gè)指向本 的 。它的路徑是 內(nèi)容元用來用來組織HTML文檔內(nèi)容的HTML內(nèi)容元素缺省情況下塊級元素（塊級元素（Block行內(nèi)元素（Inline <img塊級元可以包行塊級元可以包行內(nèi)元素行內(nèi)元素只能包含行內(nèi)元元素名元素類描塊級元用于對文檔中的任何一組元素進(jìn)行分行內(nèi)元用于對一組連續(xù)的行內(nèi)元素進(jìn)行標(biāo)在在缺省情況元素：div<h1>我是一級標(biāo)題。<ahref="images/tulip.jpg">我是一個(gè) <img <img<h1>下面是一個(gè)有序列ordered<h1>下面是一個(gè)有序列ordered<li>茶<li>咖啡<li>牛奶<li>果汁list<h1>下面是一個(gè)無序列<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=“…”對象的 本地對象的相對路徑名iframe元素的三個(gè)可選屬屬性取含一串字當(dāng)前iframe元素的名正整數(shù)或正整數(shù)：顯示區(qū)域的寬度/高度（單位：像素高度占父元素顯示區(qū)域iframe元<p>我 主頁嵌入進(jìn)來了<iframe "width="90%"iframe
用iframe實(shí)現(xiàn)多頁面導(dǎo)為 含義：當(dāng) <a " <a 大學(xué)<a " <iframename="myFrame"width="90%"這么山寨呢？…Web頁面編方語12樣3行(CascadingStyleSheets)層疊樣式存放了樣式規(guī)則（對元素顯示樣式的說明<linkhref=“…”rel=“stylesheet”css文件的 本地css文件的相對路徑名為HTML文檔關(guān)聯(lián)css文<!DOCTYPE<html
式則 背景顏色設(shè)為黃式則
styles/test.css文件內(nèi)容body}式<metacharset="utf-8式
p則<title>我的第一個(gè)網(wǎng)頁</則
<h1>這是一個(gè)一級標(biāo)題<p>這是一個(gè)段落樣式規(guī) 當(dāng)前規(guī)則作用到哪些元 對元素的樣式做哪些設(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ǔ)可以定義 種類的組合選擇5分組選擇6后5分組選擇6后代元素選擇7子元素選擇8屬性選擇
組合選擇1元素名選擇2id選擇3class選擇4*選擇分組選擇h1
具有相 器的一組樣式規(guī)可以通過分組選擇器合并為一條樣式規(guī)}h2
h1,h2,h3{
}
}h3}divh1}所有div元素的所有h1的父元素名/類名/id>div>h1}所有div元素的所有h1的h1.myClass}所有class屬性值為myClass的h1的Web頁面編特定的語言編寫web方語1內(nèi)2樣3行 當(dāng)前規(guī)則作用到哪些元 對元素的樣式做哪些設(shè)素的盒模素的盒模外邊距屬可設(shè)置的方邊內(nèi)邊外邊尺內(nèi)容元素的默認(rèn)尺<!DOCTYPE<metacharset="utf-<h1>我是一級標(biāo)題。<p>我是一個(gè)段落。<ahref="images/tulip.jpg">我是一個(gè) <img內(nèi)容元素的默認(rèn)尺11塊級元素自動(dòng)擴(kuò)展到22行內(nèi)元素自動(dòng)“收縮包裹”塊級元素（塊級元素（Block行內(nèi)元素（Inline為頁面設(shè)置固定寬 <!DOCTYPE<metacharset="utf-<title>為頁面設(shè)置固定寬度
body{}<linkhref="styles/017.css"rel="stylesheet"為頁面設(shè)置固定寬<link 將body元素的左右外邊距設(shè)置為<!DOCTYPE<metacharset="utf-<title>為頁面設(shè)置固定寬度
bodywidth:960px;margin-left:auto;margin-right:auto;}<<<<顯示頁面的邊<!DOCTYPE<metacharset="utf-<title>為頁面設(shè)置固定寬度
bodywidth:960px;margin-left:auto;margin-right:auto;border-width:1px; border-style:solid;border-color:gray;border-radius:5px;}顯示頁面的邊body<!DOCTYPEbody…<!DOCTYPE<metacharset="utf-
設(shè)置內(nèi)邊body<title>為頁面設(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>為頁面設(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;問題 浮動(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;}對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)鍵問如何讓這兩個(gè)div橫向排<div<p>頭部區(qū)域<div<div<li>郁金香<li>百合<li>玫瑰<div
bodywidth:960px;margin-l
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年度道路施工場地環(huán)境監(jiān)測與噪聲控制協(xié)議3篇
- 2025年度股權(quán)融資服務(wù)協(xié)議范文3篇
- 2025年度軟件許可及技術(shù)支持合同：軟件開發(fā)公司與企業(yè)用戶之間的協(xié)議2篇
- 《視頻信息的初步加工》 說課稿
- Unit 1 Hello,I am Andy Period 5 （說課稿）-2024-2025學(xué)年教科版（廣州）英語一年級上冊
- 認(rèn)識更大的數(shù)（說課稿）2024-2025學(xué)年數(shù)學(xué)四年級上冊北師大版
- 2025年度試劑定制加工合同3篇
- 自由泳打腿技術(shù) 說課說課稿-2023-2024學(xué)年高一上學(xué)期體育與健康人教版必修第一冊
- 4《竇娥冤》說課稿2024-2025學(xué)年高一語文下學(xué)期（必修下冊）
- Revision 1（說課稿）-2023-2024學(xué)年人教新起點(diǎn)版英語一年級下冊
- 2024年關(guān)愛留守兒童工作總結(jié)
- GB/T 45092-2024電解水制氫用電極性能測試與評價(jià)
- 《算術(shù)平方根》課件
- 2024-2024年上海市高考英語試題及答案
- 注射泵管理規(guī)范及工作原理
- 山東省濟(jì)南市2023-2024學(xué)年高二上學(xué)期期末考試化學(xué)試題 附答案
- 大唐電廠采購合同范例
- GB/T 18724-2024印刷技術(shù)印刷品與印刷油墨耐各種試劑性的測定
- IEC 62368-1標(biāo)準(zhǔn)解讀-中文
- 15J403-1-樓梯欄桿欄板(一)
- 2024年中考語文名句名篇默寫分類匯編（解析版全國）
評論
0/150
提交評論