靜態(tài)網(wǎng)頁開發(fā)技術(shù)

• HTML技術(shù)
• • 1.HTML概述
  • 2.HTML文本標(biāo)簽
  • 3.圖片標(biāo)簽

HTML技術(shù)

1.HTML概述

HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。

2.HTML文本標(biāo)簽

①外觀相關(guān)標(biāo)簽

• HTML為單獨(dú)的詞或者句子定義了兩種外觀樣式:物理樣式和邏輯樣式。物理樣式說明標(biāo)簽之間的文句的特定外貌,是固定效果。
  

• 邏輯樣式并不能像物理字體那樣明確知道字體的顯示方式，這些邏輯字體標(biāo)簽并不指明字體如何顯示，而是讓W(xué)eb瀏覽器自行決定顯示方式，不同的瀏覽器解釋效果可能不同。
  

②結(jié)構(gòu)相關(guān)標(biāo)簽

• 段落標(biāo)簽 ：< p >，它可將標(biāo)簽間的文字設(shè)置為一個(gè) 新的段落，段落 標(biāo)簽可以有align對齊(用來設(shè)置文本的對齊,屬性值可以為left.right和center等)等屬性。< br> 是換行標(biāo)簽，瀏覽器解析HTML頁面時(shí)，會(huì)忽略源代碼中多余的空格、空行等。這里 < p> 是雙標(biāo)簽,要求既要有開始標(biāo)簽，又要有結(jié)束標(biāo)簽;而**< br>**是單標(biāo)簽,結(jié)束標(biāo)簽可以和開始標(biāo)簽起寫為 < br/> ，也可以省略結(jié)束標(biāo)記。
• 標(biāo)題標(biāo)簽 <h? …<./h >,其中?代表從1~6的數(shù)字,hl字體最大,h6字體最小。這些標(biāo)簽的作用是設(shè)置標(biāo)題字體的大小，顯示黑體字,并自動(dòng)插人空行,可設(shè)置align對齊等屬性。
• 區(qū)塊標(biāo)簽 < div> 和 < span> ,HTML可以通過這兩個(gè)標(biāo)簽將元素組合起來。div 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分，一般我們在網(wǎng)頁通過div來布局定位網(wǎng)頁中的每個(gè)區(qū)塊，它是一個(gè)是用來為HTML文檔內(nèi)大塊內(nèi)容提供結(jié)構(gòu)和背景的塊級元素。標(biāo)簽本身沒有特定的含義，它最終目的是與CSS一同使用,給設(shè)計(jì)者一種組織能力,用于文檔布局,取代了傳統(tǒng)的表格定 義布局的老式方法。span標(biāo)簽是一個(gè)內(nèi)聯(lián)元素,沒有實(shí)際意義，它的存在只是為了應(yīng)用樣式，給一段內(nèi)容加上span標(biāo)記可以通過在其上定義的樣式來設(shè)定其內(nèi)容顯示效果。
  -示例1

< body>大家好<p align= "center" >我是分段標(biāo)記</p> 看清楚哦<br />我是換行標(biāo)記 < hr> 這里是正文.... <h1>我是HI標(biāo)題字,我最大</hl> <h2>我是H2標(biāo)題字< /h2> <h6>我是H6標(biāo)題字，我最小</h6> < hr> <div>這里是頁腳部分哦</div> </body>

③字符實(shí)體

• 對于HTML代碼而言,有些字符有特別的含義，比如小于號<就表示HTML標(biāo)簽的開始,這個(gè)小于號是不顯示在我們最終看到的網(wǎng)頁里的。常見的情況有兩種:(1)HTML中有特殊含義的字符。如:<>”&空格等;(2)無法用鍵盤直接輸人的字符。如:￥fX+∈等。為了解決在瀏覽器中顯示被用作實(shí)現(xiàn)保留字符或無法直接由鍵盤直接輸人的字符，HTML提供了特別的字符實(shí)體功能，專門用來顯示有特殊含義的字符和無法直接用鍵盤輸人的字符。
• 一個(gè)字符實(shí)體(character entities)是由三部分組成的:(1)一個(gè)“&”符號; (2)字符專用名稱或者字符代號; (3)一個(gè)“;”符號。
  

3.圖片標(biāo)簽

HTML網(wǎng)頁中插人圖片用的就是標(biāo)簽，它的眾多屬性可以控制圖片的路徑、尺寸和替換文字等各種功能。圖片主要有src、title、alt、height、width等屬性，具體含義如下，

• src用來設(shè)置圖像文件的絕對路徑和相對路徑URL;

• title用來設(shè)置鼠標(biāo)懸停在圖片上時(shí)顯示的文字;

• alt用來設(shè)置替代顯示文本;

• height、width用來設(shè)置圖像高度、寬度,單位默認(rèn)為像素px。

若某一文件夾中包含網(wǎng)頁文件picture. html、圖片文件heart. png、包含圖片lotus. pnp的文件夾image，它們的位置如圖2-3所示。則可以使用如下的代碼片段，實(shí)現(xiàn)在pieturerhtml網(wǎng)頁文件中顯示這兩個(gè)圖片。具體body標(biāo)簽中代碼如下:

< body>
<img src=’ ‘heart. png" alt= “心形圖片”/>
< /body><ing src=’ inag/ lotus. jPg" width= "200 height-”200”title- "荷花圖片”/>

總結(jié)

以上是生活随笔為你收集整理的静态网页开发技术的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。