> 웹 프론트엔드 > HTML 튜토리얼 > 浅谈web语义化 - 猴子猿

浅谈web语义化 - 猴子猿

WBOY
풀어 주다: 2016-05-21 08:35:06
원래의
1122명이 탐색했습니다.

在前端的编程道路上,我曾经听别人对我说过什么编写前端时,要注意html的结构语义化哦。我当时直接采取的是无视。。。

因为我觉得前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦。div+css所向无敌,干嘛要用其他标签呢。

哎,想想当时自己有多小白菜。。。

不错正如上面所说,div+css的确能实现一切效果,用户体验也棒棒哒。

但,请明白div是没有语义的,我们是能看懂,但是搜索引擎呢?我们呈现出来的网页是需要计算机连接互联网传达给别人,而负责中转的计算机不可能像人一样去看网页的内容,所以我们需要语义化。

例如我想加粗一个字体,我们可以有以下几种写法

  1、  css:

SEO

  2、  b标签:SEO

  3、  strong标签:SEO

其实,就效果而言,大家都差不多。然而,它们的意义是不一样的。

1、2种写法只是以加粗的形式显示内容,无法被搜索引擎知道,而第三种,strong标签是有语义的,它表示强调。所以如果你是的本意是想强调,那选择第三种写法才是符合语义的。而如果,你只是想显示效果,那就随便咯。

其实,web语义化不仅能让搜索引擎理解,开发人员也是一样。

倘若我们才拿到一段html代码,在不运行它的情况下,是不是我们一开始是蒙的,不知道这些代码的寓意,然而,如果我们是采用语义化编写代码,文档结构就明朗多啦。

在很久以前,我对html5中的什么header、nav呲之以鼻,想想是多么单纯。当时,我去面试的时候,别人问我,了解html5吗。我说了解过。他说,那你谈谈对header、nav这些标签的理解。我当时二笔的说,其实跟div差不多,就是框框而已。哎,无知的少年呢。。。

下面列举几个语义标签:

html标签

语义

title

网页标题

h1~h6

大纲级别标题

caption

表格标题,指定表格描述

legend

表单元素

标题,表单描述

p

段落

ul

无序列表

ol

有序列表

dl

自定义列表

em

局部强调,段落内强调

strong

全文强调,更加强烈的强调

今天上班维护别人的bug,好累。

睡觉咯,晚安,everyon~

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿