《網(wǎng)頁設(shè)計(jì)與制作》第1章_第1頁
《網(wǎng)頁設(shè)計(jì)與制作》第1章_第2頁
《網(wǎng)頁設(shè)計(jì)與制作》第1章_第3頁
《網(wǎng)頁設(shè)計(jì)與制作》第1章_第4頁
《網(wǎng)頁設(shè)計(jì)與制作》第1章_第5頁
已閱讀5頁，還剩32頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTML基本標(biāo)簽（一）第一章本門課程目標(biāo)學(xué)完本門課程后，你能夠：制作界面美觀大方、面向企業(yè)應(yīng)用的靜態(tài)商業(yè)網(wǎng)站掌握Web開發(fā)的行業(yè)規(guī)范和標(biāo)準(zhǔn)課程項(xiàng)目展示貴美商城首頁商品展示頁（點(diǎn)擊左邊“商品分類”任一鏈接）具體商品詳細(xì)介紹頁（點(diǎn)擊任一商品圖片）購物車頁面（點(diǎn)擊“立刻購買”按鈕）登錄頁（點(diǎn)擊右上方的導(dǎo)航菜單）注冊頁（點(diǎn)擊右上方的導(dǎo)航菜單）幫助中心客服頁面（點(diǎn)擊右上方的導(dǎo)航菜單）

教員現(xiàn)場演示貫穿項(xiàng)目本章任務(wù)制作圖文并茂的商品介紹頁本章目標(biāo)使用HTML的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁使用行級(jí)和塊級(jí)標(biāo)簽組織頁面內(nèi)容使用圖像標(biāo)簽實(shí)現(xiàn)圖文并茂的頁面什么是HTMLHTML：HyperTextMarkupLanguage超文本標(biāo)簽語言HTML：網(wǎng)頁的“源碼”瀏覽器：“解釋和執(zhí)行”HTML源碼的工具

HTML告知瀏覽器如何顯示網(wǎng)頁HTML文檔的結(jié)構(gòu)<html><head><title>我的第一個(gè)網(wǎng)頁</title></head><body>HelloWorld!</body></html>HTML網(wǎng)頁<head>頭部部分<body>主體部分<html>…</html>標(biāo)簽標(biāo)記HTML文檔的開始和結(jié)束網(wǎng)頁標(biāo)題網(wǎng)頁內(nèi)容，可以是文本、圖像等這部分包括標(biāo)題和其他說明信息，包括在<head>…</head>

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

標(biāo)簽內(nèi)HTML文檔的基本結(jié)構(gòu)記事本UltraEditHTML的編輯工具操作演示1：在記事本里創(chuàng)建網(wǎng)頁網(wǎng)頁的摘要信息2-1網(wǎng)頁摘要信息利于瀏覽器解析和搜索引擎搜索：使用<title>標(biāo)簽<head>

<title>搜狐-中國最大的門戶網(wǎng)站</title></head><head>

<metaname="keywords"content="淘寶,網(wǎng)上購物,在線交易,交易市場"/>

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

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

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

Meta標(biāo)簽http-equiv屬性:模擬http消息頭(所謂消息頭，是由w3c定義的一些關(guān)鍵字，瀏覽器與服務(wù)器都會(huì)遵守)。content屬性:消息頭的屬性值。常見的兩個(gè)消息頭:（1）<metahttp-equiv="content-type"content="text/html;charset=gbk">模擬生成一個(gè)content-type消息頭，告訴瀏覽器，返回的數(shù)據(jù)是html，編碼是gbk。瀏覽器一定會(huì)以指定的gbk編碼來打開該頁面。需要注意：指定的編碼一定要與實(shí)際保存文件的編碼一致。（2）<metahttp-equiv="refresh"content="2">模擬生成一個(gè)refresh消息頭，告訴瀏覽器，每隔2秒刷新該頁面。

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

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

常用于布局的塊級(jí)標(biāo)簽塊級(jí)元素與行內(nèi)無素的區(qū)別

塊級(jí)元素和行內(nèi)元素是布局最基本的兩種元素，常見的塊級(jí)元素有div、p、form、ul、ol、li等，常用的行內(nèi)元素有span、strong、em等

塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下，其寬度自動(dòng)填滿其父元素寬度，行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排不下，才會(huì)換行，其寬度隨元素的內(nèi)容而變化。

塊級(jí)元素可以設(shè)置width、height屬性。行內(nèi)元素設(shè)置width、height屬性無效。

注意，塊級(jí)元素即使設(shè)置了寬度，仍然是獨(dú)占一行的。標(biāo)題標(biāo)簽

……<body>

<h1>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2><h3>三級(jí)標(biāo)題</h3><h4>四級(jí)標(biāo)題</h4><h5>五級(jí)標(biāo)題</h5>

<h6>六級(jí)標(biāo)題</h6></body>……基本塊級(jí)標(biāo)簽3-1h1最大h6最小前后隔行操作演示2：標(biāo)題標(biāo)簽<h1>標(biāo)題</h1>……<h6>標(biāo)題</h6>段落標(biāo)簽

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

<p>北京歡迎你，有夢想誰都了不起！/p><p>有勇氣就會(huì)有奇跡。</p></body>……基本塊級(jí)標(biāo)簽3-2前后換行，類似教材中的段落操作演示3：段落標(biāo)簽<p>……</p>水平線標(biāo)簽

……<body><h1>北京歡迎你</h1><hr/><p>北京歡迎你，有夢想誰都了不起！/p><p>有勇氣就會(huì)有奇跡。</p></body>……基本塊級(jí)標(biāo)簽3-3橫線用于內(nèi)容分割單個(gè)標(biāo)簽的閉合形式操作演示4：水平線標(biāo)簽<hr/>練習(xí)——基本塊級(jí)標(biāo)簽需求說明：顯示唐詩介紹（UltraEdit環(huán)境）完成時(shí)間：20分鐘分析應(yīng)使用哪些標(biāo)簽？有序列表標(biāo)簽

……<body><h3>注冊步驟：</h3><ol><li>填寫信息</li><li>收電子郵件</li><li>注冊成功</li></ol></body>……常用于布局的塊級(jí)標(biāo)簽7-1有序列表操作演示5：有序列表標(biāo)簽<ol><li>列表項(xiàng)1</li>……</ol>無序列表標(biāo)簽

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

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

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

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

<td>百度</td><td>新浪</td></tr>

……</table>

常用于布局的塊級(jí)標(biāo)簽7-5<table>--表格<tr>--行<td>--列（單元格）演示示例8：表格標(biāo)簽常用于布局的塊級(jí)標(biāo)簽7-6表單

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

<td>...</td>

</tr>.....</table></form>演示示例9：表單標(biāo)簽<form>……</form>常用于布局的塊級(jí)標(biāo)簽7-7分區(qū)標(biāo)簽<div>

div標(biāo)簽可內(nèi)嵌到<p>等標(biāo)簽內(nèi)，作為普通塊狀元素使用一般當(dāng)作結(jié)構(gòu)化塊狀元素使用，作為邏輯分區(qū)（分塊）即容器來使用……<divstyle="width:400px;height:300px;background:#9FF"><p>……</p><h3>新人上路</h3><ul>……</ul>div其實(shí)就是一個(gè)......</div>……操作演示10：分區(qū)標(biāo)簽小結(jié)1、div-ul(ol)-li：常用于分類導(dǎo)航或菜單等2、div-dl-dt-dd：常用于圖文混編的場合3、table-tr-td：常用于圖文布局或顯示數(shù)據(jù)4、form-table-tr-td：常用于布局表單請說出實(shí)際開發(fā)常用的4種塊狀結(jié)構(gòu)是什么？練習(xí)——常用于布局的塊級(jí)標(biāo)簽需求說明：實(shí)現(xiàn)簡單的商品購買頁完成時(shí)間：25分鐘分析應(yīng)使用哪些標(biāo)簽？圖像標(biāo)簽

……<imgsrc="images/drink.jpg"alt="精品熱賣：高清晰，30寸等離子電視"title="精品熱賣：高清晰，30寸等離子電視"/>……行級(jí)標(biāo)簽3-1為了不同瀏覽器之間的兼容，推薦使用title屬性

，確保能顯示提示文字操作演示11：圖像標(biāo)簽<imgsrc="圖片地址"alt="提示文字"title="提示文字"/>alt屬性與title屬性alt屬性是圖片的替換文字。title屬性規(guī)定元素的額外信息，有視覺效果。alt屬性：1、alt屬性是考慮到不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，以及視覺障礙的用戶和使用屏幕閱讀器的用戶。當(dāng)圖片不顯示的時(shí)候，圖片的替換文字。

2、alt屬性值得長度必須少于100個(gè)英文字符

3、alt屬性是img標(biāo)簽的必須屬性，如果沒有特別意義的圖片，可以寫alt=“”

4、alt屬性是搜索引擎判斷圖片與文字是否相關(guān)的重要依據(jù)，alt屬性添加到img主要的目的才是為了SEO

title屬性：1、title屬性并不是必須的。

2、title屬性規(guī)定元素的額外信息，有視覺效果，當(dāng)鼠標(biāo)放到文字或是圖片上時(shí)有文字顯示。

3、title屬性并不作為搜索引擎抓取圖片的參考，更多傾向于用戶體驗(yàn)的考慮。

范圍標(biāo)簽<span>：顯示某行內(nèi)的獨(dú)特樣式

……<p>商品價(jià)格:僅售<spanstyle="color:red;font-size:70px;">10</span>元</p>……行級(jí)標(biāo)簽3-2操作演示12：span標(biāo)簽<span>文本等行級(jí)內(nèi)容</span>設(shè)置紅色、大號(hào)字突出顯示

換行標(biāo)簽

<br/>

……<p>

北京歡迎你，有夢想誰都了不起！<br/>

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

北京歡迎你，為你開天辟地<br/>

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

北京歡迎你，在太陽下分享呼吸<br/>

在黃土地刷新成績。<br/>

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

讓我們都加油去超越自己。<br/></p>……行級(jí)標(biāo)簽3-3和<p>的區(qū)別：前后不換行操作演示13：換行標(biāo)簽為什么需要W3C標(biāo)準(zhǔn)W3C：WorldWideWebConsortium，萬維網(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)文檔訪問方面：OM頁面交互方面：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存在問題：1、內(nèi)容和表現(xiàn)沒分離，后期很難維護(hù)和修改2、HTML代碼不能表示頁面的內(nèi)容語義，不利于搜索引擎搜索

操作演示：不規(guī)范的示例W3C提倡的Web結(jié)構(gòu)規(guī)范的示例<h1>一級(jí)主題1</h1><p>

溫馨提示

  • 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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論