当前位置:首页 > 技术 >

html标签大全怎么用(html列表专用标签)

来源:原点资讯(m.360kss.com)时间:2023-04-16 09:27:34作者:YD166手机阅读>>

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)

  • 缩写来源:标题标签的英文单词是head,因此它使用它的缩写h来表示。
  • 语义:标题标签主要是用于突显标题内容,它是h1-h6(分为1级标题、2级标题、3级标题......6级标题),级别依次递减。级别越小,标题就会越小。
  • 语法格式如下:

html标签大全怎么用,html列表专用标签(3)

标题标签的使用

呈现的效果如下:

html标签大全怎么用,html列表专用标签(4)

首页 1234下一页

栏目热文

html标签有几种(html中三种标签)

html标签有几种(html中三种标签)

随着互联网的不断发展与前端开发技术的不断进步,越来越多的人想在前端开发市场中分一杯羹,而HTML语言凭着它简单易懂的特性...

2023-04-16 09:44:47查看全文 >>

html 标签实例

html 标签实例

HTML常用标签有:a标签、table标签、img标签、form标签和input标签。a标签作用跳转到外部网页跳转到内部...

2023-04-16 09:58:38查看全文 >>

html中各类标签(html中三种标签)

html中各类标签(html中三种标签)

今天是刘小爱自学Java的第76天。感谢你的观看,谢谢你。话不多说,继续html的学习:昨天学习了最基础的文本标签及属性...

2023-04-16 09:58:27查看全文 >>

html标签有哪些(html中三种标签)

html标签有哪些(html中三种标签)

如果想开发一个网站,除了要精通后端开发语言(如:php)外,还要精通HTML代码。那么,什么是HTML呢?HTML是一种...

2023-04-16 09:11:24查看全文 >>

html中a标签的各种用法(html添加a标签什么意思)

html中a标签的各种用法(html添加a标签什么意思)

a标签在网页中是被用来链接其他页面而使用的,今天我们我简单了解下a标签的几种跳转方式。以便于我们更加深入的了解a标签。使...

2023-04-16 09:50:07查看全文 >>

html的新标签有哪些(HTML中的基本标签都有什么)

html的新标签有哪些(HTML中的基本标签都有什么)

在使用DIV CSS布局时,我们需要通过为div命名的方式,来区分网页中不同的模块。在HTML5中布局方式有了新的变化,...

2023-04-16 09:30:55查看全文 >>

html标签分类(html标签有几种类型)

html标签分类(html标签有几种类型)

上节课我们已经学习了visual studio code工具的简单使用,那么接下来我们就深入学习关于HTML的相关知识。...

2023-04-16 09:28:36查看全文 >>

热熔水管焊接方法图解(50mm热熔管接法视频)

热熔水管焊接方法图解(50mm热熔管接法视频)

新房子打算自己热熔PPR管(两卫,开发商只进水到户,距离也远,找个几个做水电的最低6000最高12000),练习了一下,...

2023-04-16 09:45:30查看全文 >>

热熔水管疑难杂症焊接方法(水管热熔焊接需要什么工具)

热熔水管疑难杂症焊接方法(水管热熔焊接需要什么工具)

PE给水管是一种环保管材,内腔光滑阻力小,管材重量较轻便于工程施工,可以合理节省工程施工时间及工程施工成本费。管材的连接...

2023-04-16 09:18:36查看全文 >>

家装水管热熔焊接技术方法(热熔水管焊接太深怎么补救)

家装水管热熔焊接技术方法(热熔水管焊接太深怎么补救)

去年过的二建,在学管道连接的时候学了热熔焊接和电熔焊接,只是在网上找了一些图片,没见过实物,也不知道怎么操作。今天在路上...

2023-04-16 09:29:34查看全文 >>

文档排行