浅谈web语义化
在前端的编程道路上,是否听过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语义化的更多相关文章
- 浅谈html语义化标签,Html5新增语义化标签
Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...
- 【架构】浅谈web网站架构演变过程
浅谈web网站架构演变过程 前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变. 该系统具备的功能: 用户模块:用户注册和管理 商品模块:商品展示和管 ...
- web语义化之SEO和ARIA
在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...
- [原创]浅谈Web UI自动化测试
[原创]浅谈Web UI自动化测试 Web UI自动化测试相信大家都不陌生,今天来谈谈这个,我最早接触自动化测试时大约是在2004年,2006年当时在腾讯财付通算是开始正式接触自动化测试,之所以是正式 ...
- 浅谈|WEB 服务器 -- Caddy
浅谈|WEB 服务器 -- Caddy 2018年03月28日 12:38:00 yori_chen 阅读数:1490 标签: caddyserverwebhttps反向代理 更多 个人分类: ser ...
- Web语义化
在昨天和做SEO的同学聊了一会儿,当然我没有学会搜索引擎优化的技巧和知识,但在此之前一直对HTML5中header.footer.sidebar.article等标签嗤之以鼻,觉得这个和div没有什么 ...
- web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.” Web语义化有三个阶段: 1.h1~h6.thead.ul. ...
- 为什么要web语义化
为什么要web语义化 其实wiki的定义里面说得非常清晰了.语义化的好处有三点 有利于搜索 容易兼容不同设备 结构清晰,利于团队的开发.维护
- 浅谈web应用的负载均衡、集群、高可用(HA)解决方案(转)
1.熟悉几个组件 1.1.apache —— 它是Apache软件基金会的一个开放源代码的跨平台的网页服务器,属于老牌的web服务器了,支持基于Ip或者域名的虚拟主机,支持代理服务器,支持安 ...
随机推荐
- css 简析folat
1.float?? 不知道大家是否还记得之前我们讲过页面是文档流,具体什么是文档流,我就不说了?于是我们页面布局如果用div的话,那么块状的元素是怎么排列的,什么叫块状自己去看? 如果我们呢用div布 ...
- 基于shell脚本比较数字大小
让用户输入两个数来比较他们的大小 先用touch命令新建一个1.sh文件 在用vi进入i进入编辑状态 输入 #!/bin/bash read "" a read "&qu ...
- 安装Python算法库
安装Python算法库 主要包括用NumPy和SciPy来处理数据,用Matplotlib来实现数据可视化.为了适应处理大规模数据的需求,python在此基础上开发了Scikit-Learn机器学习算 ...
- Cocopod
装了好几天,这个是比较全面的,大家可以看看帮助一下 1.新建一个项目,名称:CPTest 2.打开终端,输入"cd"+空格,然后将文件夹拖入到后面 3.回车后继续输入vim Pod ...
- JQuery实现Ajax应用
将自己之前在印象笔记的笔记搬家了~ 1.使用 load()方法异步请求数据,通过Ajax 请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[ ...
- JQM开发Tips
1.radio Button 点击后有时候有高亮样式,有时候没有 解决方案: $("#task_form label").click(function () { $("# ...
- 05.DOM
DOM基础 什么是DOM 标签元素节点浏览器支持情况 火狐支持最好 谷歌其次 ie最差 尤其是ie6-8DOM节点节点分为:元素节点和文本节点 测试节点的类型用nodeTypenodeType 为3 ...
- FreeMarker中文API手册(完整)
FreeMarker概述 FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写 FreeMarker被设计用来生成HTML Web页面,特别是基于MVC模式的应用 ...
- MyEclipse新建web project和navicat110_mysql_en工具
首先注意几点: 1.eclipse web项目:项目名称不得超过五个字符,要求全部小写,不管变量名.类名.函数名.文件名,在没有特殊理由的时候,不要用下划线,同时表名和类名用两个单词,尽量不要用Stu ...
- gitlab使用有感之坚持
当老师请大二的学弟教我们使用这个软件的时候, 当时就吓坏我了,感觉好高大上的样子,全英文的,还有什么阿里云的服务器用来代码管理:心情一下子就不好了,感觉自己懂得东西好少啊,比学弟懂得都少,跟不上时代的 ...