品优购案例笔记_品优购项目笔记-CSDN博客

本文链接：https://blog.csdn.net/Ke_1124/article/details/124237368

品优购案例笔记

模块化开发
网站favicon图标
网站TDK三大标签SEO优化
常用模块类名命名
LOGO SEO 优化
Tab栏原理-布局需求
服务器
- 本地服务器
- 远程服务器

模块化开发

有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用。
这里最典型的应用就是common.css公共样式。写好一个样式，其余的页面用到这些相同的样式
模块化开发具有重复使用、修改方便等优点

common.css公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。

网站favicon图标

favicon.ico一般用于作为缩略图的网站标志，它显示在浏览器的地址栏或者标签上。
目前主要的浏览器都支持favicon.ico图标。
一.制作favicon图标
1.把品优购图片切成png图片
2.把png图片转换为ico图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
3.
二.favicon图标放到网站根目录下
三.HTML页面引入favicon图标
在HTML页面里的<head> </head>元素之间引入代码

	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

网站TDK三大标签SEO优化

SEO(Search Engine Optimization)汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名方式。
SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
页面必须有三个标签用来符号SEO优化。

title网站标题
title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）
description网站说明
简要说明我们网站主要是做什么的
我们提倡，description作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“xxx网作为…”、“电话：010…”之类语句。
Keywords关键字
Keywords是页面关键字，是搜索引擎的关注点之一。
Keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键字1,关键字2的形式。

常用模块类名命名

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwords
导航	nav
导航左侧	dropdown 包含 .dd .dt
导航右侧	navitems
页面底部	footer
页面底部服务模块	mod_service
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright

LOGO SEO 优化

1.logo里面首先放一个<h1>标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
2.<h1>里面再放一个链接，可以返回首页，把logo的背景图片给链接即可。
3.为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。

方法1：text-indent移到盒子外面（text-indent:-9999px），然后overflow:hidden，淘宝的做法。
方法2：直接给font-size: 0;就看不到文字了，京东的做法。

4.最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了。

Tab栏原理-布局需求

服务器

服务器（我们也会称之为主机）是提供计算服务的设备，它是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、web服务器等。
Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。
以下服务器我们主要指的是Web服务器。
根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。