📢📢📢📣📣📣
哈喽！大家好，我是「奇点」，江湖人称 singularity。刚工作几年，想和大家一同进步🤝🤝
一位上进心十足的【Java ToB端大厂领域博主】！😜😜😜
喜欢java和python，平时比较懒，能用程序解决的坚决不手动解决😜😜😜
✨ 如果有对【java】感兴趣的【小可爱】，欢迎关注我❤️❤️❤️感谢各位大可爱小可爱！❤️❤️❤️
————————————————如果觉得本文对你有帮助，欢迎点赞，欢迎关注我，如果有补充欢迎评论交流，我将努力创作更多更好的文章。
目录
回顾
👨🏫：今天是我们前端的第4节课，让我们先简单的回顾一下上几节课讲的内容，哪位同学简单说一下？
👩🎓：第一节课我们讲解了前端的入门知识，讲解了一个html页面的组成部分，以及html、css和js的功能作用，简单讲解了一下页面渲染的机制，以及前端的开发环境，并编写了我们第一个demo案例，实现了最简单的页面，学了简单的标签，最后讲解了浏览器的分类等。第二节课我们学了一节自结束标签的使用，讲了link、hr、br、img、input的使用，第三节课我们学习了语义化标签的使用场景，学习了header、footer、hgroup、nav、aside、section、article等元素的使用方法以及各种的注意事项。
👨🏫：不错不错，学到这里，相信大家已经对前端有了一些新的认识，也慢慢的走进了前端的世界，可以说已经入门了。前端相对于后端来说是相对好学的，无非就是一些控件，跟搭积木一样，用每一个组件拼接成我们想要的页面。好了今天我们该学习进阶篇了，学习一些核心的标签，如果同学对之前的知识还有不懂的，可以订阅我的专栏翻阅我之前的文章。
0基础和小Q学前端---（2）走进HTML的核⼼标签--自结束标签_奇点_97的博客-CSDN博客📢📢📢📣📣📣哈喽！大家好，我是「奇点」，江湖人称 singularity。刚工作几年，想和大家一同进步🤝🤝一位上进心十足的【Java ToB端大厂领域博主】！😜😜😜喜欢java和python，平时比较懒，能用程序解决的坚决不手动解决😜😜😜✨ 如果有对【java】感兴趣的【小可爱】，欢迎关注我❤️❤️❤️。
https://blog.csdn.net/qq_29235677/article/details/1270646470基础和小Q学前端---（3）走进HTML的核⼼标签--语义化标签_奇点_97的博客-CSDN博客📢📢📢📣📣📣哈喽！大家好，我是「奇点」，江湖人称 singularity。刚工作几年，想和大家一同进步🤝🤝一位上进心十足的【Java ToB端大厂领域博主】！😜😜😜喜欢java和python，平时比较懒，能用程序解决的坚决不手动解决😜😜😜✨ 如果有对【java】【python】和前端感兴趣的【小可爱】，欢迎关注我❤️❤️❤️。https://blog.csdn.net/qq_29235677/article/details/127074841
核心标签
a标签和路径
👨🏫：a标签我们之前使用过，他有两个功能，一个是跳转的作用一个是锚点的作用。
功能：
- 一个是跳转的作用
- 锚点的作用
跳转：这里一般情况指的是跳转到我们指定的页面，根据我们配置的连接进行跳转
锚点：指当我们点击某个标题，直接跳转到当前页面的某个位置，这里是滚动条滚动到某个位置，
👩🎓：老师这个锚点的作用听起来也想跳转到意思，只是本地页面滚动吗？
👨🏫：这里给大家一个🌰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https:xdclass.net">课堂</a>
<!-- 随机生成600的随机串 模拟文章 -->
<!-- (h3{标题$}>p>lorem600)*3 -->
<a href="#index3">跳转到标题3</a>
<h3>
标题1
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae tempora porro libero deserunt laudantium unde accusamus, culpa vero? Nihil nisi dolores nam distinctio. Tempore praesentium eveniet temporibus, iste optio reiciendis ut! Culpa
vero aliquid commodi vel possimus accusantium quaerat nesciunt eligendi quis maiores. Ad voluptas ullam sit neque sint. Fugiat ipsum nobis eius voluptatibus asperiores incidunt quidem illum autem natus cupiditate, blanditiis neque voluptatem
ut repudiandae unde atque! Aspernatur eius delectus excepturi quaerat quidem. Optio sit ea veniam, eos ab beatae eveniet rem facere dolor rerum. Minima in repellendus qui velit sapiente suscipit ad, provident natus animi cum culpa asperiores
iure nemo quia eum dolores odit? Vel possimus illo ut itaque facilis, officia ab delectus cupiditate ex veritatis repellat reiciendis amet enim nostrum quis unde tempore pariatur necessitatibus nemo recusandae? Tenetur corrupti ullam ipsum
praesentium velit magnam rem impedit doloremque ab quidem ipsa, sint mollitia atque animi cum ad. Praesentium vero impedit minus non ab? Nam assumenda consectetur veritatis quisquam facilis, autem inventore, voluptate officiis dolore, asperiores
praesentium! Perspiciatis temporibus quis doloremque minima excepturi nostrum? Sed dicta eos quis provident ea, laborum repudiandae! Distinctio porro reiciendis mollitia aliquam quod nisi impedit, cupiditate rem laborum asperiores esse voluptates
dolor. Cupiditate porro distinctio voluptatum ut quaerat. Voluptas itaque dolore deleniti dolorum, beatae dignissimos eos laborum illum deserunt in, quasi et eius nostrum ratione. Asperiores excepturi quis eveniet officiis culpa earum impedit
optio, perferendis cumque nulla provident rerum reprehenderit debitis omnis odit. Ipsam eius eum laborum, blanditiis id iste, quibusdam illo eos possimus distinctio optio, animi ut necessitatibus atque nostrum magni accusantium beatae corrupti!
Exercitationem consequuntur accusantium dolor veniam labore soluta suscipit voluptatum eaque laboriosam qui eveniet inventore est in ipsam error delectus cumque excepturi veritatis nesciunt, vitae mollitia. Officia voluptas saepe nihil inventore
a, tempora quisquam recusandae nostrum dolor? Possimus blanditiis repellat aliquid a voluptate vel libero tenetur quam similique suscipit eaque veniam ab cupiditate voluptatum, optio voluptatem cum eligendi. Earum, temporibus eius facilis,
suscipit rem molestias sed ipsum blanditiis vel nemo esse optio assumenda qui iusto nulla cum fugiat a aut laboriosam aliquam. Iste, nam vitae eos illum similique in eligendi tempora accusamus placeat sit voluptatem architecto, reprehenderit
quasi voluptate nemo labore eius, voluptas repudiandae voluptates eum omnis modi odit iure eveniet. Vitae laborum aliquid veniam, distinctio blanditiis consequatur voluptatum quo ducimus beatae consequuntur aperiam tenetur natus dolore provident
nobis voluptas voluptatibus quos quas. Nisi veritatis assumenda dolorum delectus optio quibusdam quos impedit a quas commodi esse atque eaque ipsa repellat amet ea, rerum placeat pariatur maiores at aut error nostrum officiis. Soluta voluptate
cupiditate reiciendis ea tempore, quam modi? Unde, optio rerum temporibus aut officia sint, quia blanditiis, ea cum obcaecati incidunt eaque aliquam explicabo? Expedita quasi, fuga sapiente aperiam voluptatum illo. Esse quam a nobis officiis
ea, dolorum provident cumque voluptatibus illum in, eveniet harum doloribus vitae deserunt fuga labore, unde nulla sed. Illo, ipsa. Iste neque natus doloremque laborum quam excepturi? Hic ipsum qui quos inventore, culpa sequi eveniet ad amet
similique deleniti nostrum, illo tenetur. Laudantium qui aliquid eligendi praesentium molestiae dolore minima esse eum in cum officiis voluptatibus tenetur nihil, nam repellat repellendus veritatis neque totam quia quaerat ut aperiam ipsa
saepe. Ad voluptatem dignissimos illo hic temporibus perspiciatis quibusdam odio esse assumenda dicta sit architecto soluta ex veniam praesentium, cum dolores possimus pariatur. Magni, et dignissimos tempora repellendus nam aliquid blanditiis
culpa minus odio cum hic sint esse ipsam adipisci nisi totam itaque odit maxime, eligendi fuga asperiores consectetur. Facere culpa magni sequi, explicabo eos nam harum aperiam labore maiores voluptatum ipsum blanditiis saepe excepturi non
aspernatur libero quidem sint magnam accusamus, similique voluptates vel.</p>
</h3>
<h3>
标题2
<p>Consequatur, pariatur id rerum aperiam accusamus officiis unde architecto. At unde earum possimus voluptate iste amet esse atque, magni officiis enim molestiae. Esse inventore consectetur pariatur, dolor, officia autem est sapiente error soluta
velit, consequatur maxime dignissimos perspiciatis veritatis in. At dolor quam nulla corrupti optio delectus rem quas, praesentium placeat ab nisi, maiores distinctio. Quo perferendis voluptates, nisi repudiandae quaerat dolore totam placeat
veritatis minima sunt illum facilis unde dolorum sed, provident et culpa ducimus natus nulla vitae assumenda dicta tempore? Molestiae, provident perspiciatis beatae impedit velit aut culpa hic corporis nisi quod nobis! Nemo molestiae vitae
officia nam consequuntur quas magnam tempora voluptatibus. Adipisci alias ipsum, accusantium saepe error, quod, in perspiciatis rerum voluptatum cumque fugit optio excepturi est aliquid dolorum dolore necessitatibus. Unde iure, dolor libero
odit architecto asperiores soluta fuga inventore consequuntur recusandae ipsum quod quisquam sit cumque quo eius ut et eum id officia? Natus est minus doloremque at blanditiis quos atque! Et recusandae quam commodi animi, placeat saepe enim
quas, reprehenderit incidunt maxime repudiandae eum nulla voluptatibus, cum distinctio sunt fugiat laboriosam optio! Voluptas necessitatibus aliquam quia numquam asperiores officiis eum vitae enim quaerat hic nisi, dolor blanditiis cumque
qui quis minima quibusdam alias repudiandae! A consequuntur laboriosam ipsam neque in sint eaque, nostrum omnis aspernatur libero corporis deleniti eos aut error accusantium officiis, temporibus dolore illo? Ullam quo neque magnam veniam,
provident consectetur quia nisi ipsa illo deleniti beatae omnis ex? Ullam corporis atque quae fuga a facilis quam impedit? Alias nihil repellat aliquam earum esse totam perferendis! Iste, eum quia? Repudiandae porro impedit tempore odio maiores
atque sint quo rem et ducimus quibusdam nihil error nulla consequuntur, at repellat exercitationem labore, est nisi debitis soluta amet aspernatur asperiores. Dignissimos exercitationem non sit explicabo, atque alias placeat facilis similique
maxime ex voluptatem veniam pariatur aliquid cupiditate voluptatum obcaecati modi accusamus inventore porro tenetur voluptate repellendus numquam! Explicabo dolores iusto illum perspiciatis rem ab labore maiores consequuntur. Cum adipisci
quod quis, repellat deleniti quos laborum earum nobis distinctio praesentium delectus at eligendi modi odit culpa assumenda accusamus possimus atque id. Quo ducimus nostrum magnam dolores, laboriosam fuga animi repudiandae corporis voluptas
deleniti iure at temporibus tempora accusantium voluptatum distinctio eius velit numquam necessitatibus id expedita eum hic cum. Ea quasi tempora facilis eum dolorem, minima, consequuntur tenetur doloribus dicta molestiae quidem ducimus, reiciendis
nulla! Quasi suscipit perferendis beatae quibusdam, modi eaque animi vero esse et deserunt consectetur praesentium quis unde enim distinctio culpa voluptatum natus mollitia ab vitae quam quo? Quam dolore in quasi vel voluptatum aspernatur
tempora consequatur recusandae, quae nisi vitae, ducimus, minus error at cupiditate. Est nesciunt ducimus quam laborum perspiciatis autem consectetur quisquam, dolore similique reprehenderit, quos doloremque fugiat architecto laboriosam ratione
fugit. Voluptatibus, sed architecto beatae expedita nesciunt inventore, nemo quasi, eum in ex harum voluptatum cupiditate laborum iste facilis debitis veritatis vitae perferendis repudiandae non hic. Sunt assumenda blanditiis, delectus maiores
similique rerum soluta vero modi qui natus praesentium facilis iure deserunt aperiam totam doloremque laborum asperiores illo fuga quod eum expedita! Aut ipsa nesciunt alias atque autem quod odio deserunt blanditiis rerum repudiandae ea, saepe
aspernatur veniam voluptatum amet, voluptates modi inventore nemo ducimus fuga possimus! Ducimus, explicabo quam odit pariatur molestias dicta facilis commodi id iusto sunt, eveniet autem necessitatibus. Tenetur aliquam deserunt porro cupiditate.
Inventore nam soluta sit, quaerat earum, autem quia praesentium magnam reiciendis natus architecto et iste illum rerum ipsam quisquam perspiciatis, similique culpa? Dolorem officia animi earum? Praesentium nemo dolore, atque obcaecati hic
itaque nesciunt id, sunt fugit quidem eligendi ex sint explicabo? Quam expedita omnis deserunt nostrum eum tempore? Non, veritatis?</p>
</h3>
<h3 id="index3">
标题3
<p>Veritatis at reiciendis vel tempore repellendus saepe, animi, quod modi mollitia asperiores pariatur nulla rerum autem perspiciatis quia ipsum similique veniam, dolore dolorum ad culpa totam illum. Nobis consequuntur deleniti doloremque voluptas
voluptatibus quibusdam nihil magnam odit fuga suscipit quisquam, quas, a laudantium iure, et quo illum enim nemo rerum reiciendis! Quasi vitae similique iusto eligendi ipsum architecto animi repellendus voluptate, tempora quis, illo inventore
tempore sapiente asperiores quae eaque odio, blanditiis molestiae a dicta pariatur voluptatum incidunt voluptatibus. Perferendis, magni porro? Consequuntur officiis sapiente explicabo nesciunt culpa, dolore modi, iure a iste alias vel natus
delectus. Error ipsam omnis delectus reiciendis voluptates quia perspiciatis debitis natus dolorem temporibus reprehenderit, illo quidem? Explicabo quas sint deleniti alias doloremque praesentium doloribus, placeat eos, iste reprehenderit
voluptate at itaque cupiditate corporis molestiae. Aliquid, quasi architecto explicabo deserunt quaerat maiores dicta autem quidem aliquam, odio officia quod voluptatibus rem veniam vitae numquam nisi neque odit labore exercitationem debitis
sint soluta perspiciatis. Ullam dolorem laborum, omnis animi quod nulla consequuntur porro dolorum recusandae dignissimos maiores quis! Labore minima adipisci aspernatur, ad neque totam amet tempora iusto cupiditate culpa ex dignissimos voluptatum
consectetur quas perspiciatis nostrum dolor nam accusantium fugit cum aliquid dolores unde reiciendis sunt! Pariatur autem, placeat, ut dolorem ipsam ad atque mollitia rerum corporis ab distinctio error fugit eius cumque voluptate nisi? Fugiat,
facere deleniti. Hic exercitationem libero minima. Necessitatibus, eum similique, sunt nemo consequuntur adipisci ut, praesentium minus at maiores blanditiis corrupti facilis. Omnis eius minima, repellendus architecto veniam minus illo! Tenetur
tempore nobis quas, reiciendis nostrum corporis itaque distinctio recusandae est. Perferendis autem quod odit voluptates esse excepturi optio, reiciendis repellat unde quasi consequuntur? Unde repellendus harum, maxime mollitia esse sunt aspernatur
ea illum asperiores necessitatibus est minima labore quia corrupti id deserunt, explicabo obcaecati facere ad nulla aperiam aut! Nesciunt totam culpa impedit libero expedita laudantium maiores molestiae itaque eligendi deserunt facilis sapiente,
harum, autem dolores, facere fugit. Minima quas delectus molestias, animi placeat quod! Est vel consequatur nihil, hic numquam repudiandae fugit adipisci doloribus quo recusandae eos eligendi dolorum consequuntur dolor, praesentium quidem
nostrum provident qui illum itaque! Numquam exercitationem incidunt minus voluptatem dolorem, laborum doloremque voluptas dicta expedita illo. Eius, earum accusantium ex deleniti est tempora quis sit possimus quisquam velit voluptatem sint
sunt amet, modi ratione. Sint commodi esse unde incidunt porro est iste repellat, cumque inventore cupiditate deleniti id, debitis ipsa modi sapiente, dolorem suscipit nisi soluta blanditiis autem aspernatur eos. Amet, vero fugiat, voluptatem
possimus illo similique ipsam ullam quam nisi aut eos? Deleniti similique deserunt officia vitae, voluptates maxime dolore saepe. Illum dolores, sequi consequuntur autem deserunt odit nemo consectetur? In excepturi rem fugiat voluptates tenetur
delectus sapiente reprehenderit temporibus a omnis fugit ex, sequi exercitationem accusamus at consequatur voluptas aliquid saepe, error ratione eligendi ducimus. Ab atque sint adipisci excepturi alias repudiandae nisi repellendus nihil aliquam
vel, quisquam rerum illum dolore cumque iure accusantium delectus non quam unde dolores veniam itaque quae. Id neque molestiae eligendi repellat animi, rem doloremque tenetur nostrum officiis vero distinctio accusamus at, nemo repellendus
quos exercitationem facere tempore quo. Natus recusandae corrupti unde impedit adipisci, suscipit nisi tenetur consequatur cumque omnis magnam? Nobis vitae et commodi, ullam nulla libero vel deserunt cum esse necessitatibus eos nam fugiat
neque sed magni nostrum, unde ad, quam tempora a illum consequuntur? Quae reiciendis tempora aut officia obcaecati eveniet perspiciatis voluptate quod maxime, officiis enim. Vitae assumenda at placeat modi consequatur sed id explicabo dolore
sapiente in natus nulla rerum temporibus ea quos iste delectus quasi possimus, nemo voluptatibus. Veniam odit incidunt alias dolorum voluptates similique illo fugiat voluptatum deserunt tempora.</p>
</h3>
<!-- 有这个blank会另起标签，没有的化会在原来的页签重新打开页面 -->
<a href="https:www.baidu.com" target="blank">空白跳转</a>
</body>
</html><a href="#index3">跳转到标题3</a>
<h3 id="index3">
这里的a标签的功能就是锚点，能跳转到标签id=index3的位置，
👩🏫：接下来我们说一下这个target属性
看下面的代码唯一的区别就是a标签中的target属性是否设置了blank值。
<!-- 有这个blank会另起标签，没有的化会在原来的页签重新打开页面 -->
<a href="https:www.baidu.com" target="blank">空白跳转</a>
<!-- 下面的会在本地页面跳转，会覆盖之前的网页 -->
<a href="https:www.baidu.com" target="">空白跳转1</a>👩🏫：下面我们来看一下效果，
下面的图是点聚空白跳转的效果
下图是点击空白跳转1的效果
👨🎓：看到不同了。点击空白跳转会跳到一个新的页签也就是在页面打开一个新的页面，而没加target的blank属性的会覆盖当前的页面，也就是在本页面打开一个新的资源
| 功能 | 属性 | 说明 | 位置 | |
| a | 跳转/锚点 | href：跳转的地址 target：如果设置blank就会跳到新页面， 不设置则在当前页面展示 | body |
路径：
👩🏫：下面我来说一下这个路径的问题，有的同学学了这么久还是搞不懂相对路径和绝对路径
👩🏫：根据资源的类型判断，一般来说站外资源我们使用绝对路径，站内足以使用相对路径
举个例子：
绝对路径：https://baidu.com
相对路径：根据当前的位置来说的，例如当前是根目录下的/app/web路径下，这时我们的当前路径就是./ 上一级路径就是../，是有一个参照位置来说的。
例如我们现在在超链接a标签和路径.html文件中，现在想跳转到本地的demo.html页面,我们可以这样写
<a href="../第二章/demo1/demo.html"></a>
效果如下
👩🏫： 点击上面的按钮之后，会跳转到指定的demo，根据href连接进行跳转，跳转到之前的demo页面
👩🏫：我们现在的地址如下
👩🏫： 现在我们在第三章的超链接a标签和路径.html下， 这里的..代表上一级，就是到了源代码那层，接下来进入到我们想要的demo的位置-----第二章/demo1/demo.html,这样我们就能够跳转了。
👩🎓：老师这里也能填绝对地址吧，用绝对地址也能找到页面，就像下面的标签
<!-- 绝对地址 -->
<a href="/usr/local/software/work/前端项目/源代码/第二章/demo1/demo.html">本章跳转到demo</a>👩🏫：是的，用绝对路径也能实现这个功能。
img标签
👩🏫：我们来系统的学习img标签的使用，下面说说属性
常⽤属性
- src 图⽚路径
- alt 图⽚加载失败或加载时显示的⽂字
- title 悬浮在图⽚上⾯显示的⽂字
👨🎓：好的老师，这个就是常用的属性，那么图片的来源也有很多吧
图⽚的来源
👩🏫：
- 本地图⽚：稳定
- 线上图⽚：图⽚容易丢失
- Base64图⽚
- 优点：⼩图⽚占⽤内存⼩，不请求服务器，降低服务器资源与访问
- 缺点：⼤图⽚增⼤了数据库服务器的压⼒ 点击图⽚跳转 通过嵌套a标签
👩🏫：我们能够配合a标签使用，这时这个图片就变成一个超链接了，点击图片就进入到百度的网站了
👩🏫：下面我们对a标签和img标签进行一下总结
| 功能 | 属性 | 说明 | 位置 | |
| a | 跳转/锚点 | href：跳转的地址 target：如果设置blank就会跳到新页面， 不设置则在当前页面展示 | body | |
| img | 图像标签 | src：图⽚路径 alt：图⽚加载失败或加载时显示的⽂字 title：悬浮在图⽚上⾯显示的⽂字 | 图片来源： 本地图⽚：稳定 线上图⽚：图⽚容易丢失 Base64图⽚ 优点：⼩图⽚占⽤内存⼩，不请求服务器，降低服务器资源与访问 缺点：⼤图⽚增⼤了数据库服务器的压⼒ | 通过嵌套a标签 |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
