第一章HTML基本標(biāo)簽

上傳人：9*** IP屬地：湖北上傳時(shí)間：2023-02-07 格式：PPT 頁(yè)數(shù)：38 大?。?.02MB 積分：30 舉報(bào) 版權(quán)申訴

已閱讀5頁(yè)，還剩33頁(yè)未讀，繼續(xù)免費(fèi)閱讀

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

文檔簡(jiǎn)介

第一章HTML入門(mén)本節(jié)內(nèi)容HTML簡(jiǎn)介HTML常用標(biāo)簽介紹常用的塊級(jí)標(biāo)簽常用的行級(jí)標(biāo)簽超鏈接標(biāo)簽W3C標(biāo)準(zhǔn)及XHTML規(guī)范本講目標(biāo)HTML常用基本標(biāo)簽的使用標(biāo)題字體、圖像標(biāo)簽列表、超鏈接標(biāo)簽HTML簡(jiǎn)介HTML：HyperTextMarkupLanguage超文本標(biāo)簽語(yǔ)言HTML：網(wǎng)頁(yè)的“源碼”瀏覽器：“解釋和執(zhí)行”HTML源碼的工具HTML文檔的基本結(jié)構(gòu)HTML文檔的結(jié)構(gòu)<html><head><title>我的第一個(gè)網(wǎng)頁(yè)

</title></head><body>HelloWorld!</body></html>HTML網(wǎng)頁(yè)<head>頭部部分<body>主體部分<html>…</html>標(biāo)簽標(biāo)記HTML文檔的開(kāi)始和結(jié)束網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)內(nèi)容，可以是文本、圖像等這部分包括標(biāo)題和其他說(shuō)明信息，包括在<head>…</head>

標(biāo)簽內(nèi)這部分包含文本、圖像和鏈接，它包括在<body>…</body>

標(biāo)簽內(nèi)網(wǎng)頁(yè)的摘要信息網(wǎng)頁(yè)摘要信息利于瀏覽器解析和搜索引擎搜索：使用<title>標(biāo)簽<head><title>搜狐-中國(guó)最大的門(mén)戶(hù)網(wǎng)站</title></head><head><metaname="keywords"content="淘寶,網(wǎng)上購(gòu)物,在線交易,交易市場(chǎng)"/>

<metaname="description"content="淘寶網(wǎng)-亞洲最大、最安全的網(wǎng)上交易平臺(tái)，提供各類(lèi)服飾、美容、家居、數(shù)碼、……"/></head><head>

<metahttp-equiv="Content-Type"content="text/html;

charset=gb2312"/></head>使用<meta>標(biāo)簽（1）描述文檔類(lèi)型和字符編碼（2）描述搜索關(guān)鍵字和描述提供搜索關(guān)鍵字和內(nèi)容描述信息，方便搜索引擎的搜索

HTML頁(yè)面中的塊和行HTML標(biāo)簽分類(lèi)（方便后續(xù)的布局設(shè)計(jì)）：塊級(jí)標(biāo)簽：顯示為“塊”狀，前后隔一行

行級(jí)標(biāo)簽：按行逐一顯示

分類(lèi)好處：方便后續(xù)的布局設(shè)計(jì)塊級(jí)：塊內(nèi)包含多行行級(jí)：包括文字、圖片等塊級(jí)標(biāo)簽根據(jù)使用場(chǎng)合，塊級(jí)標(biāo)簽又細(xì)分為：基本塊級(jí)標(biāo)簽常用于布局的塊級(jí)標(biāo)簽

基本塊級(jí)標(biāo)簽——標(biāo)題標(biāo)簽……<body>

<h6>六級(jí)標(biāo)題</h6></body>……h(huán)1最大h6最小前后隔行<h1>標(biāo)題</h1>……<h6>標(biāo)題</h6>基本塊級(jí)標(biāo)簽—段落段落標(biāo)簽

……<body><h1>北京歡迎你</h1>

<p>北京歡迎你，有夢(mèng)想誰(shuí)都了不起！/p><p>有勇氣就會(huì)有奇跡。</p></body>……前后換行，類(lèi)似教材中的段落<p>……</p>基本塊級(jí)標(biāo)簽—水平線水平線標(biāo)簽……<body><h1>北京歡迎你</h1><hr/><p>北京歡迎你，有夢(mèng)想誰(shuí)都了不起！/p><p>有勇氣就會(huì)有奇跡。</p></body>……橫線用于內(nèi)容分割單個(gè)標(biāo)簽的閉合形式<hr/>常用于布局的塊級(jí)標(biāo)簽—有序列表有序列表標(biāo)簽……<body><h3>注冊(cè)步驟：</h3><ol><li>填寫(xiě)信息</li><li>收電子郵件</li><li>注冊(cè)成功</li></ol></body>……有序列表<ol><li>列表項(xiàng)1</li>……</ol>常用于布局的塊級(jí)標(biāo)簽—無(wú)序列表無(wú)序列表標(biāo)簽

<body><h3>新人上路指南</h3><ul>

<li>如何激活會(huì)員名？</li><li>如何注冊(cè)貴美會(huì)員？</li><li>注冊(cè)時(shí)密碼設(shè)置有什么要求？</li><li>貴美認(rèn)證</li></ul></body>無(wú)序列表<ul><li>列表項(xiàng)1</li>……</ul>常用于布局的塊級(jí)標(biāo)簽—描述標(biāo)簽定義描述標(biāo)簽

……<body><dl><dt>咖啡</dt><dd>一種黑色的熱飲料，原料據(jù)說(shuō)是咖啡豆，非洲盛產(chǎn)這類(lèi)原料。</dd><dd>可以提神，刺激神經(jīng)。</dd><dl></body>……這種效果可以和無(wú)序列表互相替代，因dt是塊狀元素，所以常用于圖文混編的布局場(chǎng)合<dl><dt>標(biāo)題</dt><dd>描述1</dd>……</dl>常用于布局的塊級(jí)標(biāo)簽—描述標(biāo)簽……<body><dl>

<dt>圖片的HTML代碼（后續(xù)講解）……<dt><dd>商品名稱(chēng)：燦坤蒸氣電熨斗</dd><dd>商品價(jià)格：388元</dd><dd>商品簡(jiǎn)介：金鋼低血超硬超順滑,140ml透明大水箱設(shè)計(jì)</dd></dl></body>……用定義描述標(biāo)簽實(shí)現(xiàn)圖文混編的效果文字有一定的縮進(jìn)常用于布局的塊級(jí)標(biāo)簽—表格表格<table><tr><td>百度</td><td>新浪</td></tr>……</dl><table>--表格<tr>--行<td>--列（單元格）常用于布局的塊級(jí)標(biāo)簽—表單表單

一般和table使用：<form><table><tr><td>...</td>

</tr>.....</table></form><form>……</form>常用于布局的塊級(jí)標(biāo)簽—div層分區(qū)標(biāo)簽<div>div標(biāo)簽可內(nèi)嵌到<p>等標(biāo)簽內(nèi)，作為普通塊狀元素使用一般當(dāng)作結(jié)構(gòu)化塊狀元素使用，作為邏輯分區(qū)（分塊）即容器來(lái)使用……<divstyle="width:400px;height:300px;background:#9FF"><p>……</p><h3>新人上路</h3><ul>……</ul>div其實(shí)就是一個(gè)......</div>……小結(jié)請(qǐng)說(shuō)出實(shí)際開(kāi)發(fā)常用的4種塊狀結(jié)構(gòu)標(biāo)簽是什么？1、div-ul(ol)-li：常用于分類(lèi)導(dǎo)航或菜單等2、div-dl-dt-dd：常用于圖文混編的場(chǎng)合3、table-tr-td：常用于圖文布局或顯示數(shù)據(jù)4、form-table-tr-td：常用于布局表單行級(jí)標(biāo)簽—圖像標(biāo)簽圖像標(biāo)簽

……<imgsrc="images/drink.jpg"alt="精品熱賣(mài)：高清晰，30寸等離子電視"title="精品熱賣(mài)：高清晰，30寸等離子電視"/>……<imgsrc="圖片地址"alt="提示文字"title="提示文字"/>為了不同瀏覽器之間的兼容，推薦使用title屬性

，確保能顯示提示文字行級(jí)標(biāo)簽—范圍標(biāo)簽范圍標(biāo)簽<span>：顯示某行內(nèi)的獨(dú)特樣式……<p>商品價(jià)格:僅售<spanstyle="color:red;font-size:70px;">10</span>元</p>……<span>文本等行級(jí)內(nèi)容</span>設(shè)置紅色、大號(hào)字突出顯示

行級(jí)標(biāo)簽—換行標(biāo)簽換行標(biāo)簽<br/>

……<p>

北京歡迎你，有夢(mèng)想誰(shuí)都了不起！<br/>

有勇氣就會(huì)有奇跡。<br/>

北京歡迎你，為你開(kāi)天辟地<br/>

流動(dòng)中的魅力充滿(mǎn)朝氣。<br/>

北京歡迎你，在太陽(yáng)下分享呼吸<br/>

在黃土地刷新成績(jī)。<br/>

北京歡迎你，像音樂(lè)感動(dòng)你<br/>

讓我們都加油去超越自己。<br/></p>……和<p>的區(qū)別：前后不換行為什么需要W3C標(biāo)準(zhǔn)W3C：WorldWideWebConsortium，萬(wàn)維網(wǎng)聯(lián)盟W3C的職能：負(fù)責(zé)制定和維護(hù)web行業(yè)標(biāo)準(zhǔn)W3C標(biāo)準(zhǔn)包括：列的標(biāo)準(zhǔn)：HTML內(nèi)容方面：XHTML樣式美化方面：CSS結(jié)構(gòu)文檔訪問(wèn)方面：OM頁(yè)面交互方面：ECMAScript……

制定統(tǒng)一的web標(biāo)準(zhǔn)W3CNetscape的圖標(biāo)W3C提倡的Web結(jié)構(gòu)不規(guī)范的示例<fontsize="7">一級(jí)主題</Font><br/>一級(jí)主題闡述文字<br/><Br/><fontsize="5">二級(jí)主題</font><br/>二級(jí)主題相關(guān)文字<P>項(xiàng)目列表1<p>項(xiàng)目列表2<p>項(xiàng)目列表3存在問(wèn)題：1、內(nèi)容和表現(xiàn)沒(méi)分離，后期很難維護(hù)和修改2、HTML代碼不能表示頁(yè)面的內(nèi)容語(yǔ)義，不利于搜索引擎搜索

W3C提倡的Web結(jié)構(gòu)規(guī)范的示例<h1>一級(jí)主題1</h1><p>一級(jí)主題闡述文字</p><h2>二級(jí)主題</h2><p>二級(jí)主題闡述文字</p><ul><li>項(xiàng)目列表1</li><li>項(xiàng)目列表2</li><li>項(xiàng)目列表3</li></ul>W3C提倡的Web結(jié)構(gòu)：1、內(nèi)容（結(jié)構(gòu)）和表現(xiàn)（樣式）分離2、HTML內(nèi)容結(jié)構(gòu)要求語(yǔ)義化

XHTML1.0基本規(guī)范<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>……</head>……body部分內(nèi)容……</html>標(biāo)簽名和屬性名稱(chēng)必須小寫(xiě)

HTML標(biāo)簽必須關(guān)閉屬性值必須用引號(hào)括起來(lái)標(biāo)簽必須正確嵌套必須添加文檔類(lèi)型聲明1、聲明必須位于文檔的最前面2、三種級(jí)別：Strict（嚴(yán)格類(lèi)型）、Trasitional（過(guò)度類(lèi)型）、Frameset（框架類(lèi)型）超鏈接超鏈接---實(shí)現(xiàn)頁(yè)面間的導(dǎo)航鏈接文本或圖像鏈接地址（目標(biāo)）超鏈接

……<ahref="span.html"target="_blank">燦坤蒸氣電熨斗</a>……鏈接在新窗口中打開(kāi)<ahref="鏈接地址"target="目標(biāo)窗口位置">鏈接熱點(diǎn)文本或圖像</a>鏈接路徑……<ahref="../web1.htm">上級(jí)目錄</a><ahref="../../web2.htm">上上級(jí)目錄</a>……相對(duì)地址：相對(duì)于當(dāng)前目錄的地址，常用

絕對(duì)地址：指向目標(biāo)地址的完整描述，少用

上級(jí)目錄：../上上級(jí)目錄：../../<ahref="/memAdmin/login/login.htm">登錄</a><ahref="">搜狐</a><ahref="login/login.htm">登錄</a>超鏈接的三類(lèi)應(yīng)用場(chǎng)合……<ahref="register/register.html">[免費(fèi)注冊(cè)]</a><ahref="login/login.htm">[登錄](méi)</a>……頁(yè)面間鏈接錨鏈接功能性鏈接

常用于網(wǎng)站導(dǎo)航相對(duì)路徑超鏈接的三類(lèi)應(yīng)用場(chǎng)合實(shí)現(xiàn)錨鏈接1、定義標(biāo)記（錨）：<aname="標(biāo)記名">目標(biāo)位置</a>2、設(shè)置鏈接到標(biāo)記位置：<ahref="#標(biāo)記名">當(dāng)前位置</a>……<ahref="#star">[明星專(zhuān)區(qū)]</a>……

<aname=“star”>明顯專(zhuān)區(qū)內(nèi)容</a>……定義標(biāo)記設(shè)置鏈接到標(biāo)記位置A.頁(yè)面內(nèi)的錨鏈接適用于頁(yè)面內(nèi)容較多，超過(guò)一屏的場(chǎng)合超鏈接的三類(lèi)應(yīng)用場(chǎng)合實(shí)現(xiàn)錨鏈接……標(biāo)記所在頁(yè)….<ahref="#star">[明星專(zhuān)區(qū)]</a>……B.頁(yè)面間的錨鏈接……鏈接頁(yè)….明星體驗(yàn)：<ahref="anchor.html#star">明星專(zhuān)區(qū)</a>……A.頁(yè)面內(nèi)部的錨鏈接超鏈接的三類(lèi)應(yīng)用場(chǎng)合功能性鏈接郵箱、QQ鏈接等……<ahref="ma

人人文庫(kù)> 全部分類(lèi)> 教育資料 > 課件下載

溫馨提示

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ì)自己和他人造成任何形式的傷害或損失。

第一章HTML基本標(biāo)簽

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

第一章HTML基本標(biāo)簽

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔