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>
<!-- 
功能标签大部分都是单标签
超链接便签为双标签
-->

制成网页样式：
HTML的功能标签

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

HTML的功能标签

HTML的功能标签

相关推荐