课02.理解标签

项目下载地址:前往GitHub

02.理解标签——大纲

代码缩进

在上一堂课里,我们已经提到了代码的缩进。为了强化你的理解,加深你的印象。我在这一节一开始,再次给你强调一些缩进问题,我想再多的强调也不嫌多。为了让你养成良好的代码缩进的书写习惯,所以不要嫌我啰嗦。

在大部分的编辑器(我们这里的VSCode)中,我们通过按下tab键来缩进我们的代码。

常用的HTML标签

想象一下,你现在在写文章,那你可能会用Word做排版。当然,现在这个年代,很多搞开发的都已经有些不屑用Word了,大家现在更喜欢用MarkDown写文章了,当然这是题外话。你用Word会需要设置标题,段落。标题还有一级标题,二级标题。。。

在我们的HTML中,很多时候,我们的网页也是需要用来呈现文章内容的,所以这些元素肯定也少不了。

下面我们看下在HTML标签中,都有哪些和写文章相关的标签。学会了这些,你就可以用HTML写网页文章了。

网页中的标题标签

<h1>
  我是一级标题
</h1>
1
2
3

上面这个h1就是网页里的一级标题,是不是很简单。这里的h应该是head的首字母h,然后后面加个1

按照这个思路,我们可以推导出,二级、三级、四级…标题

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
1
2
3
4
5
6

当然一般写文章也用不到h1~h6级别,所以h6之后,W3C就没有定义更多的h7,h8标题了。

正常情况下6个级别的标题,应该够我们用了。

网页中的段落标签

一篇文章,你刚写好一个标题,那肯定还不够,我们还需要些文章内容。但是,在网页中,内容放在那里呢?内容放在一个一个的段落里,所以我们就有了段落标记。

<p>
  HTML是不是很有意思,来idev365跟着山地人自学编程,是不是更有意思呢?喜欢山地人的内容,那就多多购买山地人的课程哦!山地人一定会为大家创作出更多更好的内容哒。
</p>
1
2
3

上面这个就是段落标签<p>,其实这个标签也是英文单词,段落paragraph发音[ˈpærəɡrɑːf]的首字母。

哈哈,老外可喜欢用各种缩写方式来偷懒了。如果你学过山地人的Linux旅行记,你一定知道Linux里面的命令也是各种缩写。山地人在学生时代,学汇编的时候就被各种不明来历的缩写汇编指令搞得晕头转向。所以,现在写教程,就不想让我们的自学小伙伴再次遭遇山地人当年哪些痛苦经历。我会把我知道的,我理解的哪些标签,命令含义解释给你听。就是为了让你不用去死记,而是在理解的基础上进行记忆。

视频演示里,<p>标签里的内容,在写代码的时候,明明换行了,为啥,到了浏览器里却不换行了呢?这里先留下一个疑问?

网页中的超链接标签

一篇文章,你刚写好一个标题,这个时候你已经有点迫不及待了。耐心点,我们看看,很多网页里都有超链接。不要告诉我你不知道什么是超链接,你天天上网,在网页里看到的,文字底部带有一个下划线,点击一下,就跳到另外一个页面的,那个东西都是用超链接标签来做到的。

<a href="https://www.idev365.com">欢迎来到idev365 编程进化岛</a>
1

上面这样就是超链接,行业黑话叫a标签。因为这个HTML标签就是一个简单的<a>

上面的href是一个属性。HTML标签里有很多各种各样的属性,这个我们在随后的课程中,还会见到更多。

这里的href里写的就是你要跳转的网址,href的全称是Hypertext Reference,翻译成中文,就是超链接的意思。

块标签div

<div>
  内容再短,我也要占一整行!
</div>
1
2
3

<div>标签,正如上面的这段演示代码里说的那样,不管他内容有多短,就算不满一行,它也会占掉一整行。这就是它的天生的脾气。当然,天生的后面也可以改,以后我们学了CSS样式,也有办法来治他。现在暂时先这样。

行标签span

<span>
不管内容有多长,始终只用多少就占多少地,不贪心!!!
</span>
1
2
3

div性格相对应的就应该是<span>标签了。如果你的页面上靠在一起放了几个<span>标签,那么,这些<span>标签会一个挨着一个这样排列下去。不会像<div>那样霸占一整行。同样对于<span>标签,它的性格也可以通过后台的CSS去改变。

图像标签img

写文章的时候,我们会加入一些插图。这样图文并茂会比较生动,好的配图也更便于传达信息。在HTML中我们可以使用<img>标签,这个<img>标签是image的缩写,稍微懂一点英语也能知道它就是图像的意思。所以这个标签是做显示图像用的。

<img src="logo.png" alt="idev365的logo">
1

上面的例子中,我们看到了两个属性srcalt。一个HTML的标签中,属性是xxx="yyy"这样的形式来写的,如果有多个属性,中间用空格隔开。

解释下这里的两个属性的含义:

src是用来设置要显示的图片的地址的。

src的全称是source,意思是来源,从中取了src三个字母作为缩写,这个写法src在其他编程语言,命令中也会看到,是程序里非常常见的一个表示来源的写法。这些你了解一下就好。

另外需要注意的是,<img>标签是一个单标签。这里要更正下视频演示里的写法<img></img>是一个错误的写法。<img>标签不允许内部再嵌套其他元素,所以也就不需要像我们之前学习的成对的标签那样的来书写。即便你写成<img></img>浏览器在识别解析的时候,也会丢弃后面的</img>。所以这里大家要注意一下。

本课小结

今天这节课,我们重点学习了一些HTML里最常用的一些标签。

标签 说明
<h1>~<h6> 一号标题~六号标题,当然是用在不同级别的标题上
<p> 段落标签,常用于一段段文字
<a> 超链接标签,常用于网页之间的跳转
<div> div块级标签,记住一点,默认会霸占整行。
<span> span行级标签,也记住一点,默认是有多少内容,占据多少空间。
<img> 图像标签,常用来显示图片

课后小练习

今天学习了好多标签,是不是有点收获满满,脑袋涨涨的感觉。

哈哈,没关系,你做一些练习,跟着课程,多敲一敲这些标签。慢慢你就对他们越来越熟悉了。反正,我这里又没有考试,你学到的内容都归你,不用像在学校里那样。出了校门,学习都是自己的事情。不会咱就多练常看,慢慢就熟悉了。

这次我给你留的练习是,能够利用上面学过的这些常用标签,写一篇自己的学习心得呢。(当然是用着两节课学的HTML的方式) 用网页的形式来展示你的文章。

当然上面的这个小练习,你也可以换成别的内容。总之,就是把这些常用标签都用一用,学HTML也是编程的一部分,学编程的人,手一定要勤快,多动手,在实践中,才能更快的成长。

好了,今天的课程就分享到这里。