命名

1.驼峰式命名法：

(1) 大驼峰命名法：首字母大写。
(2) 小驼峰命名法：首字母小写。

2.文件资源命名：

(1) 不得含有空格。
(2) 建议只使用小写字母，除了某些为说明文件的情况（如 README，LICENSE 等），一般均不使用大写字母。
(3) 包含多个单词时，单词间使用半角的连词线（-）分割。
(4) 引入资源使用相对路径，一般情况下不要指定资源所带的具体协议。

3.变量命名：

(1) 命名方式：小驼峰式命名。
(2) 命名规范：类型+对象（如：numTitle）。

4.函数：

(1) 命名方式：小驼峰式命名。
(2) 命名规则：前缀为动词（如：getName）。

5.常量：

(1) 命名方式：全部大写。
(2) 命名规范：使用大写字母和下划线组合命名，使用下划线来分割单词。

6.类的成员：

(1) 公共属性和方法：命名方式同变量命名，即小驼峰式命名。
(2) 私有属性和方法：前缀为下划线，后面为与公共属性和方法一样的命名方式，小驼峰式。

7.注释：

(1) 单行注释：双斜杠与注释文字之间保留一个空格。
(2) 代码后注释：双斜线与代码之间，与注释文字之间均保留一个空格。
(3) 多行注释：开始与结束至少三行，第一行为 /* ，最后行为 */ ，其他行为 * 开始，注释文字均与 * 保留一个空格。
(4) 函数（方法）注释：
1) 语法：

 /*** 函数说明* @关键字*/

2) 常用注释关键字：
@param（参数）、@return（返回值）、@author（作者）、@version（版本）、@example（测试）

规范

1.HTML 规范：

(1) 文档规范：使用 HTML5 的文档声明类型 <!DOCTYPE html>。
(2) 脚本加载：所有浏览器推荐，CSS 放在 <head> 里，JS 放在 HTML 代码下方，<body> 内部。
(3) 语义化：根据元素被创造出的初始意义使用，不要单一的使用 <div> 和 <span>，灵活使用正确的标签。
(4) alt 属性不为空。
(5) 结构、表现、行为三者分离。尽量在文档和模板中只包含结构性的 HTML；表现代码移入样式表中；动作行为移入脚本中；为了使三者之间的联系尽可能小，在文档和模板中应尽量少的引入样式和脚本文件。
(6) HTML 只关注内容。HTML 只显示展示内容信息；尽量不要引入特定的 HTML 结构来解决视觉设计效果；尽量不要将 <img> 作为专门做视觉设计的元素，<img> 与 <svg> 使用时的意义为它呈现了与内容相关的信息。

2.CSS 规范：

(1) id 与 class 的命名可以反映元素目的和用途。
(2) CSS 选择器中避免使用标签名。
(3) 尽量使用子选择器，如 .header>ul{...}。
(4) 尽量使用缩写属性，如：background: #ffffff url(a.png) no-repeat fixed top;。
(5) 0后尽量不带单位，如：margin: 0;。
(6) 属性顺序格式：结构性属性(display -> position -> overflow、float、clear -> margin、padding)->表现性属性(background、border -> font、text)。

CSS 布局

1.传统盒模型：

(1) 文档流布局：最基本的布局，按照文档的顺序显示。
(2) 浮动布局：使用 float 属性，使元素脱离文档流显示。
(3) 定位布局：通过 position 属性进行定位，属性值分别有：static、relative、absolute、fixed。
1) static：元素块正常生成。
2) relative：相对定位。相对于元素的原始位置进行定位。元素偏移某个距离，其原本空间仍保留。
3) absolute：绝对定位。相对于其包含块定位，也可以说是相对于除 static 定位外第一个父元素进行定位，元素在原正常文档流中所占空间会关闭，不占位。
4) fixed: 相对于浏览器窗口进行定位。

2.常用CSS布局：

(1) 固定宽度水平居中：
1) margin: 0 auto;
2) 绝对定位居中：父容器相对定位，子容器绝对定位，top: 50%;left: 50%; margin-left 和 margin-top 均设为宽高的一半的负值;
3) 使用 transform（需要注意的是浏览器兼容 ie9+ 不适宜用于移动开发）：父容器相对定位，子容器绝对定位，top: 50%;left: 50%;transform: translate(-50%,-50%);
(2) 未知宽度水平居中：
子容器设为 inline-block 属性，父容器设置 text-align: center;
(3) 多个块级元素水平居中：
1) 子容器设为 inline-block 属性，父容器设置 text-align: center;
2) flex 布局：父容器设置为 display: flex;justify-content: center; 即将子元素在主轴上的对齐方式设置为居中。
(4) 单行元素垂直居中：将子元素的行高设置等于高度，即 height 与 line-height 设置为相等。
(5) 多行元素垂直居中：
table-cell 方式：父容器设置为 display: table; 子容器设置为 display: table-cell;vertical-align: middle;。

3.flex 布局：

(1) 弹性布局，使用方法是将 display 属性设置为 flex，也可以设置行内的 flex。
(2) 注意：
1) webkit 内核的浏览器要加上 -webkit 前缀。
2) 设为 flex 布局后，子元素的 float、clear 与 vertical-align 属性均失效。
(3) flex 布局，父容器属性：
1) flex-direction：主轴的方向。row(默认值，水平方向起点在左)、row-reverse(水平方向起点在右)、column(垂直方向起点在上)、column-reverse(垂直方向起点在下)。
2) flex-wrap：超出父容器子容器的排列样式。nowrap(默认值，不换行)、wrap(换行，第一行在上)、wrap-reverse(换行，第一行在下)。
3) flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
4) justify-content：子容器在主轴的排列方向。flex-start(默认值，左对齐)、flex-end(右对齐)、center(居中)、space-between(两端对齐，间隔相等)、space-around(两侧间隔相等)。
5) align-items：子容器在交叉轴的排列方向。flex-start(交叉轴的起点对齐)、flex-end(交叉轴的终点对齐)、center(交叉轴的中点对齐)、baseline(项目第一行文字的基线对齐)、stretch(默认值，未设置高度或设为auto的将占满整个容器的高度)。
6) align-content：定义了多根轴线的对齐方式，一根轴线该属性失效。flex-start(交叉轴的起点对齐)、flex-end(交叉轴的终点对齐)、center(交叉轴的中点对齐)、space-between(交叉轴的两端对齐，轴线间隔平均分布)、space-around(轴线两侧间隔相等)、stretch(默认值，轴线占满整个交叉轴)。
(4) flex 布局，子容器属性：
1) order：子容器的排列顺序。
2) flex-grow：子容器剩余空间的拉伸比例。
3) flex-shrink：子容器超出空间的压缩比例，此属性生效，父容器属性要设为nowrap。
4) flex-basis：子容器在不伸缩情况下的原始尺寸。
5) flex：子元素的 flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写。
6) align-self：允许单个项目有与其他项目不一样的对齐方式。可覆盖父容器 align-items 属性，默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

4.grid 网格布局：

(1) 网格布局，使用方法是通过 display 属性设置属性值为 grid 或 inline-grid 或 subgrid。
(2) 注意：
1) 当元素设置了网格布局，column、float、clear、vertical-align 属性无效。
2) 设置网格布局后，网格容器的所有子元素会自动变成网格项目(grid item)，然后设置列(grid-template-columns)和行(grid-template-rows)的大小，设置 grid-template-columns 有多少个参数，生成的 grid 列表就有多少列，没有设置 grid-template-columns，则默认只有一列，宽度为父元素的100%。
(3) css fr 单位：一个新出的自适应单位，被用于在一系列长度值中分配剩余空间。
(4) 创建行或列的最小或最大尺寸：minmax() 函数。
第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受 auto 值。auto 值允许网格轨道基于内容的尺寸拉伸或挤压。
(5) 创建重复的网格轨道：repeat() 属性。
创建相等尺寸的网格项目和多个网格项目。第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。
(6) 创建列与列之间的距离：grid-column-gap。
(7) 创建行与行之间的距离：grid-row-gap。
(8) 定义网格区域：grid-template-areas。
grid-template-areas 布局优势：在不设置高度的情况下（父容器和 grid-template-rows 的值，或者 grid-template-rows 设置为 auto 时，slider 和 content 的高度是一致的，并且会根据其内的高度自适应）。

网格布局举例：

html部分：

<div class="grid_container"><div class="header">header</div><div class="sidebar">sidebar</div><div class="content">content<ul><li>lists</li><li>lists</li><li>lists</li><li>lists</li><li>lists</li><li>lists</li></ul></div><div class="footer">footer</div>
</div>

css部分：

.grid_container {padding: 20px;text-align: center;font-size: 16px;color: #ffffff;display: grid;grid-column-gap: 5px;grid-row-gap: 5px;background-color: #FAE3D9;grid-template-areas: "header header" "sidebar content" "footer footer";grid-template-rows: auto;grid-template-columns: 200px;
}
.header {grid-area: header;padding: 20px;background-color: #61C0BF;
}
.sidebar {grid-area: sidebar;padding: 15px;background-color: #BBDED6;
}
.content {grid-area: content;padding: 15px;background-color: #FFB6B9;
}
.content>ul li {padding: 3px 0;text-align: left;padding-left: 30px;box-sizing: border-box;
}
.footer {grid-area: footer;padding: 20px;background-color: #61C0BF;
}

截图示意：

HTML、CSS知识学习与整理相关推荐

  1. html刷新css样式,让IE浏览器即时刷新CSS样式_HTML与CSS教程_电脑知识学习_培训之家...

    让IE浏览器即时刷新CSS样式为http://www.pxzj8.com整理发布,类型为HTML与CSS教程,本站还有更多关于html与css教程,css教程,html网页设计教程,css视频教程,c ...

  2. html控制h1不让换行的属性,CSS控制H1不换行_HTML与CSS教程_电脑知识学习_培训之家...

    CSS控制H1不换行为http://www.pxzj8.com整理发布,类型为HTML与CSS教程,本站还有更多关于html与css教程,css教程,html网页设计教程,css视频教程,css教程下 ...

  3. CSS 知识整理(三) 样式

    CSS 知识整理(三)  样式 目录 CSS 知识整理(三)  样式 一.字体 二.文本 三.列表 四.背景 一.字体 字体:font-famliy 字号:font-size 粗细:font-weig ...

  4. android线性布局快捷键,【整理】Android图形界面知识学习与总结之：Linear Layout线性布局...

    [背景] 之前已经学习了: 现在接着去学习: 整理如下: Linear Layout 1.LinearLayout是一个视图组合 2.LinearLayout中的子视图只能已单个方向排列,要么是水平, ...

  5. 超全PHP学习资源整理：入门到进阶系列

    PHP是少数几门在语言层面饱受诟病,但在实际开发和应用上却又让人无法撒手的语言之一.就好比路边摊小吃,一遍骂人家不卫生,一遍却又说:真香.所谓接地气,不外如此,大道理不说,PHP光是轮子多.市场占有率 ...

  6. PHP学习资源整理：入门到进阶全系列

    PHP是少数几门在语言层面饱受诟病,但在实际开发和应用上却又让人无法撒手的语言之一.就好比路边摊小吃,一遍骂不卫生,一遍却又说:真香.所谓接地气,不外如此,大道理不说,PHP光是轮子多.市场占有率高这 ...

  7. Javascript 基础知识学习

    Javascript 基础知识学习 参考自:https://www.w3cschool.cn/javascript/ javascript 简介 JavaScript 是互联网上最流行的脚本语言,这门 ...

  8. nodejs+vue+elementui课外知识学习网站

    语言 node.js 框架:Express 前端:Vue.js 数据库:mysql  数据库工具:Navicat 开发软件:VScode  前端nodejs+vue+elementui, 小学生课外知 ...

  9. linux操作系统学习网站整理(100个)

    linux操作系统学习网站整理(100个) 评选出的这100个优秀站点,将按照下述20个类别作以评介: (一) 文件下载 (二) 幽默娱乐 (三) 相关新闻 (四) 通用硬体 (五) 专用硬体 (六) ...

最新文章

  1. 牛客练习赛85 数学家的迷题 （带修莫队/线段树）
  2. JavaScript学习笔记：检测数组方法
  3. 适合vue的富文本框
  4. 简书 java jvm_详细介绍Java虚拟机（JVM）
  5. 产品经理之市场需求分析详解(非原创）
  6. 单体测试书的检查要点
  7. 如何使用MonoDevelop调试Unity3D脚本
  8. linuxcan接口测试
  9. MacBook上不显示外接硬盘未装载解决方法
  10. SVN打标签方法及在此过程中的问题处理
  11. Ubuntu Linux访问小米手机存储卡
  12. rrpp协议如何修改_RRPP配置注意事项
  13. crack-jar游戏之乐游
  14. 微信小程序显示折线图
  15. JavaFx的ScrollPane的面板以及滚动条的css的自定义化
  16. 计算机磁盘损坏问题与系统的重置和重装
  17. 163电子邮箱能免费注册吗？163电子邮件注册移动办公解决方案
  18. 使用scrapy爬虫,爬取17k小说网的案例-方法一
  19. 陆奇：冬天过后一定是春天，首先要活下来
  20. px和em、pt长度单位

热门文章

  1. 51CTO学院三周年,一起成长与奋斗的日子
  2. 所谓的创业分享，都是一堆骗人骗己的谎言?
  3. cactiez----监控windows主机 server 2008 r2
  4. 七日Python之路--第八天
  5. Android ListView 滚动翻页效果
  6. 每天工作四小时的程序员-转
  7. MAXIMO启动中心设置
  8. HBase major version number must be less than 2 for hbase-sink
  9. C#正则表达式:移除文本中所有方括号和其中的内容
  10. cpu子系统(优化)