在网页html代码中head表示
```html 你打开任何一个网页的源代码,第一眼看到的代码就是 先看一个真实的网页例子。这是代码某新闻网站首页的 短短几行,信息量不小。网页 还有 搜索引擎爬虫抓取页面时,第一眼看的也是 另外, 有个细节容易被忽略: 最后说一个真实教训。我曾经接手一个项目,页面在Chrome里正常,在Safari里字体全变成默认宋体。查了半天,发现 所以下次写HTML,别急着写在网页html代码中head表示
<head>。它夹在<html>和<body>之间,网页像一道窄门。代码门外是网页用户能看见的一切——文字、图片、代码按钮;门内是网页浏览器和搜索引擎读取的“后台信息”。我刚开始写HTML时,代码总把<head>当成一个放标题的网页盒子,后来才发现它管的代码事情远比标题多。<head>片段:<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>今日头条 - 全球要闻</title> <meta name="description" content="实时更新国内外重大新闻..."> <link rel="stylesheet" href="/css/main.css"> <script src="/js/analytics.js" defer></script> </head>
<meta charset="UTF-8">决定了页面能不能正确显示中文,代码少了它,网页汉字可能变成乱码。我见过一个老网站忘记写这一句,用户打开全是“æ–°é—»”,像外星文。<meta name="viewport">是移动端的开关,没有它,手机浏览器会假装自己是桌面,把页面缩成蚂蚁大小。<title>不只是标签页上的文字,它还是收藏夹里的默认名称、搜索引擎结果里的蓝色标题。<meta name="description">更隐蔽——它不显示在页面上,但可能出现在搜索结果的摘要里。写得好,点击率差一倍。<link>和<script>。它们把CSS和JavaScript引进来。CSS放在<head>里,浏览器会先下载样式再渲染页面,避免用户看到一闪而过的无样式内容。JavaScript放在<head>里就要小心,默认会阻塞渲染。现在很多人加defer或async属性,让脚本在后台下载。我调试过一个页面,因为把一个大脚本放在<head>里没加defer,白屏了整整三秒。用户早跑了。<head>当成“放标题的地方”,结果把所有CSS和JS都堆在<body>末尾。其实<head>才是浏览器最先解析的区域,它决定了页面的编码、视口、样式加载顺序、SEO基础。把它当垃圾桶,页面性能就遭殃。 <head>。<title>和<meta description>直接决定排名和摘要。我对比过两个内容相似的页面,一个认真写了<meta name="description">,另一个没写。前者在搜索结果里显示两行摘要,后者只显示一段随机抓取的正文。点击率差了40%。这不是玄学,是爬虫的读取逻辑。<head>里还能放<base>、<style>、<noscript>。比如<base href="https://example.com/">可以统一所有相对链接的基准地址,但容易引起混乱,我很少用。<style>直接写内联CSS,适合首屏关键样式,减少一次请求。但别把所有样式都塞进去,否则HTML文件会变得臃肿。<head>里的元素顺序也有讲究。字符编码<meta charset>必须在前1024字节内出现,否则浏览器可能重新解析。视口标签紧随其后。然后是<title>,再是其他<meta>、<link>、<script>。我习惯把CSS放在JS前面,因为样式阻塞渲染,脚本阻塞解析,先让页面有样子,再让交互生效。<head>里漏了<meta charset="UTF-8">,而Safari对编码的猜测更保守。补上这一行,问题消失。你看,<head>里每一个标签都不是摆设,它们像舞台背后的工作人员,观众看不见,但演出能不能顺利进行,全靠他们。<body>。先想清楚:这个页面用什么编码?在手机上怎么显示?标题写什么?描述怎么写?样式和脚本怎么加载?把这些塞进<head>,再开始画界面。顺序对了,后面少踩很多坑。