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>

运行效果：

HTML常用标签（二）相关推荐

HTML 常用标签标签
HTML 常用标签总结前言常用标签一 1.title 标签 2.meta 标签 3.link 标签 4.script 标签 5.style 标签 6.换行标签 7.分割线 8.注释 9.文本格式化 ...
沃土前端系列 - HTML常用标签
html是什么 HTML是Hyper Text Markup Language的缩写,中文的意思是"超文本标记语言",它是制作网页的标准语言.由于网页中不仅包含普通文本,还包含超文 ...
044_HTML介绍及常用标签
一,HTML初识 HTML: 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言. 给网页交互,事实上每一个网页都是一个客户端,获取网页的服务 ...
HTML5 的知识分享（二）：HTML5 的常用标签
经过我的上一篇博客可以让大家简单地了解了一下 HTML5 的基础标签,现在再和大家分享一下 HTML5 的常用标签吧基础标签与常用标签的主要区别在于:要先有基础标签的基础才可以灵活的使用常用标签. ...
HTML(一、语法规范，二、结构标签，三、开发工具，四、HTML常用标签，五、注释和特殊字符)
文章目录前言一.html语法规范 1. html基本语法规范 2. 标签关系二.基本结构标签 1. 第一个 HTML 网页 2. 基本结构标签总结: 三.开发工具 1. vscode工具的创建工 ...
前端 | （二）各种各样的常用标签 | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
滚动屏幕显示隐藏div_HTML结构-常用标签：a·img·table·form·input·iframe·div
学习目标: 掌握html的结构,head与body的区别掌握常用标签掌握a标签,img标签掌握table标签掌握form标签,input标签掌握iframe 和frameSet标签掌握di ...
mybatis常用标签和动态查询
这里是修真院后端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析后端知识/技能,本篇分享的是: [mybatis ...
html(常用标签)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>常用标 ...

HTML常用标签（二）