【前端基础】1 - 11 项目文件结构与 SEO

§1-11 项目文件结构与 SEO

目录

• §1-11 项目文件结构与 SEO
  • 1-11.1 项目文件结构
  • 1-11.2 网页头部 SEO 标签
  • 1-11.3 网页图标与版心居中

该项目源自@黑马程序员(bilibili.com)，视频地址：

107-搭建项目目录_哔哩哔哩_bilibili

1-11.1 项目文件结构

在正式开始搭建项目前，需要了解项目的文件结构。

整个项目将存档在 xtx-pc 目录下，目录下有：

• images 文件夹：存放固定使用的图片素材，如 logo、样式修饰图等；
• uploads 文件夹：存放非固定使用的图片素材，如商品图、宣传图等需要上传的图片；
• iconfont 文件夹：字体图标素材；
• css 文件夹：存放样式表（由 <link> 标签引入）
  • base.css 基础公共样式；
  • common.css 各个网页相同模块的重复样式，如头部和底部；
  • index.css 首页 CSS 样式；
• index.html：首页 HTML 文件；

1-11.2 网页头部 SEO 标签

良好的搜索引擎优化可以提升网站的搜索排名。常见的 SEO 方法有：

• 竞价排名；
• 将网页制作成 HTML 后缀；
• 标签语义化（在合适的地方使用合适的标签）；
• 其他

除此之外，网页头部中的元数据标签和网页标题标签也可用于 SEO：

• <title>：网页标题

• <meta>：元数据标签

  常附加属性 name 和 content，以名 - 值对的方式应用整个文档的元数据。name 支持的标准元数据名称有：

  • application-name：网页中所运行的应用程序名称；
  • author：文档作者名字；
  • description：一段简短而精确的、对页面内容的描述，用作 SEO；
  • generator：生成此页面的软件的标识符（identifier）；
  • keywords：与页面内容相关的关键词，使用逗号分隔，用作 SEO；
  • referrer：控制由当前文档发出的请求的 HTTP Referer 请求头；
  • theme-color：当前页面的建议颜色；

搜索引擎优化将由专职人员完成，开发时将所提供的内容粘贴至文档中即可。

1-11.3 网页图标与版心居中

给网页添加图标能够提高网页的辨识度。我们需要准备一张网页图标文件 favicon.ico 并存放至项目根目录中，在网页头部使用 <link> 调用。

<!-- 快捷输入：link:favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

接着调节版心居中。我们将需要版心居中对齐的元素统统使用类 .wrapper 描述，方便在 CSS 中调节样式时选中。