〖大前端 - 基础入门三大核心之 html 篇⑤〗- 网页的基础配置
大家好，我是 哈士奇 ，一位工作了十年的"技术混子"， 致力于为开发者赋能的UP主, 目前正在运营着 TFS_CLUB社区。
💬 人生格言：优于别人,并不高贵,真正的高贵应该是优于过去的自己。💬 📫 如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀 🔥 如果感觉博主的文章还不错的话，还请 👍 关注、点赞、收藏三连支持 👍 一下博主哦 🏆 CSDN博客专家认证、新星计划第三季全栈赛道MVP 、华为云享专家、阿里云专家博主 🏆
专栏系列（点击解锁） 学习路线（点击解锁） 知识定位 🔥Python全栈白皮书🔥 零基础入门篇 以浅显易懂的方式轻松入门，让你彻底爱上Python的魅力。 语法进阶篇 主要围绕多线程编程、正则表达式学习、含贴近实战的项目练习 。 自动化办公篇 实现日常办公软件的自动化操作，节省时间、提高办公效率。 自动化测试实战篇 从实战的角度出发，先人一步，快速转型测试开发工程师。 数据库开发实战篇 掌握关系型与非关系数据库知识，提升数据库实战开发能力。 爬虫入门与实战 更新中 数据分析篇 更新中 前端入门+flask 全栈篇 更新中 django+vue全栈篇 更新中 拓展-人工智能入门 更新中 🔥全域运营实战白宝书🔥 运营角色认知篇 初识运营，明晰运营的学习路径 高转化文案速成篇 三种文案形式，抓住特点才能下笔如有神。 策划活动与执行篇 更新中 新媒体运营篇 更新中 社区运营篇 更新中 私域社群运营篇 更新中 运营数据分析篇 更新中 低成本渠道推广篇 更新中 网络安全之路 踩坑篇 记录学习及演练过程中遇到的坑，便于后来居上者 网安知识扫盲篇 三天打鱼，不深入了解原理，只会让你成为脚本小子。 vulhub靶场漏洞复现 让漏洞复现变得简单，让安全研究者更加专注于漏洞原理本身。 shell编程篇 不涉及linux基础，最终案例会偏向于安全加固方向。 [待完结] WEB漏洞攻防篇 2021年9月3日停止更新，转战先知社区等安全社区及小密圈 渗透工具使用集锦 2021年9月3日停止更新，转战先知社区等安全社区及小密圈 点点点工程师 测试神器 - Charles 软件测试数据包抓包分析神器 测试神器 - Fiddler 一文学会 fiddle ，学不会倒立吃翔，稀得！ 测试神器 - Jmeter 不仅是性能测试神器，更可用于搭建轻量级接口自动化测试框架。 RobotFrameWork Python实现的自动化测试利器，该篇章仅介绍UI自动化部分。 Java实现UI自动化 文档写于2016年，Java实现的UI自动化，仍有借鉴意义。 MonkeyRunner 该工具目前的应用场景已不多，文档已删，为了排版好看才留着。
上一篇学习完后，我们知道HTML骨架包含DTD、html标签对，html标签对还嵌套了 head 标签对和 body 标签对。我们也知道 head 标签对里是网页的配置，body标签对里是网页的内容。这篇文章就先来了解一些网页的基础配置。
⭐️ 网页的基础配置
🌟 字符集
字符集是网页的基础配置，在<meta>标签中设置。
<meta>标签 也叫做元标签，标签中的 charset 是字符集属性，用来设置网页的字符集。(charset 可以理解成meta标签的属性)。
字符集有很多种，我们最常用的就是UTF-8、gb2312和gbk。UTF-8是最全的字符集，一般都是默认使用这个字符集。UTF-8和gb2312(gbk)的区别如下：
| 字符集 | 涵盖字符 | 1个汉字字节数 | 适用场景 |
|---|---|---|---|
| UTF-8 | 涵盖全球所有国家、 民族的文字和大量图形字符 | 3 | 制作有非汉字文字的网页 |
| gb2312(gbk) | 收录所有汉字字符（包括简体、繁体） 和英语、少量韩语、日语和少量图形字符 | 2 | 制作只有汉语和英语的网页， 由于1个汉字仅占2字节，网页文件尺寸明显减少 |
无论使用哪种字符集，一定要在VS Code编辑器中将文件也设置为相同字符集，如果不相同则会出现乱码：
更改html文件的字符集方法：
更改完成之后再次浏览该文件就不会出现乱码了。
注意：Live Server插件不支持gb2312(gbk)字符集，只支持UTF-8字符集，所以如果将字符集设置为gb2312/gbk，只能双击网页文件进行浏览。
🌟 title标签
title标签用来设置网页的标题，文字会显示在浏览器的标签栏上。例如百度首页的title:
title的用途：
title也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置title是非常必要的。
🌟 网页关键词和页面描述
合理设置网页的关键词和页面描述，也是提高搜索概率/SEO的重要手段。
什么是SEO?
SEO（Search Engine Optimization，搜索引擎优化）利用搜索引擎的规则提高网站
在有关搜索引擎内的自然排名(不用花钱也可以提升的排名……)，让网站在搜索引擎的结果
中占据领先地位，获得品牌收益。
使用 <meta>标签 设置网页关键词和描述，name属性 非常关键，用来设置 meta 的具体功能。
<meta name="keywords" content="用来设置网页关键词">
<meta name="description" content="用来设置网页页面描述">
例如CSDN的网页关键词和页面描述：
⭐️ 实战 - 设置title、网页关键词、页面描述小实战
例如一个天气预报网站，我们可以这样设置它的title、网页关键词和页面描述：
