1. 程式人生 > >Web前端丨Web開發丨Web代碼 html+css零基礎入門教程

Web前端丨Web開發丨Web代碼 html+css零基礎入門教程

strong 大型 打字 添加 瀏覽器 lock 效果 格式化文本 size

什麽是HTML文本格式化

HTML 可定義很多供格式化輸出的元素,比如粗體和斜體字。

如下代碼:

<p>TThis text is normal</p>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>

頁面上顯示如下:

This text is bold

This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small

按標簽功能可以分為:文本格式化標簽、‘計算機輸出‘標簽和引用和術語定義標簽

文本格式化標簽
標簽描述
<b> 定義粗體文本。
<big> 定義大號字。
<em> 定義著重文字。
<i> 定義斜體字。
<small> 定義小號字。
<strong> 定義加重語氣。
<sub> 定義下標字。
<sup> 定義上標字。
<ins> 定義插入字。
<del> 定義刪除。
<s> 不贊成使用。使用<del>代替。
<strike> 不贊成使用。使用<del>代替。
<u> 不贊成使用。使用樣式(style)代替。
“計算機輸出”標簽
標簽描述
<code> 定義計算機代碼。
<kbd> 定義鍵盤碼。
<samp> 定義計算機代碼樣本。
<tt> 定義打字機代碼。
<var> 定義變量。
<pre> 定義預格式化文本。
<listing> 不贊成使用。使用<pre>代替。
<plaintext> 不贊成使用。使用<pre>代替。
<xmp> 不贊成使用。使用<pre>代替。
引用、引用和術語定義
標簽描述
<abbr> 定義縮寫。
<acronym> 定義首字母縮寫。
<address> 定義地址。
<bdo> 定義文字方向。
<blockquote> 定義長的引用。
<q> 定義短的引用。
<cite> 定義引用、引證。
<dfn> 定義一個定義項目
HTML 鏈接

HTML 使用超級鏈接與網絡上的另一個文檔相連。超鏈接可以是文字或圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。通過使用 <a> 標簽在 HTML 中創建鏈接。超鏈接的代碼如:<a href="url">Link text</a> href 屬性規定鏈接的目標,開始標簽和結束標簽之間的文字被作為超級鏈接來顯示。

如下代碼:

<a href="http://f2e.tming.net.cn/">F2E.TMING</a>

頁面上顯示為 F2E.TMING

註釋:請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接:href="http://www.w3school.com.cn/html",就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址,然後創建一個新的請求,就像這樣:href="http://www.w3school.com.cn/html/"。

HTML 鏈接 - target 屬性

<a> 標簽的 target 屬性規定在何處打開鏈接文檔。target屬性有4個保留的目標名稱用作特殊的文檔重定向操作:

1) _blank在一個新打開、未命名的窗口中載入目標文檔。如<a href="http://f2e.tming.net.cn/" target="_blank">F2E.TMING</a> 即是在新窗口打開該網站。

2) _self在相同的框架或者窗口中顯示。這個是target屬性的默認值,如沒有設置target屬性,則<a>標簽的默認目標就是_self。如: <a href="http://f2e.tming.net.cn/">F2E.TMING</a><a href="http://f2e.tming.net.cn/" target="_self">F2E.TMING</a> 即是在當前窗口跳轉

3) _parent這個目標使得文檔載入父窗口或者包含了超鏈接引用的框架的框架集。如果這個引用是在窗口或者在頂級框架中,那麽它與目標 _self 等效。

4) _top這個目標使得文檔載入包含這個超鏈接的窗口,用 _top 目標將會清除所有被包含的框架並將文檔載入整個瀏覽器窗口。

此外,target屬性也可以設置為其他目標名,如:<a href="1.html" target="window1">新窗口1</a> 點擊後瀏覽器將打開一個新的窗口,將它標記為 "window1",然後在其中顯示1.html這個文檔

HTML 鏈接 - name 屬性

name 屬性規定錨(anchor)的名稱。當使用命名錨時,我們可以創建直接跳至該命名錨(比如頁面中某個小節)的鏈接,這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。要使用錨鏈接,首先需要在 HTML 文檔中對錨進行命名。命名錨的語法:<a name="label">錨點1</a>然後,在文檔中用如下方式創建指向該錨的鏈接:<a href="#label">跳轉到錨點1</a>

例:頁面上已在段落“HTML 鏈接 - target 屬性”的開始位置添加了一個錨點,代碼為:<a name="links_target"></a> ,鏈接代碼如下

<a href="#links_target">跳轉至段落:HTML 鏈接 - target 屬性</a>

點擊試試效果:跳轉至段落:HTML 鏈接 - target 屬性

如果錨鏈接在頁面上沒有對應的命名錨,點擊後會跳轉到頁面頂部。因此也可通過設置href="#"來實現跳轉到頂部的功能。點擊試試:回到頂部

註釋:命名錨經常用於在大型文檔開始位置上創建目錄。可以為每個章節賦予一個命名錨,然後把鏈接到這些錨的鏈接放到文檔的上部。如果您經常訪問百度百科,您會發現其中幾乎每個詞條都采用這樣的導航方式。假如瀏覽器找不到已定義的命名錨,那麽就會定位到文檔的頂端。

其它技巧

1) 鏈接添加文字提示可以使用title屬性讓鼠標懸停在超鏈接上的時候,顯示該超鏈接的文字註釋。如<a href="http://f2e.tming.net.cn/" title="愛思資源網首頁">首頁</a> 。鼠標移到鏈接上查看效果:首頁2) 鏈接到email地址只要將鏈接的href屬性設置為mailto:郵箱地址,點擊這個鏈接,就會觸發你的郵件客戶端,如<a href="mailto:[email protected]">聯系我們</a>。點擊查看效果:聯系我們

Web前端丨Web開發丨Web代碼 html+css零基礎入門教程