HTML head标签与body标签的区别是什么？附代码片段咨询

嘿，我来帮你理清楚这俩标签的关键差异，顺便给你看看代码里的问题哈～

核心区别 #

• 定位和用途完全不同

  • <head>是页面的「幕后指挥区」：里面的内容不会直接显示在浏览器页面上，主要用来给浏览器、搜索引擎传递页面的关键元信息——比如字符编码、页面标题、要加载的样式表、外部脚本文件（或者不立即执行的脚本）等等，是页面正常渲染和被识别的基础。
  • <body>是页面的「前台展示区」：所有你想让用户看到的内容，比如文字、图片、按钮、列表、布局块儿，全得放在这个标签里，这是用户打开页面后直观看到的所有内容的容器。

• 允许放置的元素不一样

  • <head>里只能放元数据相关元素：比如<meta>、<title>、<link>、<style>、<script>（用于引入外部脚本或定义非立即执行的脚本）、<base>这些，绝对不能放<div>、<p>、<ul>这类用来展示内容的元素，不然浏览器解析会出问题。
  • <body>里则是可视化元素的地盘：所有能显示的HTML元素都能放，也能放<script>（用来写页面交互逻辑），但<meta>、<link>这类元数据元素别放这儿，不符合HTML规范，还可能导致页面异常。

• 解析和渲染顺序有差异

  • 浏览器会优先解析<head>里的内容：先搞定字符编码、加载样式表，这样后面渲染<body>内容的时候，才能正确应用样式、避免乱码，保证页面渲染的流畅性。
  • <body>的内容是在<head>解析完成后才开始渲染的，是用户最终看到的页面主体。

你的代码问题修正 #

你这段代码把元素放错位置啦，我帮你调整成符合规范的版本：

错误代码 #

<html> 
<head> 
<script></script> 
<div class="container"> 
  <div class="jumbotron"> 
    <p>Hello I am Dikshit</p> 
    <ul>
      <li class="">Hello</li> 
      <li> India</li> 
    </ul> 
  </div>
</div> 
</head> 
<body> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn...

修正后的代码 #

<html> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn...">
  <script></script> 
</head> 
<body> 
  <div class="container"> 
    <div class="jumbotron"> 
      <p>Hello I am Dikshit</p> 
      <ul>
        <li class="">Hello</li> 
        <li> India</li> 
      </ul> 
    </div>
  </div> 
</body>
</html>

修正点说明： #

• 把<meta>、<link>这类元数据元素移到了<head>的正确位置
• 把用于展示的<div>、<p>、<ul>等元素放到了<body>里，确保浏览器能正常渲染
• 补充了<link>标签的闭合，让代码更规范

内容的提问来源于stack exchange，提问作者Dikshit Kathuria