Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
TML 基礎
非常簡單的HTML文檔
HTML 標題
HTML 段落
HTML 鏈接
HTML 圖片
實例解析
HTML 標題
HTML 標題
在html源碼中插入注釋
插入水平線
實例解析
HTML 段落
HTML 段落
更多段落
本例演示在 HTML 文檔中折行的使用。
HTML 格式化的某些問題。
實例解析
HTML 文本格式化
文本格式化
此例演示如何使用 pre 標簽對空行和空格進行控制。
此例演示不同的"計算機輸出"標簽的顯示效果。
此例演示如何在 HTML 文件中寫地址。
此例演示如何實現(xiàn)縮寫或首字母縮寫。
此例演示如何改變文字的方向。
此例演示如何實現(xiàn)長短不一的引用語。
文本下劃線與刪除線
實例解析
HTML 樣式
HTML Style 元素
背景色樣式
字體樣式,顏色,大小
文本對齊樣式
設置文本字體
設置文本字體大小
設置文本字體顏色
設置文本字體,字體大小,字體顏色
HTML使用不同樣式
沒有下劃線的鏈接
鏈接到一個外部樣式表
實例解析
HTML 鏈接
創(chuàng)建超級鏈接
將圖像作為鏈接
在新的瀏覽器窗口打開鏈接
鏈接到同一個頁面的不同位置
跳出框架
創(chuàng)建電子郵件鏈接
創(chuàng)建電子郵件鏈接 2
實例解析
HTML 圖像
插入圖像
從不同的位置插入圖片
排列圖片
本例演示如何使圖片浮動至段落的左邊或右邊。
制作圖像鏈接
創(chuàng)建圖像映射
實例解析
HTML 表格
簡單的表格
沒有邊框的表格
表格中的表頭
帶有標題的表格
跨行或跨列的表格單元格
表格內(nèi)的標簽
單元格邊距(Cell padding)
單元格間距(Cell spacing)
實例解析
HTML 列表
無序列表
有序列表
不同類型的有序列表
不同類型的無序列表
嵌套列表
嵌套列表 2
定義列表
實例解析
HTML Forms 和 Input
創(chuàng)建文本域(Text fields)
創(chuàng)建密碼域
復選框
單選按鈕
簡單的下拉列表
預選下拉列表
本例演示如何創(chuàng)建一個文本域(多行文本輸入控件)。
創(chuàng)建一個按鈕
本例演示如何在數(shù)據(jù)周圍繪制一個帶標題的框。
帶有文本域與輸入域的表單
帶有復選框與提交按鈕的form表單
帶有單選框與提交按鈕的表單
發(fā)送郵件表單
實例解析
HTML iframe
內(nèi)聯(lián)框架 (HTML頁面中插入框架)
實例解析
HTML 頭部元素
描述了文檔標題
HTML頁面中默認的URL鏈接
提供文檔元數(shù)據(jù)
實例解析
HTML 腳本
插入一個腳本
使用 <noscript> 標簽
實例解析
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
0
本例參考了網(wǎng)上的例子,唯一不一樣的是,我這里的操作是一步一步講解,網(wǎng)上僅是源碼。
一、我們先創(chuàng)建一張空白的網(wǎng)頁,網(wǎng)頁要自適應手機。
圖1
二、我們再創(chuàng)建網(wǎng)頁的頭部。
圖2
圖3
三、做出來的網(wǎng)頁頭部太丑了,我們要去掉盒子與瀏覽器的間隙,還有給頭部加內(nèi)部距離。
圖4
圖5
四、給網(wǎng)頁頭部添加一些內(nèi)容。
圖6
圖7
五、接下來開始做導航條了。
圖8
圖9
六、發(fā)現(xiàn)沒,導航條居然看不見,沒有東西在里面自然是看不見的,我們加三個鏈接吧。
圖10
圖11
七、這回是看見了,不過樣式太丑,我們改改樣式。
圖12
圖13
八、加上內(nèi)部距離,就好看了許多,即然是鏈接,我們加點動態(tài)吧,當鼠標在鏈接上面時,鏈接塊變色。
圖14
圖15
九、開始做網(wǎng)頁內(nèi)容,網(wǎng)頁內(nèi)容我分為三塊,左右兩邊是側(cè)欄,中間是主要內(nèi)容。
圖16
圖17
十、我想讓它橫著排,它卻是豎著排,改改各個塊的樣式。
圖18
圖19
十一、給主體的各個塊加點內(nèi)容。
圖20
圖21
十二、內(nèi)容是有了,但你會發(fā)現(xiàn)各塊之間沒有間隙,貼得太近了,我們改一下樣式,加個內(nèi)部距離。
圖22
圖23
十三、距離是有了,但有一個側(cè)欄跑到了另一行,怎么回事?原來padding是會改變盒子的整體寬度,我們原本是100%,現(xiàn)在多了padding的寬度,自然就換行了,解決一下吧。
圖24
圖25
十四、這回終于在一行了,接下來可以做網(wǎng)頁底部了。
圖26
圖27
十五、改改樣式,讓底部好看一點。
圖28
圖29
十六,這個時候,網(wǎng)頁的整體版面就完成了,再補充一個小內(nèi)容,讓網(wǎng)頁瀏覽器在小于600像素寬的時候,主體內(nèi)容的三個塊由橫變豎。
圖30
圖31
TML 使用超級鏈接與網(wǎng)絡上的另一個文檔相連。
幾乎可以在所有的網(wǎng)頁中找到鏈接。點擊鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面。
實例
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
<a href="/index.html">本文本</a> 是一個指向本網(wǎng)站中的一個頁面的鏈接。</p>
<p><a >本文本</a> 是一個指向萬維網(wǎng)上的頁面的鏈接。</p>
</body>
</html>
[/demo]
本例演示如何在 HTML 文檔中創(chuàng)建鏈接。
將圖像作為鏈接
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
您也可以使用圖像來作鏈接:
<a href="/example/html/lastpage.html">
<img border="0" src="./imagecopy1234567890/test.gif" />
</a>
</p>
</body>
</html>
[/demo]
本例演示如何使用圖像作為鏈接。
(可以在本頁底端找到更多實例)
HTML 超鏈接(鏈接)
超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網(wǎng)頁中的某個鏈接上時,箭頭會變?yōu)橐恢恍∈帧?/p>
我們通過使用 <a> 標簽在 HTML 中創(chuàng)建鏈接。
有兩種使用 <a> 標簽的方式:
通過使用 href 屬性 - 創(chuàng)建指向另一個文檔的鏈接
通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽
什么是超文本?
標記語言的真正威力在于其收集能力,它可以將收集來的文檔組合成一個完整的信息庫,并且可以將文檔庫與世界上的其他文檔集合鏈接起來。
這樣的話,讀者不僅可以完全控制文檔在屏幕上的顯示,還可以通過超鏈接來控制瀏覽信息的順序。這就是 HTML 和 XHTML 中的 “HT” - 超文本(hypertext),就是它將整個 Web 網(wǎng)絡連接起來。
超文本的基礎知識
超文本的基本特征就是可以超鏈接文檔;你可以指向其他位置,該位置可以在當前的文檔中、局域網(wǎng)中的其他文檔,也可以在因特網(wǎng)上的任何位置的文檔中。這些文檔組成了一個雜亂的信息網(wǎng)。目標文檔通常與其來源有某些關聯(lián),并且豐富了來源;來源中的鏈接元素則將這種關系傳遞給瀏覽者。
超鏈接可以用于各種效果。超鏈接可以用在目錄和主題列表中。瀏覽者可以在瀏覽器屏幕上單擊鼠標或在鍵盤上按下按鍵,從而選擇并自動跳轉(zhuǎn)到文檔中自己感興趣的那個主題,或跳轉(zhuǎn)到世界上某處完全不同的集合中的某個文檔。
超鏈接還可以向瀏覽者指出有關文檔中某個主題的更多信息。例如,“如果您想了解更詳細的信息,請參閱某某頁面。”。作者可以使用超鏈接來減少重復信息。例如,我們建議創(chuàng)作者在每個文檔中都簽署上自己的姓名。這樣就可以使用一個將名字和另一個包含地址、電話號碼等信息的單獨文檔鏈接起來的超鏈接,而不必在每個文檔中都包含完整的聯(lián)系信息。
超鏈接(hyper text),或者按照標準叫法稱為錨(anchor),是使用 <a> 標簽標記的,可以用兩種方式表示。錨的一種類型是在文檔中創(chuàng)建一個熱點,當用戶激活或選中(通常是使用鼠標)這個熱點時,會導致瀏覽器進行鏈接。瀏覽器會自動加載并顯示同一文檔或其他文檔中的某個部分,或觸發(fā)某些與因特網(wǎng)服務相關的操作,例如發(fā)送電子郵件或下載特殊文件等。錨的另一種類型會在文檔中創(chuàng)建一個標記,該標記可以被超鏈接引用。
還有一些與超鏈接相關聯(lián)的鼠標相關事件。這些事件與 JavaScript 結(jié)合使用可以產(chǎn)生一些令人激動的效果。
注釋
錨的這兩種類型都使用同樣的標簽;也許這就是它們擁有同樣的名稱的原因。但是我們發(fā)現(xiàn),如果將它們區(qū)分開,把提供熱點和超鏈接地址的錨看作“鏈接”,而用于標記文檔的目標部分的錨稱為“錨”,那么您將更容易理解這兩種類型的錨。
HTML 鏈接語法
鏈接的 HTML 代碼很簡單。它類似這樣:
<a href="url">Link text</a>
href 屬性規(guī)定鏈接的目標。
開始標簽和結(jié)束標簽之間的文字被作為超級鏈接來顯示。
實例
<a >Visit W3School</a>
上面這行代碼顯示為:Visit W3School
點擊這個超鏈接會把用戶帶到 W3School 的首頁。
提示:"鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
HTML 鏈接 - target 屬性
使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示。
下面的這行會在新窗口打開文檔:
<a target="_blank">Visit W3School!</a>
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a target="_blank">Visit W3School!</a>
<p>如果把鏈接的 target 屬性設置為 "_blank",該鏈接會在新窗口中打開。</p>
</body>
</html>
[/demo]
HTML 鏈接 - name 屬性
name 屬性規(guī)定錨(anchor)的名稱。
您可以使用 name 屬性創(chuàng)建 HTML 頁面中的書簽。
書簽不會以任何特殊方式顯示,它對讀者是不可見的。
當使用命名錨(named anchors)時,我們可以創(chuàng)建直接跳至該命名錨(比如頁面中某個小節(jié))的鏈接,這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
命名錨的語法:
<a name="label">錨(顯示在頁面上的文本)</a>
提示:錨的名稱可以是任何你喜歡的名字。
提示:您可以使用 id 屬性來替代 name 屬性,命名錨同樣有效。
實例
首先,我們在 HTML 文檔中對錨進行命名(創(chuàng)建一個書簽):
<a name="tips">基本的注意事項 - 有用的提示</a>
然后,我們在同一個文檔中創(chuàng)建指向該錨的鏈接:
<a href="#tips">有用的提示</a>
您也可以在其他頁面中創(chuàng)建指向該錨的鏈接:
<a >有用的提示</a>
在上面的代碼中,我們將 # 符號和錨名稱添加到 URL 的末端,就可以直接鏈接到 tips 這個命名錨了。
基本的注意事項 - 有用的提示:
注釋:請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接:,就會向服務器產(chǎn)生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址,然后創(chuàng)建一個新的請求,就像這樣:。
提示:命名錨經(jīng)常用于在大型文檔開始位置上創(chuàng)建目錄。可以為每個章節(jié)賦予一個命名錨,然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經(jīng)常訪問百度百科,您會發(fā)現(xiàn)其中幾乎每個詞條都采用這樣的導航方式。
提示:假如瀏覽器找不到已定義的命名錨,那么就會定位到文檔的頂端。不會有錯誤發(fā)生。
更多實例
在新的瀏覽器窗口打開鏈接
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a target="_blank">Visit W3School!</a>
<p>如果把鏈接的 target 屬性設置為 "_blank",該鏈接會在新窗口中打開。</p>
</body>
</html>
[/demo]
本例演示如何在新窗口打開一個頁面,這樣的話訪問者就無需離開你的站點了。
鏈接到同一個頁面的不同位置
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
<a href="#C4">查看 Chapter 4。</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><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</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>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
[/demo]
本例演示如何使用鏈接跳轉(zhuǎn)至文檔的另一個部分
跳出框架
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>被鎖在框架中了嗎?</p>
<a href="/index.html"
target="_top">請點擊這里!</a>
</body>
</html>
[/demo]
本例演示如何跳出框架,假如你的頁面被固定在框架之內(nèi)。
創(chuàng)建電子郵件鏈接
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
這是郵件鏈接:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">發(fā)送郵件</a>
</p>
<p>
<b>注意:</b>應該使用 %20 來替換單詞之間的空格,這樣瀏覽器就可以正確地顯示文本了。
</p>
</body>
</html>
[/demo]
本例演示如何鏈接到一個郵件。(本例在安裝郵件客戶端程序后才能工作。)
創(chuàng)建電子郵件鏈接 2
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
這是另一個 mailto 鏈接:
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">發(fā)送郵件!</a>
</p>
<p>
<b>注意:</b>應該使用 %20 來替換單詞之間的空格,這樣瀏覽器就可以正確地顯示文本了。
</p>
</body>
</html>
[/demo]
本例演示更加復雜的郵件鏈接。
HTML 鏈接標簽
標簽 描述
<a> 定義錨。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。