1. 网页与网站的关系

网页：相当于是每页纸
网站：相当于一本书籍

用户翻阅的时候，看的是每页纸上的内容.由多页纸整合在一起，就是完整的一本书籍了

两者概念分别为:
- 网页：网站中的每一“页” 。例如：淘宝的主页、淘宝的登录页、淘宝的商品页等。
- 网站：提供特定服务的一组网页集合。例如：百度、淘宝、京东等；

2. 骨架结构标签

2.1. DOCTYPE文档说明

<!DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML版本

 > 注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签

2.2. 设置网页的语言

标识网页的语言

作用：搜索引擎归类 + 浏览器翻译

常见语言：zh-CN 简体中文 / en 英文

2.3. 字符编码

标识网页的字符编码

作用：保存和打开的字符编码需要统一设置，否则可能会出现 乱码.

字符编码:UTF-8万国码

3. SEO三大标签

3.1. SEO简介

SEO（Search Engine Optimization）：搜索引擎优化

作用：让网站在搜索引擎上的排名靠前

提升SEO的常见方法：

竞价排名
将网页制作成html后缀
标签语义化（在合适的地方使用合适的标签）
……

3.2. SEO三大标签

title：网页标题标签
description：网页描述标签
keywords：网页关键词标签

这里查看京东的SEO三大标签

4. ico图标设置

使用的场景:显示在标签页标题左侧的小图标，习惯使用.ico格式的图标

如下图:

显示代码如下:

<link rel="shortcut icon" href="ico图标路径" type=""image/x-icon"">

制作网站

网站地址:www.bitbug.net/

然后将制作的图片保存到项目文件夹的根目录中

5. 版心

把页面的主体内容约束在网页中间

作用：让不同大小的屏幕都能看到页面的主体内容

代码：

/*版心*/
.container{
     width:1226px;
     margin:0 auto;
}

版心类名常用：container、wrapper、w 等

6. html5新增有语义标签

这些新增的语义化标签,有利于网页的语义化

标签:

这些标签布局特点和div标签一样,只是多了语义化,布局更清晰

项目基本认知