Web標(biāo)簽介紹(一)

標(biāo)簽(大小寫不敏感)

<br/>:定義空標(biāo)簽(元素)叫确,標(biāo)簽一開始就結(jié)束,如不產(chǎn)生新段落的情況下竹勉,可以用作換行(新增一行)娄琉;

<p 屬性> 內(nèi)容</p>:定義段落次乓;

<h1>-<h6>:定義標(biāo)題孽水,h1為最大標(biāo)題,h6為最小標(biāo)題;

<hr/>:定義水平線女气;

<!-->:定義注釋;

<abbr>:定義縮寫;

<a>:定義鏈接

鏈接語(yǔ)法:

<a ?href="url">Link text</a>

//? href 屬性規(guī)定鏈接的目標(biāo)轰胁。

開始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來(lái)顯示,"鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接软吐。

target屬性

<a ?target="_blank"></a>

//使用 Target 屬性吟税,你可以定義被鏈接的文檔在何處顯示

//上面實(shí)例定義新的鏈接會(huì)在新的頁(yè)面被打

name屬性

name 屬性規(guī)定(anchor)的名稱凹耙。

您可以使用 name 屬性創(chuàng)建 HTML 頁(yè)面中的書簽肠仪。

書簽不會(huì)以任何特殊方式顯示它對(duì)讀者是不可見的异旧。當(dāng)使用命名錨(named anchors)時(shí),我們可以創(chuàng)建直接跳至該命名錨(比如頁(yè)面中某個(gè)小節(jié))的鏈接吮蛹,這樣使用者就無(wú)需不停地滾動(dòng)頁(yè)面來(lái)尋找他們需要的信息了。

首先潮针,我們?cè)?HTML 文檔中對(duì)錨進(jìn)行命名(創(chuàng)建一個(gè)書簽):

<a name="tip"> 基本的注意事項(xiàng)-有用的提示</a>

//"基本的注意事項(xiàng)-有用的提示"為此html頁(yè)面有的內(nèi)容,即對(duì)“基本的注意事項(xiàng)-有用的提示”加了名字為tips的id瓣戚,創(chuàng)建指向該錨的連接之后,直接跳到該頁(yè)面的此內(nèi)容部分子库;

然后矗晃,我們?cè)?i>同一個(gè)文檔中創(chuàng)建指向該錨的鏈接

<a href="#tip">有用的提示</a>

// href="#tips"? (點(diǎn)擊“有用提示”)為定義指向name為tips的內(nèi)容(基本的注意事項(xiàng)-有用的提示)部分仑嗅;

也可以在其他頁(yè)面中創(chuàng)建指向該錨的鏈接

<a ?href=">有用的提示</a>

// 此時(shí)別的頁(yè)面的href為需要跳轉(zhuǎn)的頁(yè)面url與tip的拼接

注意事項(xiàng):請(qǐng)始終將正斜杠添加到子文件夾张症。假如這樣書寫鏈接:href=“http://www.w3school.com.cn/html”就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求吠冤。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址恭理,然后創(chuàng)建一個(gè)新的請(qǐng)求,就像這樣:href=“ http://www.w3school.com.cn/html/”

提示:命名錨經(jīng)常用于在大型文檔開始位置上創(chuàng)建目錄∷弑簦可以為每個(gè)章節(jié)賦予一個(gè)命名錨,然后把鏈接到這些錨的鏈接放到文檔的上部未荒。如果您經(jīng)常訪問(wèn)百度百科,您會(huì)發(fā)現(xiàn)其中幾乎每個(gè)詞條都采用這樣的導(dǎo)航方式片排。

提示:假如瀏覽器找不到已定義的命名錨速侈,那么就會(huì)定位到文檔的頂端率寡。不會(huì)有錯(cuò)誤發(fā)生倚搬。


<img />:定義圖片(<img src="url"/>)

<img />空標(biāo)簽,意思是說(shuō)每界,它只包含屬性,并且沒有閉合標(biāo)簽眨层。

要在頁(yè)面上顯示圖像,你需要使用源屬性(src)趴樱。src 指 "source"。源屬性的值是圖像的 URL 地址窜司。

URL 指存儲(chǔ)圖像的位置如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 images 目錄中塞祈,那么其 URL 為 http://www.w3school.com.cn/images/boat.gif

瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方议薪。如果你將圖像標(biāo)簽置于兩個(gè)段落之間媳友,那么瀏覽器會(huì)首先顯示第一個(gè)段落斯议,然后顯示圖片醇锚,最后顯示第二段坯临。

Alt屬性

alt 屬性用來(lái)為圖像定義一串預(yù)備的可替換的文本恋昼。替換文本屬性的值是用戶定義的看靠。

瀏覽器無(wú)法載入圖像時(shí)液肌,替換文本屬性告訴讀者她們失去的信息。此時(shí)嗦哆,瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁(yè)面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣老速,這樣有助于更好的顯示信息,并且對(duì)于那些使用純文本瀏覽器的人來(lái)說(shuō)是非常有用的烁峭。

* <map>:定義圖像地圖

? **?id:為 map 標(biāo)簽定義唯一的名稱。

? **?name:為 image-map 規(guī)定的名稱约郁。

? ? 訪問(wèn) Map 對(duì)象

? ?您可以通過(guò)使用 getElementById() 來(lái)訪問(wèn) 元素:var x = document.getElementById("myMap");

* <area>定義圖像地圖上的可點(diǎn)擊區(qū)域

備注:area 元素永遠(yuǎn)嵌套在 map 元素內(nèi)部。area 元素可定義圖像映射中的區(qū)域供置。

img 中的 usemap 屬性可引用 中的 id 或 name 屬性(取決于瀏覽器),所以我們應(yīng)同時(shí)向 添加 id 和 name 屬性芥丧。

必須的屬性:

? alt:定義此區(qū)域的替換文本坊罢。

可選的屬性:

? ? ? ** coords:坐標(biāo)值( 標(biāo)簽的 coords 屬性定義了客戶端圖像映射中對(duì)鼠標(biāo)敏感的區(qū)域的坐標(biāo)续担。坐標(biāo)的數(shù)字及其含義取決于 shape 屬性中決定的區(qū)域形狀活孩。可以將客戶端圖像映射中的超鏈接區(qū)域定義為矩形憾儒、圓形或多邊形等。)

? ? ? ** href: 定義此區(qū)域的目標(biāo) URL起趾。

? ? ? ** nohref:從圖像映射排除某個(gè)區(qū)域。

? ? ? ** shape:定義區(qū)域的形狀训裆。

? ? ? ? ? ? ***? default:默認(rèn)蜀铲,shape 屬性的值會(huì)影響瀏覽器對(duì) coords 屬性的解釋汛闸。如果未使用 shape 屬性艺骂,那么會(huì)假設(shè)使用值 default诸老。依照標(biāo)準(zhǔn)钳恕,default 意味著該區(qū)域覆蓋整個(gè)圖像。在實(shí)際中忧额,瀏覽器默認(rèn)使用矩形區(qū)域,并期望能找到 4 個(gè) coords 值睦番。如果沒有指定形狀,而且在標(biāo)簽中也沒有包括 4 個(gè)坐標(biāo)托嚣,那么瀏覽器會(huì)忽略整個(gè)區(qū)域。

? ? ? ? ? ? *** rect:矩形兢哭,shape="rectangle",coords="x1,y1,x2,y2"

第一個(gè)坐標(biāo)是矩形的一個(gè)角的頂點(diǎn)坐標(biāo)迟螺,另一對(duì)坐標(biāo)是對(duì)角的頂點(diǎn)坐標(biāo),"0,0" 是圖像左上角的坐標(biāo)矩父。請(qǐng)注意排霉,定義矩形實(shí)際上是定義帶有四個(gè)頂點(diǎn)的多邊形的一種簡(jiǎn)化方法浙垫。

例如郑诺,下面的 XHTML 片段在一個(gè) 100x100 像素圖像的右下方四分之一處,定義了一個(gè)對(duì)鼠標(biāo)敏感的區(qū)域辙诞,并在圖像的正中間定義了一個(gè)圓形區(qū)域。

? ? ? ? ? *** circ:圓形飞涂,shape="circle"祈搜,coords="x,y,z"

這里的 x 和 y 定義了圓心的位置("0,0" 是圖像左上角的坐標(biāo))士八,r 是以像素為單位的圓形半徑。

? ? ? ? ? *** poly:多邊形婚度,shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."

每一對(duì) "x,y" 坐標(biāo)都定義了多邊形的一個(gè)頂點(diǎn)("0,0" 是圖像左上角的坐標(biāo))蝗茁。定義三角形至少需要三組坐標(biāo);高緯多邊形則需要更多數(shù)量的頂點(diǎn)哮翘。

多邊形會(huì)自動(dòng)封閉,因此在列表的結(jié)尾不需要重復(fù)第一個(gè)坐標(biāo)來(lái)閉合整個(gè)區(qū)域阻课。


? ? ??** target:規(guī)定在何處打開 href 屬性指定的目標(biāo) URL。

? ? ? ? ? ?*** _blank:在新窗口中打開新的鏈接限煞;

? ? ? ? ? ?*** _parent:默認(rèn)。在相同的框架中打開被鏈接文檔晰骑。

? ? ? ? ? ?*** _self:在父框架集中打開被鏈接文檔绊序。

? ? ? ? ? ?*** _top:在整個(gè)窗口中打開被鏈接文檔

? ? ? ? ? ***?framename在指定的框架中打開被鏈接文檔硕舆。


eg: <img ?src="planets.jpg" ?border="0" ?usemap="#planetmap"? alt="Planets"/>

<map? name="planetmap" id="planetmap">

<area? shape="circle" coords="180,139,14" href ="venus.html" alt="Venus">

</area>

</map>

//map不是img的元素骤公,但是在img標(biāo)簽中必須使用usemap這個(gè)屬性才能用map


* 定義背景圖片:

<body? background="/i/eg_background.jpg"></body>

* 浮動(dòng)圖片,并且可以調(diào)整圖片尺寸:

<p><img src=“/i/eg_cute.gif” ?align=“l(fā)eft” ? width=“200” ?height=“200”>這段文字左邊放置一張圖片</p>

* 制作圖像鏈接:

<a ?href="http:www.3cschool.html">?

<img ?src="background.gif"/>

</a>


*表格:表格由 <table>標(biāo)簽來(lái)定義阶捆。每個(gè)表格均有若干行(由 <tr> 標(biāo)簽定義),每行被分割為若干單元格(由<td>標(biāo)簽定義),字母 td 指表格數(shù)據(jù)(table data)倍奢,即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本卒煞、圖片叼架、列表畔裕、段落、表單扮饶、水平線、表格等等甜无。

<table ? border="1">

<tr>

<th>Heading</th>

<th>Another ?Heading</th>

</tr>

<tr>

<td ?>row 1,cell?</td>

<td> row 2,cell</td>

<td>&nbsp;</td>

</tr></table>

<border>:為定義邊框,如果說(shuō)不加此屬性占键,則無(wú)邊框昔善;

<th>:為添加表頭;

<td>&nbsp; </td>:表格中的空單元格(空的單元格可能邊框表示不出來(lái)需要加上&nbsp翩概;即可);

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末钥庇,一起剝皮案震驚了整個(gè)濱河市咖摹,隨后出現(xiàn)的幾起案子评姨,更是在濱河造成了極大的恐慌萤晴,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嗦枢,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡文虏,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門氧秘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)趴久,“玉大人丸相,你說(shuō)我怎么就攤上這事朋鞍⊥谆” “怎么了?”我有些...
    開封第一講書人閱讀 156,723評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵畦幢,是天一觀的道長(zhǎng)缆蝉。 經(jīng)常有香客問(wèn)我宇葱,道長(zhǎng)刊头,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評(píng)論 1 283
  • 正文 為了忘掉前任印颤,我火速辦了婚禮,結(jié)果婚禮上年局,老公的妹妹穿的比我還像新娘。我一直安慰自己矢否,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5 384
  • 文/花漫 我一把揭開白布僵朗。 她就那樣靜靜地躺著屑彻,像睡著了一般验庙。 火紅的嫁衣襯著肌膚如雪酱酬。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,760評(píng)論 1 289
  • 那天膳沽,我揣著相機(jī)與錄音,去河邊找鬼挑社。 笑死,一個(gè)胖子當(dāng)著我的面吹牛痛阻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼糜工,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼录淡!你這毒婦竟也來(lái)了捌木?” 一聲冷哼從身側(cè)響起嫉戚,我...
    開封第一講書人閱讀 37,672評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎彬檀,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體努潘,經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2 325
  • 正文 我和宋清朗相戀三年慈俯,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了拥峦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卖子。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖洋闽,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情诫舅,我是刑警寧澤,帶...
    沈念sama閱讀 34,264評(píng)論 4 328
  • 正文 年R本政府宣布刊懈,位于F島的核電站,受9級(jí)特大地震影響虚汛,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜卷哩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望冷溶。 院中可真熱鬧渐白,春花似錦逞频、人聲如沸礼预。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)柒巫。三九已至,卻和暖如春堡掏,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背泉唁。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留扮休,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2 360
  • 正文 我出身青樓玷坠,卻偏偏與公主長(zhǎng)得像劲藐,于是被迫代替她去往敵國(guó)和親八堡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子聘芜,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說(shuō)明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,229評(píng)論 1 41
  • 學(xué)習(xí)HTML的最佳網(wǎng)站沒有之一http://www.w3school.com.cn/html/ 關(guān)于HTML/HT...
    Amyyy_閱讀 2,050評(píng)論 0 16
  • 0.B/S結(jié)構(gòu) 瀏覽器服務(wù)器模式,web瀏覽器是客戶端最主要的應(yīng)用軟件.將客戶端使用web進(jìn)行統(tǒng)一,系統(tǒng)功能實(shí)現(xiàn)集...
    liusong007閱讀 1,048評(píng)論 0 1
  • HTML引用 元素定義短的引用挂谍,瀏覽器通常會(huì)為 元素包圍引號(hào)服鹅。 元素定義被引用的節(jié),瀏覽器通常會(huì)對(duì) 元素進(jìn)...
    做有趣的惡魔閱讀 607評(píng)論 0 1
  • 游來(lái)此處正春風(fēng)企软,柳綠桃紅兩不同。 眼里雜煩都不見,獨(dú)留詩(shī)景在胸中形庭。
    雪窗_武立之閱讀 188評(píng)論 2 4