《網頁設計與制作》第1章_第1頁
《網頁設計與制作》第1章_第2頁
《網頁設計與制作》第1章_第3頁
《網頁設計與制作》第1章_第4頁
《網頁設計與制作》第1章_第5頁
已閱讀5頁，還剩32頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

標簽內這部分包含文本、圖像和鏈接，它包括在<body>…</body>

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

<title>搜狐-中國最大的門戶網站</title></head><head>

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

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

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

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

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

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

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

常用于布局的塊級標簽塊級元素與行內無素的區(qū)別

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

塊級元素會獨占一行，默認情況下，其寬度自動填滿其父元素寬度，行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化。

塊級元素可以設置width、height屬性。行內元素設置width、height屬性無效。

注意，塊級元素即使設置了寬度，仍然是獨占一行的。標題標簽

……<body>

<h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5>

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

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

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

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

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

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

<li>如何激活會員名？</li><li>如何注冊貴美會員？</li><li>注冊時密碼設置有什么要求？</li><li>貴美認證</li></ul></body>常用于布局的塊級標簽7-2無序列表操作演示6：無序列表標簽<ul><li>列表項1</li>……</ul>定義描述標簽

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

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

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

……</table>

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

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

<td>...</td>

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

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

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

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

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

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

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

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

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

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

范圍標簽<span>：顯示某行內的獨特樣式

……<p>商品價格:僅售<spanstyle="color:red;font-size:70px;">10</span>元</p>……行級標簽3-2操作演示12：span標簽<span>文本等行級內容</span>設置紅色、大號字突出顯示

換行標簽

<br/>

……<p>

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

有勇氣就會有奇跡。<br/>

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

流動中的魅力充滿朝氣。<br/>

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

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

北京歡迎你，像音樂感動你<br/>

讓我們都加油去超越自己。<br/></p>……行級標簽3-3和<p>的區(qū)別：前后不換行操作演示13：換行標簽為什么需要W3C標準W3C：WorldWideWebConsortium，萬維網聯盟W3C的職能：負責制定和維護web行業(yè)標準W3C標準包括：列的標準：HTML內容方面：XHTML樣式美化方面：CSS結構文檔訪問方面：OM頁面交互方面：ECMAScript……制定統一的web標準W3CNetscape的圖標W3C提倡的Web結構不規(guī)范的示例<fontsize="7">一級主題</Font><br/>一級主題闡述文字<br/><Br/><fontsize="5">二級主題</font><br/>二級主題相關文字<P>項目列表1<p>項目列表2<p>項目列表3存在問題：1、內容和表現沒分離，后期很難維護和修改2、HTML代碼不能表示頁面的內容語義，不利于搜索引擎搜索

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論