HTML页面中head标签有啥用?——零基础自学网页制作
gaoyangw 2024-11-13 10:36 26 浏览 0 评论
head标签概述
通过之前三节的学习，我们基本了解了HTML标记语言的基本语法，也明确了一个基本原则，那就是网页中所有的可视信息都是写在<body></body>标签之间的，在一文中，我们为第一个页面添加了"标题"与"段落"标签，实际上，未来我们要说到的图片、音频、视频、表格以及区块等元素也是放在<body></body>标签之间的。
但是与<body></body>标签并列的<head></head>标签对于整个页面有什么作用呢？
Head就是头的意思，body是身体的意思。如果html页面是个人的话，我们看到的都是他的外表，比如发型、衣服等，这些都是穿在body（身体）上的，而这个人的服饰风格却与他的性格、教育程度、思维方式相关，这些是我们看不到的，是装在这个人的head（头）中的。因为脑袋中的观念不同，因此有人喜欢汉服，有人喜欢唐装。
一言以蔽之，<head>标签的作用是把控HTML页面的显示形式。
在<head>标签中添加<title></title>标签为网页指定显示在浏览器小窗口上的名字。代码示例如下：
<title>第一个网页</title>
图1
不要小看title标签，搜索引擎非常看重title标签中的文字信息，再进行关键字比对时，title中的文字占有较大权重。因此，认真选择title内容对你的页面是否能迅速被搜索引擎找到有着重要意义。关于搜索关键字我们会在下一节练习中再细致分析。
添加<link>标签为HTML页面引入图标、JavaScript脚本、CSS样式文件等。针对JavaScript脚本的引入，还有另外一个<script></script>标签可用。导入CSS样式文件也可以使用<style></style>标签，这个在学完HTML之后才会接触到，现在了解就可以。
通过以上学习我们知道了<head>标签中通常添加<title></title>,<link>以及<script></script>,<style></style>等标签。这些标签控制着html文件的通用图标引入、布局样式引入、交互脚本引入等功能。
如果页面都是给body穿上衣服，而穿什么样的衣服，如何搭配等因素缺是由head里的内容决定。
utf-8是啥？
在<head>标签中还有一个非常重要的<meta>标签（metadata：元数据，名字读不懂没关系，关键是怎么使用），这个标签可以为整个页面指定名称、被搜索时的关键字以及非常重要的文档字符编码功能。
在指定文档编码时，经常使用"utf-8"编码方式。
utf-8编码方式赋予了html页面显示中文（或其他非英文文字）的能力。这对今天的互联网世界来说是非常重要的功能。
utf-8这个重要的编码方式就在<head>标签中的<meta>标签中指定的。写法如下：
<head><meta charset="utf-8"><title>第一个网页</title></head><meta>标签不同于其他成对的标签，它是个单身汉，只有这一个标签，没有带有"/"符号的结尾标签。原因有两点；1.通常<meta>标签中不需要添加内容。2.使用<meta>标签只改变他的属性即可。什么叫"属性"呢？
大家看这行代码：<meta charset="utf-8">
"charset"就叫做<meta>标签中指定字符编码方式的属性。
在"charset"后面加"="号，这叫做指定属性值。
大家注意，指定的这个值叫"utf-8"，切记！utf-8两边要加引号！
下面我们就目前可以看明白的<meta>属性进行一下操作练习。
开始练习之前大家肯定有这样一个问题（没想到也没关系），那就是在之前的案例中，那个简单的网页并没有指定utf-8的字符编码方式，为什么页面的汉字照常显示了？
这其实是浏览器本身在后台为我们补齐了这段代码。我使用的是联想自带的浏览器，使用火狐、Google浏览器的小伙伴们估计也可以正常显示，如果使用低版本的ie浏览器，则无法正常显示。因为低版本的ie浏览器不具备补齐这段代码的功能。
关于meta标签与utf-8的编码方式先介绍到这里，下一节我们会在不同浏览器中测试添加utf-8或不添加utf-8的不同显示效果，并讲解meta标签中keyword（关键字）的使用方法。
HTML完整学习目录
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
相关推荐
- 打工人必备!赶紧收藏!DeepSeek的3个SEO隐藏技巧
-
引言：AI如何破解内容创作的“死亡循环”？你是否曾为每天写不完的选题、抓不住的热点、优化不了的排名而焦虑？当AI工具遇上SEO策略，这场“人机协作”的革命正在重塑内容生态。正如埃隆·马斯克所言：“AI...
- 如何提升网站权重（提高网站权重方法）
-
提升网站权重是优化网站在搜索引擎中排名的重要手段，以下是一些关键方法：优质内容：发布原创、有价值的内容是提升权重的核心。确保内容结构清晰，使用合适的关键词，同时避免过度优化。用户体验：优化网站加载速度...
- 小红书运营如何进行内容更新?有哪些频率建议?
-
在小红书上进行内容更新是一项需要策略和规划的工作。随着平台的不断发展，用户的需求和偏好也在不断变化，因此，及时更新内容显得尤为重要。接下来，将从几个方面介绍如何进行小红书内容更新，以及相关的频率建议。...
- 网页ui设计两大关键:响应式和可访问性的秘籍全揭秘
-
在快速发展的互联网时代，网页UI设计已成为连接用户与信息的桥梁。优秀的UI设计不仅能够吸引用户的注意力，还能提升用户体验，促进信息的有效传递。而在这其中，响应式设计和可访问性无疑是两大核心要素，它们共...
- 网站维护攻略:零宕机×极速体验×安全壁垒，让您的业务永远在线
-
网站维护是确保网站稳定运行、持续优化的重要过程，涉及技术管理、内容更新及安全防护等多个方面。作为网站管理员或IT团队的一员，了解和执行网站维护工作对于保持网站的高效运行和用户满意度至关重要。以下是网站...
- Vue应用性能优化实战:8 个提升页面加载速度的关键策略
-
一、构建优化与代码精简1.1代码分割与异步加载...
- 华小锦建站:做好这四点，搭建实用美观企业官网
-
在互联网时代，企业官网已成为推广产品与服务的核心渠道。随着互联网技术的飞速发展，众多企业深刻认识到网络推广的重要性。企业应立足自身，充分利用互联网平台，塑造更具吸引力的网上形象。通过精心搭建网站，宣传...
- 服务器对网站性能的优化（网站服务器速度对seo的影响）
-
在数字时代，网站已成为企业与客户互动的主要窗口。网站的加载速度、稳定性和用户体验直接影响到企业的品牌形象和业务成果。尽管网站优化涉及内容、设计和前端代码等多个方面，但服务器的性能同样扮演着至关重要的角...
- 优化网页性能的时候,需要考虑什么因素呢
-
在优化网页性能时，需要考虑以下关键因素：一、前端性能优化减少资源加载时间压缩图片和多媒体文件：通过压缩图片、视频和音频文件，减小文件大小，从而加快加载速度。选择合适的图片格式（如JPEG、PNG、We...
- 如何对网站进行优化以提高加载速度
-
对网站进行优化以提高加载速度，让.com、.top域名告诉您可以从以下几个方面着手：首先，压缩网站文件是关键。利用压缩算法，如Gzip，来减小CSS、JavaScript等文件的大小，从而缩短用户访问...
- QNAP 威联通 NAS 迅雷+百度云脱机远程下载解决方案
-
QNAP威联通NAS迅雷+百度云脱机远程下载解决方案一、前言家里一直想添置一台NAS，自己之前也折腾过黑群晖，PogoPlug，最终还是选择的QNAP（威联通）的产品，主要用途就是数据的分享和脱...
- 73颗磁力珠被5岁男孩吞下……消化道穿孔只能手术取出
-
“屡禁不止的磁力珠，要创年度磁力珠消化道穿孔之最吗？”连夜做完手术后，浙大儿院普外科章立峰副主任医师忍不住和同事感慨道。11月1日晚，章立峰和同事从一个5岁小男孩的小肠里取出73颗磁力珠。这是他们手术...
- 好用的磁力在线播放下载软件，云盘.吊打迅雷
-
pikpak,目前磁力在线播放下载都吊打某雷的软件。无视某雷屏蔽,解析播放速度也比某雷快。使用很方便。下载链接:https://toapp.mypikpak.com/activity/invited?...
- 6个让你10T硬盘立马爆掉的资源网站，再也不需要去百度上找资源了
-
你还在为找不到资源而烦恼吗？自己在网上总是找不到想要的资源，看这个电脑里面空空荡荡的10T硬盘，真的印证了一句话："英雄无用武之地"！如果你也是在网上找不到满意的资源，那么不用担心啦！这里小编为大家整...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 网站建设 (107)
- 网站开发 (47)
- 网络推广哪个平台好 (47)
- 百度收录 (50)
- 网页设计 (44)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 广州seo (47)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 网页制作 (47)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站收录查询 (46)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 网站设计模板 (45)
- 一键优化 (47)