HTML中的href屬性：掌握超鏈接技巧，提升網站用戶體驗

鏈接在現代網頁設計中發揮著不可或缺的作用。HTML中，href屬性在anchor標簽中扮演著關鍵角色，使得用戶可以輕松地跳轉到其他頁面或特定部分。在本文中，我們將探討href屬性的基本使用方法以及一些高級技巧，幫助您提升網站用戶體驗。

基本使用方法

HTML中，anchor標簽用于創建超鏈接，其基本結構如下：

<a href="鏈接地址">鏈接文本</a>

其中，href屬性指定了跳轉的目標地址，而鏈接文本則是用戶在頁面上看到的可點擊的文本。

絕對路徑與相對路徑

絕對路徑和相對路徑是href屬性中常見的兩種取值類型。

絕對路徑：完整的URL地址，包括協議（如http://或https://）、域名和頁面路徑。例如：https://www.example.com/page.html
相對路徑：相對于當前頁面的路徑，省略了協議和域名。例如，假設當前頁面為https://www.example.com/home.html，則可以使用/about.html指向https://www.example.com/about.html。

外部鏈接與內部鏈接

外部鏈接指向不同域名的頁面，而內部鏈接則是指向同一域名內的頁面或部分。在創建鏈接時，確保使用正確的協議（如http://或https://）以避免鏈接無法正常跳轉。

使用target屬性

通過使用target屬性，您可以控制超鏈接的打開方式。常見的取值有：

_self：在當前窗口或標簽頁中打開鏈接。
_blank：在新窗口或新標簽頁中打開鏈接。
_parent：在上一級窗口或框架中打開鏈接。
_top：清除當前窗口的內容，然后在新的頂級窗口中打開鏈接。

使用rel屬性

rel屬性用于在超鏈接中添加關聯信息，如：

nofollow：告訴搜索引擎不要按常規方式索引和跟蹤鏈接。
target="_blank" rel="noopener noreferrer"：同時使用target屬性的_blank值和rel屬性，可以禁止在新窗口中打開鏈接的JavaScript代碼訪問原始頁面的窗口對象。

訪問性和 SEO 優化

為了提升網站的訪問性和 SEO 排名，請確保鏈接文本清晰、描述性，避免使用過于短的單詞（如 "點擊這里"）。此外，使用有意義的 URL 以便搜索引擎更好地理解您的網頁內容。

使用CSS美化鏈接

通過CSS，您可以對超鏈接進行樣式定義，使其與網站設計相一致。例如，更改鏈接的顏色、字體、下劃線等。

掌握href屬性的使用方法和技巧，您可以創建更加易于導航且訪問性較好的網站。在提升用戶體驗的同時，還能夠為搜索引擎提供更多關于網頁內容的信息，從而提高網站的 SEO 排名。

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

多窗口和窗體：

可以打開多個瀏覽器窗口，每個窗口都是獨立的；

一個瀏覽器窗口可能包含多個標簽頁；每個標簽頁都是獨立的上下文，都是獨立的window對象，而且相互之間互不干擾；

但是窗口也并不總是和其他窗口完全沒有關系；一個窗口或標簽頁中的腳本可以打開新的窗口或標簽頁，如此，這些多窗口或標簽頁就可以互相操作；

打開窗口：

window.open()方法，打開一個新的瀏覽器窗口、標簽頁，導航到一個指定的URL；

語法：window.open(url,name,features,replace)；url為打開新窗口的url，name為窗口目標,features設置窗口特性參數列表，replace為Boolean值，指定是否用新窗口替換當前頁面；

一般使用第一個參數，如果也省略該參數或使用空字符串，則會打開一個空頁面的URL about:blank；

如果使用第二個參數，而且該參數是已有窗口或框架的名稱，就會在該窗口或框架中加載指定的URL；否則彈出新窗口，并將新窗口的name命名為該參數，如果省略此參數，則會使用指定的“_blank”打開一個新的、未命名的窗口；

第二個參數也可以是：_self、_parent、_top、_blank；

窗口的名字也可作為<a>和<form>元素上target屬性的值，用來表示引用的文檔或提交處理的頁面；

<script>
window.open("https://www.zeronetwork.cn/","myWindow");
</script>
<a href="https://www.google.cn/" target="myWindow">baidu.com</a>

窗口特性屬性：

第三個參數是一個逗號分隔的設置字符串，表示在新窗口中都顯示哪些特性；如果省略，則以默認的形式呈現；

fullscreen：yes / no，是否最大化；僅限IE；
height：數值，新窗口的高，不能小于100；
left：數值，新窗口的左坐標，不能是負值；
location：yes / no，是否顯示地址欄；不同瀏覽器的默認值不同；設置為no，地址欄有可能會隱藏，也有可能會被禁用；
menubar：yes / no，是否顯示菜單欄，默認為no；
resizable：yes / no，是否能改變大小，默認為no ；
scrollbars：yes / no，如果內容區域大于視口，是否允許滾動，默認為no；
status：yes / no，是否顯示狀態欄，默認為no；
toolbar：yes / no，是否顯示工具欄，默認為no；
top：數值，新窗口的上坐標，不能是負值；
width：數值，新窗口的寬，不能小于100；

字符串格式為：設置使用鍵值對，且全部使用逗號分隔，而且不能有空格；

window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");

顯式指定這些特性，打開的應該是新窗口，而不是新標簽頁；這個參數是非標準的，而且HTML5也主張瀏覽器應該忽略它；

另外，出于安全考慮，瀏覽器包含對可能指定的功能的限制，如，通常不允許指定一個太小的或者位于屏幕之外的窗口，并且一些瀏覽器不允許創建一個沒有狀態欄的窗口；

第四個參數只有在設置了第二個參數命名的是一個已存在的窗口時才有用；它是一個布爾值，聲明了由第一個參數指定的URL是替換掉窗口瀏覽歷史的當前記錄(true)還是應該在窗口瀏覽歷史中創建一個新的記錄(false)，默認為false；

window.open()會返回一個window對象，用于操作新創建的窗口；該引用可以操作新窗口的內容，從而就可以在一個窗口中控制另一個窗口的內容，例如向一個新開的瀏覽器窗口中輸出內容；

var w = window.open();  // 打開一個新的空白窗口
w.document.write("<h2>零點網絡</h2>");
w.alert("詳情請進入https://www.zeronetwork.cn/");
w.location = "https://www.zeronetwork.cn/";

某些瀏覽器在默認情況下可能不允許針對主瀏覽器窗口調整大小或移動，但不允許針對通過open()創建的窗口調整大小或移動，如：

var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");
newWindow.resizeTo(600,600);
newWindow.moveTo(200,200);

注：有些瀏覽器默認不允許這樣操作；

窗口opener屬性：

opener屬性是新窗口對打開它的原始窗口的引用；即指向調用window.open()的窗口或框架；但只在彈出窗口的最外層window對象(top)中有定義；

var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");
console.log(newWindow.opener === window); // true
 
<!-- 主窗口 -->
<input type="text" id="selectCity" placeholder="選擇" />
<script>
var selectCity = document.getElementById("selectCity");
selectCity.onclick = function(){
    var newWin = window.open("select.html","newWin","width=400,height=400");
}
</script>
 
<!-- 新窗口 -->
<select id="city">
    <option value="beijing">北京</option>
    <option value="nanjing">南京</option>
    <option value="anhui">安徽</option>
</select>
<script>
var city = document.getElementById("city");
city.onchange = function(){
    window.opener.document.getElementById("selectCity").value = city.options[city.selectedIndex].value;
    window.close();
}
</script>

有些瀏覽器(如IE8和Chrome)會在獨立的進程中運行每個標簽頁，當一個標簽頁打開另一個標簽頁時，如果兩個window對象之間需要彼此通信，那么新標簽頁就不能運行在獨立的進程中。在Chrome中，將新創建的標簽頁的opener屬性設置為null，即表示在單獨的進程中運行新標簽頁。

newWindow.opener = null;

標簽頁之間的聯系一旦切斷，將沒有辦法恢復。

window.close()關閉窗口：

對于主窗口，如果沒有得到用戶的允許是不能關閉它的；但彈出窗口可以不經用戶允許可以關閉自己；

窗口關閉后，窗口的引用仍然存在，可以使用window.closed屬性檢測，但在實際場景中沒有多大用處；

function openWin(){
    var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");
    newWindow.document.write("<h2>零點網絡</h2>");
    function closeWin(){
        newWindow.close();
        //alert(newWindow.closed);
        if(newWindow.close)
            alert("已關閉");
    }
    setTimeout(closeWin,3000);
}
openWin();

注：document對象也有close()方法，為了避免混淆，所以調用close()方法時，要顯式調用，即使用window.close()；

安全限制：

大多數瀏覽器針對彈出窗口實施了多方面的安全限制，如：不允許在屏幕之外創建彈出窗口，不允許將彈出窗口移動到屏幕之外，不允許關閉狀態欄等；不允許關閉地址欄，默認情況下不允許移動彈出窗口或調整其大小；或者部分瀏覽器不支持修改狀態欄，始終顯示地址欄等；

通常，對于open()方法只有當用戶手動單擊按鈕或超鏈接時才會調用；如果嘗試在瀏覽器初始載入時開啟一個彈出窗口時，通常會被屏蔽;

彈出窗口屏蔽程序：

大多數瀏覽器都內置有彈出窗口屏蔽程序，如果沒有內置，可以安裝第三方實用工具；內置屏蔽會使window.open可能返回null，第三方會返回錯誤；通過需要檢測其返回值；

// 內置的屏蔽程序
var newWin = window.open("https://www.zeronetwork.cn/","_blank");
if(newWin == null){
    alert("彈窗被阻止！");
}
 
// 第三方
var blocked = false;
try{
    var newWin = window.open("https://www.zeronetwork.cn/","_blank");
    if(newWin == null)
        blocked = true;
}catch(e){
    blocked = true;
}
if(blocked){
    alert("彈窗被屏蔽");
}

彈出窗口通信：

主窗口向新窗口傳值，直接為新窗口window對象添加成員，如：

// 主窗口
var newWin = window.open("select.html","_blank");
var person = {
    name:"wangwei",
    sex: true,
    age: 18
}
newWin.person = person;
 
// 新窗口
document.write("姓名：",person.name);
document.write("性別：",person.sex);
document.write("年齡：",person.age);

新窗口向主窗口傳值，通過window.opener獲取原始窗口的屬性或者html元素；

<!-- 主窗口 -->
<div id="mydiv"></div>
<script>
var newWin = window.open("select.html","_blank");
function showDiv(str){
    var mydiv = document.getElementById("mydiv");
    mydiv.innerHTML = str;
}
</script>
 
<script>
// 新窗口
var str = "零點網絡";
window.opener.showDiv(str);
window.close();
</script>

通過普通的get傳值；

// 主窗口
function putId(id){
    window.open("select.html?id=" + encodeURIComponent(id),"putWin");
}
putId("1002");
 
// 新窗口
var id = location.search;
id = id.split("=");
console.log(id[1]);
document.write(decodeURIComponent(id[1]));

框架窗口：

如果頁面使用了框架集合(包含frameset和iframe)，則每個框架都由它自己的window對象表示，并存放在frames集合中;

與相互獨立的標簽頁或窗口不同，框架窗口之間并不是相互獨立的；

每個window對象都有一個name屬性，其中包含框架的名稱；

<frameset rows="100,*">
    <frame src="top.html" name="topFrame" />
    <frameset cols="50%,50%">
        <frame src="left.html" name="leftFrame" />
        <frame src="right.html" name="rightFrame" />
    </frameset>
</frameset>

在frames集合中,可用數字(下標從0開始,從左到右,從上到下)訪問;即可以使用frames[0]表示第1個子窗口、frames[1]表示第2個子窗口；

可使用名稱對框架進行訪問，該名稱就是該框架的name屬性，如 window.frames[“topFrame”]引用;

也可以window.topFrame 使用架框的名字訪問；

window.onload = function(){
    console.log(frames);
var topFrame = frames[0];
    console.log(topFrame);
    console.log(topFrame.name);
    var leftFrame = window.frames["leftFrame"];
    console.log(leftFrame.name);
    console.log(window.rightFrame.name);
}

可使用frames.length 取得框架集合長度;

如果是內聯框架，那就更簡單了，如：

<iframe src="right.html" name="myFrame" width="200" height="200"></iframe>
<script>
    console.log(frames);
    console.log(frames[0].name);
</script>

對于頂級窗口的window對象來說，可以看作為由若干個子窗口組成的窗口數組，也就是說可以把window對象當作為窗口的集合，如：

    console.log(window.length);
    console.log(window[0]);

但在實際場景中，最好還是使用frames來代替window，因為frames顯得更清晰些；

對于<iframe>元素，如果設置了id，也可以通過document.getElementById()方法獲取，如：

var myframe = document.getElementById("myframe");
console.log(myframe);
myframe.src = "one.html";

var mywin = document.getElementById("myframe").contentWindow;
console.log(mywin);
mywin.document.write("是內聯框架window對象");

可以進行反向操作，通過window對象的frameElement屬性，來獲取該窗體的<iframe>元素；表示頂級窗口的window對象的frameElement屬性為null，窗體中的window對象的frameElement屬性不是null；

var myframe = document.getElementById("myframe");
var mywin = myframe.contentWindow;
console.log(mywin.frameElement);
console.log(mywin.frameElement === myframe);
console.log(window.frameElement);
 
// 在one.html會返回<iframe id="myframe" src="one.html"></iframe>
console.log(window.frameElement);

盡管可以通過document.getElementById()和contentWindow屬性來獲取窗口中的子窗體的引用，但在實際場景中，用的還是比較少，主要還是使用frames屬性來訪問；

top對象：

可以使用top引用最頂層（外層）框架，就是瀏覽器窗口；使用它可以確保在一個框架中正確的訪問另一個框架；

// 框架集頁面
window.onload = function(){
    console.log(frames);
    console.log(top);
console.log(top === frames);  // true
console.log(top === window);  // true
    console.log(frames === window);  // true
}
// 框架頁面
console.log("topFrame:",frames);
console.log("topFrame:",top);
console.log("topFrame:",top === frames);  // false

因此，使用top訪問框架時，也可以如下：

    console.log(top[0].name);
    console.log(top["topFrame"].name);
    console.log(top.topFrame.name);
 
    console.log(top.frames[0].name);
    console.log(top.frames["topFrame"].name);
console.log(top.frames === frames);  // true

parent對象：

與top相對的另一個window對象是parent，其指的當前框架的直接上層框架，即父框架；

parent在不同的位置指不同的對象；在某些情況下，parent有可能等于top，但在沒有框架的情況下，parent一定等于top（此時，它們都等于window），如：

<!-- frameset.html -->
<frameset rows="100,*">
    <frame src="top.html" name="topFrame" />
    <frameset cols="50%,50%">
        <frame src="left.html" name="leftFrame" />
        <frame src="right.html" name="rightFrame" />
    </frameset>
</frameset>
<!-- right.html -->
<frameset cols="50%,50%">
    <frame src="one.html" name="oneFrame" />
    <frame src="two.html" name="twoFrame" />
</frameset>

// one.html中的代碼
var parentFrame = window.parent;
console.log("從one.html中訪問：",parentFrame.name);  // rightFrame
parentFrame.frames[1].document.write("<h2>框架訪問</h2>");
 
// top.html中的代碼
var parentFrame = window.parent;
console.log("top:", parentFrame.name);
console.log("top:", parentFrame.length);
console.log("top:", parentFrame.frames.length);
console.log("top:", parentFrame === top);  // true
console.log("top:", parentFrame.frames[1].name);
parentFrame.frames[1].document.write("<h2>是left頁面嗎？</h2>");

注：除非最頂層的窗口是通過window.open()打開的，否則其window對象的name屬性不會包含任何值；

self對象：

指向當前window自身，即self和window可以互換使用；

引入self的目的只是為了與top和parent對象對應起來；

對于頂級窗口，parent == self; // true

注：所有的這些對象都是window對象的屬性，可以通過window.parent、window.top等形式訪問；同時，這也意味著可以將不同層次的window對象連接起來，如：window.parent.parent.frames[0]；

窗口交互：

對于一個復雜的框架，窗口之間可以相互訪問，它主要包括對框架自身的引用、父窗口對子窗口的引用、子窗口對父窗口及其他窗口的引用、對頂級窗口的引用；

在使用框架的情況下，瀏覽器中會存在多個Global對象，即每個窗口都會有自己的執行上下文，在每個框架中定義的全局變量會自動成為框架中window對象的屬性；

<!-- right.html -->
<div id="myDiv"></div>
<div id="imgDiv"></div>
<script>
function showImg(){
    var imgDiv = document.getElementById("imgDiv");
    var img = document.createElement("img");
    img.src = "images/1.jpg";
    imgDiv.appendChild(img);
}
</script>
 
// 框架集頁面
window.onload = showDiv;
function showDiv(){
    var rightFrame = parent[2];
    var myDiv = rightFrame.document.getElementById("myDiv");
    myDiv.innerHTML = "<h2>零點網絡</h2>";
}
 
<!-- top.html -->
<h2>Top頁面</h2>
<div><button id="showBtn">顯示圖片</button>
    <button id="closeBtn">關閉圖片</button></div>
<script>
window.onload = function(){
    var showBtn = document.getElementById("showBtn");
    var closeBtn = document.getElementById("closeBtn");
    var rightFrame = top[2];
    showBtn.onclick = rightFrame.showImg;
    closeBtn.onclick = closeImg;
}
function closeImg(){
    var rightFrame = top.rightFrame;
    var imgDiv = rightFrame.document.getElementById("imgDiv");
    imgDiv.innerHTML = "";
}
</script>

對于構造函數，它也是函數，所以當用構造函數和相關的原型對象定義一個自定義類時，這個類只在一個單獨的窗口中定義；子窗口也可以引用這個類；

對于內置類來說，和自定義類就有所不同了；內置的類都會在所有的窗口中自動預定義，即每個窗口的window對象都包含原生類型的構造函數，因此每個框架一套自己的構造函數，這些構造函數一一對應，但并不相等；如：top.Object并不等于top.frames[0].Object，這個問題會影響到對跨框架傳遞的對象使用instanceof操作符；

WindowProxy對象：

window對象是客戶端Javascript的全局變量；但是從技術上來看，并不是這樣的；Web瀏覽器每次向窗口或窗體中載入新的內容，它都會開始一個新的JavaScript執行上下文，包含一個新創建的全局對象；但是當多個窗口或窗體在使用時，有一個重要的概念，盡管窗體或窗口載入了新的文檔，但是引用窗體或窗口的window對象還仍然是一個有效的引用；

所以客戶端Javascript有兩個重要的對象；客戶端全局對象處于作用域鏈的頂級，并且是全局變量和函數所定義的地方；事實上，全局對象會在窗口或窗體載入新內容時被替換；

而我們稱之為“window對象”的對象實際上不是全局對象，而是全局對象的一個代理；每次查詢或設置window對象的屬性時，就會在窗口或窗體的當前全局對象上查詢或設置相同的屬性；

HTML5規范稱這個代理對象為WindowProxy；由于它的代理行為，除了有更長的生命周期之外，代理對象表現得像真正的全局對象；如果可以比較兩個對象，那么區分它們會很困難；但是事實上，沒有辦法可以引用到真正的客戶端全局對象；全局對象處于作用域鏈的頂端，但是window、self、top、parent以及窗體的屬性全部返回代理對象；window.open()也返回代理對象；甚至頂級函數里this的值也是代理對象，而不是真正的全局對象；

Web前端開發之Javascript-零點程序員-王唯

tml屬性值可以不用引號嗎，實例驗證

html屬性值可以不用引號

HTML元素的屬性值可以不適用引號來包裹，瀏覽器一樣可以將其進行渲染。不過，如果這樣寫HTML的代碼的話，屬性與屬性值之間需要用空格來進行隔開，避免后面的屬性變成前面屬性的屬性值。

提示：雖然如此，但是還是建議使用引號來寫HTML的代碼，個人感覺這樣更規范，更便于閱讀和對代碼的維護、管理。

html屬性值不加引號實例代碼，及在線編輯器

下方的實例中，編寫了兩個鏈接的a元素，并添加多個屬性和屬性值，且都不使用引號，其中一個使用空格隔開屬性值，一個未使用，運行一下看看效果如何：

<a href=https://www.x1y1z1.com/ style=color:green target=_blank>笨鳥工具網站首頁，使用空格隔開，點擊可打開本站首頁，功能與加引號一樣</a>
<br>
<a href=https://www.x1y1z1.com/style=color:green>笨鳥工具網站首頁，未使用空格，看看文字是否為綠色，看看鏈接是否還指向首頁？</a>

原文：html屬性值可以不用引號嗎，實例驗證 | HTML教程

免責聲明：內容僅供參考。

在線咨詢

上一篇：前端每日實戰：苦練 CSS 基本功-圖解輔助線的原理和畫法
下一篇：html5小游戲源代碼程序設計html源碼網頁電子版資料素材

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML中的href屬性：掌握超鏈接技巧，提升網站用戶體驗

html屬性值可以不用引號

html屬性值不加引號實例代碼，及在線編輯器

您的項目需求