注册 | 登陆
您的位置:阿里西西 > 前端技术 > HTML基础 > 详细内容

详解html5语义化css代码的体验及剖析

  稿源:本站整理   2018-09-05   点击:   撤稿纠错
曾几何时,一个人出设计稿,出完设计稿打开DW用拖出一个页面,再苦逼一点拖完页面后自己还要写后台,武林人称:美工。

以下讨论的是和html5 语义化 相关的详解html5语义化css代码的体验及剖析教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:

开篇前的一些YY

曾几何时,一个人出设计稿,出完设计稿打开DW用拖出一个页面,再苦逼一点拖完页面后自己还要写后台,武林人称:美工。更苦逼的是当每一次需求变更后,去修改一大堆发麻的

,于是"div+css"被搬上了互联网时代的舞台,一夜间N多的《DIV+CSS》葵花宝典横空出世,那时,我们活在了div+css的年代,那时,我们用上了

之后,腰不酸,腿不痛,加班也带劲了。

YY结束,切入正题

Ghost曾在2年前就以《页面重构中的语义化》一文对语义化做过讲解,还有码头的《语义化的HTML结构到底有什么好处?》

重构历经7年,也许时至今日,我们可以熟练地写出一个页面,但对于写好一个页面又谈何容易?让我们梳理一下思路,重温下基础,并结合现在的趋势,再来谈一下语义化这个话题,神马是语义化?为何要语义化?

重构中的语义化基本可以分为2块:(x)html标签的语义化和css命名的语义化。

(x)html标签的语义化

不废话上案例:

(图1)

图1非语义化的实现方式:no_emantic_html 语义化的实现方式:emantic_html

你对

情有独钟吗?拿到一个设计稿之后,不经意间无数的 已经在你的弹指神功下落在屏幕?如 果是no_emantic_html那 样,恭喜你得了恋 癖。

"用合理HTML标记以及其特有的属性去格式化文档内容"—这是舒克对语义化标签的解释,能不用

的地方不用 ,因为 是无语义的标签,原本单词是division,为分隔、区块的意思,一般只用在架构html的地方,在(x)html以前的版本。

不过怎样才能写出语义化的标签?从基础入手吧,每天跟我们打交道的最多的就是div h1-h6 ul-li p之类的标签了 ,不知大家有没有对这些标签做过深入的理解,来看下面这张表

标签 原单词 说明 语义化(Y/N)
h1-h6 head 定义 HTML 标题 Y
p paragraph 定义段落 Y
ul unordered list 定义无序列表 Y
ol ordered list 定义有序列表 Y
li list item 定义列表的项目 Y
dl definition list 定义定义列表 Y
dt definition term 定义定义列表中的项目 Y
dd definition description 定义定义列表中项目的描述 Y
table table 定义表格 Y
thead table head 定义表格中的表头内容 Y
tbody table body 定义表格中的主体内容 Y
th table head cell 定义表格中的表头单元格 Y
tr table row 定义表格中的行 Y
td table data cell 定义表格中的单元 Y
a anchor 定义锚 Y
img image 定义图像 Y
div division 定义文档中的节 N
span span 定义文档中的节 N

以上只是列出了我们常用的一些标签,更多的标签请查阅w3c ,基本所有的html标签都是一个单词或者词组的缩写,这样其实本意是更便于我们对语义化的理解。其实所有的(x)html标签中,除了

2个无语义的标签,其他标签都有它存在的意义,只有知道有哪些标签,以及对各个标签的本义做一个了解才能知道去用它。你不知道何时用

定义列表标签?又如果你不知道有标签?

如果在一个页面中看到的基本全是div,那么说明你对语义化标签的使用还不是很明白:明明是一个标题,可以用标签来实现,却非要用无语义的

标签来实现,又或者一个段落,用

标签是否更语义?

大家都知道每年的CSS裸奔节吧?如果选用的标签几乎全是不带语义的,那么在去样式后网页中几乎看不到任何结构信息,可读性非常差;如果选用的都是语义适合的标签,去样式后网页依然具有非常好的可读性;各个浏览器有自己的默认样式,默认的样式给予了各个标签不同的显示,标签使用的正确与否能体现网站的可用性,这也是检验一个网站可用性的最简单的方法之一。

这个推荐大家去看W3C官网的标签的使用,用web developer禁掉它的CSS看看如何?

CSS命名的语义化

CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名。语义化的命名这里就涉及到了团队的命名规范,只有在团队的规范的基础之上进行更好的语义化命名才是王道。

在我的理解,一个语义化的CSS命名至少应遵守如下约定:

尽量规避拼音命名,用英文单词去命名

单词之间连接用三种方式:下划线_ 、间隔符-、驼峰命名。具体使用哪种方式请根据团队的规范,但个人建议不要同时使用2种以上的连接方法同时命名

单词后不要跟无意义的数字,如logo1234 (团队约定好的除外)

对于过长单词的连接命名可采取缩写形式,但应确保成员都能看懂

一些约定好的单词可以迅速的帮助大家命名:

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
登录条:loginbar
标志:logo
广告:banner
轮转:promo
页面主体:main
热点:hot
新闻:news  
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
版权copyright

这个太多了,这里就不一一列出了,遇到不会的单词大家再去补一下英文哈!

[1] [2]  下一页

更多关于 html5 语义化 的文章
相关阅读

相关排行总榜

网页教程

网站运营

特效排行

教你如何使用js+CSS写出类似FLASH动画的网
一款CSS3制作的带尖角的按钮实例代码
目前主流浏览器对于HTML5与CSS3的支持情况
全面剖析前端Ajax技术原理及知识
分享一个HTML5 + JavaScript实现Flash动画
用PHOTOSHOP把美女头画像制作成漂亮的仿手
淘宝网及新浪网等几大官方IP查询API接口地
用Photoshop制作淘宝大促双十一电商促销宣
用HTML5+css3制作HTML5验证的网页表单
通过html5代码实现在网页中插入和播放mp4
如何让您的微信公众号内容快速增加阅读量
网站用户界面设计(网页设计)命名规范
分享一些企业微信营销推广的技巧与经验
可以借鉴和学习的小米模式4大经验要素
SEO优化中网站title标题优化总结及经验分
为什么说建站要从网站用户忠诚度着手,知
一个优秀的SEM进行百度搜索推广账号架构经
谈谈从了解用户开始互联网推广的营销策略
谈谈新手运营网站如何做好网站的广告位投
清理您网站上的黑链的几个招数
JS制作循环上下左右平移转圈的图层特效
原生js写的贪食蛇网页版小游戏特效代码,
用CSS3实现的addidas阿迪达斯标志LOGO特效
HTML5打造的酷炫3D 360度图片立体浏览特效
通用canvas代码实现的JS画圆圈动画特效代
通过HTML5+SVG制作奔跑的小马驹动画特效
jquery实现拖拽进度条并显示百分比的特效
用HTML5+canvas代码绘制的星空月亮图案特
简单实用的纯CSS实现的横向多级导航特效代
原生JS写的一个书架式的图片缩放滚动展示