web语义化理解
含义:
Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。
为什么要web语义化?
如今互联网都到了web2.0的时代了,HTML语言在不断的进化并发挥着越来越重要的地位;而我们制作网页也从当初的table表格嵌套发展到了 div+css,但经常看到这种代码整个网页大量的使用div标签进行分隔页面内容,有的甚至整个页面只有div一 种html标签存在,滥用现象使得网页制作似乎就只剩下了div。
首先,人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能地对搜索引擎友好,所以就要尽可能地使标签语义化。
语义化的优势:
1.语义化的代码更小,对搜索引擎更友好,下载也就更快了。
2.能够更加快速的帮助新的前端工程师理解我们的代码。
web语义化包含两个方面:
html语义化及css命名语义化。
结构(html)才是重点,样式(css)是用来修饰结构的。所以,要先确定html,确定标签,再来选用合适的css。
html语义化:
如<h1>h标签,<p>段落标签,ul-li,ol-li列表,<table>,<br />,<span>,<lable>,<strong>header、footer、sidebar、article等h5标签
HTML5 规范声明:应该使用 <h1> - <h6> 来表示标题,使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本。
css语义化:
有两种CSS的命名方式:
1、结构化命名法;(根据位置命名),但这种结构出现变化时不容易维护。
2、语义化命名法。 ( 根据功能命名 )根据页面中模块的功能而命名,如页面头部header、导航栏nav、主体main、侧边栏sidebar、底部footer、新闻列表newsList等等,这样整个页面看起来就比较清晰了,维护起来也比较方便
css语义命名法有三种:驼峰命名法;下划线命名法;中划线命名法?可三种结合使用。
e.g strong 和font-weight: bold区别:
语义化:font-weight:bold是单纯的加粗,而strong它起到突出、强调的作用。
1、适应排版的美观而加粗的,无特别意义而对文档的加粗,应该使用font-weight:bold;
2、对于重要的标题、或者是关键字的加粗,可以使用strong(hx更适合标题)。
web语义化理解的更多相关文章
- 快速理解web语义化
什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...
- 浅谈web语义化
在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所 ...
- Web语义化
在昨天和做SEO的同学聊了一会儿,当然我没有学会搜索引擎优化的技巧和知识,但在此之前一直对HTML5中header.footer.sidebar.article等标签嗤之以鼻,觉得这个和div没有什么 ...
- 【HTML】web语义化
一.解决的问题 & 评价标准 web语义化能解决如下问题: 1. 页面样式丢失 2. 有颜色或其他障碍的访客也能读懂页面 3. 移动设备访问页面 4. 程序(如爬虫)理解页面(换句话说SEO优 ...
- web语义化之SEO和ARIA
在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...
- 前端基础:web语义化
web语义化 一.什么是web语义化? web语义化包含两方面,一是html标签语义化,简单来说就是要用合适的标签来表述适当的内容,标题用<h1>~~<h6>标签,段落用< ...
- AmazonOrder xml web语义化
XML Processing Modules — Python 3.7.1 documentation https://docs.python.org/3.7/library/xml.html#xml ...
- web语义化,从松散到实战
GitHub:http://liu12fei08fei.github.io/html/4semantic.html web语义化,从松散到实战 在这篇文章之前,我放弃了很多次,写关于语义化方面的文章: ...
- 什么是web语义化?
Web语义化:是指使用语义恰当的标签,使页面有良好的结构,页面元素更有含义,能够让人和搜索引擎都容易理解.使团队项目的可持续运作及维护,去掉样式后页面呈现清晰的结构. 例如:<table> ...
随机推荐
- vue.js的学习之路
因为对jquery的ajax渲染很不满,所以我就来学vue.js了 1)vue.js是什么 官方解释为:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型 ...
- pyCrypto python 3.5--转
原文地址:https://gxnotes.com/article/198426.html 问题描述 我发现一些PyCrypto安装程序为Python 3.3和3.4,但没有任何Python 3.5. ...
- 高并发之后端优化(PHP)
页面静态化 使用模板引擎 可以使用Smarty的缓存机制生成静态HTML缓存文件 $smarty->cachedir=$ROOT·"/cache"://缓存目录 $smart ...
- 开发辅助 | 前端开发工程师必懂的 UI 知识
移动 UI 设计的世界 ... 1.屏幕尺寸 屏幕大小,指屏幕对角线的长度,而不是屏幕的宽度或高度: 单位为英寸 如 iPhone 7 屏幕尺寸为 4.7 英寸:三星 S6 屏幕尺寸为 ...
- 洛谷P3707 [SDOI2017]相关分析(线段树)
题目描述 Frank对天文学非常感兴趣,他经常用望远镜看星星,同时记录下它们的信息,比如亮度.颜色等等,进而估算出星星的距离,半径等等. Frank不仅喜欢观测,还喜欢分析观测到的数据.他经常分析两个 ...
- TF基础3
批标准化 批标准化(batch normalization,BN)是为了克服神经网络层数加深导致难以训练而诞生的.深度神经网络随着深度加深,收敛会越来越慢,会导致梯度弥散问题(vanishing gr ...
- to_string函数(将数字转换成字符串)
一般常用的转换字符串的方法std::stringstream,但是效率较低;目前C ++11提供了std::to_string 效率方面:C风格的sprintf()没有动态分配内存效率最高;std:: ...
- [实验楼]python11期--NO.1(未完成)
tuple 是 Python 的一种不可变数据类型,用于列表数据一旦初始化就不会再修改的场景.tuple 只能通过位置索引去访问里面的元素,但有时候我们需要给每个元素取个别名,以便通过别名去获取对应的 ...
- [luogu4133 BJOI2012] 最多的方案 (计数dp)
题目描述 第二关和很出名的斐波那契数列有关,地球上的OIer都知道:F1=1, F2=2, Fi = Fi-1 + Fi-2,每一项都可以称为斐波那契数.现在给一个正整数N,它可以写成一些斐波那契数的 ...
- django-10-中间件和上下文管理器
<<<中间件的引入>>> 用户<->中间件<->url->视图 在app目录里面 middleware.py (1)中间件就是一个 ...