前端网站制作-CSDN博客

本文链接：https://blog.csdn.net/m0_74227060/article/details/135781568

网站favicon图标制作

favicon.ico一般用于作为缩略的网站标志，它一般显示在浏览器地址栏或标签上

一.制作favicon图标

二.favicon图标放在网站根目录下

三.HTML网页引favicon图标

把png图片转换为ico图标，借助第三方转换网站，如http://www.bitbug.net/（其实改后缀就行）

转化的图片放在根目录

网站TDK三大标签SEO优化

SEO（搜索引擎优化）是利用搜索引擎规则提高网站在有关搜索引擎内自然排名的方法

对网站深度优化，获取免费流量

页面必须有三个标签符合SEO优化

title、description、keyword

1.title网站标题

具有不可替代性，是页内第一重要标签是搜索引擎了解网页入口和对网页主题归属的最佳判断点

建议：网站名（产品名）-网站介绍（尽量不超30字）

如：

京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物

2.description网站说明

简要说明网站是干什么的。

例：

3.keywords关键字

keywords是页面关键词，是搜索引擎关注点之一，用英文逗号隔开

logoSEO优化

1.logo里面首先放一个h1标签

目的：提权告诉搜索引擎其重要性

2.h1里放链接（以为搜索引擎认为h1是很重要的标签），可返回首页，把logo的背景图给链接即可

3.为了被搜索引擎关注，可以在链接里放文字然后隐藏

方法1：text-indent移到盒子外面，然后overflow：hidden；

方法2：font-size：0；就看不到文字了

4.最后加个title属性，鼠标经过产生文字

案例（图片过于敷衍）

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>!</title>
   <link rel="stylesheet" href="初始化表.css">
   <link rel="shortcut icon" href="1.ico">
   <meta name="keywords" content="..." />
   <style>
      /*写代码时始终要考虑权重问题！*/

      @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?au9n7q');
         src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?au9n7q') format('truetype'),
            url('fonts/icomoon.woff?au9n7q') format('woff'),
            url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
      }

      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }

      .header {
         position: relative;
         height: 107px;
         background-color: aqua;
      }
      .logo {
         position: absolute;
         width: 171px;
         height: 61px;
         top: 25px;
         
      }
      .logo a {
         display: block;
         background: url(https://www.logosc.cn/uploads/output/2020/03/07/c2e0b1f6067c089f7ab9cca56bffc073.jpg?t=1583548172) no-repeat;
         width: 171px;
         height: 61px;
         font-size: 0;
      }

      
   </style>

</head>

<body>
   <div class="header"> 
      <div class="logo">
         <h1>
            <a href="#" title="阿巴阿巴">阿巴阿巴</a>
         </h1>
     </div>
   </div>
   
</body>

</html>