当前位置: 首页 > news >正文

第二十六章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是一个缩写&#xff0c;其中“T”表示为网页定义标题&#xff0c;“D”表示为网页定义描述 description&#xff0c;“K”表示为搜索引擎定义关键词keywords。 1、<title&g…...

基于FPGA的AD5753(DAC数模转换器)的控制 II(SPI驱动)

基于FPGA的AD5753&#xff08;DAC数模转换器&#xff09;的控制 II&#xff08;已上板验证&#xff09; 语言 &#xff1a;Verilg HDL EDA工具&#xff1a;Vivado 基于FPGA的AD5753&#xff08;DAC数模转换器&#xff09;的控制 II&#xff08;已上板验证&#xff09;一、引言二…...

【全开源】Java同城服务同城信息同城任务发布平台小程序APP公众号源码

&#x1f4e2; 连接你我&#xff0c;让任务触手可及 &#x1f31f; 引言 在快节奏的现代生活中&#xff0c;我们时常需要寻找一些便捷的方式来处理生活中的琐事。同城任务发布平台系统应运而生&#xff0c;它为我们提供了一个高效、便捷的平台&#xff0c;让我们能够轻松发布…...

[Redis]List类型

列表类型来存储多个有序的字符串&#xff0c;a、b、c、d、e 五个元素从左到右组成了一个有序的列表&#xff0c;列表中的每个字符串称为元素&#xff0c;一个列表最多可以存储个元素。在 Redis 中&#xff0c;可以对列表两端插入&#xff08;push&#xff09;和弹出&#xff08…...

export 和 export default 的区别

在 JavaScript 中&#xff0c;export 和 export default 都是用于导出模块中的内容的关键字&#xff0c;但它们有一些区别&#xff1a; export: export 关键字用于导出多个变量、函数或对象。可以一次导出多个内容&#xff0c;并且在导入时需要使用对应的名称。例如&#xff1a…...

29网课交单平台 epay.php SQL注入漏洞复现

0x01 产品简介 29网课交单平台是一个专注于在线教育和知识付费领域的交单平台。该平台基于PHP开发,通过全开源修复和优化,为用户提供了高效、稳定、安全的在线学习和交易环境。作为知识付费系统的重要组成部分,充分利用了互联网的优势,为用户提供了便捷的支付方式、高效的…...

推荐ChatGPT4.0——Code Copilot辅助编程、Diagrams: Show Me绘制UML图、上传PDF并阅读分析

5月14日凌晨1点、太平洋时间的上午 10 点&#xff0c;OpenAI的GPT-4o的横空出世&#xff0c;再次巩固了其作为行业颠覆者的地位。GPT-4o的发布不仅仅是一个产品的揭晓&#xff0c;它更像是向世界宣告AI技术已迈入了一个全新的纪元&#xff0c;连OpenAI的领航者萨姆奥特曼也不禁…...

rollup.js(入门篇)

前沿 Rollup 是一个用于 JavaScript 的模块打包工具&#xff0c;它将小的代码片段编译成更大、更复杂的代码&#xff0c;例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式&#xff0c;而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许…...

【Spring Cloud Alibaba】开源组件Sentinel

目录 什么是Sentinel发展历史与Hystrix的异同 Sentinel可以做什么&#xff1f;Sentinel的功能Sentinel的开源生态Sentinel的用户安装Sentinel控制台预备环境准备Sentinel 分为两个部分:下载地址 项目集成Sentinel创建项目修改依赖信息添加启动注解添加配置信息在控制器类中新增…...

Android14 WMS-窗口绘制之relayoutWindow流程(一)-Client端

Android14 WMS-窗口添加流程(一)-Client端-CSDN博客 Android14 WMS-窗口添加流程(二)-Server端-CSDN博客 经过上述两个流程后&#xff0c;窗口的信息都已经传入了WMS端。 1. ViewRootImpl#setView 在窗口添加流程(一)中&#xff0c;有这个方法&#xff1a; http://aospxref…...

JVM学习-Jprofiler

JProfiler 基本概述 特点 使用方便&#xff0c;界面操作友好对被分析的应用影响小(提供模板)CPU&#xff0c;Tread&#xff0c;Memory分析功能尤其强大支持对jdbc,noSql,jsp,servlet,socket进行分析支持多种模式(离线、在线)的分析支持监控本地、远程JVM跨平台&#xff0c;拥…...

Skins

本主题解释如何将DevExpress主题/皮肤应用到应用程序中&#xff0c;如何允许用户在运行时在主题之间切换&#xff0c;如何自定义现有皮肤或创建自己的皮肤&#xff0c;等等。 WinForms订阅包括许多基本控件&#xff1a;按钮、复选框、表单、消息框、对话框、对话框等。 我们实现…...

【Meetup】探索Apache SeaTunnel的二次开发与实战案例

在数据科技快速演进的今天&#xff0c;业务场景的复杂化和数据量的激增&#xff0c;推动了大数据技术的迅速发展&#xff0c;在众多开源大数据处理工具中&#xff0c;Apache SeaTunnel以其强大的数据集成能力&#xff0c;成为众多企业的首选。 但随着应用深入&#xff0c;企业面…...

嵌入式Linux系统中RTC应用的操作详解

第一:RTC的作用以及时间简介 “RTC”的英文全称是Reul-Time Clock,翻译过来是实时时钟芯片.实时时钟芯片是日常生活中应用最为广泛的电子器件之一,它为人们或者电子系统提供精确的实时时间,实时时钟芯片通过引脚对外提供时间读写接口,通常内部带有电池,保证在外部系统关…...

Edge 工作区是什么?它都有哪些作用?

什么是工作区 Edge 工作区是什么&#xff1f;它是微软 Edge 浏览器中的一个功能&#xff0c;在帮助用户更好地组织和管理他们的浏览会话。通过工作区&#xff0c;用户可以创建多个独立的浏览环境&#xff0c;每个工作区内包含一组相关的标签页和浏览器设置。这使得用户能够根据…...

Docker|了解容器镜像层(1)

引言 容器非常神奇。它们允许简单的进程表现得像虚拟机。在这种优雅的底层是一组模式和实践&#xff0c;最终使一切运作起来。在设计的根本是层。层是存储和分发容器化文件系统内容的基本方式。这种设计既出人意料地简单&#xff0c;同时又非常强大。在今天的帖子[1]中&#xf…...

vue3设置全局变量并获取 全局响应式变量 窗口大小

设置 js文件统一管理全局变量 方法1 app provide() 全局提供变量 通过inject()使用 方法2 app实例配置全局变量 获取 通过 getCurrentInstance.appContext.config.globalProperties.$innerWidth访问到 code import { ref } from vue export const useGlobalState () > {c…...

Java——面向对象进阶(一)

前言 面向对象进阶(一)&#xff1a;static&#xff0c;继承&#xff0c;this和super关键字 文章目录 一、static1.1 静态变量1.2 静态方法1.3 静态变量和静态方法在内存中 二、继承2.1 概念2.2 继承的特点和能继承什么2.3 继承中的重写2.4 this和super关键字 一、static 在 Jav…...

JDBC是什么?它如何工作?

一、JDBC概述 JDBC&#xff08;Java Database Connectivity&#xff09;是Java语言与数据库之间进行交互的API。它允许Java程序通过SQL&#xff08;结构化查询语言&#xff09;来执行各种数据库操作&#xff0c;如查询、更新、删除等。JDBC是Java应用程序访问数据库的标准方式…...

Qt:QDialogButtonBox的使用

QDialogButtonBox是Qt自带的按钮箱&#xff0c;通过枚举QDialogButtonBox::ButtonRole可以添加Qt定义按钮&#xff0c;或者通过方法QDialogButtonBox::addButton添加自定义的按钮。 // 自定义按钮。 button_box_ new QDialogButtonBox(QDialogButtonBox::Ok | QDialogButtonB…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...