自学web的第14天

        

1、项目文件夹

• 根据项目名称创建项目文件夹。如：ushop

• html、css、img、js 文件均归档至项目名称目录中

• HTML 文件、根据页面内容以英文命名，首页或只有一个页面通常命名为index.html

• css 文件以英文命名

  • 公用样式通常命名为reset.css（常用的浏览器样式）

  • public.css（多个页面时的公共模块的样式，或多次重复使用字体、字号、间距等样式）

  • 首页通常命名为index.css, 其他页面依实际模块或功能需求命名

• 图片文件命名尽量与其模块样式名称保持关联，尽量使用小写命名

  • （如登录框的背景与图片：login_bg.jpg、login_user_ico.gif 等）

  • 常用图片格式 gif 、png 、jpg

  • 2、HTML 书写规范

  • 2.1 文档类型声明及编码

  • 统一为 html5 声明类型

  • 编码统一为 utf-8

  • 2.2 书写规范

  • 书写时根据页面结构实现层次分明的缩进

  • 标签必合

  • 属性值必须用双引号包括

  • 通常小写字母

  • 2.3 语义化 HTML

  • 根据页面结构选择合适的标签

    • 如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用p，结构简章重复的部分用 ul、li标签

    • 页面中重要的图片内容要添加 alt=“”替换文本，以便图片丢失时，用户可以根据替换文本了解页面内容

  • 根据模块内容定义class和id名称

    • 如包含logo和搜索框等在内的头部标签用.header,包含联系信息，版权等的模块用footer或copyright

  • 2.4 合理嵌套HTML标签

  • 合理嵌套HTML标签，

    • ul和li是固定嵌套，ul直接子元素必须是li;

    • dl和dt,dd是固定嵌套，dl的直接子元素必须是dl和dd;

    • p标签不允许嵌套p标签;a标签不允许嵌套

    • a标签和其他交互性元素比如button

  • 尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能

  • 2.5 保证结构与表现相分离

  • CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。

  • 在页面中尽量避免使用行内样式即 style=“”或行间属性，尽量使用 class 或者 id

  • 编码统一为 utf-8

    3.2 书写代码前

  • 确定版心（页面有效区）

  • 考虑样式表规划，提高样式重复使用率

  • 提前沟通页面中模棱两可的需求和交互效果，方便后续合理布局

  • 布局时考虑后续交互效果处理的便利性，必要时预留出交互效果中涉及到的样式类（如鼠标点击后的样式等）

  • 3.3 书写代码时

  • 添加注释：应该为大区块样式添加注释 ，小区块适量注释

  • class 与 id 的命名

    • 命名要语义化、简明化

    • CSS命名时要加前缀如：.zg_top{}

    • 常用命名方法一：样式名称由小写英文、数字和 _ 来组合命名，如 top_left、top_nav;

    • 避免使用中文拼音，尽量使用简易的单词组合

    • 常用命名方法二：首字母大写，驼峰式命名，如：topNav

  • 代码格式

  • 保持代码缩进与格式

  • 建议单行书写

  • 选择器

  • 尽可能不使用通配符选择器 *

  • 合理使用id选择器（页面中唯 一的元素，如头部，底部）

  • 避免使用标签限定id或者类选择器

    • 如：div#test { } p.box {}

  • 避免层集嵌套

  • 3.4 css 属性书写顺序

  • 建议遵循：

  • 特殊(文档流相关)属性 –> 盒模型 –> 装饰属性 –>内容排版相关

    1. 文档流相关属性（display、 position、float、clear、 visibility）

    2. 盒模型相关属性（width、 height、margin、padding、border）

    3. 装饰性相关属性（background、opacity、cursor）

    4. 内容排版相关属性（color、font、line-height、text-align、text-indent、vertical-align）

  • 书写代码过程中要兼容兼容问题，对熟知的兼容问题在书写代码过程中一并处理。

  • 3、css 书写规范

    3.1 编码