html <a>标签属性总结

该标签主要作用

-通过href属性来创建指向另一个文档的链接
-通过name属性创建文档内的书签
href或name是必选属性


href属性

href 规定了链接地址:

-文字链接

<a href="http://www.baidu.com">百度一下</a>

-图片链接:

<a href="http://www.baidu.com">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
</a>

href三种可能的值:

-绝对 URL - 指向另一个站点

href="http://www.example.com/index.htm"

-相对 URL - 指向站点内的某个文件

href="index.htm"

-锚 URL - 指向页面中的锚

href="#top"

用法-设置一个没有下划线的链接

<a href="http://www.baidu.com" style="text-decoration:none">这是一个链接</a>

name规定了锚的名称

相对链接

<a href="#h1">跳到第一章</a>
...
<h1>
<a name="h1">第一章</a>
<!--这里的name可以换成id-->
</h1>
<p>本章的内容有....</p>

绝对链接

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
<!--这段代码会让用户直接进入这个网站的这个anchor下-->

关于name和id

id和name都可以与href结合起来使用,同理name的值在同一文档必须是唯一的

关于图形映射:

<a href="http://www.baidu.com/xxx.html" shape="rect" coords="0,0,96,99">sun</a>

-只有图形可以添加映射,尽量用map元素和area元素设定图像映射
-<a>标签的shape和coords属性只支持opera和firefox浏览器

shape 规定链接的形状

shape的值:

default 全部区域
rect 矩形
circle 圆形
poly 多边形

coords 规定链接的坐标

coords的值:

如果shape是rect,coords的值为x1,y1,x2,y2,规定左上角和右下角的坐标
如果shape是circle,coords的值为x,y,radius,规定圆心的坐标和半径
如果shape是poly,coords的值为x1,y1,x2,y2,xn,yn,规定多边形各边的坐标,如果最后一个坐标和第一个不一致,浏览器为了关闭图形,会添加最后坐标

关于上下文关系

rel 指定从源文档到目标文档的关系
rev 指定从目标文档到源文档的关系
(rel和rev是写给浏览器看的,表明了上下文关系,w3school提出html和xhtml并没有正式提出这两种属性)
以下是一些值:

描述
alternate文档的可选版本(例如打印页、翻译页或镜像)
stylesheet文档的外部样式表
start集合中的第一个文档
next集合中的下一个文档
prev集合中的前一个文档
contents文档目录
index文档索引
glossary文档中所用字词的术语表或解释
copyright包含版权信息的文档
chapter文档的章
section文档的节
subsection文档的子段
appendix文档附录
help帮助文档
bookmark相关文档
nofollow用于指定 Google 搜索引擎不要跟踪链接
licence授权
tag标签
friend友情链接

target定义被链接的文档在何处显示

<a href="http://www.baidu.com" target="_blank">这是一个链接</a>

target的值:

_top 跳出框架打开网页
_parent 在父窗口打开网页
_blank 在新窗口打开网页
_self 默认值,在同一框架中打开网页
framename 在指定的框架中打开网页

用法实例:

<a href="/index.html"
target="_top">请点击这里!</a>

其他

download 规定被下载的目标,即点击后直接下载某个目标 (H5)
media 规定目标文档是专为什么样的平台设计的,没有实际作用 (H5)
type 规定了文档的mime类型,比如”text/css”
X/charset 规定链接的字符集(w3shool标记为所有浏览器不支持)
X/hreflang 规定链接文档的语言(w3shool标记为所有浏览器不支持)

用mailto:创建邮件

一个完整的格式

<a href="mailto:jk.2013@qq.com?cc="sipallan@163.com&bbc="joe5213@qq.com&subject=这是一封邮件&body=我想你">发送邮件</a>

注意点
1、多个收件人,抄送和密件抄送人用分号;分割
2、收件地址和抄送地址用?号分割,其他用&号分割

<think>嗯,用户让我介绍如何使用<body>标签创建一个包含多种HTML标签的网页。首先,我需要确保覆盖用户提到的所有标签:<font>、<p>、<marquee>、<a>、<img>、<table>、<form>。不过,<font>标签已经过时了,应该用CSS替代,但用户明确提到了,所以我得包含它,同时可能提醒一下。 接下来,结构要清晰。可能需要分步骤讲解每个标签的用法,然后给出一个完整的示例。用户可能需要一个可以直接复制粘贴的代码,所以示例代码应该完整且正确。要注意HTML的基本结构,比如<!DOCTYPE>、<html>、<head>、<body>等部分。 另外,用户可能对某些标签属性不太熟悉,比如<img>的src和alt,<a>的href,<form>的action和method。需要解释这些属性的作用,但保持简洁。表格部分可能需要展示<tr>、<td>和<th>的使用。表单部分需要包含不同类型的输入,比如text、password、radio、checkbox、submit等。 还要注意,<marquee>虽然现在不推荐使用,但用户要求了,所以还是得包含进去。可能需要提到它已被废弃,但在某些浏览器可能仍然有效。最后,确保整个代码示例没有语法错误,比如标签闭合、属性引号正确等。可能还需要在最后总结各个标签的作用,帮助用户记忆。</think>我将分步骤为您介绍如何创建包含多个HTML标签的网页,并提供完整示例: 1. 基础结构搭建 ```html <!DOCTYPE html> <html> <head> <title>综合示例网页</title> </head> <body> <!-- 内容区域 --> </body> </html> ``` 2. 标签使用说明(按用户要求顺序) - `<font>` 文字格式(已过时,建议用CSS替代) ```html <font color="blue" face="Arial" size="4">示例文字</font> ``` - `<p>` 段落标签 ```html <p>这是一个段落文本</p> ``` - `<marquee>` 滚动文字(已废弃,但部分浏览器仍支持) ```html <marquee behavior="scroll" direction="left">滚动内容</marquee> ``` - `<a>` 超链接 ```html <a href="https://www.example.com" target="_blank">访问示例网站</a> ``` - `<img>` 图像嵌入 ```html <img src="image.jpg" alt="示例图片" width="200" height="150"> ``` - `<table>` 表格 ```html <table border="1"> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> </table> ``` - `<form>` 表单 ```html <form action="/submit" method="post"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <input type="submit" value="提交"> </form> ``` 3. 完整示例代码 ```html <!DOCTYPE html> <html> <head> <title>综合示例网页</title> </head> <body> <!-- 使用font标签 --> <font color="green" size="5">欢迎访问我的网页</font> <!-- 段落 --> <p>这是一个关于HTML标签的综合示例页面</p> <!-- 滚动文字 --> <marquee behavior="alternate" scrollamount="5">注意:本页面包含示例内容</marquee> <!-- 图片链接 --> <a href="https://www.example.com"> <img src="logo.png" alt="网站logo" width="100"> </a> <!-- 表格 --> <table border="1" cellpadding="5"> <tr> <th>编号</th> <th>项目</th> <th>描述</th> </tr> <tr> <td>1</td> <td>HTML</td> <td>网页结构</td> </tr> </table> <!-- 表单 --> <form action="/submit" method="post"> <p>用户名:<input type="text" name="user"></p> <p>密码:<input type="password" name="pwd"></p> <p>性别: <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 </p> <p>兴趣: <input type="checkbox" name="hobby" value="reading"> 阅读 <input type="checkbox" name="hobby" value="sports"> 运动 </p> <input type="submit" value="提交"> </form> </body> </html> ``` 4. 注意事项: - `<font>`和`<marquee>`已不推荐使用,建议用CSS替代样式设置 - 图片路径需要替换为实际存在的图片地址 - 表单需要后端支持才能处理提交数据 - 现代网页开发应遵循语义化HTML原则 - 建议添加<meta charset="UTF-8">声明字符编码 5. 标签功能总结: | 标签 | 功能描述 | |-------------|----------------------------| | `<body>` | 定义文档主体内容 | | `<font>` | 设置文字样式(已过时) | | `<p>` | 定义段落 | | `<marquee>` | 创建滚动效果(已废弃) | | `<a>` | 创建超链接 | | `<img>` | 嵌入图像 | | `<table>` | 创建数据表格 | | `<form>` | 创建用户输入表单 | 建议在实际开发中:使用CSS进行样式控制、使用`<div>`和`<span>`进行布局、遵循HTML5语义化标签(如`<header>`, `<nav>`, `<section>`等)。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值