首页 > 其他分享 >HTML与CSS规范

HTML与CSS规范

时间：2023-05-08 15:55:07浏览次数：27  
标签：示例 标签 规范 height HTML 强制 font CSS

此规范主要实现目标：代码一致性和最佳实践.降低代码的成本同时改善多人协作的效率。同时遵守最佳实践，确保页面得到最佳优化和高效代码。

命名规则

  • 项目命名 全部采用小写方式， 以下划线分隔。 例如:my_project_name
  • 目录命名 参照项目命名规则 常用css/images/js/styles
  • JS文件命名 参照项目命名规则 例如 account_check.js
  • CSS文件命名 参照项目命名规则 例如 index_footer.css

HTML编码规范

基本原则

文档类型

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。

<!DOCTYPE html>

字符编码

  • 以无 BOM 的 utf-8 编码作为文件格式

  • 指定字符编码的 meta 必须是 head 的第一个直接子元素

    ......

IE兼容模式

优先使用最新版本的IE 和 Chrome 内核 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

SEO优化

SEO处理方便客户进行网站推广和优化，必须是前端开发人员必须重点处理

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- SEO 相关信息-->
    <title>网站标题</title>
    <meta name="keywords" content="关键字">
    <meta name="description" content="描述">
</head>

viewport

  • viewport:一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容
  • width: 浏览器宽度，输出设备中的页面可见区域宽度
  • device-width: 设备分辨率宽度，输出设备的屏幕可见宽度
  • initial-scale: 初始缩放比例
  • maximum-scale: 最大缩放比例

为移动端设备优化，设置可见区域的宽度和初始缩放比例 <meta name="viewport" content="width=device-width, initial-scale=1.0">

IOS图标

  • apple-touch-icon 图片自动处理成圆角和高光等效果;

  • apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图 可参考如下:

推荐的HEAD模板

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>标题</title>
    <meta name="description" content="不超过150个字符">
    <meta name="keywords" content="关键字">
    <meta name="author" content="其他相关信息">

    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- iOS 图标 -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
</head>

命名规则

  • [强制] class须单词全字母小写，单词间以- 分隔

  • [强制] class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名 示例:

    (去掉'-')

  • [强制] 元素 id 必须保证页面唯一。

  • [建议] id 建议单词全字母小写，单词间以 - 分隔。同项目必须保持风格一致。

  • [建议] id、class 命名，在避免冲突并描述清楚的前提下尽可能短。 示例:

标签

  • [强制] 标签名必须使用小写字母 示例：

    Hello StyleGuide!

    Hello StyleGuide!

  • [强制] 对于无需自闭合的标签，不允许自闭合 常见有: 常见无需自闭合标签有 input、br、img、hr 等。

  • [强制] 对 HTML5 要求闭合的标签必须闭合。 示例：

    • first

    • second

    • first

    • second

  • [强制] 标签使用必须符合标签嵌套规则 解释： div 不得置于 p 中，tbody 必须置于 table 中。

    下面是常见标签语义

    p - 段落 h1,h2,h3,h4,h5,h6 - 层级标题 strong,em - 强调 ins - 插入 del - 删除 abbr - 缩写 code - 代码标识 cite - 引述来源作品的标题 q - 引用 blockquote - 一段或长篇引用 ul - 无序列表 ol - 有序列表 dl,dt,dd - 定义列表

  • [建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局

CSS编码规范

基本原则

文件编码

CSS文件使用无 BOM 的 UTF-8 编码

空格

[强制] 选择器 与 { 之间必须包含空格 示例:

.selector {
}

属性

[强制] 属性定义必须另起一行。

示例:

<!-- good -->
.selector {
    margin: 0;
    padding: 0;
}

<!-- bad -->
.selector { margin: 0; padding: 0; }

[强制] 属性定义后必须以分号结尾。 示例:

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

属性书写顺序

[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。 解释:

  • Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
  • Box Model 相关属性包括：border / margin / padding / width / height 等
  • Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
  • Visual 相关属性包括：background / color / transition / list-style 等

示例:

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
}

清除浮动

[建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。 解释： 触发 BFC 的方式很多，常见的有： + float 非 none + position 非 static + overflow 非 visible

如希望使用更小副作用的清除浮动方法，参见 [A new micro clearfix hack][1] 一文。 另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。

!important

[建议] 尽量不使用 !important 声明。 [建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。 解释： 必须注意的是，仅在设计上确实不允许任何其它场景覆盖样式 时，才使用内联的 !important 样式。

文字

[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。 解释: 所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：

![常见Family Name][2]

示例:

h1 {
    font-family: "Microsoft YaHei";
}

[强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。 解释: 由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。

[强制] font-weight 属性必须使用数值方式描述。 解释: + CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。 + 浏览器本身使用一系列启发式规则来进行匹配，在 <700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。

[建议] line-height 在定义文本段落时，应使用数值

解释: + 将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置 line-height。 + 当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。

开发总结

1.在页面中有相关文章或详情的布局中，必须提前写入 <a href="#"></a>。 2.美工在设计过程中，通常在考虑<ul><li>,<table><tr>,<select><option>等操作时，为后台进行遍历操作提供方便。同时尽量在注释中说明某些属性的作用。 示例:

<style>
    .item {
        height:20px;
        line-height:20px
    }
    .current {
        color:red
    }
</style>
<ul>
    <!--默认第一个使用current来进行高亮显示-->
    <li class="current item">导航1</li>
    <li class="item">导航2</li>
    <li class="item">导航3</li>
    <li class="item">导航4</li>
</ul>

3.公用头部与页脚规范。在美工设计页面时，要考虑后模板页提取方便。通常将常用的头部和页脚进行统一处理。避免在头部和页脚引入其他部分造成耦合，不利于后台对页面进行拆分。

1.通常头部一般包括 导航条、顶部二维码、联系电话 2.尾部包括友情链接、底部新闻导航、关于我们等信息 3.通常只有在首页使用的banner焦点图，广告图不允许放入到头部

4.多个栏目遍历时候，尽量避免出现要计算折行的问题。 示例:

<!--尽量不要出现这种布局-->
<table>
    <tr>
        <td>栏目1</td>
        <td>栏目2</td>
    </tr>
    <tr>
        <td>栏目3</td>
        <td>栏目4</td>
    </tr>
</table>

<!--推荐布局-->
<table>
    <tr>
        <td>栏目1</td>
        <td>栏目2</td>
        <td>栏目3</td>
        <td>栏目4</td>
    </tr>
</table>

5.使用基本清除样式reset.css文件。可参考 [网易css reset重置样式][3]

包括常见的margin,padding,a(text-decoration,color)等。

6.注释。CSS注释需要分块说明每段的作用。HTML需要注释说明每段大体的功能与作用。 示例:

<!--推荐注释-->

<!--这里是焦点图-->
<div id="banner">
    <img src=""/>
    <img src=""/>
</div>
<!--焦点图 end -->

<!--页脚 包括友情链接等信息-->
<div id="footer">
    <a href="">链接1</a>
    <a href="">链接2</a>
</div>
<!--页脚 end -->

<style>
/*焦点图样式*/
#banner {
    width:120px;
    height:200px;
    color:#fff;
}

/*页脚样式*/
#footer {
    color:#f0f0f0;
    font-size:12px;
}
</style>

标签：示例,标签,规范,height,HTML,强制,font,CSS
From： https://www.cnblogs.com/zhanlibiao/p/17381009.html

相关文章

  • CSS内外边距属性
    <head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title></head><styletype="text/css">h1{ background-color:green; padding-top:20px; padd......
  • css 文字内容过长和下一个信息项重叠解决办法(uniapp)
    1.把固定高度注释掉，自动调整高度.cardBox{ padding:20rpx30rpx; .item{ //width:calc(100%-40rpx); //height:398rpx; padding:10rpx20rpx0rpx; margin-bottom:25rpx; border-radius:8rpx; box-shadow:0rpx4rpx16rpx2rpx#BDC0C6; background:......
  • css 背景色渐变 line-gradient
    background-image:linear-gradient(-55deg,#07265d,#0d3d92),linear-gradient(#2d323b,#2d323b);......
  • html5 svg 圆形进度条
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>HTML5中的SVG属性实现圆形进度条效果</title><style>#a{color:red;}</style></head><body><......
  • 软件开发目录规范
    软件开发目录规范为了提高程序的可读性与可维护性，我们应该为软件设计良好的目录结构，这与规范的编码风格同等重要。软件的目录规范并无硬性标准，只要清晰可读即可，假设你的软件名为foo，笔者推荐目录结构如下CopyFoo/|--core/||--core.py||--api/||--api.py||--db......
  • CSS选择器
      BeautifulSoup还提供了另外一种选择器——CSS选择器，所以CSS选择器是基于BeautifulSoup的库来实现的。使用CSS选择器只需要调用select方法，传入相应的CSS选择器即可。下面我们通过一个实例来看一下CSS选择有哪些具体用法。  代码案例如下：html='<divclass="panel"><d......
  • HTML5-创建HTML文档
    下述内容主要讲述了《HTML5权威指南》第7章关于“创建HTML文档”。HTML5中的一个主要变化是：将元素的语义与元素对其内容呈现结果的影响分开。从原理上讲这合乎情理。HTML元素负责文档内容的结构和含义，内容的呈现则由应用于元素上的CSS样式控制。下面介绍最基础的HTML元素：文档元素和......
  • 小米商城主页展示HTML+CSS
    大佬们呀，花了好几天的时间总算是看着页面展示可以了，求赐教！小米商城主页，对大佬来说肯定简单爆了，我抄写了好久呀，总是有一点点的小问题，还搞不明白主要是一个静态的小米商城页面，HTML前端代码不复杂，一堆的div和ul、li就没问题了，主要是css代码搞不懂导致显示不正常话不多说，直接上代码......
  • Java javadoc 标准和注释规范
    （一）基本定义Javadoc是Sun公司提供的一个技术，从程序源代码中抽取类、方法、成员等注释形成一个和源代码配套的API帮助文档（二）使用方式javadoc源文件名.javajavadoc-d文档存放目录源文件名.java通过IDEA生成Javadoc：Tools->GenerateJavaDoc（三）基本标签标签说明@......
  • css3 flex弹性布局详解
    一、flexbox弹性盒子2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。二、基本概念Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99