前端学习笔记03-项目制作技巧

最新推荐文章于 2024-12-25 14:58:16 发布

abc_123_cba_123

最新推荐文章于 2024-12-25 14:58:16 发布

阅读量287

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/abc_123_cba_123/article/details/113615523

版权

本文介绍了前端项目中的一些关键步骤，包括文件夹结构的建立、初始化CSS、设置网站favicon图标、常用模块类名的命名规范，以及SEO优化的要点。SEO优化主要涉及title、description和keywords标签的使用，对于提升网站在搜索引擎中的排名至关重要。同时，文章还提到了logo优化的两种方法，以提升用户体验和搜索引擎友好性。

摘要由CSDN通过智能技术生成

1.文件夹的建立

在这里插入图片描述

2.初始化css

base.css:

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle;
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer;
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #395782;
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0; 
    outline: none;
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

3.网站 favicon 图标

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。
方法：
一、制作favicon图标

把需要的图标切成 png 图片。
把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

二、favicon图标放到网站根目录下
在这里插入图片描述
三、 HTML页面引入favicon图标

在html 页面里面的 < head> < /head>元素之间引入代码：
< link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon”/>

4.常用模块类名命名

在这里插入图片描述

5.SEO 优化

SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签用来符合 SEO 优化： title、description、keywords。
（1） title 网站标题
title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议：网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）.
例如：
京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

例：
 <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
</title>

（2） description 网站说明
简要说明我们网站主要是做什么的。

例：
<!-- 网站说明 -->
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

（3）keywords 关键字
keywords 是页面关键词，是搜索引擎的关注点之一。

例：
<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配 件,手表,存储卡,京东" />

（4）logo优化

logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。
为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。
方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。
方法2：直接给 font-size: 0; 就看不到文字了，京东的做法。
最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了。

例：
.logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
    
}
.logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* font-size: 0;京东的做法*/
    /* 淘宝的做法让文字隐藏 */
    text-indent: -9999px;
    overflow: hidden;
}
<div class="logo">
     <h1>
        <a href="index.html" title="品优购商城">品优购商城</a>
     </h1>
</div>