1.标签语义化

提到标签,很多刚入门前端开发的人,肯定都会很纳闷,这么多html标签我如何记住呢?我又应该根据什么依据去正确使用它呢?其实这样的问题,我刚开始和大家一样苦闷,但是在我学习Web页面开发的过程中,然后不断的积累,不断的总结,发现要想记住HTML标签以及怎样更好的去使用这些标签,需要做到以下三点:

第一点:不要死记硬背,没意义,只需要记住常用的哪几个足矣。

第二点:根据内容选择使用HTML标签,什么意思呢?见下文分解。

第三点:遵循W3C的规范。

首先,第一点咱们就不用说,不让死记硬背,就是要多写页面,多敲代码,久而久之孰能生巧,巧能生花,慢慢的你就能记住这些标签了,而且在开发页面的过程中,你们会发现,咱们最常用的也就是那么几个而已。

其次,第二点根据内容选择使用HTML标签,这一点非常关键,因为你掌握了这一点,你能很好地去使用HTML标签,并且能让页面变得很优质,这也会提高你网页被搜索引擎收录。

最后,也就是第三点,这一点自然不用怀疑,如果要想让页面更好的在不同的浏览器中呈现出一致的效果,那么必须遵循W3C的规范。

说了这么多,只是一些学习需要注意的问题,下面才是真正解开怎样去使用和记住标签这个谜团的方法。

我们在使用标签的过程中,大家会发现类似的标签,比如标题标签(h1-h6)、p(段落标签)、a(超链接标签)以及图片标签(img)等,通过这些标签的名称,咱们是不是不难理解吧,很直观的就知道这些标签该怎么,用于何处。而这些名称的含义就是我们所说的标签语义化。随着智能手机的出来,移动Web都是通过H5去开发页面,而H5中的HTML标签就比之前版本的HTML标签更加具有语义化。

那么什么是标签语义化呢?所谓的标签语义化,指的就是标签所代表的含义。咱们可以通过标签的含义,正确地去使用它。

标签语义化的作用:

如下图所示,通过使用语义化标签和没使用任何标签,就能直观感受到语义化标签的好处。

html的常用标签有哪些(HTML常用标签的汇总)(1)

普通的文本和使用语义化标签后的效果对比图

那么如何去判断一个页面中,语义化是否良好呢?很简单,直接扒掉CSS这层漂亮的衣服,当我们把CSS去掉后,如果页面中的结构依然组织有序,并且有良好的可读性,那么它就是非常良好的。

如何去使用这些标签呢?首先根据内容确定语义化的标签,其次再根据呈现需求,使用CSS样式。因此HTML标签并非通过死记硬背,而是通过在使用的过程中,利用HTML标签的语义化去记忆。如下图所示,通过使用语义化标签,瞬间就能把普通的文本,以更清晰的结构呈现出来。

html的常用标签有哪些(HTML常用标签的汇总)(2)

使用语义化的普通文本,变得更为结构清晰

2.常用标签分类汇总

通常我们常见的标签有标题标签、段落标签、水平线标签、换行标签以及div和span标签,这些标签又被统称为排版标签。

在开发中,排版标签主要是和CSS搭配使用,主要是用于显示网页的整体结构,也是网页布局中常用的标签。下面我一一了解一下。

排版标签:

【1】标题标签(h1-h6)

html的常用标签有哪些(HTML常用标签的汇总)(3)

标题标签的使用

呈现的效果如下:

html的常用标签有哪些(HTML常用标签的汇总)(4)

呈现的效果

一句话总结:使用了标题标签的文字会加粗,会根据级别显示文字的大小,并且一行只能放一个标题。

【2】段落标签(p)

html的常用标签有哪些(HTML常用标签的汇总)(5)

p标签语法格式

【3】水平线标签(hr)

【4】换行标签(br)

html的常用标签有哪些(HTML常用标签的汇总)(6)

文本

呈现效果:

html的常用标签有哪些(HTML常用标签的汇总)(7)

使用br标签后的效果

【5】div和span标签

最后给大家来一个完美的总结:

html的常用标签有哪些(HTML常用标签的汇总)(8)

排版标签的汇总

难道这就完了吗?咱们的标签就只有这些常用的吗?那当然不是,咱们接下来再看我们的文本格式化标签。

文本格式化标签

文本格式化标签的作用:通常文本格式化标签主要用于网页中文字样式的设置,比如字体加粗、斜体或下划线等效果,当然后期也会通过CSS样式来实现,会更加完美。

常见的文本格式化标签如下:

html的常用标签有哪些(HTML常用标签的汇总)(9)

文本格式化标签

它们分别的区别:

我么网页中除了排版标签、文本格式化标签,当然还少不了图片标签(img),通过图片的展示,会让整个页面更加的生动形象。那么下面再来看一下这个标签吧。

图片标签(img)

html的常用标签有哪些(HTML常用标签的汇总)(10)

img标签属性

标签属性的特点:

html的常用标签有哪些(HTML常用标签的汇总)(11)

图片标签属性使用

链接标签

html的常用标签有哪些(HTML常用标签的汇总)(12)

a标签的常见属性

提示:

html的常用标签有哪些(HTML常用标签的汇总)(13)

内部链接地址

注释标签

html的常用标签有哪些(HTML常用标签的汇总)(14)

注释标签

好了,各位小伙伴,今天我就给大家分享到这儿了,希望我给大家总结的内容,能帮到正在浏览我这篇内容的前端开发者,也希望你们有所收获。如果喜欢的,可以点击关注,会继续给大家分享更多的内容。

,