html基礎

鏈接:JSP網站開發之HTML入門知識及常用標記符 (一)

網站開發之HTML基礎知識及超鏈接(二)

1.BODY
正文標記符<BODY>和</BODY>包含Web 頁的內容。文字、圖形、鏈接以及其他HTML元素都位于該標記符內。注意:空格、回車這些格式控制在顯示時都不起作用,如要使它們起作用,應使用預格式化元素<PRE>和</PRE>。
插入背景圖片:<BODY BACKGROUND="image.gif">
插入音樂head:<BGSOUND src="soundfileURL">

2.字符格式 FONT
所謂字符格式是指針對段落中的部分文字(一個或一組文字,也可以是整個段落的文字)所設置的格式,通常包括字體、字號、文字顏色。
FONT標記符具有3個常用的屬性: SIZE 設置字體大小、COLOR 設置字體顏色、FACE設置字體樣式。

3.標題樣式 Hn
在HTML中,用戶可以通過Hn標記符來標識文檔中的標題和副標題,其中n是1至6的數字;H1表示最大的標題,H6表示最小的標題。使用標題樣式必須使用結束標記符。

4.添加水平線 HR
添加水平線的標記符為HR,它包括以下屬性: SIZE 屬性用來改變水平線的粗細, WIDTH 屬性用來更改水平線的長度,NOSHADE 屬性使水平線以實線顯示, COLOR屬性可以控制水平線的顏色。

5.ALIGN屬性
ALIGN 屬性用于設置段落的對齊格式,其值包括:RIGHT(右對齊)、LEFT(左對齊)、CENTER(居中對齊)和 JUSTIFY(兩端對齊)。ALIGN 屬性可應用于多種標記符,最典型的是應用于 P、DIV、Hn(標題標記符)、HR 等。

6.有序列表 OL LI
有序列表(Ordered list)也稱數字式列表,它是一種在表的各項前顯示有數字或字母的縮排列表。 定義有序列表需要使用有序列表標記符<OL></OL>和列表項(List item)標記符<LI></<LI>(結束標記符可省略)。OL 標記符最常用的屬性type,用來設置數字序列樣式。取值為:1、A、a、I、i。

7.無序列表 UL LI
無序列表(Unordered list)也稱強調式列表,它是一種在表的各項前顯示有特殊項目符號的縮排列表。 定義無序列表需要使用無序列表標記符<UL></UL>和列表項(List item)標記符<LI></LI>(結束標記符可省略)。

8.IMG 標記符
- src 屬性用于指定要插入的圖像的文件名(包括路徑)
- alt 屬性表示圖像的簡單文本說明
- width 和 height 屬性指定圖像的顯示大小
- border 屬性指定圖像的邊框
- align屬性設置對齊方式
- hspace屬性設置水平方向的空白
- vspace屬性設置垂直方向的空白

二. 超鏈接
HTML(Hypertext Markup Language)超文本標記語言,它是一種規范,一種標準,它通過標記符(tag)來標記要顯示的網頁的各個部分。前面講述了ML標記語言部分,通常是一個網頁,這部分會講解超鏈接Hyperlink,通過超鏈接才能夠實現跳轉,構成完整的網頁。 1.URL URL(Universal Resources Locator)用于定位Web上的文檔信息。 一個 URL 包括 3 部分:協議、計算機地址、文件路徑。 協議://計算機/文件路徑

    使用相對URL時,經常使用兩個與DOS類似的符號:句點(.)表示當前目錄雙重句點(..)表示當前目錄的上一級目錄。


2.超鏈接類型 根據超鏈接的目標文件不同,分為: - 網頁之間的超鏈接 - 頁面內的超鏈接 - 文件下載超鏈接 - Email超鏈接 - 空超鏈接 根據超鏈接源對象的不同,分為: - 文本超鏈接 - 圖像超鏈接(包括圖像映射) - 對象超鏈接(例如Flash、Java小程序) 根據超鏈接實現方式的不同,分為: - HTML超鏈接 - JavaScript超鏈接 - 對象超鏈接 3.創建超鏈接 A標記符用于創建超鏈接(結束標記不能省略),href 屬性指定超鏈接的目標文件。

內部網頁超鏈接:<a href=test.htm>link</a> 外部網頁超鏈接:<a href=http://www.microsoft.com>link</a> 注意:<a></a>之間是具體需要跳轉的內容(切勿丟失),設置超鏈接后會增加下劃線變藍。

注意:test.htm文件需要和源文件放在同一目錄下,同時如果想彈出新的網頁,則添加target屬性,如下: <a target="_blank">Visit CSDN</a> 詳見:http://www.w3school.com.cn/tags/tag_a.asp 如果希望圖片作為跳轉目錄,參考W3School例子:

4.錨點鏈接 使用頁面內的超鏈接,首先需要定義錨點,然后在超鏈接中指向該錨點。 定義錨點應使用<a name=xxx></a> 指向錨點的超鏈接為:<a href=#錨點名稱>link</a> 指向其他頁面內錨點的超鏈接:<a href = 頁面的URL#該文件中的錨點>link</a> <a href= # >blank link</a>

<html>  
<body>  
  
<p>  
<a href="#C6">查看 Chapter 6。</a>  
</p>  
  
<h2>Chapter 1</h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2>Chapter 2</h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2>Chapter 3</h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2>Chapter 4</h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2>Chapter 5</h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2><a name="C6">Chapter 6</a></h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2>Chapter 7</h2>  
<p>This chapter explains ba bla bla</p>  
  
<h2>Chapter 8</h2>  
<p>This chapter explains ba bla bla</p>  
  
</body>  
</html>  

運行結果如下圖所示,點擊超鏈接跳轉到第6章節。


百度百科的目錄鏈接或CSDN的標題通常都是使用該方法實現。

5.超鏈接的顯示效果 在偽類和偽對象中,與超鏈接相關的四個偽類選擇器應用比較廣泛。 - a:link 定義超鏈接的默認樣式 - a:visited 定義超鏈接被訪問后的樣式 - a:hover 定義鼠標經過超鏈接的樣式 - a:active 定義超鏈接被激活時的樣式,如鼠標單擊之后,到鼠標被松開之間的這段時間的樣式 超鏈接的四種狀態樣式的排列順序是有要求的,一般不能隨意調換。先后順序應該是:link、visited、hover、active 超鏈接的四種狀態并非都必須要定義,可以定義其中的兩個或三個。 下劃線是超鏈接的基本樣式,但是很多網站并不喜歡使用,所以在建站之初,就徹底清除了所有超鏈接的下劃線: a{text-decoration:none;}。 下面舉個簡單的CSS例子,后面會詳細介紹CSS,也是難點。

<html>  
    <head>  
  
         <style type="text/css">   
         A {   
             FONT-SIZE: 16px; FONT-FAMILY: 宋體  
         }   
         A:link {   
             COLOR: #0055bb; TEXT-DECORATION: none  
         }  
         A:visited {   
             COLOR: #0077bb; TEXT-DECORATION: none   
         }   
         A:hover {   
             COLOR: green; FONT-FAMILY: 楷體; FONT-SIZE: 20  
         }   
         P {COLOR: red}    
         </style>  
  
         <title>第一個HTML代碼</title>  
    </head>  
     
    <body>  
  
    <P>CSS設置超鏈接樣式<BR /></P>  
    <A  target="_blank"> Eastmount CSDN </A>  
  
    </body>  
</html>  

運行結果如下圖所示,沒有下劃線,同時懸停變化。[圖片上傳中。。。(1)]
6.Email鏈接 <a href=mailto:i@email.com>Email</a>
控制命令:
?subject= 設置信件主題
?cc= 設置抄送人
?bcc= 設置密件抄送人 & 組合多個控制命令

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,488評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,034評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 175,327評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,554評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,337評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,883評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,975評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,114評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,625評論 1 332
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,555評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,737評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,244評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,973評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,362評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,615評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,343評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,699評論 2 370

推薦閱讀更多精彩內容