HTML的功能标签

HTML的功能标签

在前两个博客中,我们已经知道了什么是结构标签和列表标签,那么我们今天来看看什么是功能标签。
功能标签,顾名思义,最大的优势在于这些标签具有特殊的功能,比如超链接,换行,图片引入等。

  • br 换行标签 强制换行 单标签
  • hr 水平线标签 一条水平线 单标签
  • a 超链接标签 跳转到相应的链接地址,下载对应的文件 默认有下划线和字体深蓝色( text-decration(装饰)=”none”可以去掉下划线) 主要属性:href(链接地址) target(打开方式) _new(新开后刷新) _black(新窗口打开) _self(打开当前窗口 默认) 双标签
  • img 图片标签 加载一张图片 元素包裹时,下方有默认的间距 属性:src(图片地址) width/hright 图片宽/高 alt(图片描述 在图片未加载时出现) title(图片标题) 单标签
  • iframe 内联框架标签 定义一个区域,并在这个区域直接加载一个外部网页 属性:src(外部网页链接地址) width/height(区域宽/高) frameborder(是否显示边框 1显示 0不显示) scrolling(是否显示滚动条 yes显示 no不显示 auto自动显示) 双标签
  • base 规定所有a标签的默认跳转方式 属性:target(打开方式) 属性值: _new(新开后刷新) _black(新窗口打开) _self(打开当前窗口 默认) 单标签
  • link 引入标签 引入标题图标 属性:rel(规定当前文档与被链接文件之间的关系)shortcut icon引用为标题图标 stylesheet链接css文件 type(规定文档类型image/x-icon图标类型 text/css css文本类型 单标签

源代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>功能标签</title>
		<meta name="descrption" content="">
		<meta name="keywords" content="">

		<base target="_new">
		<!-- 
		功能:规定所有a标签的默认跳转方式
		属性:
		    target-打开方式
		          _blank-新窗口打开
		          _self-当前窗口打开 (默认 
		-->
		<link rel="stylesheet" href="../Noname3.css"/>
		<!-- 
			link引入标签
			功能:引用标题图标
			属性:
				rel-规定当前文档与被链接文文件之间的关系
				shortcut icon-引用为标题图标
				type-规定文档类型
				image/x-icon-图标类型

		-->
	</head>

	<body>
		啦啦啦啦啦啦<br/>  <!-- br/是换行标签 -->
		我是卖报的小欢家<hr/><!-- hr/是水平线标签 -->
		你是谁你是谁<hr/>

		<a href="https://www.baidu.com" target="_blank">百度</a>
		<!-- <a></a>为超链接标签
			默认样式:包含的文字有下划线
				文字的颜色:深蓝色 
			属性:href 链接地址
				  target跳转方式
			属性值:_new 多次点击超链接按钮,页面刷新
					_blank 多次点击超链接按钮,会打开新的页面
					_self 本页面刷新(默认样式),点击按钮本身的页面就会消失,只有撤退才能返回
					
		-->
		<img src="../images/timg.jpg" style="width:100px;"/>
		<img src="../images/2.png" width="100px"/><br/>

		<!-- <img />  图片标签
		属性:
			src:图片路径
			width(宽)/height(高) 只有一个值时,等比例缩放
			alt:图片描述
			title:标题(通用属性)
		-->
		<iframe src="https://www.baidu.com/?tn=62095104_19_oem_dg"
		width="800px" height="500px" 
		scrolling="yes" frameborder="1">
		</iframe><br/>
		<!-- 
		iframe内联框架 
			内联框架可以定义一个区域,并在这个区域直接加载一个外部网页
			属性:
				src:外部网页链接路径
				width / height:区域  宽 / 高
				frameborder:是否显示边框
					1-显示
					0-不显示
				scrolling:是否显示滚动条
					yes-显示
					no-不显示 
					auto-自动显示

		-->
		<a href="https://www.vip.com" >唯品会</a><br/>
		<a href="https://www.baidu.com" target="_blank">百度</a><br/>
		<a href="https://www.vip.com" target="_blank">唯品会</a><br/>
		<a href="https://www.baidu.com" target="_blank">百度</a><br/>


	</body>
</html>
<!-- 
功能标签大部分都是单标签
超链接便签为双标签
-->

制成网页样式:
在这里插入图片描述

功能标签在以后会经常用到,时间长了就会慢慢掌握。

猜你喜欢

转载自blog.csdn.net/g960526/article/details/88785079