二、项目前置认知
1.1 生活中的例子
网页:相当于每页纸
网站：相当于一本书籍
- 用户翻阅的时候，看的是每页纸上的内容
- 由多页纸整合在一起，就是完整的一本书籍了
1.2 网页与网站的关系
在互联网中，网站类似于是一本书，网页就是这本书的每一页
- 比如：淘宝、京东等就是一个网站，类似于是一本书
- 这些网站中的每一个网页，如：主页、登录页面、商品页面就是每一个单独的页面，类似于每一页纸
- 多个同主题的网页整合在一起，就称之为网站
1.3 网页与网站的概念
网页：网站中的每一“页”。例如：淘宝的主页、淘宝的登录页等
网站：提供特定服务的一组网页集合。
2.1 DOCTYPE文档说明
<!DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本
注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签
2.2 网页语言
<html lang="en">表示网页使用的语言
作用：搜索引擎归类+浏览器翻译
常见语言：zh-CN简体中文/en 英文
3.1 SEO简介
SEO（Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
- 竞价排名
- 将网页制作成html后缀
- 标签语义化（在合适的地方使用合适的标签）
- ....
3.2 SEO三大标签
- title：网页标题标签
- description：网页描述标签
- keywords：网页关键词标签
（拓展补充）有语义的布局标签
场景：在HTML5新版本中，推出了一些有语义的布局标签，可以增强网页的语义化
标签：
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
注意点：
- 以上标签显示特点和div一致，但是比div多了不同的语义
4.1 ico图标设置
场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
常见代码：
<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">
5.2 版心的介绍
场景：把页面的主体内容约束在网页中间 通常需要固定宽度，水平居中
作用：让不同大小的屏幕都能看到页面的主体内容
代码：
注意点：
- 版心类名常用：container、wrapper、w等
（拓展补充）CSS书写顺序
衡量程序员的能力，除了要看实现业务需求的能力，还要看平时书写代码的习惯 （专业性）
不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯
| 顺序 | 类别 | 属性 |
| 1 | 布局属性 | display、position、float、clear、visibility、overflow |
| 2 | 盒子模型+背景 | width、height、margin、padding、border、background |
| 3 | 文本内容属性 | color、font、text-decoration、text-align、line-height |
| 4 | 点缀属性 | cursor、border-radius、text-shadow、box-shadow |
注意点：
- 开发中推荐多用类+后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐不要超过3个
647
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
