在前端的编程道路上,是否听过html的结构语义化?

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

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

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

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

  1、  css:<div style=”font-weight:bold;”>SEO</div>

  2、  b标签:<b>SEO</b>

  3、  strong标签:<strong>SEO</strong>

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

1、2种写法只是以加粗的形式显示内容,无法被搜索引擎知道,而第三种,strong标签是有语义的,它表示强调。

所以,如果你的本意是想强调,那选择第三种写法才是符合语义的。而如果,你只是想显示效果,那就随便咯。

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

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

在很久以前,我也对html5中的什么header、nav呲之以鼻,想想是多么单纯。

下面列举几个语义标签:

html标签

语义

title

网页标题

h1~h6

大纲级别标题

caption

表格标题,指定表格描述

legend

表单元素<fieldset>标题,表单描述

p

段落

ul

无序列表

ol

有序列表

dl

自定义列表

em

局部强调,段落内强调

strong

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

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

睡觉咯,晚安,everyon~

浅谈web语义化的更多相关文章

  1. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  2. 【架构】浅谈web网站架构演变过程

    浅谈web网站架构演变过程   前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管 ...

  3. web语义化之SEO和ARIA

    在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...

  4. [原创]浅谈Web UI自动化测试

    [原创]浅谈Web UI自动化测试 Web UI自动化测试相信大家都不陌生,今天来谈谈这个,我最早接触自动化测试时大约是在2004年,2006年当时在腾讯财付通算是开始正式接触自动化测试,之所以是正式 ...

  5. 浅谈|WEB 服务器 -- Caddy

    浅谈|WEB 服务器 -- Caddy 2018年03月28日 12:38:00 yori_chen 阅读数:1490 标签: caddyserverwebhttps反向代理 更多 个人分类: ser ...

  6. Web语义化

    在昨天和做SEO的同学聊了一会儿,当然我没有学会搜索引擎优化的技巧和知识,但在此之前一直对HTML5中header.footer.sidebar.article等标签嗤之以鼻,觉得这个和div没有什么 ...

  7. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

  8. 为什么要web语义化

    为什么要web语义化 其实wiki的定义里面说得非常清晰了.语义化的好处有三点 有利于搜索 容易兼容不同设备 结构清晰,利于团队的开发.维护

  9. 浅谈web应用的负载均衡、集群、高可用(HA)解决方案(转)

    1.熟悉几个组件 1.1.apache     —— 它是Apache软件基金会的一个开放源代码的跨平台的网页服务器,属于老牌的web服务器了,支持基于Ip或者域名的虚拟主机,支持代理服务器,支持安 ...

随机推荐

  1. javaweb学习记录(1)

    Java基础学习笔录 1.运行java程序,出现bad version number in.class file 编译器()的版本号高于运行环境(jre)的版本号,可以降低编译器版本号,也可以通过提升 ...

  2. 关于C#调用非托管动态库方式的性能疑问

    最近的项目中,因为一些原因,需要C#调用非托管(这里为C++)的动态库.网上喜闻乐见的方式是采用静态(DllImport)方式进行调用.偶然在园子里看到可以用动态(LoadLibrary,GetPro ...

  3. STM32之通用定时器

    广大的互联网的大家早上中午晚上..又好..没错了..我又来了..写博客不是定时的..为什么我要提写博客不是定时的呢??聪明的人又猜到我要说什么了吧.有前途.其实我还是第一次听到定时器有通用和高级之分的 ...

  4. <十一>JDBC_事务的处理+隔离

    Tom给jerry汇款500元 1.如果多个操作,每个操作使用的是自己的单独的连接,则无法保证事务 2.具体步骤:   1>事务开始操作前,开始事务:取消Connection的默认提交行为 2& ...

  5. 4.Powershell交互界面

    Powershell提供两种接口:交互式和自动化脚本 先学下如何与Powershell Console和平共处,通过Powershell Console和机器学会对话. 通过以上一个简单测试,知道Po ...

  6. Excel导入导出的业务进化场景及组件化的设计方案(上)

    1:前言 看过我文章的网友们都知道,通常前言都是我用来打酱油扯点闲情的. 自从写了上面一篇文章之后,领导就找我谈话了,怕我有什么想不开. 所以上一篇的(下)篇,目前先不出来了,哪天我异地二次回忆的时候 ...

  7. 尝试解决在构造函数中同步调用Dns.GetHostAddressesAsync()引起的线程死锁

    (最终采用的是方法4) 问题详情见:.NET Core中遇到奇怪的线程死锁问题:内存与线程数不停地增长 看看在 Linux 与 Windows 上发生线程死锁的后果. Linux: Microsoft ...

  8. 一小时学会C# 6

    c# 6已经出来有一段时间了,今天我们就详细地看一下这些新的特性. 一.字符串插值 (String Interpolation) C# 6之前我们拼接字符串时需要这样 var Name = " ...

  9. 浅谈SQL Server数据库分页

    数据库分页是老生常谈的问题了.如果使用ORM框架,再使用LINQ的话,一个Skip和Take就可以搞定.但是有时由于限制,需要使用存储过程来实现.在SQLServer中使用存储过程实现分页的已经有很多 ...

  10. React源码剖析系列 - 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...