HTML標簽之鏈接標簽

、鏈接標簽

鏈接標簽是HTML頁面中最為常見，而且用途最廣的一個標簽，只要我們瀏覽網頁，就會有超鏈接。比如，通過點擊新聞標題鏈接到新聞詳情頁面，通過點擊商品名稱鏈接到商品列表或者詳情頁等等。

縮寫

anchor ，錨

說明

在HTML中創建超鏈接，只需用a標簽包括被鏈接的對象

語法

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

href：用于指定鏈接目標的url地址，必須屬性

target：用于指定鏈接頁面的打開方式，其取值有 self和 _blank兩種，其中 _self為默認值，_blank為在新窗口中打開方式

注意

（1）當需要鏈接到外部鏈接時，需要添加 http://

（2）當需要內部鏈接時，直接鏈接內部頁面名稱即可如 < a href=“index.html”> 首頁

（3）如果暫時沒確定鏈接目標時，一般將href屬性值定義為“#”，表示暫時為一個空鏈接

（4）不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接，只要用a標簽包括即可

錨點定位

在當前html頁面上，通過創建錨點鏈接，用戶能夠快速定位到指定內容。

適用于內容較多的頁面，通過點擊關鍵詞，可以快速到達指定區域。

步驟

（1）使用唯一的id標注目標位置

（2）使用<a href="#id名“>鏈接文本創建鏈接

二、特殊字符標簽（了解）

在html頁面中，有些符號直接添加是無法正常顯示的，這個時候就用一些特殊的標簽來表示這類符號，而這類特殊的標簽，我們就叫做特殊字符標簽。

常用的特殊字符標簽

TML前端開發最終取決于掌握標簽的多少

HTML大概有七八百個標簽

樓主這里給大家總結了下HTML常用標簽

標簽描述

定義注釋。

<!DOCTYPE> 定義文檔類型,所有H5都是這玩意打頭。

<a>定義錨。

<abbr>定義縮寫。

<acronym>定義只取首字母的縮寫。

<address>定義文檔作者或擁有者的聯系信息。

<applet>不贊成使用。定義嵌入的 applet。

<area>定義圖像映射內部的區域。

<article>定義文章。

<aside>定義頁面內容之外的內容。

<audio>定義聲音內容。

<b>定義粗體字。

<base>定義頁面中所有鏈接的默認地址或默認目標。

<basefont>不贊成使用。定義頁面中文本的默認字體、顏色或尺寸。

<bdi>定義文本的文本方向，使其脫離其周圍文本的方向設置。

<bdo>定義文字方向。

<big>定義大號文本。

<blockquote>定義長的引用。

<body>定義文檔的主體。

<br>定義簡單的折行。

<button>定義按鈕 (push button)。

<canvas>定義圖形。

<caption>定義表格標題。

<center>不贊成使用。定義居中文本。

<cite>定義引用(citation)。

<code>定義計算機代碼文本。

<col>定義表格中一個或多個列的屬性值。

<colgroup>定義表格中供格式化的列組。

<command>定義命令按鈕。

<datalist>定義下拉列表。

<dd>定義定義列表中項目的描述。

<del>定義被刪除文本。

<details>定義元素的細節。

<dir>不贊成使用。定義目錄列表。

<div>定義文檔中的節。

<dfn>定義定義項目。

<dialog>定義對話框或窗口。

<dl>定義定義列表。

<dt>定義定義列表中的項目。

<em>定義強調文本。

<fieldset>定義圍繞表單中元素的邊框。

<figcaption>定義 figure 元素的標題。

<figure>定義媒介內容的分組，以及它們的標題。

<font>不贊成使用。定義文字的字體、尺寸和顏色。

<footer>定義 section 或 page 的頁腳。

<form>定義供用戶輸入的 HTML 表單。

<frame>定義框架集的窗口或框架。

<frameset>定義框架集。

<h1> to <h6>定義 HTML 標題。

<head>定義關于文檔的信息。

<header>定義 section 或 page 的頁眉。

<hr>定義水平線。

<html>定義 HTML 文檔。

<i>定義斜體字。

<img>定義圖像。

<input>定義輸入控件。

<ins>定義被插入文本。

<isindex>不贊成使用。定義與文檔相關的可搜索索引。

<kbd>定義鍵盤文本。

<keygen>定義生成密鑰。

<label>定義 input 元素的標注。

<legend>定義 fieldset 元素的標題。

<li>定義列表的項目。

<map>定義圖像映射。

<mark>定義有記號的文本。

<menu>定義命令的列表或菜單。

<menuitem>定義用戶可以從彈出菜單調用的命令/菜單項目。

<meter>定義預定義范圍內的度量。

<nav>定義導航鏈接。

<noframes>定義針對不支持框架的用戶的替代內容。

<ol>定義有序列表。

<optgroup>定義選擇列表中相關選項的組合。

<option>定義選擇列表中的選項。

<output>定義輸出的一些類型。

<p>定義段落。

<param>定義對象的參數。

<pre>定義預格式文本。

<progress>定義任何類型的任務的進度。

<q>定義短的引用。

<rp>定義若瀏覽器不支持 ruby 元素顯示的內容。

<rt>定義 ruby 注釋的解釋。

<ruby>定義 ruby 注釋。

<s>不贊成使用。定義加刪除線的文本。

<samp>定義計算機代碼樣本。

<section>定義 section。

<select>定義選擇列表（下拉列表）。

<small>定義小號文本。

<source>定義媒介源。

<span>定義文檔中的節。

<strike>不贊成使用。定義加刪除線文本。

<strong>定義強調文本。

<sub>定義下標文本。

<summary>為 <details> 元素定義可見的標題。

<sup>定義上標文本。

<table>定義表格。

<tbody>定義表格中的主體內容。

<td>定義表格中的單元。

<textarea>定義多行的文本輸入控件。

<tfoot>定義表格中的表注內容（腳注）。

<th>定義表格中的表頭單元格。

<thead>定義表格中的表頭內容。

<time>定義日期/時間。

<title>定義文檔的標題。

<tr>定義表格中的行。

<track>定義用在媒體播放器中的文本軌道。

<tt>定義打字機文本。

<u>不贊成使用。定義下劃線文本。

<ul>定義無序列表。

<var>定義文本的變量部分。

<video>定義視頻。

<wbr>定義可能的換行符。

<xmp>不贊成使用。定義預格式文本。

標簽描述

<!DOCTYPE> 定義文檔類型。

<html>定義 HTML 文檔。

<title>定義文檔的標題。

<body>定義文檔的主體。

<h1> to <h6>定義 HTML 標題。

<p>定義段落。

<br>定義簡單的折行。

<hr>定義水平線。

定義注釋。

格式

標簽描述

<acronym>定義只取首字母的縮寫。

<abbr>定義縮寫。

<address>定義文檔作者或擁有者的聯系信息。

<b>定義粗體文本。

<bdi>定義文本的文本方向，使其脫離其周圍文本的方向設置。

<bdo>定義文字方向。

<big>定義大號文本。

<blockquote>定義長的引用。

<center>不贊成使用。定義居中文本。

<cite>定義引用(citation)。

<code>定義計算機代碼文本。

<del>定義被刪除文本。

<dfn>定義定義項目。

<em>定義強調文本。

<font>不贊成使用。定義文本的字體、尺寸和顏色

<i>定義斜體文本。

<ins>定義被插入文本。

<kbd>定義鍵盤文本。

<mark>定義有記號的文本。

<meter>定義預定義范圍內的度量。

<pre>定義預格式文本。

<progress>定義任何類型的任務的進度。

<q>定義短的引用。

<rp>定義若瀏覽器不支持 ruby 元素顯示的內容。

<rt>定義 ruby 注釋的解釋。

<ruby>定義 ruby 注釋。

<s>不贊成使用。定義加刪除線的文本。

<samp>定義計算機代碼樣本。

<small>定義小號文本。

<strike>不贊成使用。定義加刪除線文本。

<strong>定義語氣更為強烈的強調文本。

<sup>定義上標文本。

<sub>定義下標文本。

<time>定義日期/時間。

<tt>定義打字機文本。

<u>不贊成使用。定義下劃線文本。

<var>定義文本的變量部分。

<wbr>定義可能的換行符。

表單

標簽描述

<form>定義供用戶輸入的 HTML 表單。

<input>定義輸入控件。

<textarea>定義多行的文本輸入控件。

<button>定義按鈕。

<select>定義選擇列表（下拉列表）。

<optgroup>定義選擇列表中相關選項的組合。

<option>定義選擇列表中的選項。

<label>定義 input 元素的標注。

<fieldset>定義圍繞表單中元素的邊框。

<legend>定義 fieldset 元素的標題。

<isindex>不贊成使用。定義與文檔相關的可搜索索引。

<datalist>定義下拉列表。

<keygen>定義生成密鑰。

<output>定義輸出的一些類型。

框架

標簽描述

<frame>定義框架集的窗口或框架。

<frameset>定義框架集。

<noframes>定義針對不支持框架的用戶的替代內容。

圖像

標簽描述

<img>定義圖像。

<map>定義圖像映射。

<area>定義圖像地圖內部的區域。

<canvas>定義圖形。

<figcaption>定義 figure 元素的標題。

<figure>定義媒介內容的分組，以及它們的標題。

音頻/視頻

標簽描述

<audio>定義聲音內容。

<source>定義媒介源。

<track>定義用在媒體播放器中的文本軌道。

<video>定義視頻。

鏈接

標簽描述

<a>定義錨。

<nav>定義導航鏈接。

列表

標簽描述

<ul>定義無序列表。

<ol>定義有序列表。

<li>定義列表的項目。

<dir>不贊成使用。定義目錄列表。

<dl>定義定義列表。

<dt>定義定義列表中的項目。

<dd>定義定義列表中項目的描述。

<menu>定義命令的菜單/列表。

<menuitem>定義用戶可以從彈出菜單調用的命令/菜單項目。

<command>定義命令按鈕。

表格

標簽描述

<table>定義表格

<caption>定義表格標題。

<th>定義表格中的表頭單元格。

<tr>定義表格中的行。

<td>定義表格中的單元。

<thead>定義表格中的表頭內容。

<tbody>定義表格中的主體內容。

<tfoot>定義表格中的表注內容（腳注）。

<col>定義表格中一個或多個列的屬性值。

<colgroup>定義表格中供格式化的列組。

樣式/節

標簽描述

<div>定義文檔中的節。

<span>定義文檔中的節。

<header>定義 section 或 page 的頁眉。

<footer>定義 section 或 page 的頁腳。

<section>定義 section。

<article>定義文章。

<aside>定義頁面內容之外的內容。

<details>定義元素的細節。

<dialog>定義對話框或窗口。

<summary>為 <details> 元素定義可見的標題。

元信息

標簽描述

<head>定義關于文檔的信息。

<base>定義頁面中所有鏈接的默認地址或默認目標。

<basefont>不贊成使用。定義頁面中文本的默認字體、顏色或尺寸。

編程

標簽描述

<applet>不贊成使用。定義嵌入的 applet。

<param>定義對象的參數。

屬性描述

accesskey規定激活元素的快捷鍵。

class規定元素的一個或多個類名（引用樣式表中的類）。

contenteditable規定元素內容是否可編輯。

contextmenu規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。

data-*用于存儲頁面或應用程序的私有定制數據。

dir規定元素中內容的文本方向。

draggable規定元素是否可拖動。

dropzone規定在拖動被拖動數據時是否進行復制、移動或鏈接。

hidden規定元素仍未或不再相關。

id規定元素的唯一 id。

lang規定元素內容的語言。

spellcheck規定是否對元素進行拼寫和語法檢查。

style規定元素的行內 CSS 樣式。

tabindex規定元素的 tab 鍵次序。

title規定有關元素的額外信息。

translate規定是否應該翻譯元素內容。

TML+CSS+JS自主設計彈出窗口的方法，在線編輯器

html怎么彈出一個小窗口

html彈出一個小窗口的方法可能有很多，就比如本站（笨鳥工具-璞玉天成，大器晚成）的導航欄點擊之后會有一個小窗口（小頁面）彈出，然后文章頁面的底部有兩個小圖標，當鼠標懸放在上面的時候，也可以彈出一個小窗口，然后點擊下方實例代碼的試一試按鈕，也可以彈出一個小窗口，是本站提供的HTML+css+javascript的在線編輯器。這里介紹的一簡單的方法和一種自主設計的方法，不需要很復雜的程序設計，也不需要框架，用javascript和css就可以：

HTML+CSS+JS自主設計彈出窗口的方法，在線編輯器

自主設計html彈出小窗口的方法

這個方法需要結合html、css和javascript三種語言，即web三件套全得用上。該方法的原理就是將本來的窗口的style中display設置為none，當點擊按鈕之后，設置為block，并為該窗口綁定位置，實例代碼如下：

<div id="ck1"><p style='text-align:center;line-height:80px;'>這個窗口，可以說是自己設計的了，可以在這里添加其它的標簽和功能</p></div>
<button class='btn btn-default' onclick='show2()'>點擊彈出自己設計的小窗口</button>
<style>
  #ck1{display:none;position:fixed;top:20%;left:20%;width:50%;height:80px;z-index:9999;background-color:skyblue;border-radius:5px;}
</style>
<script>
  function show2(){
  	document.getElementById("ck1").style.display = "block";
  }
</script>

HTML+CSS+JS自主設計彈出窗口的方法，在線編輯器