HTML學(xué)習(xí)筆記（一）

本節(jié)學(xué)習(xí)內(nèi)容

<a href="#1">HTML說(shuō)明</a>
<a href="#2">HTML頭部標(biāo)記</a>
<a href="#3">標(biāo)題字</a>
<a href="#4">段落標(biāo)記</a>
<a href="#5">建立超鏈接</a>
<a href="#6">使用圖像</a>

<a name="1">HTML說(shuō)明</a>

  • HTML是一款描述性標(biāo)記語(yǔ)言，不是編程語(yǔ)言
  • 一個(gè)完整的HTML文檔必須包含3個(gè)部分：一個(gè)由<html>元素定義的文檔版本信息；一個(gè)由<head>定義各項(xiàng)聲明的文檔頭部；一個(gè)由<body>定義的文檔主體部分

<a name="2">HTML頭部標(biāo)記</a>

  • <head>...</head>頭部標(biāo)記，一般包括標(biāo)題、基礎(chǔ)信息、文檔樣式表定義、腳本和元信息，定義在頭部的信息往往不會(huì)直接顯示在網(wǎng)頁(yè)上
  • <title>...</title>標(biāo)題標(biāo)記，頁(yè)面的標(biāo)題只有一個(gè)
  • 元信息標(biāo)記meta,meta元素提供的信息不顯示在頁(yè)面上，一般用來(lái)定義頁(yè)面信息的說(shuō)明、關(guān)鍵字和刷新等。一個(gè)HTML頁(yè)面中可以有多個(gè)meta元素，該元素的屬性有name和http-equiv，其中name屬性主要用于描述網(wǎng)頁(yè)，以便于搜索引擎查找、分類,語(yǔ)法<meta name="keywords" content="輸入具體的關(guān)鍵字">
  • name="keywords"設(shè)置網(wǎng)頁(yè)的關(guān)鍵字屬性，在content中定義具體的關(guān)鍵字
  • <meta name="description" content="設(shè)置頁(yè)面說(shuō)明">，name設(shè)置成description頁(yè)面說(shuō)明，在content中定義具體的描述語(yǔ)言
  • <meta name="generator" content="FrontPage">，name設(shè)置成generator編輯工具，在content中定義具體的編輯工具名稱
  • <meta name="author" content="作者的姓名">，name設(shè)置成author作者信息，在content中定義具體的信息
  • <meta http-equiv="content-type" content="text/html; charset=字符集類型">，網(wǎng)頁(yè)中還可以設(shè)置語(yǔ)言的編碼方式。http-equive用于傳送HTTP通信協(xié)議的標(biāo)頭，而在content才是具體的屬性值。charset用于設(shè)置網(wǎng)頁(yè)的內(nèi)碼語(yǔ)系，也就是字符集的類型。
  • <meta http-equiv="refresh" content="跳轉(zhuǎn)的時(shí)間; URL=跳轉(zhuǎn)到的地址">，<meta/>標(biāo)記可以使網(wǎng)頁(yè)在經(jīng)過(guò)一定時(shí)間后自動(dòng)刷新。refresh表示網(wǎng)頁(yè)的刷新，在content中設(shè)置刷新的時(shí)間和刷新后的鏈接地址，時(shí)間和鏈接地址之間用分號(hào)隔斷，默認(rèn)情況系，跳轉(zhuǎn)時(shí)間的單位是秒

<a name="3">標(biāo)題字</a>

  • 標(biāo)題字標(biāo)記<h1>到<h6>
  • 標(biāo)題字對(duì)其屬性<align=對(duì)齊方式>，left、center、right。

<a name="4">段落標(biāo)記</a>

  • 段落標(biāo)記<p>段落文字</p>，每一個(gè)新的段落標(biāo)記開(kāi)始的同時(shí)意味著上一個(gè)段落的結(jié)束
  • 換行標(biāo)記<br>，作用是在不另起一段的情況下強(qiáng)制當(dāng)前文本換行，<br>是唯一可以為文字分行的方法，標(biāo)記<p>可以為文字分段
  • 不換行標(biāo)記<nobr>,網(wǎng)頁(yè)中某一行的文字過(guò)長(zhǎng)，瀏覽器會(huì)自動(dòng)對(duì)文字進(jìn)行換行處理，可以使用<nobr>標(biāo)記來(lái)禁止自動(dòng)換行
  • 水平線標(biāo)記<hr>,代表水平分割模式，并會(huì)在瀏覽器中顯示一條線
  • 其他標(biāo)記-特殊符號(hào)的表示
特殊符號(hào) 符號(hào)的代碼 特殊符號(hào) 符號(hào)的代碼
一個(gè)半角空格 &nbsp; “ &quot;
& &amp; < &lt;
> &gt; × &times;
§ &sect; ? &copy;
? &reg; ? &trade;

<a name="5">建立超鏈接</a>

  • 超鏈接能夠?yàn)g覽者在各個(gè)獨(dú)立的頁(yè)面之間方便的跳轉(zhuǎn)。網(wǎng)站都是有眾多的網(wǎng)頁(yè)組成，網(wǎng)頁(yè)之間都是通過(guò)鏈接方式相互關(guān)聯(lián)的。超鏈接的作用范圍很廣，可以將文檔中的任何文字及任意位置的圖片設(shè)置為超鏈接。
  • 超鏈接分為外部鏈接、電子郵件鏈接、錨點(diǎn)鏈接、空鏈接、腳本鏈接。
  • 每個(gè)網(wǎng)頁(yè)都有一個(gè)唯一的地址，稱為統(tǒng)一資源定位符（URL）。在網(wǎng)頁(yè)中創(chuàng)建內(nèi)部鏈接的時(shí)候，一般不會(huì)指定鏈接文檔的完整URL，而是指定一個(gè)相對(duì)當(dāng)前文檔或站點(diǎn)根文件夾的相對(duì)路徑。
  • 絕對(duì)路徑：是包括服務(wù)器規(guī)范在內(nèi)的完全路徑。好處是它同鏈接的源端點(diǎn)無(wú)關(guān)，只要網(wǎng)站的地址不變，無(wú)論文檔在站點(diǎn)中如何移動(dòng)都可以正常的而不會(huì)發(fā)生錯(cuò)誤。另外，希望鏈接同站點(diǎn)上的其他內(nèi)容，就必須使用絕對(duì)路徑。缺點(diǎn)在于不利于測(cè)試，不利于站點(diǎn)的移植。
  • 相對(duì)路徑：可以表述源端點(diǎn)同目標(biāo)端點(diǎn)之間的相互位置，它同源端點(diǎn)的位置密切相關(guān)。好處在于如果站點(diǎn)的結(jié)構(gòu)和文檔的位置不變，那么鏈接就不會(huì)出錯(cuò)?？梢詫⒄麄€(gè)網(wǎng)站移植到另一個(gè)地址的網(wǎng)站中，而不需要修改文檔中的鏈接路徑。
  • 提示：插入圖像時(shí)，如果使用圖像的絕對(duì)路徑，圖像在遠(yuǎn)程服務(wù)器而不是在本地硬盤上，則將無(wú)法在文檔窗口中查看該圖像。對(duì)于圖像盡量使用相對(duì)路徑
  • 內(nèi)部鏈接是指鏈接的對(duì)象是在同一個(gè)網(wǎng)站中的資源
  • 鏈接的目標(biāo)窗口，在創(chuàng)建網(wǎng)頁(yè)的過(guò)程中，默認(rèn)情況下超鏈接在原來(lái)的瀏覽器窗口中打開(kāi)，可以使用target屬性來(lái)控制打開(kāi)的目標(biāo)窗口。語(yǔ)法為：<a href="目標(biāo)文件" target="目標(biāo)窗口的打開(kāi)方式">，target參數(shù)的取值有四種：

    -self(在當(dāng)前頁(yè)面中打開(kāi)鏈接)、

    -blank(在一個(gè)全新的空白窗口中打開(kāi)鏈接)、

    -top(在頂層框架中打開(kāi)鏈接，也可以理解為在根框架中打開(kāi)鏈接)、
    -parent(在當(dāng)前框架的上一層打開(kāi)鏈接)
  • 錨點(diǎn)鏈接：當(dāng)頁(yè)面中由于文本或者圖像過(guò)多，導(dǎo)致頁(yè)面過(guò)長(zhǎng)，訪問(wèn)者需要不斷拖動(dòng)滾動(dòng)條查看文檔內(nèi)容。為了方便文檔中的內(nèi)容，在文檔中需要進(jìn)行錨點(diǎn)鏈接。語(yǔ)法為<a name="錨點(diǎn)的名稱"></a>，利用錨點(diǎn)的名稱可以鏈接到相應(yīng)的位置。這個(gè)名稱可以是數(shù)字或英文，或者兩者的混合。同一個(gè)網(wǎng)頁(yè)中可以有無(wú)數(shù)個(gè)錨點(diǎn)，但是不能有相同名稱的兩個(gè)錨點(diǎn)
  • 鏈接同一頁(yè)面中的錨點(diǎn)，用#號(hào)以及錨點(diǎn)的名稱作為href的屬性值，語(yǔ)法為<a href="#錨點(diǎn)的名稱"></a>
  • 提示：如果鏈接的錨點(diǎn)在屏幕上已經(jīng)可見(jiàn)，那么瀏覽器可能不會(huì)再跳到那個(gè)錨點(diǎn)。如果鏈接的錨點(diǎn)正好在屏幕的底部，那么根據(jù)屏幕的大小，瀏覽器也不能跳到該錨點(diǎn)，因?yàn)橐呀?jīng)到了底部，只能盡可能的接近錨點(diǎn)
  • 鏈接到其他頁(yè)面中的錨點(diǎn)：錨點(diǎn)不但可以鏈接到同一個(gè)頁(yè)面，也可以在不同頁(yè)面中設(shè)置。語(yǔ)法：<a href-"鏈接的文件地址#錨點(diǎn)名稱">...</a>
  • 錨點(diǎn)鏈接常常用于那些內(nèi)容龐大繁雜的網(wǎng)頁(yè)。通過(guò)單擊命名錨點(diǎn)，能夠快速重定向網(wǎng)頁(yè)特定的位置，如快速到頁(yè)首、頁(yè)尾或者網(wǎng)頁(yè)中某段位置，便于瀏覽者查看網(wǎng)頁(yè)內(nèi)容。
  • 外部鏈接是指跳轉(zhuǎn)到當(dāng)前網(wǎng)站之外的資源中。如:
    （1）鏈接到外部網(wǎng)站<a href="http://.....">....</a>
    （2）鏈接到E-mail<a href="mailto:郵件地址">...</a>
    （3）鏈接到FTP<a href="ftp://ftp地址">...</a>FTP代表文件傳輸協(xié)議，一個(gè)FTP站點(diǎn)通常包含一些上傳和下載文件的文件目錄
    （4）鏈接到Telnet<a href="telnet://telnet地址">...</a>Telent常用來(lái)登陸一些BBS網(wǎng)站，也是一種遠(yuǎn)程登錄方式
    （5）下載文件<a href="文件地址">...</a>如果超鏈接指向的是一個(gè)文件,單擊鏈接的時(shí)候就會(huì)下載文件

<a name="6">使用圖像</a>

  • 網(wǎng)頁(yè)中常用的圖像格式優(yōu)3種:GIF JPEG和PNG

    (1)GIF -- Graphic Interchange Format圖像交換格式,優(yōu)點(diǎn):可制作動(dòng)態(tài)圖像、可以將圖像以交錯(cuò)的方式在網(wǎng)頁(yè)中呈現(xiàn)(如圖像尚未下載,瀏覽器會(huì)先以馬賽克的形式將圖像慢慢顯示,讓瀏覽者可以大致猜出下載圖像的雛形)

    (2)JPEG -- Joint Photographic Exports Group它是一種圖像壓縮格式

    (3)PNG -- Portable Network Graphics圖像格式是一種非破壞性的網(wǎng)頁(yè)圖像文件格式
  • 插入圖像標(biāo)記img img元素的屬性定義:
屬性 描述 屬性 描述
src 圖像的源文件 alt 提示文字
width,height 寬度和高度 border 邊框
vspace 垂直間距 hspace 水平間距
align 排列 dynsrc 設(shè)定avi文件的播放
loop 設(shè)定avi文件循環(huán)播放次數(shù) usemap 映像地圖
start 設(shè)定avi文件播放方式 lowsrc 設(shè)定低分辨率圖片
loopdelay 設(shè)定avi文件循環(huán)播放延遲
  • 圖像的提示文字alt。提示文字有兩個(gè)作用，當(dāng)瀏覽該網(wǎng)頁(yè)時(shí)，如果圖像下載完成，將鼠標(biāo)指針?lè)旁谠搱D像上，鼠標(biāo)指針旁邊會(huì)出現(xiàn)提示文字。也就是說(shuō)，當(dāng)鼠標(biāo)指針指向圖像上方時(shí)，稍等片刻，可以出現(xiàn)圖像的提示性文字，用于說(shuō)明說(shuō)著描述圖像。第二個(gè)作用是，如果圖像沒(méi)有被下載，在圖像的位置上就會(huì)顯示提示文字。
  • 圖像的超鏈接，除了文字可以添加超鏈接之外，圖像也可以設(shè)置超鏈接。同一個(gè)圖像的不同部分也可以鏈接到不同的文檔，這就是熱區(qū)鏈接。超鏈接也是用<a>標(biāo)簽來(lái)完成。
  • 圖像熱區(qū)鏈接：在HTML中可以把圖片劃分為多個(gè)熱點(diǎn)區(qū)域，每一個(gè)熱點(diǎn)區(qū)域鏈接到不同的網(wǎng)頁(yè)。這種效果的實(shí)質(zhì)是把一幅圖片劃分為不同的熱點(diǎn)區(qū)域，再讓不同的熱點(diǎn)區(qū)域進(jìn)行超鏈接，這就是映射地圖。
語(yǔ)法：
首先需要在文件中設(shè)置映射圖像名，在圖像的屬性中使用<usemap>標(biāo)記添加圖像要引用的映射圖像的名稱如下：
![](圖像地址)
然后需要定義熱區(qū)圖像以及熱區(qū)的鏈接屬性如下：
<map name="映射圖像名稱">
<area shape="熱區(qū)形狀" coords="熱區(qū)坐標(biāo)" href="鏈接地址">
</map>
說(shuō)明：在該語(yǔ)法中需要先定義映射圖片的名稱，然后再引用這個(gè)映射圖像
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容