2021-05-25

最新推荐文章于 2024-09-05 23:16:39 发布

AAAEEESS

最新推荐文章于 2024-09-05 23:16:39 发布

阅读量114

点赞数

分类专栏：前端学习文章标签： html html5

本文链接：https://blog.csdn.net/AAAEEESS/article/details/117236190

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

自学前端——HTML第一天（下）

水平线标签<hr/>：把标签<hr/>后面与前面的内容用水平线隔开。
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平线标签hr</title>
	</head>
	<body>
		<p>我是上面的内容<hr>我是下面的内容</p>
	</body>
</html>

效果如下：
水平线标签
换行标签br:让文字换行。
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>换行标签br</title>
	</head>
	<body>
		<p>我是上面的内容<br/>我是下面的内容</p>
	</body>
</html>

效果如下：换行标签
文字标签span：
标签被用来组合文档中的行内元素，是一个小盒子，一行可以放很多个span。

盒子标签div：

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联，是一个大盒子，一行只可以放一个div。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>span与div</title>
	</head>
	<body>
		<div>我是一个盒子，我一个人要单独占一行</div>
		<span>我也是一个盒子</span>
		<span>但是我是小盒子</span>
		<span>一行可以放好多个</span>
	</body>
</html>

效果如下：
span与div
文字类标签：倾斜标签与（常用）、加粗标签与、下划线标签<ins></ins>与、删除线标签<del></del>与<s></s>

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化标签</title>
	</head>
	<body>
		<strong>我是加粗的文字！！！</strong>
		<b>我也是加粗的文字</b>
		<i>我是倾斜的文字！！！</i>
		<em>我也是倾斜的文字</em>
		<del>我是删除线！！！</del>
		<s>我也是删除线</s>
		<ins>我是下划线！！！</ins>
		<u>我也是下划线</u>
	</body>
</html>

效果如下：
文字类标签
图片标签<img/>:
属性：

src: 图片的路径（来源）
title:当鼠标悬停在图片上显示的文字
width:图片的宽度
height：图片的高度
border:图片的边框
属性特点：
属性之间部分先后顺序
属性名与属性值之间以键值对的形式存在
属性名与属性值之间以等号分隔属性值要以引号包裹；
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h4>图像标签的使用</h4>
		<img src="../images/up.jpg"/>
		<h4> alt 替换文本 图像显示不出来的时候用文字替换</h4>
		<img src="../images/up1.jpg" alt="加载不出图片" />
		<img src="../images/up.jpg" title="我是图片" />
		<h4>width 给图像增加宽度：</h4>
		<img src="../images/up.jpg" alt="加载不出图片" title="我是图片"width="50px"/>
		<h4>height 给图像增加高度：</h4>
		<img src="../images/up.jpg" alt="加载不出图片" title="我是图片"height="50px"/>
		<h4>border 给图像设定边框：</h4>
		<img src="../images/up.jpg" alt="加载不出图片" title="我是图片"border="10px"/>
	</body>
</html>

效果如图：
图像标签
链接标签 <a ></a>：
外部链接 <a href="http://www.baidu.com"></a> 写完整的协议域名网址
内部链接 <a href="index.html"></a> 直接写文件名即可
属性
href:指定跳转的页面
title：鼠标悬停显示的文字
target: _self(默认会覆盖原来的窗口) _blank(会以新的窗口打开) 窗口的打开方式
#：会阻止页面跳转但是会刷新页面

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h4>1.超链接标签</h4>
		<a href="http://www.qq.com" target="_blank">腾讯</a>
		target 打开窗口的方式 默认的值是_self  当前窗口打开页面 _blank 新窗口打开页面
		<a href="http://www.itcast.cn" target="_blank">传智播客</a>
		<h4>内部链接：网站内部页面之间的相互链接</h4>
		<a href="公司简介.html">公司简介</a>
		<h4>空链接：#</h4>
		<a href="#">公司地址</a>
		<h4>下载链接：地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
		<a href="图像标签.zip">下载文件</a>
		<h4>网页元素的链接</h4>
		<a href="http://www.baidu.com"><img src="图像标签.jpg"/></a>
	</body>
</html>

效果图如下：
链接标签1
剩下的跳转、鼠标悬停覆盖效果以及阻止效果就不一样展示了，小伙伴们可以自己回去试试看。

路径
相对路径
在同一个文件夹直接找名字
向上一级 …/
向下 /
绝对路径

代码如下：
相对路径：同一级路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>同一级路径</title>
	</head>
	<body>
		<img src="图像标签.jpg" />
	</body>
</html>

上一级路径：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>上一级路径</title>
	</head>
	<body>
		<img src="../图像标签.jpg" />
	</body>
</html>

下一级路径：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="images/up.jpg">
	</body>
</html>

绝对路径：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="C:\Users\Administrator\Desktop\前端\学习1号\学习\图像标签.jpg" />
		<img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" />
	</body>
</html>