如何提升我的HTML&CSS技术，编写有结构的代码_html/css_WEB-ITnose

前言

之前写了四篇HTML和CSS的知识点，也相当于是一个知识点汇总。有需要的可以收藏，平时开发过程中应该会遇到这些点，到时候再查看这些博客可能更容易理解。从这篇开始更多的介绍开发过程经常让人头痛的前端问题，以及如何编写性能比较高的前端代码。本人也是刚入门前端的小菜，希望各位前端大牛多多纠正内容中写的不对的地方，让我提升的更快。最近看到博客园中好多前端大牛，都是在各大bat公司工作，这也是我做开发的梦想。。。

导航

1.基础篇

这些HTML、CSS知识点，面试和平时开发都需要 No1-No4 （知识点：HTML、CSS、盒子模型、内容布局）

这些HTML、CSS知识点，面试和平时开发都需要 No5-No7 （知识点：文字设置、设置背景、数据列表）

这些HTML、CSS知识点，面试和平时开发都需要 No8-No9 （知识点：媒体操作、构建表单）

这些HTML、CSS知识点，面试和平时开发都需要 No10-No11 （知识点：表格操作、代码编写规则）

2.进阶篇

如何提升我的HTML&CSS技术，编写有结构的代码

No1.CSS展现和组织

1.CSS结构化

（1）比较经典的样式架构：我们经常看到的web系统样式文件一般都只包含index.css或者base.css，但在实际开发过程中我们应该尽量按模块分组CSS样式，把同类的样式放到一个模块下。虽然模块化后增加了很多css文件，但当我们发布版本的时候，可以把所有的css文件压缩到一个css文件中，这样可提升页面的加载速度。下面是一个比较经典的CSS样式架构：

# Base //基础样式– normalize.css  //标准化样式– layout.css  //流布局样式– typography.css  //段落样式# Components //组件样式– alerts.css – buttons.css– forms.css– list.css– nav.css– tables.css# Modules 模块样式– aside.css //边栏样式– footer.css //底部样式– header.css //头部样式

（2）模块化CSS架构：包含Base、Layout、Module、State、Theme模块。每个模块的意义如下所示：

# Base（核心元素style，覆盖body、form等默认样式）# Layout（区别不同元素的size和grid样式）# Module（个别的特别页面样式）# State（基于各种事件，提供不同的状态样式，例如:hover等）# Theme（基于skin、look、feel的样式）

2.如何提升页面加载速度

（1）选择器写法：由于浏览器会渲染CSS样式名称路径上的每一个选择器，所以应该保持简短的选择器路径，减少渲染，提升页面加载速度。

（2）减小或压缩文件：在文件通过http协议传输时，可通过gzip方式压缩html、css以及js文件，缩减流量。不同的http服务器都提供了gzip压缩传输。

（3）减少HTTP请求-减少文件数量：把相似的文件结合成一个文件，例如把多个CSS文件压缩成一个CSS文件、把多个JS文件压缩成一个JS文件，这样每次只用发送一次http请求。

（4）减少HTTP请求-在正确的位置加载文件：CSS文件应该放在head的开头加载，JS文件应该放在页面的最后位置（body关闭标示