充分了解Web语义化
前言
对于“web语义化”这个词语，我相信只要是从事前端的人都不陌生，从事前端工作在投简历时都会在招聘需求里面看到这句话：“对web语义化有深刻的理解”，当然我本人也是从某公司的招聘需求里看到的这句话，那么到底什么是web语义化？它有什么作用？下面是我的一些理解
什么是 web 语义化?
如今互联网都到了web2.0的时代了，HTML语言在不断的进化并发挥着越来越重要的地位；而我们制作网页也从当初的table表格嵌套发展到了 div+css，这是进步的标志。然而，我们似乎看到了一个不太好的现象：整个网页大量的使用div标签进行分隔页面内容，有的甚至整个页面只有div一 种html标签存在。这种现象(使用习惯)非常的不好，滥用div现象使得网页制作似乎就只剩下了div。
Web语义化，其实是伴随着Web前端的不断发展和完善，进而提出的概念。在如今随着Web前端“结构-表现-行为”的原则不断细化，对Web语义化也提出了更高的要求。而它又包含两个方面：html语义化及css命名语义化。
语义（Semantic）的概念：
语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义，以及这些含义之间的关系，是数据在某个领域上的解释和逻辑表示。
那么web语义化也可以简单的理解为：用特定的语言来定义特定的事物。
比如下面这段代码：
<header><h1>标题</h1>
</header>
<main></main>
<footer></footer>我们很直观地就能知道网页由三部分构成：header、main、footer。代码能直观地告诉搜索引擎和人：这段代码是由头部、主体部分和尾部组成。并且在进行SEO（搜索引擎优化）时，这三部分的内容是能够被搜索引擎识别的，这正是我们所希望实现的。
为什么要web语义化？
首先，人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。
以前我对web开发的理解粗浅，觉得写一个好的符合标准的页面只需要把结构和表现分离，然后不要使用table，p等标签就行了，至于通篇都是div我也不会觉得有什么问题，因为CSS很强大。但是，所有的标签都是有自己的语义的，比如：div 语义：Division(分隔)；span 语义：Span(范围)；ol 语义：Ordered List(排序列表)
如果无视标签语义和默认样式，所有标签都用div，整个页面一点语义都没有，搜索引擎还是看不懂。结构(html)才是重点，样式(css)是用来修饰结构的。所以，要先确定html，确定标签，再来选用合适的css
语义化还有很多优势，比如语义化的代码更小，下载也就更快了。另外语义化代码也能够更加快速的帮助新的前端工程师理解我们的代码。语义化代码也更能帮助视障的人通过设备来理解我们的内容等等。当然语义化代码也是我们能力的体现。
- 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
- 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
- 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
- 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
- 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
html语义化
HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”，如图所示
一个 html元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让css使一个html元素看起来就像另一个html元素，比如用<div>来代替<p>标记标题。简而言之，就是你在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。
大约有100多个HTML语义元素可供选择，以下是常用的语义元素：
| 结构体 | 文本 | 一致 |
|---|---|---|
|
|
|
<h1>~<h6>元素
定义页面的标题，h1元素具有最高等级，h6元素具有最低的等级
<header>元素
用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。
<nav>元素
定义页面的导航链接部分区域，不是所有的链接都需要包含在<nav>中，除了页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。
<main>元素
定义页面的主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>元素
定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。
<section>元素
元素用于标记文档的各个部分，例如长表单文章的章节或主要部分。
<aside>元素
定义与主要内容相关的内容块。通常显示为侧边栏。
<footer>元素
定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等
<small>元素
为较不重要的内容定义小字体。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。
<strong>元素
把文本定义为语气更强的强调的内容，以表示内容的重要性。
<em>元素
标记内容着重点（大量用于提升段落文本语义），通常呈现为斜体文字。
<blockquote>元素
定义块引用，浏览器会在 blockquote 元素前后添加换行，并增加外边距。cite属性可用来规定引用的来源
<abbr>元素
解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。
css命名语义化
一般而言，CSS类名的语义化声明方式应当考虑页面中某个相对元素的”用意”，独立于它的“定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。
CSS有两种命名规则：
- 结构化命名法；（根据位置命名）
- 语义化命名法。 ( 根据功能命名 )
结构化命名法：
根据页面中板块的位置而命名，如上图中的content-left,这时如果我们想把侧边栏sidebar放在左边，那么这时content-left板块却在右边，板块位置与其命名完全不符，那么我们这时就要修改页面中的以及CSS样式中的选择器名字了，这样会很不方便，尤其是当页面结构复杂时，一会儿left,一会儿right，这样会很不容易维护。
语义化命名法：
根据页面中模块的功能而命名，如页面头部header、导航栏nav、主体main、侧边栏sidebar、底部footer、新闻列表newsList等等，这样整个页面看起来就比较清晰了，维护起来也比较方便。
下面列表主要是常用功能语义标题：
| 中文 | 语义名称 |
|---|---|
| 头 | header |
| 内容 | content/container |
| 尾 | footer |
| 导航 | nav |
| 侧栏 | sidebar |
| 栏目 | column |
| 页面外围控制整体佈局宽度 | wrapper |
| 左右中 | left right center |
| 登录条 | loginbar |
| 标志 | logo |
| 广告 | banner |
| 页面主体 | main |
| 热点 | hot |
| 新闻 | news |
| 下载 | download |
| 子导航 | subnav |
| 菜单 | menu |
| 子菜单 | submenu |
| 搜索 | search |
| 友情链接 | friendlink |
| 页脚 | footer |
| 版权 | copyright |
| 滚动 | scroll |
| 内容 | content |
| 文章列表 | list |
| 提示信息 | msg |
| 栏目标题 | title |
| 服务 | service |
| 状态 | status |
| 合作伙伴 | partner |
| 导航 | nav |
| 主导航 | mainnav |
| 子导航 | subnav |
| 顶导航 | topnav |
| 边导航 | sidebar |
| 右导航 | rightsidebar |
| 左导航 | leftsidebar |
| 标签 | tags |
| 小技巧 | tips |
| 加入 | joinus |
| 指南 | guide |
| 注册 | regsiter |
| 投票 | vote |
| 菜单 | menu |
| 子菜单 | submenu |
| 标题 | title |
| 摘要 | summary |
充分了解Web语义化相关推荐
- 前端基础：web语义化
web语义化 一.什么是web语义化? web语义化包含两方面,一是html标签语义化,简单来说就是要用合适的标签来表述适当的内容,标题用<h1>~~<h6>标签,段落用< ...
- web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:"这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接." Web语义化有三个阶段: 1.h1~h6.t ...
- 【semantic】如何理解 web 语义化？
http://www.zhihu.com/question/20455165 顾轶灵,百度前端工程师 http://Lync.in 什么是语义化?其实简单说来就是让机器可以读懂内容. 先 随便扯扯.对 ...
- 表现与数据分离、web语义化的理解
2019独角兽企业重金招聘Python工程师标准>>> 表现与数据分离 什么是表现与数据分离 一是前后端分离,所有数据都是后端通过AJAX发送给前端,前端负责展现页面,后端负责提供数 ...
- 谈谈你对web语义化的理解
学术届将web语义化称为Web3.0的核心,目标是将当前的网页提升为计算机能够"理解"和处理的网页. 核心思想是标注网页对象使其对应本体中的实体,并通过逻辑等手段进行自动推理. 作 ...
- web语义化之SEO和ARIA
在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO ###什么是SEO? S ...
- 表现与数据分离、Web语义化
表现与数据分离: 也可以说是界面与数据分离,要体现在代码上,操作数据的代码和操作界面的代码,要分开写. 优势:当页面需求发生改变,只需要改写界面的代码,并且修改的代码不能影响到操作数据访问的代码. 例 ...
- 什么是web语义化？
一.什么是web语义化? web语义化是指,通过html标记表示页面包含的信息,包含了HTML标签的语义化和Css命名的语义化. 其中,html标签语义化是指,包含语义的标签恰当的表示文档结构,例如h ...
- 什么是 web 语义化,有什么好处
什么是 web 语义化,有什么好处 web 语义化是指通过 HTML 标记表示页面包含的信息,包含了 HTML 标签的语义化和 css 命名的语义化. HTML 标签的语义化是指:通过使用包含语义的标 ...
最新文章
- iOS多线程全套：线程生命周期，多线程的四种解决方案，线程安全问题，GCD的使用，NSOperation的使用（下）
- Docker：You cannot remove a running container
- git如何切换分支_拜托，不要再问我Git分支如何使用
- OJ1013: 求两点间距离
- 5g信号频率是多少赫兹_5G的网速为什么那么快？这得从一个简单的公式说起
- DEL: 2012年每月花销
- Kubernetes的三种外部访问方式：NodePort、LoadBalancer和Ingress
- 「 Matlab 」矩阵运算讲解
- js设置css行内样式
- Amplify Shader Editor手册 Unity ASE(中文版)
- 美洽SDK通过广播结束消息提示
- 四.树莓派4B-更换系统源
- result.append(path)与result.append(path[:])的区别
- python如何创建一个文件夹_利用Python怎么创建一个文件夹
- JK latch JK触发器 【数字电路】
- 【一点唐城】15个未来高科技产品会让你无法想象、这些开脑洞的设计太牛了
- java 使用itext导出PDF文件，中文不显示问题解决
- Compose 类型稳定性注解：@Stable @Immutable
- “百度杯”CTF比赛 九月场Upload 之菜刀的使用
- RDIFramework.NET敏捷开发框架助力企业BPM业务流程系统的开发与落地