HTML书写规范

HTML书写规范

CSS书写顺序

1、布局定位属性 display/position/float/overflow/clear/visibility

2、自身属性 width/height/margin/padding/border/background

3、文本属性

color/font/text-decoration/text-align/vertical-align/white-space/break-word

4、其他属性

content/cursor/border-radius/box-shadow/text-shadow

命名规范

目录命名

项目文件名：（拼音）

样式文件名：css（基础样式base.css、公共样式部分common.html、该文件样式）

样式类图片文件夹：img（不变的照片）

产品类图片文件夹：upload（经常更换的照片）

引入网站图标

1、把图标放在根目录下

2、head中加入 <link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon">

网站优化三大标签

title （网站概括）

网站名（产品名）-网站的介绍

​​

description （网站说明）

<meta name="description" content="*******"/>

keyword （搜索关键词）

<meta name="Keywords" content="***，***，***"/>

字体图标

字体图标网站

Icon Font & SVG Icon Sets ❍ IcoMoon iconfont-阿里巴巴矢量图标库

图标引用

样式里面声明字体：

@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; }

给盒子使用字体：

span { font-family: "icomoon"; }

页面logo

logo里面放一个h1；

用text-indent把文字移动到外面，overflow：hidden隐藏文字

用title鼠标放上后，显示提示文字