前端⼤项⽬制作-⼩兔鲜项⽬-项⽬结构搭建SEO简介SEO三⼤标签ico图标设置3.1 SEO简介
Ø SEO（Search Engine Optimization）：搜索引擎优化
Ø 作⽤：让⽹站在搜索引擎上的排名靠前
Ø 提升SEO的常见⽅法：
1. 竞价排名
2. 将⽹页制作成html后缀
3. 标签语义化（在合适的地⽅使⽤合适的标签）
4. ……
3.2 SEO三⼤标签
1. title：⽹页标题标签
2. description：⽹页描述标签
3. keywords：⽹页关键词标签
让⾃⼰⽹站在搜索⽹页的排名往前
3.3 ⼩结
Ø SEO三⼤标签分别是哪些？
1. title：⽹页标题标签
2. description：⽹页描述标签
3. keywords：⽹页关键词标签
Search Engine Optimization搜索引擎优化
让⽹站在搜搜引擎的排名考前
竞价排名
title⽹页标题标签，decription⽹站描述
meta name=“viewport”
title⽹页标题标签，description⽹页描述标签，keywords⽹页关键词标签
.ico
（拓展补充） 有语义的布局标签
Ø 场景：在HTML5新版本中，推出了⼀些有语义的布局标签，可以增强⽹页的语义化 Ø
标签：
Ø 注意点： · 以上标签显⽰特点和div⼀致，但是⽐div多了不同的语义
3.5 ⼩结
Ø 常见有语义的布局标签有哪些？ · header：⽹页头部 · nav：⽹页导航 · footer：⽹页底部 · aside：⽹页侧边栏 · section：⽹页区块 · article：⽹页⽂章
4.1 ico 图标设置<!DOCTYPE html ><html lang ="en"><head > <meta charset ="UTF-8"> <meta http-equiv ="X-UA-Compatible" content ="IE=edge"> <meta name ="viewport" content ="width=device-width, initial-scale=1.0"> <!-- meta:desc --> <meta name ="description" content ="京东JD.COM-专业的综合⽹上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来⾃全球数⼗万品
<!-- meta:kw --> <meta name ="keywords" content ="⽹上购物,⽹上商城，家电,⼿机，电脑，服装，居家，母婴，美妆，个护,⾷品,⽣鲜，京东"> <title >京东(JD.COM )-正品低价、品质保障、配送及时、轻松购物！</title > <!-- link:favicon : 浏览器标题栏图标 --> <link rel ="shortcut icon" href ="favicon.ico" type ="image/x-icon"> </head ><body > </body ></html >1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Ø 场景：显⽰在标签页标题左侧的⼩图标，习惯使⽤.ico格式的图标
4.2 ⼩结
Ø 给⽹页设置ico图标需要使⽤什么标签？
5.1 版⼼的介绍
Ø 场景：把页⾯的主体内容约束在⽹页中间 Ø 作⽤：让不同⼤⼩的屏幕都能看到页⾯的主体内容 Ø 代码：
Ø 注意点： · 版⼼类名常⽤：container、wrapper、w 等
5.2 ⼩结
Ø 版⼼的使⽤场景是什么？ · 让页⾯的主体内容约束在⽹页中间 Ø 版⼼的常⽤代码是什么？
common.css多个⽹页当中相同样式的模块
（拓展补充） CSS书写顺序
Ø 衡量程序员的能⼒，除了要看实现业务需求的能⼒，还要看平时书写代码的规范（专业性） Ø 不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端⼯程师使⽤专业的书写顺序习惯
Ø 注意点： · 开发中推荐多⽤类 + 后代，但不是层级越多越好，⼀个选择器中的类选择器的个数推荐 不要超过 3 个
三、项⽬结构搭建
1.1 ⽂件和⽬录准备
1. 新建项⽬⽂件夹 xtx-pc-client，在VScode中打开 · 在实际开发中，项⽬⽂件夹不建议使⽤中⽂ · 所
有项⽬相关⽂件都保存在 xtx-
pc-client ⽬录中 2. 复制 favicon.ico 到 xtx-pc-client ⽬录 · ⼀般习惯将ico图标放在项⽬根⽬录 3. 复制 images 和 uploads ⽬录到 xtx-pc-client ⽬录中 · images ：存放⽹站 固定使⽤ 的图⽚素材，如：logo、样式修饰图⽚… 等 · uploads：存放⽹站 ⾮固定使⽤ 的图⽚素材，如：商品图⽚、宣传图⽚…等 4. 新建 index.html 在根⽬录 5. 新建 css ⽂件夹保存⽹站的样式，并新建以下CSS⽂件： · base.css：基础公共样式 · common.css：该⽹站中多个⽹页相同模块的重复样式，如：头部、底部 ·
index.css：⾸页样式
1.2 完成后的⽬录及⽂件结构
link rel=“stylesheet” href="./css/index.css"
按照顺序引⼊，外链式样式表后写的⽣效的
meta desription content=""<!DOCTYPE html ><html lang ="en"><head > <meta charset ="UTF-8"> <meta http-equiv ="X-UA-Compatible" content ="IE=edge"> <meta name ="viewport" content ="width=device-width, initial-scale=1.0"> <!-- meta:desc --> <meta name ="description" content ="⼩兔鲜⼉官⽹，致⼒于打造全球最⼤的⾷品、⽣鲜电商购物平台"> <!-- meta:kw --> <meta nam
e ="keywords" content ="⼩兔鲜⼉,⾷品,⽣鲜，服装，家电，电商，购物"> <title >⼩兔鲜⼉-新鲜、惠民、快捷！</title > <!-- link:favicon --> <link rel ="shortcut icon" href ="favicon.ico" type ="image/x-icon"> <!-- 按顺序引⼊: 外链式样式表后写的⽣效 --> <link rel ="stylesheet" href ="./css/base.css"> <link rel ="stylesheet" href ="./css/common.css"> <link rel ="stylesheet" href ="./css/index.css"></head ><body > <!-- 快捷导航 --> <div class ="shortcut"> <div class ="wrapper"> <ul > <li ><a href ="#">请先登录</a ></li > <li ><a href ="#">免费注册</a ></li > <li ><a href ="#">我的订单</a ></li > <li ><a href ="#">会员中⼼</a ></li > <li ><a href ="#">帮助中⼼</a ></li > <li ><a href ="#"></a ></li > <li ><a href ="#"><span ></span >⼿机版</a ></li > </ul > </div > </div > <!-- 头部 --> <div class ="header wrapper">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
icon图标库18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class ="header wrapper"> <div class ="logo"> <h1><a href ="#">⼩兔鲜⼉</a ></h1> </div > <div class ="nav"> <ul > <li ><a href ="#">⾸页</a ></li > <li ><a href ="#">⽣鲜</a ></li > <li ><a href ="#">美⾷</a ></li > <li ><a href ="#">餐厨</a ></li > <li ><a href ="#">电器</a ></li > <li ><a href ="#">居家</a ></li > <li ><a href ="#">洗护</a ></li > <li ><a href ="#">孕婴</a ></li > <li ><a href ="#">服装</a ></li > </ul > </div > <div class ="search"> <input type ="text" placeholder ="搜⼀搜"> <!-- 定位 放⼤镜 --> <span ></span > </div > <div class ="car"> <span >2</span > </div > </div > <!-- banner --> <div class ="banner"> <div class ="wrapper"> <!-- 有多少个图，就有都少个li --> <ul > <li > <a href ="#"><img src ="./uploads/banner_1.png" alt =""></a > </li > </ul > <!-- 侧导航 --> <div class ="aside"> <ul > <li ><a href ="#">⽣鲜<span >⽔果 蔬菜</span ></a ></li > <li ><a href ="#">⽣鲜<span >⽔果 蔬菜</span ></a ></li > <li ><a href ="#">⽣鲜<span >⽔果 蔬菜</span ></a ></li > <li ><a href ="#">⽣鲜<span >⽔果 蔬菜</span ></a ></li > <li ><a href ="#">⽣鲜<span >⽔果 蔬菜</span ></a ></li > <li ><a href ="#">⽣鲜<span >⽔果 蔬菜</span ></a ></li > <li ><a href ="#">⽣鲜<span >⽔果 蔬菜</span ></a ></li > <li ><a href ="#">⽣鲜<span >⽔果 蔬菜</span ></a ></li > <li ><a href ="#">⽣鲜<span >⽔果 蔬菜</
span ></a ></li > <li ><a href ="#">⽣鲜<span >⽔果 蔬菜</span ></a ></li > </ul > </div > <!-- 箭头 --> <!-- prev: 上⼀个 --> <a href ="#" class ="prev"></a > <!-- next : 下⼀个 --> <a href ="#" class ="next"></a > <!-- 圆点: 当前状态: current / active --> <!-- js 到⽤户点击的li 添加类名 li 变成⽩⾊的 --> <ol > <li ></li > <li ></li > <li class ="current"></li >3839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论