css的命名怎样才叫规范呢？_服务器知识

一．文件命名规范

[b]样式文件命名[/b]

[quote]主要的 master.css

布局，版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css [/quote]

[b]CSS ID 的命名[/b]

[quote]页头：header

登录条：loginbar

标志：logo

侧栏：sidebar

广告：banner

导航：nav

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

滚动：scroll

页面主体：main

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

热点：hot

新闻：news

下载：download

状态：status

按钮：btn

投票：vote

合作伙伴：partner

友情链接：friendlink

页脚：footer

版权：copyright

外　套：wrap

主导航：mainnav

子导航：subnav

页　脚：footer

整个页面：　content

页　眉：header

页　脚：footer

商　标：label

标　题：title

主导航：mainbav（globalnav）

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

旗　志：logo

标　语：banner

菜单内容1： menu1content

菜单容量：　menucontainer

子菜单：submenu

边导航图标：sidebarIcon

注释：　note

面包屑：breadcrumb(即页面所处位置导航提示）

容器：　container

内容：　content

搜索：　search

登陆：　Login

功能区：shop(如购物车，收银台)

当前的　current[/quote]

[b]网站常用中英文对照表[/b]

[quote]网站导航 Site Map

公司简介 Profile or Company Profile or Company

公司设备 Equipment Equipment

公司荣誉 Glories Glories

企业文化 Culture Culture

产品展示 Product Product

资质认证 Quality Certification

企业规模 Scale Scale

营销网络 Sales Network

组织机构 organization organization

合作加盟 Join In Cooperation

技术力量 Technology Technology

经理致辞 Manager`s oration

发展历程 Development History

工程案例 Engineering Projects

业务范围 Business Scope

分支机构 Branches

供求信息 Supply &Demand

经营理念 Operation Principle

产品销售 Sales Sales

联系我们 Contact Us Contact Us

信息发布 Information Information

返回首页 Homepage Homepage

产品定购 order order

分类浏览 Browse By Category

电子商务 E-business

公司实力 Strength Strength

友情连结 Hot Link

应用领域 Application Fields

人力资源 Human Resource Hr

领导致辞 Leader`s oration

企业资质 Enterprise Qualification

行业新闻 Trade News

行业动态 Trends

客户留言 Customer Message

客户服务 Customer Service

新闻动态 News &Trends

公司名称 Company Name

销售热线 Sales Hot-Line

联系人 Contact Person

您的要求 Your Requirements

建设中 In Construction

证书 Certificate Certificate

地址 ADD Add

邮编 Postal Code Zipcode

电话 TEL Tel

传真 FAX Fax

产品名称 Product Name

产品说明 Description Description

价格 Price

品牌 Brand

规格 Specification

尺寸 Size

生产厂家 Manufacuturer Manufacturer

型号 Model

产品标号 Item No.

技术指标 Technique Data

产品描述 Description

产地 Production Place

销售信息 Sales Information

用途 Application

论坛 Forum

在线订购 On-line order

招商 Enterprise-establishing

招标 Bid Inviting

综述 General

业绩 Achievements

招聘 Join Us

求贤纳士 Join Us

大事 Great Event

动态 Trends

服务 Service

投资 Investment

行业 Industry

规划 Programming

环境 Environment

发送 Delivery

提交 Submit

重写 Reset

中国企业网技术支持 Powered By Ce.Net.Cn

社区 Community

业务介绍 Business Introduction

在线调查 Online Inquiry Inquiry

下载中心 Download

会员登陆 Member Entrance

意见反馈 Feedback

常见问题 FAQ

中心概况 General Profile

教育培训 Education &Training

游乐园 Amusement Park

在线交流 Online Communication

专题报道 Special Report[/quote]

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为 “searchBtn”……

一. 常规书写规范及方法

1. 选择DOCTYPE：

XHTML 1.0 提供了三种DTD声明可供选择：

过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2. 指定语言及字符集：

为文档指定语言：

为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：

常用的语言定义：

标准的XML文档语言定义：

<?xml version=”1.0″ encoding=” utf-8″?>

针对老版本的浏览器的语言定义：

为提高字符集，建议采用“utf-8”。

3. 调用样式表：

外部样式表调用：

页面内嵌法：就是将样式表直接写在页面代码的head区。如：

外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

4、选用恰当的元素：

根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。例如，使用P元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；

避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；

尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；

5、派生选择器：

可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：

.mainMenu ul li {background:url(images/bg.gif)}

6、辅助图片用背影图处理：

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom}

7、结构与样式分离：

在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写：

页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：

<ul>

</ul>

</div>

#mainMenu {

width:100%

height:30px

background:url(images/mainMenu_bg.jpg) repeat-x

}

#mainMenu ul li {

float:left

line-height:30px

margin-right:1px

cursor:pointer

}

*******************************************************************************************

命名参考(来源网络)

常用的CSS命名规则：

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如user-list

常用代码结构：

div：主要用于布局，分割页面的结构

ul/ol：用于无序/有序列表

span：没有特殊的意义，可以用作排版的辅助，

例如

<li><span>(4.23)</span>天幻网六周年天幻网六周年天幻网六周年天幻网六</li>

然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果

h1-h6：标题

h1-h6 根据重要性依次递减

h1位最重要的标题

label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西，

例如：

fieldset &legend：fildset套在表单外，legend用于描述表单内容。

例如：<form>

<legend>title</legend>

</fieldset>

</form>

dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，

例如<dl>

<dt>什么是CSS?</dt>

<dd>CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。<dd>

<dt>什么是XHTML？</dt>

<dd>XHTML是一个基于XML的置标语言，看起来与HTML有些想像，只有一些小的但重要的区别。可以这样看，XHTML就是一个扮演着类似HTML的角色的XML。本质上说，XHTML是一个桥接（过渡）技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。</dd>

</dl>

C #content

S #subcol

M #maincol

X #xcol

这是纵向布局的XHTML结构，c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。

其中在三纵栏的布局需要分为两层第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

自定义命名：

根据w3c网站上给出的,最好是用意义命名

比如：是重要的新闻高亮显示（像红色）

有两种

.red{color:red}

.important-news{color:red}

很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字

CSS命名规范

DIV CSS名称说明

网站公用相关

Container div #container 容器

Header or banner div #header 页头部分

Main or global navigation div #mainNav 主导航

Menu #menu 菜单

Sub Menu #submenu 子菜单

Left or right side columns #sidebarA, #sidebarB 左边栏或右边栏

Main div #main 页面主体

Content div #content 内容部分

The main content area #contentMain 主要内容区域

Footer div #footer 页脚部分

Tag #tag 标签

Message #msg #message 提示信息

Tips #tips 小技巧

Vote #vote 投票

Friend Link #friendlink 友情连接

Title #title 标题

Summary #summary 摘要

Sub-navigation list #subNav 二级导航

Search input #searchInput 搜索输入框

Search output #searchOutput 搜索输出和搜索结果相似

Search #search 搜索

Search results #searchResults 搜索结果

brand #branding 商标

branding-logo #brandingLogo LOGO

Site information #siteinfo 网站信息

Designer or other credits #siteinfoCredits 信誉

Join us #joinus 加入我们

Partnership opportunities #partner 合作伙伴

Services #service 服务

Regsiter #regsiter 注册

Status #status 状态

9、鼠标手势：

在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer”

前端面试的H5问题汇总：

1.HTML5 为什么只需要写 <!DOCTYPE HTML>？

答案解析：

HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

2、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

答案解析：

行内元素：a b span img input select strong

块级元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等

空元素：<br> <hr> <img> <link><meta>

3、页面导入样式时，使用link和@import有什么区别？

答案解析：

1）link属于XHTML标签，而@import是css提供的；

2）页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；

3）@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；

4）link方式的样式的权重高于@import的权重。

4、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

答案解析：

新特性，新增元素：

1）内容元素：article、footer、header、nav、section

2）表单控件：calendar、date、time、email、url、search

3）控件元素：webworker，websockt，Geolocation

移除元素：

1）显现层元素：basefont，big，center，font，s，strike，tt，u

2）性能较差元素：frame，frameset，noframes

处理兼容问题有两种方式：

1）IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

2）使用是html5shim框架

另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素来加以区分。

5、如何区分 HTML 和 HTML5？

答案解析：

1）在文档类型声明上不同：

HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。

2）在结构语义上不同：

HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。

HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>

6、简述一下你对HTML语义化的理解？

答案解析：

1）用正确的标签做正确的事情；

2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；

3）即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的；

4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；

5）使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。

7、HTML5的离线储存怎么使用，工作原理能不能解释一下？

答案解析：

localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 数据在浏览器关闭后自动删除。

8、iframe有那些缺点？

答案解析：

1）在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面；

2）框架结构有时会让人感到迷惑，页面很混乱；

9、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

答案解析：

1）<!Doctype>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

2）严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

10、常见兼容性问题？

1）png24位的图片在IE6浏览器上出现背景；

解决方案是：做成PNG8；

2）浏览器默认的 margin 和 padding 不同。

解决方案是：加一个全局的*{margin:0padding:0}来统一。

3）IE6双边距bug：块属性标签float后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。浮动IE产生的双倍距离 #box{float:leftwidth:10pxmargin:0 0 0 100px} 这种情况下IE6会产生200px的距离。

解决方法：加上_display：inline，使浮动忽略

4）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性； Firefox下，只能使用getAttribute()获取自定义属性。

解决方法：统一通过getAttribute()获取自定义属性。

5）IE下，even对象有x，y属性，但是没有pageX，pageY属性，但是没有x，y属性；

解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

6）Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示

解决方法：可通过加入 CSS 属性 -webkt-text-size-adjust:none解决

7）超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active ；

解决方法：改变CSS属性的排列顺序：L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }

11、如何实现浏览器内多个标签页之间的通信？

答案解析：

调用localstorge、cookies等本地存储方式

12、webSocket如何兼容低浏览器？

答案解析：

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基于 multipart 编码发送 XHR 、基于长轮询的 XHR

13、支持HTML5新标签

答案解析：

1）IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式；

2）当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

<!--[if lt IE 9]>

<![endif]-->

14、如何区分：DOCTYPE 声明\新增的结构元素\功能元素，语义化的理解？

答案解析：

1）用正确的标签做正确的事情；

2）html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

3）在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的；

4）搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利用 SEO ；

5）使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

15、介绍一下 CSS 的盒子模型？

答案解析：

1）有两种，IE 盒子模型、标准 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；

2）盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）。

16、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有哪些？

答案解析：

1）id 选择器（#myid）

2）类选择器（.myclassname）

3）标签选择器（div，h1，p）

4）相邻选择器（h1 + p）

5）子选择器（ul >li）

6）后代选择器（li a）

7）通配符选择器（* ）

8）属性选择器（ a[rel = "external"]）

9）伪类选择器（a: hover, li: nth - child）

17、可继承的样式： font-size font-family color, UL LI DL DD DT

18、不可继承的样式：border padding margin width height

19、优先级就近原则，同权重情况下样式定义最近者为准

20、载入样式以最后载入的定位为准

解析答案：优先级为: !important > id >class >tag ； important 比内联优先级高

21、CSS3新增伪类举例：

答案解析：

p:first-of-type 选择属于其父元素的首个 <p>元素的每个 <p>元素；

p:last-of-type 选择属于其父元素的最后 <p>元素的每个 <p>元素；

p:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p>元素；

p:only-child选择属于其父元素的唯一子元素的每个 <p>元素；

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p>元素；

:enabled :disabled 控制表单控件的禁用状态；

:checked单选框或复选框被选中。

22、如何居中div？如何居中一个浮动元素？

答案解析：

给div 设置一个宽度，然后添加 margin:0 auto 属性；div{width:200pxmargin:0 auto}

23、居中一个浮动元素

答案解析：

确定容器的宽高宽500 高300的层，设置层的外边距

.div{width:500pxheight:300pxmargin:-150px 0 0 -250pxposition:relativebackground:green；left：50%；头：50%}

24、css3有哪些新特性？

答案解析：

CSS3 实现圆角（border-radius:8px），阴影（box-shadow:10px）,对文字加特效（text-shadow）,线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)//旋转，缩放，定位，倾斜

增加了更多的 css 选择器多背景 rgba

25、为什么要初始化 CSS 样式

答案解析：

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法是：*{padding:0margin:0} (不建议)

淘宝的样式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,

textarea, th, td { margin:0padding:0}

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53}

h1, h2, h3, h4, h5, h6{ font-size:100%}

address, cite, dfn, em, var { font-style:normal}

code, kbd, pre, samp { font-family:couriernew, courier, monospace}

small{ font-size:12px}

ul, ol { list-style:none}

a { text-decoration:none}

a:hover { text-decoration:underline}

sup { vertical-align:text-top}

sub{ vertical-align:text-bottom}

legend { color:#000}

fieldset, img { border:0}

button, input, select, textarea { font-size:100%} table { border-collapse:collapseborder-spacing:0}

26、display:inline-block 什么时候会显示间隙？

答案解析：

移除空格，使用margin 负值、使用 font-size:0、letter-spacing 、word-spacing

27、使用 CSS 预处理器吗？喜欢哪个？

答案解析：SASS

28、什么是盒子模型？

答案解析：

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

29、CSS实现垂直水平居中

答案解析：

一道经典的问题，实现方法有很多种，以下是其中一种实现：

HTML结构：

<divclass="wrapper">

<divclass="content"></div>

</div>

CSS：

.wrapper{position:relative}

.content{

background-color:#6699FF

width:200px

height:200px

position:absolute //父元素需要相对定位

top:50%

left:50%

margin-top:-100px //二分之一的height，width

margin-left:

-100px

}

30、简述一下src与href的区别

答案解析：

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

31、简述同步和异步的区别

答案解析：

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

32、px和em的区别

答案解析：

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

33、浏览器的内核分别是什么?

答案解析：

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

编辑方法如下：

一.使用 HTML5 的声明

在 HTML 4.01 和 XHTML 中那段长长的 DTD 类型声明应该是所有标签中最难记住的标签了，但在 HTML5 中， DTD 声明非常简单：

<!DOCTYPE html>

就是这么简洁，要使用 HTML5 ，第一步肯定是先使用 HTML5 的 <!DOCTYPE>声明。

二.加入 html5.js

可以在主题的 head 元素内加入一段 js 来让 IE8 及以下的 IE 完全支持 HTML5 的标签。

下载由 html5shiv 提供的这个 html5.js 文件。

<!--[if lte IE 9]>

<![endif]-->

代码中使用了条件注释针对低版本的 IE（IE8 及以下版本）浏览器来调用这个 js 文件，其他浏览器会忽略掉这段代码，不会造成浪费的 HTTP 请求。

三.CSS Reset

CSS Reset 是为了把浏览器提供的默认样式去掉的一段 CSS ，详细的介绍可以参见 Kayo 之前所写的一篇文章《关于 CSS Reset 》，本文中的 CSS Reset 是根据前文的 CSS Reset 改造的，主要是加入了对 HTML5 中新加入的标签的重置。下面是 Kayo 针对 HTML5 的 CSS Reset ，供大家参考，也可以参照前文定制更适合个人情况的 CSS Reset 。

/*** 加入 HTML5 新标签的样式重置 ***/

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0padding: 0border: 0outline: 0font-size: 100%vertical-align: baselinebackground: transparent}

body{line-height: 1text-align: left}

:focus {outline: 0}

/*** 将一些可以代替 div 标签的 HTML5 标签定义为块状元素 ***/

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block}

ol, ul {list-style: none}

blockquote, q {quotes: none}

blockquote:before, blockquote:after, q:before, q:after {content:''content:none}

ins {text-decoration: none}

mark {background-color: #ff9color: #000font-style: italicfont-weight: bold}

del {text-decoration: line-through}

table {border-collapse: collapseborder-spacing: 0}

input, select {vertical-align: middle}

现在，可以放心的在 WordPress 主题中使用 HTML5 标签了。

四.修改主题中的标签为语义化的 HTML5 标签

在网页重构中，舍弃了没有任何语义的 table 布局，取而代之的是新的标记，最常见的莫过于 div 这个标签，不过在设计复杂的页面时，新的问题出来了—— div 的滥用导致页面变得臃肿并且难于理解。值得兴奋的是， HTML5 为开发者引入了新的语义化标记，下面给大家介绍一些适合在 WordPress 主题中使用的 HTML5 标签。

<header>用于定义文档的页眉，可以代替原本包裹页眉的 <div>。

<footer>用于定义文档的页脚，可以代替原本包裹页脚的 <div>。

<nav>用于定义导航链接的部分，即代替包裹菜单的 <div>。

<article>用于定义独立的内容，很适合代替包裹文章的 <div>，如 WordPress 首页、归档页或文章页的文章列表中可使用该标签包裹文章。

<aside>该标签用于定义其所处内容之外的内容，并且 aside 的内容应该与附近的内容相关，因此很适合用来包裹 WordPress 的侧边栏。

另外 <time>, <small>, <section>等 HTML5 标签也适合用来改造升级 WordPress 主题，这些标签的具体意义可以参见 W3school 。

五.为主题加入 HTML5 微数据

关于 HTML5 微数据的介绍和使用方法可以参见 Kayo 之前所写的文章《HTML5 之微数据》，这里主要介绍一些适合 WordPress 使用的微数据规范，因此建议读者先阅读前文再阅读下文。

这里使用的是 schema.org 的微数据规范，加入微数据是为了让机械（如搜索引擎）识别网页内容的意义，可以说是华丽丽的 SEO 。

下面列举一些适合的微数据规范：

http://schema.org/WPHeader 这是定义网页版头的微数据，需要注意的是 WPHeader 的 “WP” 不是指 WordPress ，而是 Web Page 的缩写，不过用在 WordPress 上也是非常合适的。

http://schema.org/WPFooter 定义网页页脚。

http://schema.org/BlogPosting 定义一篇博客文章。

http://schema.org/Review 定义一条评论。

欢迎分享，转载请注明来源：夏雨云

原文地址:https://www.xiayuyun.com/zonghe/785007.html

css的命名怎样才叫规范呢？

发表评论

评论列表（0条）