HTML中<a>标签的target属性参考

本文介绍了HTML中a标签的target属性及其保留字,探讨了target属性的争议,并提供了使用JavaScript进行页面跳转的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

超级链接a的target属性已经是不被新规范支持了,其值有四个保留字:

1._blank      <a href="document.html" target="_blank">my document</a> 
                  浏览器会另开一个新窗口显示document.html文档   
2._parent     <a href="document.html" target="_parent">my document</a>      
                  指向父frameset文档   
3._self       <a href="document.html" target="_self">my document</a>           
                  把文档调入当前页框  
4._top        <a href="document.html" target="_top">my document</a>          
                  去掉所有页框并用document.html取代frameset文档   
 
小技巧1:使别人的页框不能引用你的网页,在文件头加:<base target="_top">    
小技巧2:在当前页打开连接或做刷新,提交到当前页在文件头加:<base target="_self">

    target的去留存有争议,
主张留的一方主要是考虑到target="_blank"的属性目前来讲还没有一个好的方式来解决,而主张去的一方则拿出了rel与JS的解决方案。

  
我的看法:当采用frameset框架的时候,target="frame_name",即可指定a的目标地址。
     使用JS的进行跳转页面的办法:
     <script type="text/javascript">
         function changePage(direction)
         {
            parent.brotherFrameName.location.href(direction);
          }
     </script>
     然后<span onclick="changePage("direction_page")">link_name</span>即可

    a与js的配合使用
    <a href="javascript: methodName();">This is a link</a>

 

如何使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>首页</title> </head> <body> <h1>欢迎来到首页</h1> <p>从这里可以跳转到其他页面:</p> <ul> <li><a href="page2.html">跳转到第二页</a></li> <li><a href="page3.html">跳转到第三页</a></li> <li><a href="page4.html">跳转到第四页</a></li> <li><a href="page5.html">跳转到第五页</a></li> </ul> </body> </html> page2.html HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第二页</title> </head> <body> <h1>这是第二页</h1> <p>返回首页:<a href="index.html">首页</a></p> <p>跳转到其他页面:</p> <ul> <li><a href="page3.html">跳转到第三页</a></li> <li><a href="page4.html">跳转到第四页</a></li> <li><a href="page5.html">跳转到第五页</a></li> </ul> </body> </html> page3.html HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第三页</title> </head> <body> <h1>这是第三页</h1> <p>返回首页:<a href="index.html">首页</a></p> <p>跳转到其他页面:</p> <ul> <li><a href="page2.html">跳转到第二页</a></li> <li><a href="page4.html">跳转到第四页</a></li> <li><a href="page5.html">跳转到第五页</a></li> </ul> </body> </html> page4.html HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第四页</title> </head> <body> <h1>这是第四页</h1> <p>返回首页:<a href="index.html">首页</a></p> <p>跳转到其他页面:</p> <ul> <li><a href="page2.html">跳转到第二页</a></li> <li><a href="page3.html">跳转到第三页</a></li> <li><a href="page5.html">跳转到第五页</a></li> </ul> </body> </html> page5.html HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第五页</title> </head> <body> <h1>这是第五页</h1> <p>返回首页:<a href="index.html">首页</a></p> <p>跳转到其他页面:</p> <ul> <li><a href="page2.html">跳转到第二页</a></li> <li><a href="page3.html">跳转到第三页</a></li> <li><a href="page4.html">跳转到第四页</a></li> </ul> </body> </html>制作
06-07
<think>我们正在构建一个简单的多页面网站,需要创建多个HTML文件(如index.html,page2.html),并通过超链接将它们连接起来。每个HTML文件都应该使用标准的HTML5文档结构,包括<!DOCTYPEhtml>声明。步骤:1.创建项目文件夹,例如"my_website"。2.在项目文件夹内创建多个HTML文件,比如:-index.html(主页)-about.html(关于页面)-contact.html(联系页面)3.每个HTML文件的基本结构:<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>页面标题</title></head><body><!--页面内容--></body></html>4.在页面之间创建链接:使用<a>标签,href属性设置为目标HTML文件的路径。5.在HBuilderX中打开项目文件夹,然后可以右键点击每个HTML文件选择“在浏览器中打开”进行预览。示例代码:index.html文件内容示例:```<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>主页</title></head><body><h1>欢迎来到我的网站!</h1><p>这是一个多页面网站的示例。</p><p>访问<ahref="about.html">关于页面</a></p><p>访问<ahref="contact.html">联系页面</a></p></body></html>```about.html文件内容示例:```<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>关于我们</title></head><body><h1>关于我们</h1><p>我们是一个示例网站,用于演示多页面HTML网站。</p><p>返回<ahref="index.html">主页</a></p></body></html>```contact.html文件内容示例:```<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>联系我们</title></head><body><h1>联系我们</h1><p>通过电子邮件联系我们:contact@example.com</p><p>返回<ahref="index.html">主页</a></p></body></html>```在HBuilderX中预览:1.确保项目已经在HBuilderX中打开。2.右键单击index.html,选择“打开方式”->“内置浏览器”或选择“运行到浏览器”->选择已安装的浏览器(如Chrome)。这样就可以在浏览器中看到主页,并点击链接跳转到其他页面。注意:所有HTML文件必须在同一个项目文件夹下,或者使用正确的相对路径。如果需要部署到服务器,只需将整个项目文件夹上传到服务器即可。另外,如果使用HBuilderX运行内置浏览器时遇到问题,可以参考之前解决404错误的方法,或者检查文件路径是否正确。参考引用中提到了多页面应用(MPA)的概念,这正是我们构建的方式:每个页面都是独立的HTML文件,通过超链接导航[^2]。同时,引用[4]指出可以使用任意HTML编辑软件,因此我们选择HBuilderX作为开发工具是合适的。下面列出相关问题:</think> ### 如何使用 HTML 构建多页面网站 要使用 HTML 创建多页面网站,需要以下几个关键步骤(假设使用 HBuilderX 作为开发工具): #### 1. 项目结构创建 ```diff my-website/ ├── index.html # 主页 ├── about.html # 关于页面 ├── services.html # 服务页面 ├── contact.html # 联系页面 └── assets/ # 资源文件夹 ├── css/ │ └── style.css └── images/ ``` #### 2. 基础 HTML 结构(以 index.html 为例) ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网站首页</title> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> <!-- 导航栏 --> <nav> <a href="index.html">首页</a> <a href="about.html">关于</a> <a href="services.html">服务</a> <a href="contact.html">联系我们</a> </nav> <!-- 主要内容 --> <main> <h1>欢迎访问我们的网站</h1> <p>这是一个多页面网站示例</p> </main> <!-- 页脚 --> <footer> <p>© 2023 我的网站</p> </footer> </body> </html> ``` #### 3. 创建其他页面 复制 `index.html` 的结构,修改相应内容: ```html <!-- about.html --> <!DOCTYPE html> ... <title>关于我们</title> ... <main> <h1>关于我们</h1> <p>公司简介和团队信息</p> <p>返回<a href="index.html">首页</a></p> </main> ... ``` #### 4. 页面间导航 使用 `<a>` 标签实现页面跳转: ```html <!-- 在所有页面添加统一导航 --> <nav> <a href="index.html">首页</a> <a href="about.html">关于</a> <a href="services.html">服务</a> <a href="contact.html">联系我们</a> </nav> ``` #### 5. HBuilderX 中预览 1. 打开项目文件夹 2. 右键单击 HTML 文件 → 选择"运行方式" → "内置浏览器" 3. 或使用快捷键 `Ctrl + R` 4. 点击导航链接测试页面跳转 #### 关键概念说明 1. **DOCTYPE 声明**:`<!DOCTYPE html>` 确保浏览器使用 HTML5 标准渲染页面[^2] 2. **多页面架构(MPA)**:每个页面都是独立的 HTML 文件,适合内容型网站[^2] 3. **相对路径**:`href="about.html"` 表示同目录下的文件 4. **资源管理**:CSS/JS/图片建议放在 assets 子目录 ### 高级技巧 ```html <!-- 在新标签页打开页面 --> <a href="services.html" target="_blank">我们的服务</a> <!-- 页面内锚点跳转 --> <a href="#section1">跳转到第一节</a> ... <h2 id="section1">第一部分内容</h2> ``` 通过以上步骤,您可以创建包含多个页面的完整网站。每个页面独立开发维护,通过导航菜单互连,符合传统网站架构模式[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值