CSS第九天学习总结—— favicon 图标、SEO优化、logo SEO优化
网站 favicon 图标
favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。
制作favicon图标
- 把图标切成
png图片 - 把
png图片转换为ico图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
使用favicon图标
第一步：favicon图标放到网站根目录下
第二步：HTML页面引入favicon图标
在html 页面里面的 <head> </head>元素之间引入代码
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
TDK三大标签SEO优化
SEO
**SEO（Search Engine Optimization）**汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
TDK
T – Title（网站标题）
title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议：网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）
例如：
- 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
- 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站
D – description（网站描述）
简要说明我们网站主要是做什么的。
我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。
例如：
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
K – keywords （关键字）
keywords 是页面关键词，是搜索引擎的关注点之一。
keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式
例如：
<meta name= "keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
示例代码
<head><title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><!-- 网站说明 --><meta name="description"content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /><!-- 关键字 --><meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
</head>
LOGO SEO优化
1）logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
2） h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可
3）为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来
- 方法1(淘宝的做法)：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden
- 方法2(京东的做法）：直接给 font-size: 0; 就看不到文字了
4）最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了
CSS第九天学习总结—— favicon 图标、SEO优化、logo SEO优化相关推荐
- 网站的favicon图标和TDK的SEO优化
网站的favicon图标 favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上. 目前主要的浏览器都支持favicon.ico图标. 一.制作favicon图标 1.把图 ...
- 1.7.太极平台：替换系统默认浏览器favicon图标，和logo图片。
太极系统平台框架,自带有奇点的logo和favicon图标,如果想更换,只需要覆盖替换即可. 如下图所示. 1.替换favicon图标.将新的favicon.ico文件,拷贝到webapp目录下即可. ...
- amazeui学习笔记--css（常用组件6）--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- Avada学习之-如何修改Header-logo和favicon图标
logo和favicon图标如何修改 以下是一些在线生成favicon的网站.一般生成16*16的icon图片即可. 在线生成透明ICO图标--ICO图标制作https://www.ico51.cn/ ...
- HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览 模拟淘宝首页(静态) 一.项目重难点 二.效果图及源码 模拟淘宝首页(静态) 一.项目重难点 样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
- css高级技巧(精灵图、字体图标、三角、vertical-align属性、溢出文字省略号等)
css高级技巧 1.精灵图 1.1.为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送图片,造成服务器请求压力过大,这将大大降低页面的加载 ...
- 主题图标_Avada主题网站favicon图标设置详细图文教程
Avada主题网站favicon图标如何设置?很多网站打开后在浏览器标题栏会发现前面有一个小图标,在浏览器标签页和收藏夹中也能看到.这个标志名叫 favicon图标.ico图标.网站图标.是展示网站个 ...
- Vue 第九天学习
Vue 第九天学习 1.实现发表评论功能 1.把文本框做双向数据绑定 v-model ="msg" 2.为发表按钮绑定一个事件 @click="post_Comment ...
- php与html网页制作,web 一个简单地三级网页的设计和编写，html+css，适合学习 制作的新手 WEB(ASP,PHP,...) 238万源代码下载- www.pudn.com...
文件名称: web下载 收藏√ [ 5 4 3 2 1 ] 开发工具: HTML 文件大小: 4716 KB 上传时间: 2013-06-25 下载次数: 7 提 供 者: ericc 详细 ...
最新文章
- Linux环境搭建：设置主机名颜色、设置vim颜色
- SAP Hybris - how to find corresponding cronjob for a given import
- SharedPreferences保存对象以及集合，腾讯MMKV使用，保存搜索历史
- 保留小数点位数和格式
- Java io流---拷贝目录
- 请说说你对标签语义化的理解？
- win7系统怎么拷贝到u盘_win7/10系统复制文件到u盘提示文件过大怎么办
- 马斯克火箭 SpaceX-API、程序员优雅赚钱项目……GitHub 热点速览
- flutter实现画中国地图
- QNX系统将C/C++代码编译为lib***.so文件
- OCR通用文字识别接口
- 浏览器请求web服务器的过程
- 图片太大了怎么改小kb？
- 云计算与大数据技术应用 第二章
- 银行家算法实现（操作系统实验）
- 普通最小二乘法（OLS）
- 计算机二级培训ppt,计算机二级PPT真题：科技政策培训PPT
- 物联网的七大通信协议
- 理解电脑上的串口对应的端口号（com口）
- 学习FileReader和FileWriter类