注：本次笔记不具备太多参考意义，建议跳过，原因是本次笔记仅作为参考网页制作某些注意事项
名称
需要创建的文件
CSS公共样式文件
所谓的模块化:将一个项目按照功能划分，一个功能一个模块，互不影响
模块化开发具有重复使用、更换方便等优点
- 代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块。然后重复使用
- 这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式
- 模块化开发具有重复使用、修改方便等优点
common.css 公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。
favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上
目前主要的浏览器都支持favicon.ico图标
1)、制作favicon图标
- 把品优购图标切成png图片
- 把 png图片转换为ico图标，这需要借助于第三方转换网站，
例如比特虫：在线制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net
2)、favicon图标放到网站根目录下
3)、HTML页面引入 favicon图标
在html页面里面的<head> </head>元素之间引入代码
SEO ( SearchEngine Optimization )汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式
SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度
页面必须有三个标签用来符合SEO优化
title、description、keyword
title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点
建议：网站名（产品名）–网站的介绍（尽量不要超过30个汉字）
例如：
- 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!
- 小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站
简要说明我们网站主要是做什么的
我们提倡，description作为网站的总体业务和主题概括，多采用“我们是..”、“我们提供.
”、“×××网作为..”、“电话:010.”之类语句
例如：
- <meta name="description" content="京东JD.COM-专业的综合网上购物商城销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
keywords是页面关键词，是搜索引擎的关注点之一
keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式
例如：
- <meta name=“keywords" content="网上购物,网上商城手机,笔记本,电脑,MP3,CD,VCD,DV,相机数码配件,手表,存储卡,京东"/>
- logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
- h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可
- 为了搜索引擎收录我们，我们链接里面要放文字(网站名称），但是文字不要显示出来
方法1：text-indent 移到盒子外面(text-indent: -9999px)，然后 overflow: hidden，淘宝的做法
方法2：直接给 font-size: 0; 就看不到文字了，京东的做法 - 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了
网站的首页一般都是使用index命名，比如index.html或者index.php
我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面
以下是我们约定的命名模块，可以直接使用以下类名即可
- 通栏的盒子命名为 shortcut，是快捷导航的意思。注意这里的行高，可以继承给里面的子盒子
- 里面包含版心的盒子
- 版心盒子里面包含 1 号左侧盒子左浮动
- 版心盒子里面包含 2 号右侧盒子右浮动
- header 盒子必须要有高度
- 1 号盒子是 logo 标志定位
- 2 号盒子是 search 搜索模块定位
- 3 号盒子是 hotwrods 热词模块定位
- 4 号盒子是 shopcar 购物车模块
- count 统计部分用绝对定位做
- count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度
- 一定注意左下角不是圆角，其余三个是圆角。写法：border-radius: 7px 7px 7px 0;
- nav 盒子通栏有高度，而且有个下边框
- 1号盒子左侧浮动，dropdown
- 2号盒子左侧浮动，navitems 导航栏组
- 1号盒子有讲究，根据相关性里面包含 .dt 和 .dd 两个盒子
- footer 页面底部盒子通栏给一个高度和灰色的背景
- footer 里面有一个大的版心
- 版心里面包含1号盒子，mod_service 是服务模块，mod 是模块的意思
- 版心里面包含2号盒子，mod_help 是帮助模块
- 版心里面包含3号盒子，mod_copyright 是版权模块
- main 盒子宽度为980像素，位置距离左边 220px(margin-left)，给高度就不用清除浮动
- main 里面包含左侧盒子，左浮动，focus 焦点图模块
- main 里面包含右侧盒子，右浮动，newsflash 新闻快报模块
newsflash新闻快报模块
- 1号盒子为 news 新闻模块高度为 165px
- 2号盒子为 lifeservice 生活服务模块高度为 209px
- 3号盒子为 bargain 特价商品
news新闻模块
- 注意：这里我们分为上下两个模块，但是两个模块都用 div
- 1号盒子 news-hd 新闻头部模块，给一个高度和下边框
- 2号盒子 news-bd 新闻主题部分，里面包含 ul 和 li 还有链接
- 大盒子 recom 推荐模块 recommend
- 里面包含 2 个盒子，浮动即可
- 1号盒子 recom-hd
- 2号盒子 recom-bd ，注意里面的小竖线
注意这个floor ，不要给高度，内容有多少，算多少
第一楼是家用电器模块：里面包含两个盒子
- 1号盒子box_hd，给一个高度，有个下边框，里面分为左右2个盒子
- 2号盒子box_bd，不要给高度
- 有高度可以不用清除浮动
- 左边 h3，盒子左浮动
- 右边 tab-list，右浮动，因为用到 tab 切换效果，所以里面要用 ul 和 li 来做
- 列表页面是新的页面，我们需要新建页面文件 list.html
- 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来
- 头部和底部的样式也需要，因此 list.html 中还需要引入 common.css
- 需要新的 list.css 样式文件，这是列表页专门的样式文件
注意:注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化
1.什么是Web服务器
我们写的网站，目前是放到自己电脑上的，只能自己访问浏览
如果想要很多人访问我们的网站，可以把网页放到服务器上，这样就可以将人访问我们的网站了
服务器(我们也会称之为主机)是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等
Web服务器一般指网站服务器，是指留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载
以下服务器我们主要指的是Web服务器
根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器
我们可以把自己的电脑设置为本地服务器，这样同一个局域网内的同学就可以访问你的网站了
本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把网站上传到远程服务器
远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了
比如域名 www.mi.com 可以访问小米网站
- 服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器
- 服务器可以分为本地服务器和远程服务器
- 远程服务器是别的公司为我们提供了一台计算机
- 我们可以把网站上传到远程服务器里面，别人就可以通过域名访问我们的网站了