千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:北京千锋IT培训  >  技术干货  >  html5技术干货  > 零基础教你学前端——HTML起航

零基础教你学前端——HTML起航

来源:千锋教育
发布人:syq
时间: 2022-11-07 10:47:05

  今天学习如何正确的书写标签,从书写形式上标签分成两类:双标签和单标签。

  双标签

  例如h1标签,由两部分组成,前一部分叫做开标签,后一部分叫做闭合标签,这一对内容叫做一个标签对,在标签对内书写该标签要修饰的内容,如果我们想让一段内容呈现h1的样式的话,我们就把内容写到h1标签的中间。

16

  我们再来新建一个文件tag.html,写一个h1标签,在标签对中间写下内容,在浏览器中打开看效果。为了更便捷的书写标签,vscode是有自动补全功能的,只要写下h1,按下tab键,会自动出现这个标签,我们只要在中间写内容就可以了。

17

  单标签

  看个例子,假设想把这两段文字换行显示,我们在代码里回车换行,在实际页面显示是没用的,可以使用br这个标签,回到浏览器刷新,换行成功。这个标签只有闭合部分,我们把这个只有闭合部分的标签称之为单标签,一般单标签不修饰任何内容,因此又称为空标签。

  HTML为了扩展表现力,还引入了标签属性的概念,标签属性书写在标签自己本身,可以为标签提供一些额外信息或者对标签进行修饰。单标签和双标签都可以书写属性,双标签书写在开标签内,单标签书写在标签自身。标签属性是由“属性名”=“属性值”组成。这样的内容叫做一个属性,注意:多个属性之间要使用一个空格分隔开。

18

  要给标签加上一个属性,在开标签中书写一个属性,名叫做title赋值为“我是一个标题”这个title属性就修饰h1标签。打开浏览器看效果,把鼠标悬停在这个标签上,“我是一个标题”出现了,因此这个title属性就是用来修饰,鼠标悬停在该标签上时显示的标题文本的。

19

  再看img标签,这是一个单标签,用来在页面上显示一张图片,写完以后,打开浏览器,但是发现没有任何内容出现,这是因为只是写了img标签,告诉浏览器要显示图片,但没说引入哪一个图片,浏览器不知道去哪里找。所以需要给img标签添加一个属性,用来说明图片的位置。给img标签添加一个属性名叫做src,属性值是图片地址,刷新浏览器,我们看到图片出现了。

20

21

  这就是标签以及标签属性的书写,在html规范中不同的标签会有不同的作用,那如果我们想写我们平时看到的网页的话,都需要哪些标签呢?下期见!

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

10年以上业内强师集结,手把手带你蜕变精英

请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通

免费领取

今日已有369人领取成功

刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取

猜你喜欢LIKE

说说Vuex原理

2022-11-14

vuex怎么拿数据

2022-11-14

零基础教你学前端——图片标签进阶

2022-11-07

最新文章NEW

零基础教你学前端——超链接之页面跳转

2022-11-07

零基础教你学前端——图片标签拓展

2022-11-07

零基础教你学前端——什么是网页?

2022-11-07

相关推荐HOT

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>