HTML常用标签（二）

最新推荐文章于 2024-04-24 09:27:42 发布

passerby&

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量108

点赞数

分类专栏： HTML从入门到精通文章标签： html

本文链接：https://blog.csdn.net/qq_46100493/article/details/115004773

版权

HTML从入门到精通专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML常用标签

锚点链接标签
base标签
pre标签
特殊字符

锚点链接标签

锚点链接：
作用：
通过锚点链接可以快速定位到我们想要的内容，一般当一张网页比较长时我们会使用这标签对内容进行定位。

创建锚点链接的步骤:	   
	    第一步：使用相应的id标注需要跳转的目标的位置。
		例如：<h2 id="two"></h2>
		第二步：使用<a href="#id名">链接文本</a>创建链接文本（需要被点击的）
		例如：<a href="#two"></a>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圣诞节的由来</title>
	</head>
	<body>
		<!--  锚点链接
		第一步：使用相应的id标注需要跳转的目标的位置。例如：<h2 id="one">第一章讲解</h2>
		第二步：使用<a href="#id名">链接文本</a>创建链接文本（需要被点击的）例如：<a href="#two">-->
		<h1>圣诞节的来源</h1>
		<a href="first.html">1,圣诞节是怎么来的<br/></a>   <!--这里我们用到的内部链接 -->
		<a href="https://www.baidu.com/" target="_blank">2,圣诞老人的由来<br/></a>  <!-- 这里我们是对外部链接进行实践-->
		<a href="#data">3,圣诞树的由来<br/></a>  <!-- 这里用到的是锚点链接，连接到了我们后面的data-->
		<hr />
		<h2 >圣诞节是怎么来的</h2>
		<p>圣诞节源自古罗马人迎接新年的农神节，与基督教本无关系。在基督教盛行罗马帝国后，教廷随波逐流地将这种民俗节日纳入基督教体系，同时以庆祝耶稣的降生。
		
		但在圣诞节这天不是耶稣的生辰，因为《圣经》未有记载耶稣具体生于哪天，同样没提到过有此种节日，是基督教吸收了古罗马神话的结果。</p>
		
		<p>圣诞节本是宗教节日。十九世纪，圣诞卡的流行、圣诞老人的出现，使圣诞节开始渐渐流行起来。圣诞庆祝习俗在北欧流行后，结合着北半球冬季的圣诞装饰也出现了。十九世纪初发展至中叶，整个欧洲、美洲开始过起了圣诞节。并衍生出了相应的圣诞文化。
		
		圣诞节的故事：</p>
		<img src="img/1.jpg" width="400px" height="500px" />  <!-- 插入图片并且设置他的长和宽-->
		<h2>圣诞老人的由来</h2>
		
		<p>在19世纪初，一个叫约翰的14岁男孩住进了英格兰的一家孤儿院。那时的孤儿院生活是很可怕的，孤儿就意味着没人喜欢、没人疼爱。这座孤儿院的院长对孩子们少有爱心，这里也没有孩子们喜欢的游戏，没有同情，没有理解。
		
		孩子们一年到头都要劳动，他们每天天一亮就起来干活，一直干到天黑。一年之中，只有圣诞节这天孩子们不用干活，而且还可以收到礼物——只橘子。约翰到孤儿院后，每年都盼望着圣诞节，还有这只橘子。
		
		在英格兰，无论是对约翰还是对他的同伴来说，橘子都是稀罕的东西。</p>
		
		<p>这一年的圣诞节，约翰心里特别高兴，因为他马上就要成年了。他知道自己将会变得更强壮，而且不久就可以离开孤儿院了。他高兴地想象着自己的未来，他还想把橘子留到明年他生日那天。如果保存好，不摔不碰，他也许就能在生日这天吃到它。
		
		圣诞节终于来了，孩子们兴奋极了，撒着欢跑向餐厅。</p>
		<img src="img/2.jpg" height="500px" width="600px"/>
		<h2 id="data">圣诞树的由来</h2>
		
		<p>约翰伸手掀开布包的一角，看到里面是一只大大的橘子，只是橘皮上有好几条切痕。他明白了，是伙伴们每人从他们的橘子上切下一瓣，拼成了这只又大又漂亮的橘子，约翰感动极了。
		
		约翰永远也不会忘记那年的圣诞节他的朋友们给予他的关爱。</p><br />
		<p>他的幼年是在冷酷的环境里度过的，然而在长大成人的这一年，他收获了友谊和关爱。
		
		后来约翰有了自己的事业，但他从没忘记这只橘子，每到圣诞节来临时，他都会买很多橘子送给孤儿院的孩子，因为他从没忘记自己的梦想，要让所有的孩子都能在圣诞节享受橘子的香味。</p>
	<img src="img/3.jpg"  width="400px" height="500px"/>
	
	</body>
</html>

实验效果：
在这里插入图片描述

Base标签

标签作用：
base标签可以设置整体链接的打开状态。
在base里我们一般把链接的默认打开方式设置为：target="_blank"。
注意：
base标签是写在之间的。

Pre标签

标签作用

<pre>标签可以定义预格式化的文本
被包围在<per>标签元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。

标签格式

<pre>
对空行 和空格
进行控制
</pre>

标签实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<base target="_blank" /> 
		<!-- base标签是让所有外部链接都在新的窗口中打开 -->
	</head>
	<body>
		<a href="https://www.baidu.com">百度</a>
		<a href="https://www.sina.com">新浪</a>
		<a href="https://www.souhu.com">搜狐</a>
		<a href="https://www.163.com">网易</a>
		<br />
		<!-- <pre>预格式化标签 -->
		<pre>
			      爆炒牛蛙
			  红烧鸡肉
		        清真小鱼丸
		      油炸小龙虾
		      
		</pre>
	</body>
</html>

运行结果：
在这里插入图片描述

特殊字符

标签写法：
这些符号是以&开头;结尾的，不属于标签。注意HTML中不能使用小于号"<“和”>"特殊字符，因为浏览器会将他们作为标签解析

特殊字符分类：
在这里插入图片描述

	<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<!-- 这些符号是以&开头;结尾的，不属于标签。注意HTML中不能使用小于号"<"和">"特殊字符，因为浏览器会将他们作为标签解析 -->
		曹操是&nbsp;&nbsp;&nbsp;&nbsp;燕洵&nbsp;&nbsp;&nbsp;&nbsp;的
		&lt;p&gt;表示段落&lt;&gt;
	</body>
</html>

运行效果：
在这里插入图片描述

passerby&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签（二）

HTML常用标签锚点链接标签base标签pre标签特殊字符锚点链接标签锚点链接：作用：通过锚点链接可以快速定位到我们想要的内容，一般当一张网页比较长时我们会使用这标签对内容进行定位。创建锚点链接的步骤: 第一步：使用相应的id标注需要跳转的目标的位置。例如：<h2 id="two"></h2> 第二步：使用<a href="#id名">链接文本</a>创建链接文本（需要被点击的）例如：<a href
复制链接

扫一扫