标签的嵌套与超链接

最新推荐文章于 2024-07-12 20:49:16 发布

ChengMeng11

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量1.2k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/ChengMeng11/article/details/104660436

版权

一个标签中嵌套另外一个标签

标签不能乱嵌套，如以下标签的嵌套是错误的

<p 		style="width:300px;height:300px;background:green">
		<div style="width:200px;height:200px;background:blue">
			hello
		</div>
</p>

按代码的理解应该是绿色里面应该包含蓝色，而因为标签的嵌套错误，从而在浏览器中出现出错误。如图：

在这里插入图片描述

正确的标签嵌套应该是：

<div style="width:200px;height:200px;background:red">
		<p style="width:50px;height:50px;background:green">
			hello
		</p>
</div>

在浏览器中的现实应该是红色里包含绿色。如图：

在这里插入图片描述

浏览器渲染后显示的页面代码与编码时有所不同

chrome浏览器提供的开发工具：用来帮助开发人员查看和调试页面的

如何打开：

在这里插入图片描述常用工具：

在这里插入图片描述

若是错误的信息的话，console里面会进行提示。如图：

在这里插入图片描述

如图：network在浏览器中的显示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UWi4WUKD-1583321305871)(F:\sublime\19020103 张杰\我的总结\案例\常用标签12（之network的显示）.png)]$

使用超链接可以从一个页面跳转到另一个页面，实现页面之间的跳转

当鼠标移动超链接文本上时，鼠标箭头会变成一只小手

超链接有三种类型：

使用 <a>标签创建超链接

语法格式：

<a href="链接地址" target="链接打开的位置">链接文本或图像</a>

常见属性:

href链接地址或路径:链接地址

_self自身，当前，默认值 
_blank空白、新的页面   
_parent父层框架 
_top顶层框架 自定义

路径分类：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href

关注