品优购

最新推荐文章于 2024-07-24 17:16:26 发布

「已注销」

最新推荐文章于 2024-07-24 17:16:26 发布

阅读量1.2k

点赞数

分类专栏： # 项目文章标签： html css

本文链接：https://blog.csdn.net/weixin_45419127/article/details/115732163

版权

项目之前期准备

开发工具: Webstrom + photoshop+ 谷歌浏览器

技术栈:HTML + CSS

项目之目标

能够引入ico图标
掌握网站优化的三大标签
掌握css的字体图标
掌握css属性的书写顺序

CSS属性的书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

代码规范

HTML规范

DOCTYPE 声明

<!DOCTYPE html>

HTML5标准模板

<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <title>HTML5标准模版</title>
  </head>
  <body>

  </body>
</html>

lang:语言

<html lang="zh-CN">

zh-SG 中文 (简体, 新加坡)   对应 cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK 中文 (繁体, 香港)     对应 cmn-Hant-HK 普通话 (繁体, 香港)
zh-MO 中文 (繁体, 澳门)     对应 cmn-Hant-MO 普通话 (繁体, 澳门)
zh-TW 中文 (繁体, 台湾)     对应 cmn-Hant-TW 普通话 (繁体, 台湾)

charset:字符集

<meta charset="UTF-8">

HTML代码之大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写

<div class="demo"></div>

类型属性

不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含

<link rel="stylesheet" href="" >
<script src=""></script>

元素属性

元素属性值使用双引号
元素属性值能写上的都写上

<input type="text">
<input type="radio" name="name" checked="checked" >

特殊字符的引用

<a href="#">more&gt;&gt;</a>

代码缩进

代码缩进统一用tab键进行代码缩进

<div>
    <h1></h1>
    <p></p>
</div>	
<p><span></span><span></span></p>

图片规范

内容图

内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大

优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式
尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大
PC平台单张的图片的大小不应大于 200KB。

背景图

背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片

PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式
图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式
条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

css规范

代码大小写

/* 推荐 */
.jdc{
	display:block;
}
	
/* 不推荐 */
.JDC{
	DISPLAY:BLOCK;
}

选择器

尽量少用通用选择器
不使用 ID 选择器
不使用无具体语义定义的标签选择器

/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推荐 */
*{}
#jdc {}
.jdc div{}

分号

属性的声明末尾都要加分号

.jdc {
    width: 100%;
    height: 100%;
}

命名规范

ClassName	含义
about	关于
account	账户
arrow	箭头图标
article	文章
aside	边栏
audio	音频
avatar	头像
bg,background	背景
bar	栏（工具类）
branding	品牌化
crumb,breadcrumbs	面包屑
btn,button	按钮
caption	标题，说明
category	分类
chart	图表
clearfix	清除浮动
close	关闭
col,column	列
comment	评论
community	社区
container	容器
content	内容
copyright	版权
current

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
品优购

项目之前期准备开发工具: Webstrom + photoshop+ 谷歌浏览器技术栈:HTML + CSS项目之目标能够引入ico图标掌握网站优化的三大标签掌握css的字体图标掌握css属性的书写顺序代码规范HTML规范DOCTYPE 声明<!DOCTYPE html>HTML5标准模板...
复制链接

扫一扫

专栏目录