第三篇、基本骨架结构

Despupilles
25 阅读5分钟

基本结构

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>

<body>
    <!-- 之后内容写这里 -->
</body>

</html>

结构介绍

  • <!DOCTYPE html>：指定浏览器用 HTML5 规则解析页面，避免怪异模式，必须放在页面首行
  • <html lang="zh_CN"></html>：HTML 文档的唯一根标签，所有内容必须嵌套在其中
    • lang(必须)属性：声明网页主语言，辅助工具做语言相关的适配处理
      • 常用值：zh-CN（简体中文）、en（英文）
  • <head></head>：存储元信息、资源链接等非可视化内容，支撑网页运行和搜索引擎识别
  • <body></body>：承载所有用户可见的页面内容，是网页呈现的核心载体
  • <!--注释内容-->：注释内容不会被浏览器渲染显示，仅用于开发人员理解代码，可放在 HTML 文档任意位置

head元素内标签

  • <title>网页标题</title>：定义网页标题（显示在浏览器标签 / 搜索结果），标识网页主题，提升用户识别度，是 SEO 优化的核心要素之一
  • <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"/>：用于定义网页元数据（字符编码、视口、搜索引擎信息等）
    • charset(高频)属性：指定 HTML 文档的字符编码格式（如utf-8），确保浏览器能正确解析页面文字，避免乱码
    • name + content (组合使用)属性：定义各类网页元信息，键值对形式传递
      • name="viewport" content="width=device-width, initial-scale=1.0"：适配移动端视口，控制页面缩放
      • name="keywords" content="HTML,前端,教程"：设置网页关键词，辅助搜索引擎收录
      • name="description" content="HTML基础教程"：设置网页描述，展示在搜索结果页
    • http-equiv + content (组合使用)属性：模拟 HTTP 响应头，控制网页行为
      • http-equiv="refresh" content="5;url=https://www.example.com"：5 秒后自动跳转到指定网址
  • <base href="" target=""/>：定义网页中所有相对 URL 的基准地址 / 默认打开方式；一个文档仅能有一个，且必须放在<head></head>内所有含 URL 的标签（如<a>、<link>）之前
    • href(可选)属性：设置所有相对链接的基准 URL，页面中相对路径会拼接该值作为完整地址
      • 示例：href="https://www.example.com/assets/"，则<a href="img/logo.png">实际指向https://www.example.com/assets/img/logo.png
    • target(可选)属性：定义页面中所有链接的默认打开方式，优先级低于链接自身的target属性
      • 常用值：_blank（新窗口打开）、_self（当前窗口打开，默认值）、_parent（父框架打开）、_top（顶层框架打开）
    • 注意：若同时设置href和target，需写在同一个<base>标签中，不可拆分定义
  • <link rel="" href="" type=""/> ：在 HTML 文档和外部资源间建立关联，核心用于引入样式、定义网页图标等
    • rel(必须)属性：声明当前文档与关联资源的关系类型，浏览器据此识别资源用途
      • stylesheet（关联外部 CSS 样式表）、icon（定义网页图标favicon）、preconnect（提前建立与目标域名的连接，优化资源加载速度）
    • href(必须)属性：指定关联外部资源的 URL 地址（绝对 / 相对路径均可）
    • type(可选)属性：声明资源的 MIME 类型，帮助浏览器识别资源格式，现代浏览器可自动识别，无需手动写
      • text/css（CSS 文件）、image/x-icon（图标文件）
  • <style type="text/css">CSS样式</style> ：在网页内部编写 CSS 样式，直接控制页面布局和外观，无需引入外部样式文件
    • type(可选)属性：声明样式表类型，HTML5 中默认值为text/css，可省略不写
  • <script type="text/javascript">JS代码</script> ：引入外部 JS 文件（可单标签写法）或编写内部 JS 代码，实现网页动态交互逻辑
    • src(可选)属性：指定外部 JS 文件的 URL 地址（绝对 / 相对路径）（无src时，标签内写内部 JS 代码；有src时，标签内代码无效）
    • type(可选)属性：声明脚本类型，HTML5 中默认值为text/javascript，可省略不写；type="module"时，将 JS 作为 ES6 模块解析，支持import/export语法
    • defer(可选)属性：布尔属性，使脚本延迟执行（HTML 解析完后按顺序执行），不阻塞页面渲染
    • async(可选)属性：布尔属性，使脚本异步加载（加载完立即执行），不保证多个脚本的执行顺序
    • 注意：无defer/async时，<script>会阻塞 HTML 解析；操作 DOM 的脚本建议放<body>末尾或加defer
  • <noscript>内容</noscript> ：当页面依赖 JS 实现核心功能，但用户浏览器关闭了 JS、或使用的是极老旧不支持 JS 的浏览器时，<noscript></noscript>内的内容会显示出来，保证用户能看到基础提示或内容，提升页面兼容性

各标签放置位置速览

  • <title>/<meta>/<base>/<link> ：仅能放在 <head> 中，是网页基础配置，放 <body> 无效；
  • <style> ：优先放 <head>（避免页面闪屏），也可放 <body>（仅局部样式）；
  • <script> ：<head>/<body> 都可放：
    • 放 <head>：需加 defer/async（避免阻塞渲染），仅用于初始化代码；
    • 放 <body> 末尾：操作 DOM 首选，不阻塞渲染；
  • <noscript> ：<head>/<body> 都可放：
  • 放 <head>：仅提示 JS 禁用（无可视化内容）；
  • 放 <body>：展示替代内容（如提示文案、静态页面），更常用。

href和src属性

  • href (Hypertext Reference) ：超文本引用，用于建立当前文档与外部资源的「关联关系」，浏览器解析时不会暂停当前文档处理，仅记录关联指向
    • 核心特点：关联而非嵌入，资源不会替换当前文档内容，只是建立链接
    • 常用标签：<link>（引入 CSS）、<a>（超链接）、<base>（基准地址）
  • src (Source) ：资源地址，用于将外部资源「嵌入」当前文档中，浏览器解析时会暂停当前文档处理，直到资源加载 / 执行完成
    • 核心特点：嵌入并替换，资源会成为文档的一部分，需等待加载执行
    • 常用标签：<script>（引入 JS）、<img>（图片）、<iframe>（内嵌页面）
avatar
文章
阅读
粉丝