HTML + CSS编程规范
编程规范 HTML + CSS
命名规范
HTML + CSS 命名规范
1. 命名需要是具备语义性的单词,不能用 数字 拼音 数字,符号开头正确示范 : wrap description title content错误示范 : aaaa a1 $we 4tdds
2. 命名需要多个单词连接的情况下, 标记语言中可以使用 _ - 进行连接 不能直接单词拼接 或者驼峰命名 注意: 书写风格必须统一 不容许出现 _ -一起使用的情况 PS: 更推荐使用 - 这样更清晰.正确示范 : header-nav content-left slide-bar 错误示范 : headernav slideBar ContentLeft
3. 命名需要进行适当的缩写, 单词连接层级不要超过4层正确示范 : head-tit-ico 错误示范 : header-title-left-logo-icon
4. 不容许通过1、2、3等序号进行命名正确示范: content-product错误示范: content1 content2另:
1. 避免class与ID重名
2. id用于识别模块或一级结构区域 且必须唯一 不要改动线上项目ID名称
常用命名
头 | header | 内容 | content | 尾 | footer | 导航 | nav |
---|---|---|---|---|---|---|---|
子导航 | subnav | 栏目 | column | 主体 | main | 新闻 | news |
版权 | copyright | 文章列表 | list | 加入 | joinus | 合作伙伴 | partner |
标志 | logo | 侧栏 | sidebar | 横幅 | banner | 状态 | status |
菜单 | menu | 子菜单 | submenu | 滚劢 | scroll | 搜索 | search |
标签页 | tab | 提示信息 | msg | 小技巧 | tips | 标题 | title |
指南 | guild | 服务 | service | 热点 | hot | 下载 | download |
注册 | regsiter | 登录条 | loginbar | 按钮 | btn | 投票 | vote |
注释 | note | 友情链接 | friend-link | 外套 | wrap | 面包屑 | bread-crumb |
当前的 | current | 购物车 | shop | 图标 | icon | 文本 | txt |
容器 | container | wrap |
img 标签四要素
为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性,就可以在页面加载时为图像预留空间。如果没有这些属性,浏览器就无法了解图像的尺寸,也就无法为图像保留合适的空间,因此当图像加载时,页面的布局就会发生变化。
img标签四要素 width height
四要素的width和height只需要写数字 图片的原始宽度和高度 不需要添加单位, 爬虫需要的是原始图片数据
alt不仅是图片替代文本而且起到让搜索引擎蜘蛛了解图片的内容,便于百度图片的收录以及优化。 alt还可以在图片无法加载的时候 显示图片描述文字 让用户了解这个图是做什么的
title不属于四要素 四要素有 src、width、height、alt
正确示范 : <img src='xxx/xxx.png' width='125' height='125' alt='示范'>
错误示范 : <img src='xxx/xxx.png' width='125px' height='225px'>
标签空行
HTML标签内部原则上不容许出现无意义的空行 但如果为源码 可基于保证可读性的原则上 对大块分区之间进行空行或 补充注释说明, 禁止出现连续两行以及以上的空行行为
<div class="header">......
</div>
<!-- content start -->
<div class="content"></div><div class="footer"></div>
转义符号
为了避免在多类型HTML标签编辑 查阅 传输中 将符号误认为结构元素或关键字 在使用符号的时候统一用转义符
正确示范 :<p>3>2</p>
错误示范 :<p>3>2</p>
标签书写与嵌套
合理遵守标签书写与嵌套规则 满足w3c规范的同时避免不必要的兼容问题
- 所有标签书写必须在半角英文状态下小写输入
- 双标签必须闭合 单标签不写闭合符 (/)
- 子级标签相对父级标签进行一次TAB缩进 1tab = 2空格
- 属性值必须带有引号(单引号 or 双引号) 保证引号风格统一
- ul>li ol>li dl>dt>dd 是成套 并且为绝对父子关系标签 不容许在ul直接子代中插入非li的标签
- a标签内部不容许嵌套a标签
- 除了a之外的行内元素不容许嵌套块元素
- p dt h内不能嵌套块元素
图片文件命名
1. 图片后缀命名一律小写。2. 使用间隔符 - 进行连接。一般背景图片以bg-开头,按钮图片以btn-开头,图标图片以icon-开头,聚合图以spr-开头,后跟英文单词,如果名称过长,适当使用缩写,就是精灵图
CSS书写
注释
CSS规则是使用 /* 需要注释的内容 */ 进行注释的,即在需要注释的内容前使用 “/*” 标记开始注释,在内容的结尾使用 “*/”结束。
例如:
p {font-size: 14px; /* 所有的字体是14像素大小*/
}
文件顶部注释
/** @description: xxxxx 中文说明* @author: zhifu.wang* @update: zhifu.wang (2012-10-17 18:32)*/
模块注释
/* module: module1 by zhifu.wang */ ….
/* module: module2 by zhifu.wang */
模块注释必须单独写在一行
简单注释
单行注释:/* this is a short comment */单行注释可以单独写在一行,也可以写在行尾多行注释:
/** this is comment line 1.* this is comment line 2.
*/多行注释必须写在单独行
特殊注释
用于标注修改、待办等信息
/* TODO: xxxx by zhifu.wang 2012-10-18 18:32 */
/* BUGFIX: xxxx by zhifu.wang 2012-10-18 18:32 */
长度要求
注释中的每一行长度丌超过 40 个汉字,或者 80 个英文字符
函数注释
/***@static 功能说明*@param {String} 输入值说明*@param {String} 输入值说明*@RegExp {Array}*return {String} 返回值*/
空格规范
【强制】 选择器 与 { 之间必须包含空格。
示例: .selector { }
【强制】 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。
示例:
color: red;
选择器规范
【建议】 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。
示例:
/* 规范 */
#username input {}
.comment .avatar {}/* 不规范 */
.page .header .login #username input {}
.comment div * {}
【建议】 并集选择器在逗号后换行书写下一个选择器
示例:
/* 规范 */
body,
ul,
p {}/* 不规范 */
body, ul, p {}
属性规范
【强制】 属性定义必须另起一行。
示例:
/* 规范 */
.selector {margin: 0;padding: 0;
}/* 不规范 */
.selector { margin: 0; padding: 0; }
【强制】 属性定义后必须以分号结尾。
示例:
/* 规范 */
.selector {margin: 0;
}/* 不规范 */
.selector {margin: 0
}
大小写规定
css虽然不区分大小写 按照惯例和规定 : 所有css文件中的代码都小写,
/* 规范 */
#username input {text-align: center;
}/* 不规范 */
#username input {TEXT-ALIGN: center;
}
CSS内引号
CSS内所有需要用到引号的部分统一推荐使用 双引号 (根据公司或者项目组来) 字体数字双引号
content: "."
CSS3兼容前缀
如果使用 CSS3 的属性,如果有必要加入浏览器前缀,则按照
-webkit- / -moz- / -ms- / -o-
的顺序进行添加,标准属性写在最后,并且属性名称要对齐,例如:
div.animation-demo { -webkit-animation: mymove 5s infinite; -moz-animation: mymove 5s infinite; -o-animation: mymove 5s infinite; animation: mymove 5s infinite;
}
背景URL
背景图片 background-image: url() 括号内部地址不使用引号包裹
background-image: url(img/banner.jpg)
CSS书写顺序
良好的CSS书写顺序是前端工程师需要遵守并维护的重要规范
1. 位置属性 display position float overflow z-index list-style clear等可以决定元素渲染位置或层级 以及能够影响其他元素渲染位置或层级的属性
2. 自身属性 width height margin padding border background line-height 等可以影响盒子自身展示的属性
3. 文本属性 color font- text- word- 等作用于文本的样式属性
4. 其他与新增属性 cursor zoom transform box-shadow 等新增属性
原理
1. 浏览器解读HTML是从上之下单行解析, 如果没有良好的书写顺序, 例如先解析了 width height 那预渲染的时候 就会从默认位置 (当前文档流左上角) 进行渲染
2. 如果后续解析到了 位置属性 浏览器需要擦除之前 渲染好的模型 重新根据 渲染基准点(左上角)位置 和层级 进行重绘, 这样导致浏览器会重复解析同一个元素 造成不必要的重绘
3. 良好的书写顺序是 BAT等一线互联网企业都遵守的CSS书写规范 他可以帮助团队成员协作的时候 迅速排查和后期维护
错误示范
.selector {font-size: 12px;width: 150px;float: left;
}
正确示范
.selector {float: left;width: 150px;font-size: 12px;
}
链接伪类顺序
链接的样式请严格按照:a:link-> a:visited-> a:hover-> a:active(LoVeHAte)的顺序添加
CSS复合写法与单例写法
如果对目标样式的子属性需求小于3时 进行单例写法 避免复合写法造成的computed浪费
当子属性需求 大于等于3时 进行复合式写法 避免单例写法过于冗余和字节浪费
PS
margin和padding建议: 合并margin、padding、border的-left/-top/-right/-bottom的设置,尽量使用短名称。
错误示范
.selector {background: red;margin-top: 20px;margin-bottom: 20px;margin-left: 20px;margin-right: 20px;
}
正确示范
div {background-color: red;margin: 20px;
}
布局方式选择
文档流 > 盒子模型距离调整(margin+padding) > 浮动 > 定位
定位元素会脱标并且独立新开文档流层级,高度依赖定位会导致浏览器压力大,并且在后期维护中因为定位元素并不能跟随文档流进行流动,所以维护成本高。
实际开发中 能用文档流+盒子模型处理的布局 轻易不使用浮动 能用浮动处理的布局 不要使用定位 。 只有在最关键的时刻才使用定位进行布局调整。
定位z-index取值范围
合理规划z-index的取值范围 避免和他人组件层级冲突 需要组内协商
公共头部导航 | 1999 - 2100 |
---|---|
banner与二维码等弹出层 | 999 - 1900 |
页面公共底部 | 1999 - 2100 |
页面公共组件 | -1 - 999 |
css细节优化
适当缩写 合理规划 兼容调整
- 0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px
- HEX 16进制颜色代码 对 AABBCC格式缩写为 ABC 例: #336688 => #368
- 如果没有边框时,不要写成border:0,应该写成border:none
- 为了 SEO 和页面可用性,请使用 text-indent 来隐藏文本内容 text-indent:-9999px
- 使用背景图标请使用精灵图(csssprites) 合并图片 制作时颜色相近的放到临近位置
- 在H5 DTD规则下 省略 script link style 标签的 type属性
相关文章:
HTML + CSS编程规范
编程规范 HTML CSS 命名规范 HTML CSS 命名规范 1. 命名需要是具备语义性的单词,不能用 数字 拼音 数字,符号开头正确示范 : wrap description title content错误示范 : aaaa a1 $we 4tdds 2. 命名需要多个单词连接的情况下, 标记语言中可以使用 …...

机器学习之人脸识别-使用 scikit-learn 和人工神经网络进行高效人脸识别
文章摘要 本文将介绍如何使用 Python 的 scikit-learn 库和人工神经网络(ANN)来识别人脸。我们将使用 LFW 数据集(Labeled Faces in the Wild),这是一个广泛用于人脸识别基准测试的大型人脸数据库。我们将展示如何准备…...

【虚拟化】KVM概念和架构
目录 一、什么是KVM? 二、KVM的功能 2.1 主要的功能 2.2 其它功能 三、KVM核心组件及作用 四、KVM与VMware的优势 五、KVM架构 六、qemu介绍 七、创建虚拟机流程 一、什么是KVM? Kernel-based Virtual Machine的简称,KVM 是基于虚拟…...

【Linux】权限2
Linux文件要被执行满足两个条件: ①必须要具备可执行权限 x ②真的是一个可执行程序 1.权限的修改,文件强行给别人 权限就是拦住一批人,不让他做特定的一件事情 a.更改人,更改文件所隶属的人 如果把文件强行给别人, chown xxx(普通用户) xxx(文件名) 会出现下面的情况 很明显…...

汽车长翅膀:GPU 是如何加速深度学习模型的训练和推理过程的?
编者按:深度学习的飞速发展离不开硬件技术的突破,而 GPU 的崛起无疑是其中最大的推力之一。但你是否曾好奇过,为何一行简单的“.to(‘cuda’)”代码就能让模型的训练速度突飞猛进?本文正是为解答这个疑问而作。 作者以独特的视角&…...

怀旧必玩!重返童年,扫雷游戏再度登场!
Python提供了一个标准的GUI(图形用户界面)工具包:Tkinter。它可以用来创建各种窗口、按钮、标签、文本框等图形界面组件。 而且Tkinter 是 Python 自带的库,无需额外安装。 Now,让我们一起来回味一下扫雷小游戏吧 扫…...
Avalonia中的路由事件
文章目录 一、路由事件的基本概念事件路由机制事件的生命周期二、创建路由事件定义路由事件触发路由事件处理路由事件三、使用路由事件的场景用户输入控件交互动画和样式数据绑定和验证四、路由事件的优缺点优点:缺点:五、总结在Avalonia中,路由事件是处理用户交互和控件之间…...
ubuntu20.04安装RabbitMQ +Erlang
ubuntu20.04安装RabbitMQ 3.11.19Erlang 25.3.1_ubuntu20.04.6 安装 rabbitmq-CSDN博客 LINUX下载编译libpng_linux libpng下载-CSDN博客 Ubuntu20.04 安装 Nginx 软件报错:libgd3 缺少 libpng12-0 依赖 Ubuntu安装RabbitMq(保姆级教学,直…...

【word转pdf】【最新版本jar】Java使用aspose-words实现word文档转pdf
【aspose-words-22.12-jdk17.jar】word文档转pdf 前置工作1、下载依赖2、安装依赖到本地仓库 项目1、配置pom.xml2、配置许可码文件(不配置会有水印)3、工具类4、效果 踩坑1、pdf乱码2、word中带有图片转换 前置工作 1、下载依赖 通过百度网盘分享的文…...

分布式:RocketMQ/Kafka总结(附下载链接)
文章目录 下载链接思维导图 本文总结的是关于消息队列的常见知识总结。消息队列和分布式系统息息相关,因此这里就将消息队列放到分布式中一并进行处理关联 下载链接 链接: https://pan.baidu.com/s/1hRTh7rSesikisgRUO2GBpA?pwdutgp 提取码: utgp 思维导图...

Air780EP模块 LuatOS开发-MQTT接入阿里云应用指南
简介 本文简单讲述了利用LuatOS-Air进行二次开发,采用一型一密、一机一密两种方式认证方式连接阿里云。整体结构如图 关联文档和使用工具:LuatOS库阿里云平台 准备工作 Air780EP_全IO开发板一套,包括天线SIM卡,USB线 PC电脑&…...
【算法】插入区间
难度:中等 题目: 给你一个 无重叠的 ,按照区间起始端点排序的区间列表 intervals,其中 intervals[i] [starti, endi] 表示第 i 个区间的开始和结束,并且 intervals 按照 starti 升序排列。同样给定一个区间 newInte…...
C++ 代码实现socket 类使用TCP/IP进行通信 (windows 系统)
C 代码实现socket 类使用TCP/IP进行通信 (windows 系统) TCP客户端通信常规步骤: 1.初始换socket环境 2.socket()创建TCP套接字。 3.connect()建立到达服务器的连接。 4.与客户端进行通信,recv()/send()接受/发送信息࿰…...

前后端分离项目部署,vue--nagix发布部署,.net--API发布部署。
目录 Nginx免安装部署文件包准备一、vue前端部署1、修改http.js2、npm run build 编译项目3、解压Nginx免安装,修改nginx.conf二、.net后端发布部署1、编辑appsetting.json,配置跨域请求2、配置WebApi,点击发布3、配置文件发布到那个文件夹4、配置发布相关选项5、点击保存,…...

【BUG】已解决:UnicodeDecodeError: ‘utf-8’ codec can’t decode bytes in position 10
UnicodeDecodeError: ‘utf-8’ codec can’t decode bytes in position 10 目录 UnicodeDecodeError: ‘utf-8’ codec can’t decode bytes in position 10 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#x…...
C++ | QQ后端暑期实习面试
tcp三次握手,四次挥手 断点续传 文件断点续传是一种机制,允许在网络传输中的文件传输过程中出现断开连接或传输中断的情况下,能够恢复传输并继续传输未完成的部分。其原理如下: 检测支持:首先,服务器端和…...
实用网站推荐
学习 前端 精简CSS格式 Font Awesome 图标库 BootCDN 加速服务 合集 AI工具集 动漫、音乐 娱乐 嗷呜动漫 奈飞同步 视频下载 B站视频解析下载 文件操作 ioDraw制作图 Convertio — 文件转换器 PDF处理 LOGO...

Linux |Nethogs 监控网络使用情况
引言 互联网上为 Linux 系统提供了许多开源的网络监控工具。例如,你可以利用 iftop 命令来监测网络带宽的消耗,使用 netstat 或 ss 命令来获取网络接口的统计信息,或者通过 top 命令来查看系统中正在运行的进程。 然而,如果你真正…...
大语言模型训练过程中,怎么实现算力共享,采用什么分片规则和共享策略
目录 大语言模型训练过程中,怎么实现算力共享,采用什么分片规则和共享策略 一、算力共享的实现 二、分片规则与共享策略 三、总结 DeepSpeed、Megatron-LM是什么 DeepSpeed ZeRO技术一般不实现调参的 ZeRO技术的实现方式 ZeRO与调参的关系 NCCL是什么 一、NCCL概…...

JCR一区级 | Matlab实现TTAO-Transformer-LSTM多变量回归预测
JCR一区级 | Matlab实现TTAO-Transformer-LSTM多变量回归预测 目录 JCR一区级 | Matlab实现TTAO-Transformer-LSTM多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.【JCR一区级】Matlab实现TTAO-Transformer-LSTM多变量回归预测,三角拓扑聚合…...

从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...

MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1
每日一言 生活的美好,总是藏在那些你咬牙坚持的日子里。 硬件:OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写,"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...

Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践
作者:吴岐诗,杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言:融合数据湖与数仓的创新之路 在数字金融时代,数据已成为金融机构的核心竞争力。杭银消费金…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架:基于 (一个现代化的 React 节点绘图库) 功能: 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的,需要先安…...

2025-05-08-deepseek本地化部署
title: 2025-05-08-deepseek 本地化部署 tags: 深度学习 程序开发 2025-05-08-deepseek 本地化部署 参考博客 本地部署 DeepSeek:小白也能轻松搞定! 如何给本地部署的 DeepSeek 投喂数据,让他更懂你 [实验目的]:理解系统架构与原…...

ZYNQ学习记录FPGA(二)Verilog语言
一、Verilog简介 1.1 HDL(Hardware Description language) 在解释HDL之前,先来了解一下数字系统设计的流程:逻辑设计 -> 电路实现 -> 系统验证。 逻辑设计又称前端,在这个过程中就需要用到HDL,正文…...