上一节我们介绍了如何建立第一个HTML标签,接下来我们要讲的我们在HTML中最常用的标签,及它的定义。
首先我们最常用的是div标签,与之相伴的是span标签。div是最常见的块级元素,而span是最常见的行内元素。块级元素他最大的特点就是独占一行,而行内元素则一行可以放置多个。这样说可能大家不会很理解,大家可以参照下面的例子:
运行上列代码如下:
有人可能会问那么行内元素与块级元素他们有什么关系?嘿嘿,不知道大家还是否记得我第一节说的标签分为包含与并列的关系,对的,他们是属于包含关系。一个div中可以有多个span,但span中却不能有div。
HTML中还有几个常见的标签,例如
插入图片的标签:其中图像的URL是指图像的路径(图片标签单标签,也是行内元素)。而src是图像标签不可缺少的属性。而路径又分为同一级,上一级,下一级,而不同级路径引用也不相同。分别为直接引用,../和/。
例:
代码执行如下:
后期大家用多了,也就熟练了。有人会问怎么引用网上的图片,我们只需直接将网上的图片地址直接复制过来即可。
图像也有许多许多属性,这里就不一一列举了。
大家可以去https://www.w3school.com.cn/tags/att_img_src.asp查询。
接下来我们要讲的是链接标签的语法格式。
语法:
链接我们还需要注意以下几点
1、target分为两种,第一种为blank,即新建一个窗口。第二种为self,并无新建窗口(默认)
2、链接分为内部链接,空链接,外部链接,下载链接,网页元素链接,锚点链接。内部链接用于调用内部文件,而下载链接只要的href属性的URL为文件或者压缩包,只要我们点击就会自动下载。锚点链接我们在网页中的编写主要用于定位页面中的位置。具体语法如下:
首先对网页中的某个元素插入锚点链接:
href = "#two">点击我即可跳动
其次找到你想要跳转的目标位置,在里面添加一个id属性:
这就是锚点链接,可以迅速定位页面的位置。其中我们前期学习只需要记住空链接即可。
空链接的语法格式:,在以后我们写代码中,大家习惯先将还没有想好的链接方向定义为空链接,之后我们再去修改它。
生成代码如下:
细心的小伙伴会发现为什么加了链接后的文字下面为什么会有下划线呢?
我们该怎么去除下划线呢?这个知识点我后期讲css的时候会跟大家说清楚的!这里大家只需要记住以后css代码中会用:text-decoration:none去除下划线的。具体使用方法如下:
诺!下划线是不是消失了!
我们接下来要讲一个实用性比较强的标签,那就是注释标签!
语法:Ctrl+/,或者将光标置于你想要注释的一行按住快捷键Ctrl+/
在前端开发中,如果你写代码不写注释那是一个特别坏的习惯,当别人要看你的代码时,会奔溃的,不但别人看你的代码,就连你后期调试的时候,修改bug的时候,你也会奔溃的。因为以后我们做一个项目代码都是上千行的。
而写注释主要是给我们前端开发人员看的,普通的客户是看不到的!反正就一句话:注释是给我们前端人员看的。
例:
源代码如下:
运行后:
在我们HTML中有几个特殊的字符不方便直接使用,此时我们可以用以下字符代替:
空格键:
> :<
记住:一定要加上分号!
如果你觉得此文章对你有帮助,记得三连走一波!
这期我们就到这了,下一期我们将讲解如何用HTML快速生成表格!