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

下載本文檔

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

文檔簡介

第一章HTML入門本節(jié)內容HTML簡介HTML常用標簽介紹常用的塊級標簽常用的行級標簽超鏈接標簽W3C標準及XHTML規(guī)范本講目標HTML常用基本標簽的使用標題字體、圖像標簽列表、超鏈接標簽HTML簡介HTML：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>

標簽內網頁的摘要信息網頁摘要信息利于瀏覽器解析和搜索引擎搜索：使用<title>標簽<head><title>搜狐-中國最大的門戶網站</title></head><head><metaname="keywords"content="淘寶,網上購物,在線交易,交易市場"/>

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

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

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

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

行級標簽：按行逐一顯示

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

基本塊級標簽——標題標簽……<body>

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

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

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

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

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

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

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

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

<td>...</td>

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

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

，確保能顯示提示文字行級標簽—范圍標簽范圍標簽<span>：顯示某行內的獨特樣式……<p>商品價格:僅售<spanstyle="color:red;font-size:70px;">10</span>元</p>……<span>文本等行級內容</span>設置紅色、大號字突出顯示

行級標簽—換行標簽換行標簽<br/>

……<p>

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

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

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

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

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

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

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

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

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

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

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

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

……<ahref="span.html"target="_blank">燦坤蒸氣電熨斗</a>……鏈接在新窗口中打開<ahref="鏈接地址"target="目標窗口位置">鏈接熱點文本或圖像</a>鏈接路徑……<ahref="../web1.htm">上級目錄</a><ahref="../../web2.htm">上上級目錄</a>……相對地址：相對于當前目錄的地址，常用

絕對地址：指向目標地址的完整描述，少用

上級目錄：../上上級目錄：../../<ahref="/memAdmin/login/login.htm">登錄</a><ahref="">搜狐</a><ahref="login/login.htm">登錄</a>超鏈接的三類應用場合……<ahref="register/register.html">[免費注冊]</a><ahref="login/login.htm">[登錄]</a>……頁面間鏈接錨鏈接功能性鏈接

常用于網站導航相對路徑超鏈接的三類應用場合實現(xiàn)錨鏈接1、定義標記（錨）：<aname="標記名">目標位置</a>2、設置鏈接到標記位置：<ahref="#標記名">當前位置</a>……<ahref="#star">[明星專區(qū)]</a>……

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

溫馨提示

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

評論

0/150

提交評論