HTML+CSS学习Day19笔记

网站结构和网站优化

一、网站结构

1、站点：其实就是用来归纳网站素材的地方

• html文件夹

• images(img)文件夹

• css文件夹

• js文件夹

• index.html 主页面

• 注意点：这种结构在目前的开发环境中已经无法满足需求，所以这种结构会进行变化

2、目前开发环境网站结构

• src目录 网站源代码目录

  html（page、static）文件夹 静态页面

  css 文件夹

  js 文件夹

  fonts 文件夹

  video 文件夹

  libs 文件夹（引入外部的一些资源 jQuery）

  index.html 主页面

• dist目录 打包压缩的目录

  html（page、static）文件夹 静态页面

  css 文件夹

  js 文件夹

  fonts 文件夹

  video 文件夹

  index.html 主页面

  注意点：dist目录里面的文件夹和文件不用自己去写，包括dist目录也不用自己去创建。当咱们进行网站编码的时候，只要使用了gulp工具它会自动去帮助咱们创建dist目录和里面的一些东西

• gulp前端自动化构建工具 — 打包压缩代码

二、网站优化

1、w3c标准要求结构、表现、行为三者分离，在实际的开发环境中要求网站开发时把html和css还有js单独放在自己的文件夹里面，建议不能进行混编操作，因为不利于后期的维护和代码管理

2、要求网站开发时，网站的头部代码和尾部代码复用。css重置样式建议不能使用通配符，*号表示所有的意思，只要设置了通配符选择器，代码执行会把所有页面的标记无论有没有需要重置的样式都会去解析一遍，会导致代码加载会稍慢

3、h1标签的使用，一个页面设置一个h1标签，有助于搜索引擎明白网站架构，因为h1标签的搜索权重比其他标签高，一般用于logo区域。

4、页面头部优化（meta）

<meta name="keywords"   content="" />向搜索引擎说明你的网页的关键词
<meta name="description"    content=""/>告诉搜索引擎你的站点的主要内容

• “描述”部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对你网站的特色内容加以重复以求突出；
• “关键字”部分应该列出你认为合适的，能突出网站内容的关键字就可以了，关键字不要设置太多，可设置10—8个，搜索引擎只会浏览靠前的几个关键字。

5、超链接优化

搜索引擎为何可以能够索引全世界的网站，是因为各个搜索引擎程序中都有一个会自动“爬行”于互联网上的智能机器人程序，这个机器人就是顺着网站之间的链接游览世界的，那么我们就应该为它创造一个良好的爬行通道——合理的设置链接。

a.采用纯文本链接，少用，最好是别用Flash动画设置链接，因为搜索引擎无法识别Flash上的文字

b.按规范书写超链接，这个title属性，它既可以起到提示访客的作用，也可以让搜索引擎知道它要去哪里

c.最好别使用图片热点链接，理由和第一点差不多。

6、关于图片优化

• img标记上面的title和alt建议即使为空也设置，原因是浏览器无法识别图片上面的文本，设置了title和alt浏览器可以解析到需要的内容

• css sprite — 图片整合技术

• base64编码格式

• iconfont 字体图标

• webp 谷歌的图片的格式，效率会比普通的png和jpg图片的效率高

• 避免大体积的图片，因为图越大所耗费的网络带宽和资源越多

• svg格式