HTML——常用字体标签+超链接+锚点定位

最新推荐文章于 2024-04-14 20:34:11 发布

Jhinhua

最新推荐文章于 2024-04-14 20:34:11 发布

阅读量568

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104600080

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

html常用字体标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用的html标签</title>
	</head>
	<body>
		<!-- 1.标题标签 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		<!-- 2.分割线 -->
		<hr />
		<!-- 3.文本标签 -->
		<span>普通文本标签</span>
		<b>加粗字体标签</b>
		<strong>加粗字体标签</strong>
		<i>斜体标签</i>
		<em>斜体标签</em>
		<u>自带下划线的标签</u>
		<del>自带删除线的</del>
		<small>小字体的</small>
		<!-- size 设置字号  1-7  数值越大 字号越大 
			color 设置颜色-->
		<font size="3" color="#ff0000">通过属性设置的字号和颜色的标签</font>
		<p>段落： 一个新的段落是要另起一行显示的
		个新的段落是要另起一行显示的
		</p>
		<pre>
			在标签中的文本是什么格式的 
			最后在文档上显示的就是什么格式
		</pre>
		
		<!-- 练习： 把流水这两个字颜色设置为绿色， 添加下划线 
		颜色对应的样式名： color
		下划线 text-decoration: 
		-->
		<p>小桥<span style="color: green; text-decoration: underline;">流水</span>哗啦啦啦啦</p>
	</body>
</html>

超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接标签</title>
	</head>
	<body>
		<!-- 文本的超链接 
		在a标签中让内容具有链接性
		属性：
			href 设置内容的链接地址
				可以是网址或者是单纯html文件路径
			target
				设置链接打开的页面情况 默认在当前窗口中打开
				因为有些超链接打开的时候是新打开一个窗口显示的页面信息 
				_blank  在新的窗口中打开
				可以在自定义名字的窗口中打开 --- 借助标签内嵌窗口iframe
		-->
		<a href="http://www.baidu.com" target="main">百度一下</a>
		<!-- 内嵌窗口
		 src 引入的是在窗口中显示的内容的网址或者html文件路径
		 name 给窗口自定义名字
		 width  设置的是窗口的宽度  单位：px 是像素的意思
		 height 设置窗口的高度 单位px
		 -->
		<iframe src="2.常用的html标签.html" name="main" width="800px" height="700px"></iframe>
	</body>
</html>

锚点定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <!-- 锚点定位：
		 在长的篇幅的网页中 设置导航 点击导航 定位到该网页的指定的位置	 
		 超链接标签定位到普通的标签  ***** 借助id定位常用	 
			 借助超链接 href  和 标签的属性id来配合使用
			 属性id --- 标签的表示  建议他是唯一的  在同一个HTML文档中 id不重复
		超链接标签定位到超链接标签
			 借助超链接 href 和 name属性来完成
		 -->
		<a href="#page1">第一段</a>
		<a href="#page2">第二段</a>
		<a href="#page3">第三段</a>
		<!-- <a href="#link">最后的超链接标签</a> -->
		<!-- 定位到别名的操作 -->
		<a href="#link">最后的超链接标签</a>
		<!-- 
		 设置标签高度的样式 height
		 背景颜色的样式 background-color
		 -->
		<p id="page1" style="height:1000px; background-color: blue;">1</p>
		<p id="page2" style="height:1000px; background-color: orange;">2</p>
		<p id="page3" style="height:1000px; background-color: purple;">3</p>
		<!-- <a id="link" href="2.常用的html标签.html">常用的文本标签</a> -->
		<!-- 或者 给他一个别名  -->
		<a name="link" href="2.常用的html标签.html">常用的文本标签</a>
	</body>
</html>

Jhinhua

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML——常用字体标签+超链接+锚点定位

html常用字体标签 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>常用的html标签</title> </head> <body>  <h1>...
复制链接

扫一扫