web標(biāo)準(zhǔn)教程，幫你走進(jìn)web標(biāo)準(zhǔn)設(shè)計(jì)的世界 第二講
我要評(píng)論上一講我主要講解了一下網(wǎng)頁(yè)的基本結(jié)構(gòu)與網(wǎng)頁(yè)主體部分的基本結(jié)構(gòu)，以及常用的html標(biāo)簽。
非常感謝網(wǎng)友對(duì)我的大力支持，謝謝你們給我的鼓勵(lì)！
我繼續(xù)上一講：又開(kāi)始實(shí)戰(zhàn)了，代碼敲起來(lái)！
<div id=”logo”>
<a href=”http://online.cumt.edu.cn”><img src=”logo.jpg” title=”Welcome!” alt=”logo” /></a>
</div>
So easy !
標(biāo)簽4：img
使用指數(shù)：****
功能：導(dǎo)入圖片
類(lèi)型：內(nèi)聯(lián)元素
常用屬性：id，class，title
特別屬性：1.src:導(dǎo)入圖片總要知道圖片在哪不是，src就解決這個(gè)問(wèn)題。他的值就是圖片存放的路徑啦。
2.alt:與title功能類(lèi)似，都是提示功能，我們知道有的時(shí)候一個(gè)網(wǎng)頁(yè)的圖片不一定及時(shí)（或者就是不能成功）加載，那么為了給用戶(hù)一個(gè)友好的說(shuō)明，故用此屬性
例子：1.在E盤(pán)新建兩個(gè)文件夾，命名為html，和images。在html文件夾中建一個(gè)html文件命名為：index.html，復(fù)制一張你比較喜歡的圖片到images文件夾中（例如images.jpg），ok，代碼開(kāi)始了：
index.html：
<body>
<img alt="我是圖片" title="Hello!" src="../images/images.jpg" />
</body>
So easy !
插播廣告：../images/images.jpg：..代表返回到上一級(jí)文件，什么意思呢，我們的目的是找到html文件夾外面的images文件夾中的images.jpg文件，那我們就一步一步的進(jìn)行，首先從html文件夾跳出來(lái)（..），這是我們已經(jīng)指向E盤(pán)了，然后找E盤(pán)中的images文件夾（/images）;最后找到文件（/ images.jpg）;光聽(tīng)我講是不行的，要多實(shí)踐哦！
當(dāng)然img標(biāo)簽還有兩個(gè)常用屬性width和height，分別來(lái)限制顯示圖片的寬度和高度；默認(rèn)為圖片的實(shí)際尺寸，不妨試試這段代碼，你就明白啦：
<body>
<img alt="我是圖片" title="Hello!" src="../images/images.jpg" />
<img alt="我是圖片" title="Hello!" src="../images/images.jpg" width="20" height="20" />
<img alt="我是圖片" title="Hello!" src="../images/images.jpg" width="200" height="200" />
</body>
So easy !
好，我們繼續(xù)頭部講解,導(dǎo)航的搜索框部分代碼被我省略了，表單元素準(zhǔn)備單獨(dú)進(jìn)行將講解。
<div id="nav">
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">新聞中心</a></li>
<li><a href="#">資源下載</a></li>
<li><a href="#">論壇</a></li>
</ul>
<ul>
<li><a href="#">個(gè)人空間</a></li>
<li><a href="#">博雅園</a></li>
<li><a href="#">跳蚤市場(chǎng)</a></li>
<li><a href="#">音樂(lè)站 </a></li>
</ul>
</div>
So easy !
有人可能疑問(wèn)這代碼的運(yùn)行結(jié)果與所給的圖片差的太多了，哈哈，這是正常的，但到目前為止至少文字還是對(duì)的，如果感興趣可以提前去學(xué)習(xí)一下css；
好標(biāo)簽繼續(xù)：
標(biāo)簽5：ul
使用指數(shù)：*****
功能：構(gòu)造一個(gè)無(wú)序列表，必須配合li來(lái)使用
類(lèi)型：塊級(jí)元素
常用屬性：id，class
標(biāo)簽6：ol
使用指數(shù)：*****
功能：構(gòu)造一個(gè)有序列表，必須配合li來(lái)使用
類(lèi)型：塊級(jí)元素
常用屬性：id，class
何為無(wú)序？何為有序？運(yùn)行一下代碼便知分曉：
<div id="nav">
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">新聞中心</a></li>
<li><a href="#">資源下載</a></li>
<li><a href="#">論壇</a></li>
</ul>
<ol>
<li><a href="#">個(gè)人空間</a></li>
<li><a href="#">博雅園</a></li>
<li><a href="#">跳蚤市場(chǎng)</a></li>
<li><a href="#">音樂(lè)站 </a></li>
</ol>
</div>
So easy !
感興趣的可以提前去看看他們的list-style屬性，你會(huì)覺(jué)得很有意思，這里就不介紹了，這部分還是在講解css的時(shí)候再說(shuō)吧。到這里header就完成了。
整理：
<div id="header">
<div id="banner">
<span>你還沒(méi)有登錄，請(qǐng)登錄</span>
<a target="_blank" href="#" title=”注冊(cè)只需要5分鐘！”>登陸</a><a href="#">注冊(cè)</a>
</div>
<div id="logo">
<img src="../images/images.jpg" alt="logo" title="其實(shí)這不是logo" />
</div>
<div id="nav">
<ul style="list-style:">
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">新聞中心</a></li>
<li><a href="#">資源下載</a></li>
<li><a href="#">論壇</a></li>
</ul>
<ul>
<li><a href="#">個(gè)人空間</a></li>
<li><a href="#">博雅園</a></li>
<li><a href="#">跳蚤市場(chǎng)</a></li>
<li><a href="#">音樂(lè)站 </a></li>
</ul>
</div>
</div>
So easy !
效果好難看。。。
至于content部分我只講三小塊，不要驚訝，因?yàn)槠渌拇篌w都是一樣的啊，目的還是為了讓大家認(rèn)識(shí)一些常用的標(biāo)簽，ok，Begin！Right now！
代碼：
<div>
<a title="全國(guó)高校百佳網(wǎng)站網(wǎng)絡(luò)評(píng)選活動(dòng)即將進(jìn)入投票階段" href="#">
<img alt="全國(guó)高校百佳網(wǎng)站" src="tempImg/nschool_pic.jpg"/>
</a>
<h3>
<a href="#">全國(guó)高校百佳網(wǎng)站</a>
</h3>
<p>
中國(guó)大學(xué)生在線網(wǎng)站主辦...
<a href="#">【詳情點(diǎn)擊】</a>
</p>
</div>
So easy !
標(biāo)簽7：h1,h2,h3,h4,h5,h6
使用指數(shù)：***
功能：構(gòu)造一個(gè)標(biāo)題，通常用于顯示一塊的標(biāo)題部分，或者文章的標(biāo)題部分，默認(rèn)的字體是加粗的，不同級(jí)別的標(biāo)題標(biāo)簽只是字體大小不同而已
類(lèi)型：塊級(jí)元素
常用屬性：id，class
標(biāo)簽8：p
使用指數(shù)：*****
功能：構(gòu)造一個(gè)段落
類(lèi)型：塊級(jí)元素（但是不同與div）
常用屬性：id，class
例子（這里我引用了w3cSchool的例子）：
<body>
<p>
這個(gè)段落
在源代碼中
包含許多行
但是瀏覽器
忽略了它們。
</p>
<p>
這個(gè)段落
在源代碼 中
包含 許多行
但是 瀏覽器
忽略了 它們。
</p>
<p>
段落的行數(shù)依賴(lài)于瀏覽器窗口的大小。如果調(diào)節(jié)瀏覽器窗口的大小，將改變段落中的行數(shù)。
</p>
</body>
看這個(gè)結(jié)構(gòu)顯然是一個(gè)沒(méi)有順序的列表：我們借此來(lái)鞏固學(xué)習(xí)一下ul，畢竟他很重要，另外的目的就是為下文鋪墊：
代碼：
<ul>
<li>
<a href="#">老師對(duì)文法學(xué)院2010屆...</a>
</li>
<li>
<a href="#">外文學(xué)院舉行2010屆畢...</a>
</li>
<li>
<a href="#">我校舉行校領(lǐng)導(dǎo)與2010...</a>
</li>
<li>
<a href="#">校領(lǐng)導(dǎo)深情寄語(yǔ)2010屆畢業(yè)生</a>
</li>
</ul>
So easy !
像這種文字以列表形式存在，而且沒(méi)有順序性，也沒(méi)有標(biāo)題，我們通?？梢允褂胾l和li的組合來(lái)描述
這個(gè)與上面一個(gè)唯一的不同點(diǎn)就是多了一個(gè)標(biāo)題（“求購(gòu)信息”），可能有人會(huì)想到用這樣的組合完成：
<h4>求購(gòu)信息</h4>
<ul>
<li>…</li>
<li>…</li>
</ul>
當(dāng)然是很好的，不過(guò)這里我要介紹里一個(gè)標(biāo)簽組合來(lái)實(shí)現(xiàn)這個(gè)架構(gòu)：
<dl>
<dt>求購(gòu)信息</dt>
<dd>
<a href="#">求個(gè)二手手機(jī)給老爹用</a>
</dd>
<dd>
<a href="#">求購(gòu)二手顯示器</a>
</dd>
<dd>
<a href="#">尋找自行車(chē)鑰匙</a>
</dd>
<dd>
<a href="#">求購(gòu)移動(dòng)手機(jī)（簡(jiǎn)單功...</a>
</dd>
<dd>
<a href="#">求購(gòu)天翼電信手機(jī)</a>
</dd>
</dl>
好亂啊，但其實(shí)你耐心一點(diǎn)就很容易了。
標(biāo)簽9：dl
使用指數(shù)：*****
功能：構(gòu)造一個(gè)列表，與dt，dd配合使用
類(lèi)型：塊級(jí)元素
常用屬性：id，class
例子：
<body>
<h4>一個(gè)定義列表：</h4>
<dl>
<dt>咖啡</dt>//相當(dāng)于一個(gè)小標(biāo)題
<dd>黑色的熱飲料</dd>//該標(biāo)題下面的內(nèi)容
<dd>黑色的熱飲料</dd>
<dd>黑色的熱飲料</dd>
<dt>Milk</dt>//一個(gè)dl中可以有多個(gè)dt
<dd>白色的冷飲料</dd>//一個(gè)dt中可以有多個(gè)dd
<dd>白色的冷飲料</dd>
<dd>白色的冷飲料</dd>
</dl>
</body>
至于尾部我就不講了，相信你已經(jīng)可以寫(xiě)出他的html部分了
下一講我將為大家重點(diǎn)講解表單元素和table元素。
相關(guān)文章
AudioContext 實(shí)現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實(shí)現(xiàn)音頻可視化，要實(shí)現(xiàn)音頻可視化得先實(shí)現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext，下面詳細(xì)內(nèi)容2022-02-23
這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流，文章內(nèi)容圍繞主題展相關(guān)資料，需要的小伙伴可以參考一下，希望對(duì)你有所幫助2022-02-23- 這是我通過(guò)網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范，用于鞏固對(duì)html，css頁(yè)面重構(gòu)時(shí)的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開(kāi)發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開(kāi)發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開(kāi)發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開(kāi)發(fā)協(xié)作，提高代碼質(zhì)量和打造開(kāi)發(fā)基石的編碼風(fēng)格規(guī)范，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。我們知道，當(dāng)一個(gè)團(tuán)隊(duì)開(kāi)始指定并實(shí)行2017-01-21web前端開(kāi)發(fā)規(guī)范文檔(2014年版本)
這篇文章主要為大家介紹了前端開(kāi)發(fā)團(tuán)隊(duì)遵循和約定的代碼書(shū)寫(xiě)規(guī)范，意在提高代碼的規(guī)范性和可維護(hù)性,需要的朋友可以參考下2017-01-21響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁(yè)標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁(yè)標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶(hù)都在下載Visual Foxpro 6.0，但是有安裝vtp6.0經(jīng)驗(yàn)的朋友確很少，在安裝過(guò)程中總會(huì)出現(xiàn)這樣那樣的問(wèn)題，基于這些問(wèn)題，下面小編抽個(gè)時(shí)間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29
