页面设计的基本流程
设定文档类型
字符编码
css样式引入
内容布局div+css
js引入（在body最后引入）
填充内容
素材管理
1. 设定文档的内容：
告诉浏览器解析html的规范（主要是因为不同版本可能包含不同的标签，需要对应解析）
注意，<!DOCTYPE>没有结束标签，放在文档的最开始
<!DOCTYPE html>--html5
2. 字符编码
HTML文档尽早指定字符编码，可以让浏览器立刻开始执行脚本，浏览器必须知道使用何种字符集才能更快更准确的显示文档流中的内容。如果你不能对web服务器配置进行修改，又需要通过meta标签指定编码，要确保你用于指定编码的meta标签是文档中head标签的第一个子元 素。浏览器会在文档的前1024字节中寻找字符编码参数，因此为了避免性能损耗，编码参数在文档头部越早出现越好。始终指定文档类型：在浏览器开始检查字符编码设定前，它们必须先检测将被处理的文档是什么类型。如果没有在头信息或meta标签中指定文档类型（content-type），浏览器就会通过很复杂的算法去“嗅探”文档的类型。这个过程会造成额外的延迟，而且还会带来安全漏洞。（告诉浏览器是html，但是是何种规范解析该html是doctype要做的工作）<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
3. css样式的引入
<link href=“./global.css" rel="stylesheet" type="text/css" />
样式优先级由低到高
2. 素材的安排：素材通常在项目里使用相对路径，可以方便部署和修改，一改全改，其中当前目录使用./wenjian,上一级 目录下使用../wenjian，再网上一级../../wenjian
3.块级元素和内联元素的区别和联系：
块级元素：在浏览器中显示时，一般都会以新行开始，通常的块级元素有（div，p，h，ul，table），对应的css样式 是 display：block
内联元素：都是不会以新行开始，直到该行被排满为止，通常有span，td， a，img等，对应的css样式是display： inline
特别注意：内联元素占空间但是不会定义空间，就像是定义span的宽高是不会起作用的，但是可以通过别的内部内容撑开，内联元素里面不能使用div内联（inline）对象的宽度取决于其内部元素的宽度(width)与填充(padding)值之和，不可直接指定其宽度与高度，相邻的两个内联对象会排在同一行上,不会从新行开始
div可以成为块级元素，使用display：inline
另外，使用relative是相对于自己的文档流位置的相对偏移，absolute，脱离文档流，是以父元素容器作为参照进行偏移
的。
fixed是相对于浏览器的窗口的absolute，例如淘宝客服
5. 处理居中操作：
一个是margin：0 auto水平居中
一个是line-height:(想居中的容器同高)，注意：如果先起作用，需要设置容器的height并且设置line-height相同。
扫一扫
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
