admin管理员组文章数量:1543652
- 当前子专栏 基础入门三大核心篇 是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益，文末名片加V！
- 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
- 福利：除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外，还可以通过加入星荐官共赢计划 加入私域社区。
- 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。
- 荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划” 发起人。
- 现象级专栏《白宝书系列》作者，文章知识点浅显易懂且不失深度；TFS-CLUB社区创立者，旨在以“赋能 共赢”推动共建技术人成长共同体。
- 🏆 白宝书系列
- 🏅 Python全栈白宝书
- 🏅 产品思维训练白宝书
- 🏅 全域运营实战白宝书
- 🏅 大前端全栈架构白宝书
文章目录
- ⭐️ 网页的基础配置
- 🌟 字符集
- 🌟 title标签
- 🌟 网页关键词和页面描述
- ⭐️ 实战 - 设置title、网页关键词、页面描述小实战
上一篇学习完后，我们知道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、网页关键词和页面描述：
版权声明：本文标题：〖大前端 - 基础入门三大核心之 html 篇⑤〗- 网页的基础配置 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1727099416a1097715.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论