新建站点文件夹
- 文件夹名称不能是中文命名
- 文件夹根目录里面至少包含了css、js、images三个子文件夹
- 文件里根目录里面至少应该有index.html
设置网页图标
- 设置
favorites.icon网页图标
注意点:favorites图标就是显示在网页选项卡和收藏夹中的图标 - 把制作好的网页图标上传到favicon.ico在线制作网站，选择尺寸，然后把图标文件下载到本地
3.把图标命名为favicon.ico并且放在网页站点文件夹的根目录中
4.在head标签中添加
<link rel = "shortcut icon" href ="favicon.ico" type = “image/x.icon>
添加网站优化的三大标签
- 网页title标题
- 注意点:title是网页中第一重要的标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。
- 标题长度:Google 35个中文，baidu 28个中文
- 格式:网站名(产品名) - 网站的介绍
例如以下的网站格式:
<title>淘宝网 - 淘！我喜欢</title>
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<title>苏宁易购(Suning.com)-送货更准时、价格更超值、上新货更快</title>
<title>国美(GOME)-综合网购商城，正品低价、品质保障、快速送达、安心服务！</title>
/* 在title中 ， 最前面出现的词汇，权重就越高*/
- Keywords 关键字
- Keywords是页面的关键字，是搜索引擎重点关注点之一
- keywords应该限制在6~8个关键之以内，如果是电商网站的话，那么可以适量多几个
例如:
- keywords应该限制在6~8个关键之以内，如果是电商网站的话，那么可以适量多几个
<meta name="keywords" content="苏宁易购网上商城,苏宁电器,Suning,手机,电脑,冰箱,洗衣机,相机,数码,家居用品,鞋帽,化妆品,母婴用品,图书,食品,正品行货"/>
- Description 网站说明
- 对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的mata标签中的描述部分作为搜索结果的。
- "内容摘要"，就是简要说明我们的网站主要是做什么的
- 补充title和keywords中未能充分表述的说明
- 字符数含空格在内不要超过 120 个汉字
- 描述中出现关键词，与正文内容相关，这部分内容是给用户看的，所以要写的很详细，让用户感兴趣，吸引用户点击
例如:
<meta name="description" content="苏宁易购-综合网上购物平台，商品涵盖家电、手机、电脑、超市、母婴、服装、百货、海外购等品类。送货更准时、价格更超值、上新货更快，正品行货、全国联保、可门店自提，全网更低价，让您放心去喜欢！" />
- 导入CSS Rest 类库，将所有的浏览器的自带样式重置掉，保持各浏览器的一致性
推荐两种方式:
- . reset.css
- 无论有没有用，全部默认的样式都清空
- . normalize.css
- 保护有用的浏览器默认样式，而不是完全去除
- 一般化的样式，为大部分的html元素提供
- 修复浏览器自身的bug并且保证各浏览器的一致性
- 优化CSS可用性:用一些小技巧
- 点击查看normalize.css官网文档
5.设置全局样式
例如:
body{
font: 12px/1.5em "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";
color: #999;
background: #f2f2f2;
}
以上步骤完成之后，一个网站的基本配置已经搞定了
优雅降级
一开始就在高级浏览器上构建完整的功能，然后再针对低版本的浏览器进行兼容
渐进增强
针对低版本的浏览器先进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能，达到更好的用户体验
个人建议
现在开发应用优雅降级的会比较多一些，因为现在很少人用ie之类的低版本浏览器了，所以我们直接构建好最完整的界面，然后根据实际情况去适配需要的浏览器。
- 最常用的修补手法就是为了低版本的浏览器单独制作一个页面，提示使用高级浏览器
例如:
网友评论