p { margin-bottom: 0.1in; line-height: 120%; }a:link { }code.cjk { font-family: "Droid Sans Fallback", monospace; }

1.网页由什么组成的

结构层：HTML 或 XHTML 之类的标记语言，负责搭建文档结构

 表现层：CSS ，负责文档的呈现效果

 行为层：Javascript 语言和 DOM，负责网页的动态功能

2、HTML框架，基本标签与表单标签

3、html中的标签元素：块级元素、内联元素(又叫行内元素)和内联块级元素。

 块级元素特点：

 1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（霸道，一个块级元素独占一行）

2. 元素的高度、宽度、行高以及顶和底边距都可设置

3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

设置display:block；可以将元素转换块级元素

内联元素特点：

1.和其他元素都在一行上

2.元素的高度、宽度及顶部和底部边距不可设置

3.元素的宽度就是它包含的文字或图片的宽度，不可改变

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>

设置display:inline;可以将块状元素转换为内联元素

内联块级元素特点：（同时具备内联元素、块级元素的特点）

1.和其他元素都在一行上

2.元素的高度、宽度、行高以及顶和底边距都可设置

常用的内联块状元素有：

<img>、<input>

display:inline-block；float:left / right；position：absolute/fixed;可以将元素设置为内联块级元素。

4、盒子模型

属性：内容(content)、内边距(padding)、边框(border)、外边距(margin)

种类：标准盒子模型与IE盒子模型

box-sizing: content-box 是标准盒子模型（默认）。  设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中    
       box-sizing: border-box 是IE盒子模型。 设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高

5、浮动float与消除浮动

https://www.cnblogs.com/smyhvae/p/7297736.html

标准文档流：web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画

  标准文档流的特性：

1.无论多少个空格、换行、tab，都会折叠为一个空格。

2.高矮不齐，底边对齐

 3.自动换行，一行写不满，换行写

 浮动性质：

 性质1：浮动的元素脱离标准流

一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了

p { margin-bottom: 0.1in; line-height: 120%; }a:link { }

性质2：浮动的元素互相贴靠

  性质3：浮动的元素有“字围”效果

  性质4：收缩

一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）

 永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

pre.cjk { font-family: "Droid Sans Fallback", monospace; }td p { margin-bottom: 0in; }p { margin-bottom: 0.1in; line-height: 120%; }a:link { }

6、视口

1. layout viewport（布局视口）

Layout viewportd 宽度大于浏览器的可视区域，就好比你的电脑屏幕宽度是1024，但是你网页的宽度是1400.那么1400就是layout viewport的宽度。

宽度获取可以通过document.documentElement.clientWidth获取

2. Visual viewport（视觉视口）

Visual Viewport 的宽度就相当于你客户端的屏幕大小

宽度获取可以通过 window.innerWidth获取

3. Ideal viewport（理想视口）

Ideal viewport就是我们通常说的屏幕分辨率

device-width这一特殊值，一般为了自适应布局，普遍的做法是将width设置为device-width.也就是将layout viewport的宽度设置ideal viewport的宽度

7、nginx：是一个web服务器

安装相关组件：openssl、pcre、zlib、 nginx

1. 启动

启动代码格式：nginx安装目录地址 -c nginx配置文件地址    

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

2. 查看进程号

      ps -ef|grep nginx

3. 杀死进程（关掉主要进程即可）

kill -QUIT 2072（master/主要进程的进程号）

4. 强制停止

pkill -9 nginx

5. 验证nginx配置文件是否正确

1. 进入nginx安装目录sbin下，输入命令./nginx -t，  看到如下显示

nginx.conf syntax is ok

    nginx.conf test is successful

说明配置文件正确

2. 在启动命令-c前加-t

6. 重启Nginx服务

1. 进入nginx可执行目录sbin下，输入命令./nginx -s reload 即可

2. 查找当前nginx进程号，然后输入命令：kill -HUP 进程号 实现重启nginx服务

其他注意：

1.圆角：div的border-radius属性

2.高度设置：padding-bottom属性

属性值：

3.手机访问网页

配置好nginx后，电脑和手机连接上同一个wifi，然后查看电脑ip，假如IP是192.168.0.119，然后手机浏览器中输入192.168.01.119/xxx.html 就可以看到自己的代码.