第二十六章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 端要设置在新窗口打开属性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24151.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NFT Insider #133:苏富比将拍卖BAYC系列NFT,Taiko创世NFT系列已上线

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members &#xff08;https://twitter.com/WHALEMembers&#xff09;、BeepCrypto &#xff08;https://twitter.com/beep_crypto&#xff09;联合出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜…

立创·天空星开发板-GD32F407VE-EXTI

本文以 立创天空星开发板-GD32F407VET6-青春版 作为学习的板子&#xff0c;记录学习笔记。 立创天空星开发板-GD32F407VE-EXTI 中断硬件触发中断示例软件触发中断示例 中断 中断分为内部中断和外部中断 外部中断是由外部设备&#xff08;如按键、传感器、通信接口等&#xff09…

rollup.js(入门篇)

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

如何在Python中处理时间和日期

在Python中处理时间和日期&#xff0c;我们通常使用内置的datetime模块。这个模块提供了类来操作日期和时间&#xff0c;包括date、time、datetime、timedelta以及tzinfo。以下是datetime模块的一些基本用法&#xff1a; 1. 获取当前日期和时间 python复制代码 from datetime…

Linux编程for、while循环if判断以及case语句用法

简介 语法描述if条件语句if else条件判断语句if else-if else多条件判断语句for循环执行命令while循环执行命令until直到条件为真时停止循环case ... esac多选择语句break跳出循环continue跳出当前循环 1. for 循环 for语句&#xff0c;定量循环&#xff0c;可以遍历一个列表…

一文读懂AI时代GPU的内存新宠-HBM

一文读懂GPU最强辅助&#xff1a;HBM HBM&#xff0c;即高带宽内存&#xff0c;是一项领先的3D堆叠DRAM技术&#xff0c;专为高性能计算和图形处理单元&#xff08;GPU&#xff09;设计&#xff0c;满足其对内存带宽和容量的极致需求。该技术由AMD与海力士携手研发&#xff0c;…

Apache安装教程

目录 一、Apache知识点 Apache服务简介 Apache下载网址 Apache的主要特点 二、Apache服务的搭建 1. 关闭防火墙 2. 安装依赖环境以及编译工具 3. 将apache安装包拖入xshell内 4. 解压压缩包 5. 进入httpd主包 6. 指定安装路径&#xff0c;启用字符集支持等 7. 优化执…

重庆工商大学社会工作专业试题及答案,分享几个实用搜题和学习工具 #媒体#学习方法#知识分享

搜题软件一般都是通过识别题目内容搜索出问题的答案&#xff0c;当识别内容不正确或搜索不到答案时&#xff0c;又得重新到其他软件进行重复的操作&#xff0c;很是麻烦。所以我们可以使用专业的识别工具&#xff0c;对题目内容进行识别&#xff0c;然后把提取出来的内容单独保…

流量录制学习

AREX Cloud | AREX (arextest.com) 流量录制学习&#xff0c;比vivo的moonbox要好用

android 异屏同显二.

android主屏: android副屏 | | mediaProjection ----SufaceTextrue ---Open…

【数据结构】平衡二叉树左旋右旋与红黑树

平衡二叉树左旋右旋与红黑树 平衡二叉树 定义 平衡二叉树是二叉搜索树的一种特殊形式。二叉搜索树&#xff08;Binary Search Tree&#xff0c;BST&#xff09;是一种具有以下性质的二叉树&#xff1a; 对于树中的每个节点&#xff0c;其左子树中的所有节点都小于该节点的值…

【vector模拟实现】附加代码讲解

vector模拟实现 一、看源代码简单实现1. push_backcapacity&#xff08;容量&#xff09;sizereserve&#xff08;扩容&#xff09;operator[ ] &#xff08;元素访问&#xff09; 2. pop_back3. itorator&#xff08;迭代器&#xff09;4.insert & erase &#xff08;头插…

哈夫曼树的创建

要了解哈夫曼树&#xff0c;可以先了解一下哈夫曼编码&#xff0c;假设我们有几个字母&#xff0c;他们的出现频率是A: 1 B: 2 C: 3 D: 4 E: 5 F: 6 G: 7。那么如果想要压缩数据的同时让访问更加快捷&#xff0c;就要让频率高的字母离根节点比较进&#xff0c;容易访问&#xf…

立创·天空星开发板-GD32F407VE-GPIO

本文以 立创天空星开发板-GD32F407VET6-青春版 作为学习的板子&#xff0c;记录学习笔记。 立创天空星开发板-GD32F407VE-GPIO 基础概念三极管MOS管 GPIO输出模式输出线与GPIO输入模式GPIO点灯 基础概念 GPIO&#xff0c;全称为“通用输入/输出”&#xff08;General Purpose …

算法金 | 这次终于能把张量(Tensor)搞清楚了!

大侠幸会&#xff0c;在下全网同名[算法金] 0 基础转 AI 上岸&#xff0c;多个算法赛 Top [日更万日&#xff0c;让更多人享受智能乐趣] 1. 张量&#xff08;Tensor&#xff09;基础概念 1.1 张量的定义与重要性 张量是深度学习中用于表示数据的核心结构&#xff0c;它可以视…

《帝国时代 III:决定版》秘籍 怎么在苹果电脑上玩《帝国时代 III:决定版》

《帝国时代 III&#xff1a;决定版》是一款让玩家沉浸于历史长河体验从大航海时代到工业革命时期的游戏。下面我们来看看《帝国时代 III&#xff1a;决定版》是什么类型的游戏&#xff0c;《帝国时代 III&#xff1a;决定版》Mac安装教程的相关内容。 一、《帝国时代 III&…

【BOM02】本地存储

一&#xff1a;什么是本地存储 数据存储在用户浏览器中&#xff0c;用户设置、读取方便&#xff0c;同时页面刷新时不会丢失数据。存储在浏览器中数据约5M&#xff0c;分为sessionStorage和localStorage两种存储方式 二&#xff1a;localStorage存储 作用 将数据永久存储在…

opencv实战小结-银行卡号识别

实战1-银行卡号识别 项目来源&#xff1a;opencv入门 项目目的&#xff1a;识别传入的银行卡照片中的卡号 难点&#xff1a;银行卡上会有一些干扰项&#xff0c;如何排除这些干扰项&#xff0c;并且打印正确的号码是一个问题 最终效果如上图 实现这样的功能需要以下几个步骤…

基于Amazon Linux使用pip安装certbot并使用Apache配置证书的完整步骤

配置证书 1. 更新系统和安装必要的软件包 首先&#xff0c;确保系统和包管理器是最新的&#xff1a; sudo dnf update -y sudo dnf install -y python3 python3-pip python3-virtualenv httpd mod_ssl2. 创建并激活虚拟环境 为了避免依赖冲突&#xff0c;使用virtualenv创建…

算法导论实战(三)(算法导论习题第二十四章)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;算法启示录 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 前言 第二十四章 24.1-3 24.1-4 2…