【HTML学习笔记四】链接详解与头部概念

最新推荐文章于 2022-11-13 21:33:29 发布

思索与猫

最新推荐文章于 2022-11-13 21:33:29 发布

阅读量421

点赞数

分类专栏： HTML学习笔记文章标签： HTML 学习笔记

本文链接：https://blog.youkuaiyun.com/qq_28997735/article/details/97442769

版权

HTML学习笔记专栏收录该内容

9 篇文章

订阅专栏

一.HTML超链接

1.语法

<a href="url">链接文本</a>

2.图片链接

将链接文本替换为图片就可以通过点击图片来跳转了
实例：

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>图片链接</title> 
	</head>
	<body>
		<p>
		这是一个图片链接：
		<a href="https://blog.youkuaiyun.com/qq_28997735" rel = "noopener noreferrer">		
		<img src = "images/头像.jpg" height = "200" width = "200"></a>
		</p>
	</body>
</html>

注意： 在url后面加上rel = "noopener noreferrer"这段语句，它的意思是不会打开其他的网站，可以防止钓鱼网站

3.target属性

使用target属性可以定义链接在哪里显示

例如：将target属性设置为"_blank"时，会在新标签页打开文档

<a href="https://blog.youkuaiyun.com/qq_28997735" target = "_blank">

属性值：

_blank：浏览器总在一个新打开、未命名的窗口中载入目标文档。
_top：在整个窗口中打开被链接文档。
_parent：在父框架集中打开被链接文档。
_self：默认。在相同的框架中打开被链接文档。
framename：在指定的框架中打开被链接文档。

4.id属性

id属性可用于创建在一个HTML文档书签标记。
例如：
1.首先在HTML文档中插入一个id

<a id = "tips">被标记到的提示部分</a>

2.创建一个链接到被标记的内容(id=“tips”）

<a href = "#tips">访问的提示部分</a>

或者从另一个页面创建一个链接到"有用的提示部分(id=“tips”）

<a href = "url#tips">访问的提示部分</a>

5.邮件mailto

在进行邮件内容发送时，需要使用关键字：mailto

语法：

<a href="mailto:someone@examlpe.com?subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">发送邮件</a>

抄送和密送：
运用关键词cc和bcc

<a href="mailto:someone@examlpe.com?cc=someone@example.com&bcc=someone@example.com? subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">发送邮件</a>

参数：

邮件接受地址：mailto:name@email.com
邮件抄送地址：cc=name@email.com
邮件密送地址：bcc=name@email.com
主题：subject=subject text
内容：body=body text
第一个分割符号：?
之后的分割符号：&

注：多个邮件地址用 ; 隔开，空格用 %20 代替。

二.HTML头部

1.`<head>`元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <base>, <style>, <meta>, <link>, <script>, <noscript>

2.`<title>`元素

定义了不同文档的标题
在 HTML/XHTML 文档中是必须的。

2.`<base>`元素

描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

例如：
新标签页打开以百度为基准的地址

<head>
<base href = "www.baidu.com" target = "_blank"/>
</head>

3.`<style>`元素

定义了HTML文档的样式文件引用地址
例如：
设置背景颜色为黄色，段落字体为蓝色

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

4.`<meta>`元素(十分重要)

<meta>提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

5.`<link>`元素

<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表。

在 HTML 中，标签没有结束标签。
在 XHTML 中，标签必须被正确地关闭。

6.`<script>, <noscript>`

<script>标签用于加载脚本文件，如： JavaScript。
<noscript>用于浏览器不支持脚本文件时的替代内容

【HTML学习笔记四】链接详解与头部概念

一.HTML超链接

1.语法

2.图片链接

3.target属性

4.id属性

5.邮件mailto

二.HTML头部

1.<head>元素

2.<title>元素

2.<base>元素

3.<style>元素

4.<meta>元素(十分重要)

5.<link>元素

6.<script>, <noscript>