第一章html基本標簽_第1頁
第一章html基本標簽_第2頁
第一章html基本標簽_第3頁
第一章html基本標簽_第4頁
第一章html基本標簽_第5頁
已閱讀5頁，還剩31頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

馬瑞新WEB系統(tǒng)開發(fā)與實踐HTML基本標簽（一）第一章客戶端技能結(jié)構(gòu)圖學完本門課程后，你能夠：制作界面美觀大方、面向企業(yè)應用的靜態(tài)商業(yè)網(wǎng)站掌握Web開發(fā)的行業(yè)規(guī)范和標準貴美商城首頁商品展示頁（點擊左邊“商品分類”任一鏈接）具體商品詳細介紹頁（點擊任一商品圖片）購物車頁面（點擊“立刻購買”按鈕）登錄頁（點擊右上方的導航菜單）注冊頁（點擊右上方的導航菜單）幫助中心客服頁面（點擊右上方的導航菜單）制作圖文并茂的商品介紹頁使用HTML的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁

使用行級和塊級標簽組織頁面內(nèi)容使用圖像標簽實現(xiàn)圖文并茂的頁面HTML：Hyper

Text

Markup

Language

超文本標簽語言HTML：網(wǎng)頁的“源碼”瀏覽器：“解釋和執(zhí)行”HTML源碼的工具HTML告知瀏覽器如何顯示網(wǎng)頁HTML文檔的結(jié)構(gòu)<html><head><title>我的第一個網(wǎng)頁</title></head></html>HTML

網(wǎng)頁<head>頭部部分<body>主體部分這部分包<含h括tm文標l本題>…、和<圖其/h像他tm和說l>鏈明標接信簽，息標它，記包H括TM在L<文bho檔eda的dy>開…始</和bhoe結(jié)addy束>標簽內(nèi)網(wǎng)頁標題<body

>Hello

World!</body>網(wǎng)頁內(nèi)容，可以是文本、圖像等記事本UltraEdit操作演示1：在記事本里創(chuàng)建網(wǎng)頁網(wǎng)頁摘要信息利于瀏覽器解析和搜索引擎搜索：使用<title>標簽<head><title>搜狐-中國最大的門戶網(wǎng)站</title></head>使用<meta>標簽描述文檔類型和字符編碼描述搜索關(guān)鍵字和描述<head><meta

http-equiv="Content-Type"

content="text/html;

charset=gb2312"

/></head>提供搜索關(guān)鍵字和內(nèi)容描述信息，方便搜索引擎的搜索<head><meta

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

name="description"content="淘寶網(wǎng)-亞洲最大、最安全的網(wǎng)上交易平臺，提供各類服飾、美容、家居、數(shù)碼、……"/></head>HTML標簽分類（方便后續(xù)的布局設計）：塊級標簽：顯示為“塊”狀，前后隔一行行級標簽：按行逐一顯示分類好處：方便后續(xù)的布局設計行級：包括文字、圖片等塊級：

塊內(nèi)包含多行根據(jù)使用場合，塊級標簽又細分為：基本塊級標簽常用于布局的塊級標簽標題標簽……<body><h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5><h6>六級標題</h6></body>……h(huán)1最大

h6最小

前后隔行操作演示2：標題標簽<h1>標題</h1>……<h6>標題</h6>段落標簽前后換行，類似教材中的段落<p>……</p>……<body><h1>北京歡迎你</h1><p>北京歡迎你，有夢想誰都了不起！</p><p>有勇氣就會有奇跡。</p></body>……操作演示3：段落標簽水平線標簽橫線用于內(nèi)容分割單個標簽的閉合形式<hr

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

/><p>北京歡迎你，有夢想誰都了不起！/p><p>有勇氣就會有奇跡。</p></body>……操作演示4：水平線標簽需求說明：顯示唐詩介紹分析應使用哪些標簽？有序列表標簽有序列表<ol><li>列表項1</li>…

…</ol>……<body><h3>注冊步驟：</h3><ol><li>填寫信息</li><li>收電子郵件</li><li>注冊成功</li></ol></body>……操作演示5：有序列表標簽無序列表標簽無序列表<ul><li>列表項1</li>……</ul><body><h3>新人上路指南</h3><ul><li>如何激活會員名？</li><li>如何注冊貴美會員？</li><li>注冊時密碼設置有什么要求？</li><li>貴美認證</li></ul></body>操作演示6：無序列表標簽定義描述標簽這種效果可以和無序列表互相替代，因dt是塊狀元素，所以常用于圖文混編的布局場合<dl><dt>標題</dt><dd>描述1</dd>……</dl>……<body><dl><dt>咖啡</dt><dd>一種黑色的熱飲料，原料據(jù)說是咖啡豆，非洲盛產(chǎn)這類原料。</dd><dd>可以提神，刺激神經(jīng)。</dd><dl></body>……操作演示7：dl和dt標簽文字有一定的縮進……<body><dl><dt>圖片的HTML代碼（后續(xù)講解）……<dt><dd>商品名稱：燦坤蒸氣電熨斗</dd><dd>商品價格：388元</dd><dd>商品簡介：金鋼低血超硬超順滑,140ml透明大水箱設計</dd></dl></body>……用定義描述標簽實現(xiàn)圖文混編的效果表格<table><tr><td>百度</td><td>新浪</td></tr>……</dl><table>--表格<tr><td>--行--列（單元格）演示示例8：表格標簽表單一般和table使用：<form><table><tr><td>...</td><td>...</td></tr>.....</table></form><form>……</form>演示示例9：表單標簽分區(qū)標簽<div>等標簽素使用一般當為邏輯div標簽可內(nèi)嵌到<p>內(nèi)，作為普通塊狀元作結(jié)構(gòu)化塊狀元素使用，作分區(qū)（分塊）即容器來使用……<div

style="width:400px;

height:300px;

background:#9FF"><p>……</p><h3>新人上路</h3><ul>……</ul>div其實就是一個......</div>……操作演示10：分區(qū)標簽請說出實際開發(fā)常用的4種塊狀結(jié)構(gòu)是什么？1、div-ul(ol)-li

：常用于分類導航或菜單等2、div-dl-dt-dd

：常用于圖文混編的場合3、table-tr-td

：常用于圖文布局或顯示數(shù)據(jù)4、form-table-tr-td：常用于布局表單需求說明：實現(xiàn)簡單的商品購買頁分析應使用哪些標簽？圖像標簽為了不同瀏覽器之間的兼容，推薦使用title屬性，確保能顯示提示文字<img src=

"圖片地址"

alt="提示文字"

title="提示文字"

/>……<img

src="images/drink.jpg"alt="精品熱賣：高清晰，30寸等離子電視"title="精品熱賣：高清晰，30寸等離子電視"/>……操作演示11：圖像標簽范圍標簽<span>：顯示某行內(nèi)的獨特樣式<span>文本等行級內(nèi)容</span>設置紅色、大號字突出顯示……<p>商品價格:僅售<span

style="color:red;font-size:70px;">10</span>元</p>……操作演示12：span標簽換行標簽<br/>……<p>北京歡迎你，有夢想誰都了不起！<br/>有勇氣就會有奇跡。<br/>北京歡迎你，為你開天辟地<br/>流動中的魅力充滿朝氣。<br/>北京歡迎你，在太陽下分享呼吸<br/>在黃土地刷新成績。<br/>北京歡迎你，像音樂感動你<br/>讓我們都加油去超越自己。<br/></p>……和<p>的區(qū)別：前后不換行操作演示13：換行標簽W3C：World

Wide

Web

Consortium，萬維網(wǎng)聯(lián)盟

W3C的職能：負責制定和維護web行業(yè)標準

W3C標準包括：列的標準：HTML內(nèi)容方面：XHTML樣式美化方面：CSS結(jié)構(gòu)文檔訪問方面：OM頁面交互方面：ECMAScript……W3C制定統(tǒng)一的web標準Netscape的圖標不規(guī)范的示例<font

size="7">一級主題</Font><br/>一級主題闡述文字<br/><Br/><font

size="5">二級主題</font><br/>二級主題相關(guān)文字<P>項目列表1<p>項目列表2<p>項目列表3存在問題：1、內(nèi)容和表現(xiàn)沒分離，后期很難維護和修改2、HTML代碼不能表示頁面的內(nèi)容語義，不利于搜索引擎搜索操作演示：不規(guī)范的示例規(guī)范的示例<h1>一級主題1</h1><p>一級主題闡述文字</p><h2>二級主題</h2><p>二級主題闡述文字</p><ul><li>項目列表1</li><li>項目列表2</li><li>項目列表3</li></ul>W3C提倡的Web結(jié)構(gòu)：1、內(nèi)容（結(jié)構(gòu)）和表現(xiàn)（樣式）分離2、HTML內(nèi)容結(jié)構(gòu)要求語義化操作演示：規(guī)范的示例<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML1.0

Strict//EN""

"><html><head>……</head>……body部分內(nèi)容……</html>標簽名和屬性名稱必須小寫HTML標簽必須關(guān)閉屬性值必須用

溫馨提示

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

評論

0/150

提交評論