Web前端，了解SEO三大标签、ico图标、版心公共类代码、CSS书写顺序

星儿AI探索者
1,515 阅读4分钟

前言

持续学习总结输出中，今天分享的是Web前端，了解SEO三大标签、ico图标、版心公共类代码、CSS书写顺序

1、网页与网站的关系

网页: 相当于是书籍的每页纸张

网站: 相当于是一本书籍请添加图片描述

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

小结

网站是什么? • 提供特定服务的一组网页集合。

网页是什么? • 网站中的每一“页”

2、骨架结构标签

<!DOCTYPE html>

文档类型声明，告诉浏览器该网页的 HTML版本 请添加图片描述

<html lang="en">

网页使用的 语言

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

我们常用的语言是：zh-CN 简体中文 / en 英文

<meta charset="UTF-8">

网页中使用的 字符编码

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

我们常见字符编码:

  1. UTF-8:万国码，国际化的字符编码，收录了全球语言的文字
  2. GB2312:6000+ 汉字
  3. GBK:20000+ 汉字

注意点:

开发中 统一使用 UTF-8 字符编码 即可

小结

的作用是什么? • 文档类型声明，告诉浏览器该网页的 HTML版本

设置网页的语言为中文应该如何操作?

<html lang="en">

开发中统一使用的字符编码是什么?

<meta charset="UTF-8">

3、SEO三大标签

SEO(Search Engine Optimization): 搜索引擎优化

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

提升SEO的常见方法:

  1. 竞价排名
  2. 将网页制作成html后缀
  3. 标签语义化(在合适的地方使用合适的标签)
  4. ......

SEO三大标签

  1. title:网页标题标签
  2. description:网页描述标签
  3. keywords:网页关键词标签

有语义的布局标签

标签名语义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
article网页文章

小结

SEO三大标签分别是哪些?

  1. title:网页标题标签
  2. description:网页描述标签
  3. keywords:网页关键词标签

常见有语义的布局标签有哪些? • header:网页头部 • nav:网页导航 • footer:网页底部 • aside:网页侧边栏 • section:网页区块 • article:网页文章

4、ico图标设置

显示在标签页标题左侧的小图标，习惯使用.ico格式的图标 在这里插入图片描述

参考代码:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

小结

给网页设置ico图标需要使用什么标签?

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

5、版心

把页面的主体内容约束在网页中间 请添加图片描述 它的作用是：让不同大小的屏幕都能看到页面的主体内容

参考代码：

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

注意点:

• 版心类名常用:container、wrapper、w 等

小结

版心的使用场景是什么? • 让页面的主体内容约束在网页中间

版心的常用代码是什么?

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

6、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 个

小结

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

7、总结

在这里插入图片描述

最后分享一句话：

财富只是结果，前提是“人”“资金”的正确决策。 《钱从哪里来》 ——香帅

本次的分享就到这里了！！！

欢迎在评论区留言讨论！！！

avatar
文章
阅读
粉丝