第二十六章HTML与CSS书写规范
1.HTML书写规范
1.文档类型声明及编码
统一为html5 声明类型。编码统一为utf-8。
2.页面tdk
TDK是一个缩写,其中“T”表示为网页定义标题,“D”表示为网页定义描述 description,“K”表示为搜索引擎定义关键词keywords。
1、<title>标题:只强调重点即可,尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的<title>标题中不要设置相同的内容。
2、<meta keywords> 标签:关键词,列举出几个页面的重要关键字即可,切记过分堆砌。
3、<meta description> 标签:网页描述,需要高度概括网页内容,切记不能太长,过分堆砌关键词,每个页面也要有所不同。
<link href=" favicon.ico” rel=” icon”>
3.书写规范
书写时根据页面结构实现层次分明的缩进;
标签、属性、属性命名由小写字母及下划线、数字组成,且所有标签必须闭合;属性值必须用双引号包括。
4.语义化HTML
根据页面结构选择合适的标签,如标题根据重要性用h1-h6不同等级的标签标记、段落标记用p、结构简章重复的部分用ul, li标签。
页面中重要的图片内容要添加alt=””替换文本,以便图片丢失时,用户可以根据替换文本了解页面内容。据模块内容定义 class 和id 名称,如包含logo和搜索框等在内的头部标签用 header,包含联系信息,版权等的模块用footer 或copyright。
5.合理嵌套HTML 标签
合理嵌套 HTML 标签,ul 和 li 是固定嵌套,ul 直接子元素必须是 li,dl 和 dt、dd 是固定嵌套,dl 的直接子元素必须是 dl 和 dd。p 标签不允许嵌套 p 标签。a 标签不允许嵌套 a标签和其他交互性元素,比如 button。尽可能的控制元素嵌套层级,不合理的嵌套会影响页面性能。
6.保证结构与表现相分离
CSS表现层和JavaScript表现层分别归属于独立的.CSS和 js文件。
在页面中尽量避免使用行内样式,即 style=”…”,应该尽量使用 class 或者 id 来定义新的样式,然后在对应的CSS文件里面修改,js同理。
2.CSS 书写规范
1.编码
编码统一为utf-8。
2.书写代码前
确定版心,PC 端要确定页面有效区域宽度(常见有效区宽度为1000px、1200px)如超过1200px需要与需求沟通确认。
考虑样式表规划,提高样式重复使用率。
规划重置样式表:
因为浏览器的兼容问题,不同浏览器对某些标签默认值的解析是不同的,如果没对CSS初始化往往会出现不同浏览器之间的页面显示差异。为了避免这种差异需要使用样式重置。
例如:
1、提前沟通页面中模棱两可的需求和交互效果,方便后续合理布局;
2、布局时考虑后续交互效果处理的便利性,必要时预留出交互效果中涉及到的样式类。
页面主体:
(如鼠标点击后的样式等)
3.书写代码时
1.添加注释:应该为大区块样式添加注释,小区块适量注释。
2.class 与id的命名。
命名要语义化、简明化;
CSS命名时要加前缀zg如:.zg_top{****};
常用命名方法一:选择器名称由小写英文、数字和_来组合命名:如zg_top,
zg_footer;避免使用中文拼音,尽量使用简易的单词组合;
常用命名方法二:首字母大写,驼峰式命名如:topNav;
3、保持代码缩进与格式:建议单行书写,也可根据自身习惯,后期统一优化处理。
4、CSS属性书写顺序:
建议遵循:布局定位属性->自身属性->文本属性->其他属性。也可根据自身习惯书写,但尽量保证同类属性写在一起。
自身属性主要包括:width、height、background、margin、padding和border 等。
文本属性主要包括:color、font、text-decoration、text-align、vertical-align等。
5、书写代码过程中要注意兼容问题,对熟知的兼容问题在书写代码过程中一并处理。注:需要注意ie8以下的项目和专题,慎用 CSS3 除圆角、投影等偏向界面修饰性属性之外的其他属性,避免兼容问题。
3.注意事项
页面中的文本内容,除了需求特意说明之外,一般能用文字的都用文字,保证静态页面的可编缉性。
注:专题里的特殊字体一般要切图,但具体情况与需求沟通。
pc 端页面需要兼容 IE8 以下时,布局中如果用到 HTML5的标签,注意处理兼容或避免使用。
页面布局时能用正常文档流布局的就不要使用定位布局。
尽可能不使用表格布局,但页面设计中以表格形式展示的内容模块也要尽量使用表格布局。通常页面中需要添加链接的部分,PC 端要设置在新窗口打开属性。
相关文章:
第二十六章HTML与CSS书写规范
1.HTML书写规范 1.文档类型声明及编码 统一为html5 声明类型。编码统一为utf-8。 2.页面tdk TDK是一个缩写,其中“T”表示为网页定义标题,“D”表示为网页定义描述 description,“K”表示为搜索引擎定义关键词keywords。 1、<title&g…...
基于FPGA的AD5753(DAC数模转换器)的控制 II(SPI驱动)
基于FPGA的AD5753(DAC数模转换器)的控制 II(已上板验证) 语言 :Verilg HDL EDA工具:Vivado 基于FPGA的AD5753(DAC数模转换器)的控制 II(已上板验证)一、引言二…...
【全开源】Java同城服务同城信息同城任务发布平台小程序APP公众号源码
📢 连接你我,让任务触手可及 🌟 引言 在快节奏的现代生活中,我们时常需要寻找一些便捷的方式来处理生活中的琐事。同城任务发布平台系统应运而生,它为我们提供了一个高效、便捷的平台,让我们能够轻松发布…...
[Redis]List类型
列表类型来存储多个有序的字符串,a、b、c、d、e 五个元素从左到右组成了一个有序的列表,列表中的每个字符串称为元素,一个列表最多可以存储个元素。在 Redis 中,可以对列表两端插入(push)和弹出(…...
export 和 export default 的区别
在 JavaScript 中,export 和 export default 都是用于导出模块中的内容的关键字,但它们有一些区别: export: export 关键字用于导出多个变量、函数或对象。可以一次导出多个内容,并且在导入时需要使用对应的名称。例如:…...
29网课交单平台 epay.php SQL注入漏洞复现
0x01 产品简介 29网课交单平台是一个专注于在线教育和知识付费领域的交单平台。该平台基于PHP开发,通过全开源修复和优化,为用户提供了高效、稳定、安全的在线学习和交易环境。作为知识付费系统的重要组成部分,充分利用了互联网的优势,为用户提供了便捷的支付方式、高效的…...
推荐ChatGPT4.0——Code Copilot辅助编程、Diagrams: Show Me绘制UML图、上传PDF并阅读分析
5月14日凌晨1点、太平洋时间的上午 10 点,OpenAI的GPT-4o的横空出世,再次巩固了其作为行业颠覆者的地位。GPT-4o的发布不仅仅是一个产品的揭晓,它更像是向世界宣告AI技术已迈入了一个全新的纪元,连OpenAI的领航者萨姆奥特曼也不禁…...
rollup.js(入门篇)
前沿 Rollup 是一个用于 JavaScript 的模块打包工具,它将小的代码片段编译成更大、更复杂的代码,例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式,而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许…...
【Spring Cloud Alibaba】开源组件Sentinel
目录 什么是Sentinel发展历史与Hystrix的异同 Sentinel可以做什么?Sentinel的功能Sentinel的开源生态Sentinel的用户安装Sentinel控制台预备环境准备Sentinel 分为两个部分:下载地址 项目集成Sentinel创建项目修改依赖信息添加启动注解添加配置信息在控制器类中新增…...
Android14 WMS-窗口绘制之relayoutWindow流程(一)-Client端
Android14 WMS-窗口添加流程(一)-Client端-CSDN博客 Android14 WMS-窗口添加流程(二)-Server端-CSDN博客 经过上述两个流程后,窗口的信息都已经传入了WMS端。 1. ViewRootImpl#setView 在窗口添加流程(一)中,有这个方法: http://aospxref…...
JVM学习-Jprofiler
JProfiler 基本概述 特点 使用方便,界面操作友好对被分析的应用影响小(提供模板)CPU,Tread,Memory分析功能尤其强大支持对jdbc,noSql,jsp,servlet,socket进行分析支持多种模式(离线、在线)的分析支持监控本地、远程JVM跨平台,拥…...
Skins
本主题解释如何将DevExpress主题/皮肤应用到应用程序中,如何允许用户在运行时在主题之间切换,如何自定义现有皮肤或创建自己的皮肤,等等。 WinForms订阅包括许多基本控件:按钮、复选框、表单、消息框、对话框、对话框等。 我们实现…...
【Meetup】探索Apache SeaTunnel的二次开发与实战案例
在数据科技快速演进的今天,业务场景的复杂化和数据量的激增,推动了大数据技术的迅速发展,在众多开源大数据处理工具中,Apache SeaTunnel以其强大的数据集成能力,成为众多企业的首选。 但随着应用深入,企业面…...
嵌入式Linux系统中RTC应用的操作详解
第一:RTC的作用以及时间简介 “RTC”的英文全称是Reul-Time Clock,翻译过来是实时时钟芯片.实时时钟芯片是日常生活中应用最为广泛的电子器件之一,它为人们或者电子系统提供精确的实时时间,实时时钟芯片通过引脚对外提供时间读写接口,通常内部带有电池,保证在外部系统关…...
Edge 工作区是什么?它都有哪些作用?
什么是工作区 Edge 工作区是什么?它是微软 Edge 浏览器中的一个功能,在帮助用户更好地组织和管理他们的浏览会话。通过工作区,用户可以创建多个独立的浏览环境,每个工作区内包含一组相关的标签页和浏览器设置。这使得用户能够根据…...
Docker|了解容器镜像层(1)
引言 容器非常神奇。它们允许简单的进程表现得像虚拟机。在这种优雅的底层是一组模式和实践,最终使一切运作起来。在设计的根本是层。层是存储和分发容器化文件系统内容的基本方式。这种设计既出人意料地简单,同时又非常强大。在今天的帖子[1]中…...
vue3设置全局变量并获取 全局响应式变量 窗口大小
设置 js文件统一管理全局变量 方法1 app provide() 全局提供变量 通过inject()使用 方法2 app实例配置全局变量 获取 通过 getCurrentInstance.appContext.config.globalProperties.$innerWidth访问到 code import { ref } from vue export const useGlobalState () > {c…...
Java——面向对象进阶(一)
前言 面向对象进阶(一):static,继承,this和super关键字 文章目录 一、static1.1 静态变量1.2 静态方法1.3 静态变量和静态方法在内存中 二、继承2.1 概念2.2 继承的特点和能继承什么2.3 继承中的重写2.4 this和super关键字 一、static 在 Jav…...
JDBC是什么?它如何工作?
一、JDBC概述 JDBC(Java Database Connectivity)是Java语言与数据库之间进行交互的API。它允许Java程序通过SQL(结构化查询语言)来执行各种数据库操作,如查询、更新、删除等。JDBC是Java应用程序访问数据库的标准方式…...
Qt:QDialogButtonBox的使用
QDialogButtonBox是Qt自带的按钮箱,通过枚举QDialogButtonBox::ButtonRole可以添加Qt定义按钮,或者通过方法QDialogButtonBox::addButton添加自定义的按钮。 // 自定义按钮。 button_box_ new QDialogButtonBox(QDialogButtonBox::Ok | QDialogButtonB…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...
【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
