跳到主要内容

文档和元信息✅

说一下 HTMl 下有哪些元素​

答案

  1. 根元素

    • <html>: 文档的根元素
    • <body>: 文档主体

  2. 文档元数据

    • <head>: 文档头部区域
    • <title>: 文档标题
    • <base>: 文档中相对 URL 的基准 URL
    • <link>: 外部资源链接
    • <meta>: 元数据
    • <style>: 样式信息

  3. 内容元素

    • <header>: 页眉
    • <nav>: 导航
    • <main>: 主要内容
    • <article>: 文章
    • <section>: 区块
    • <aside>: 侧边栏
    • <footer>: 页脚
    • <h1>-<h6>: 标题
    • <address>: 联系信息

  4. 文本内容

    • <div>: 通用容器
    • <p>: 段落
    • <hr>: 水平分割线
    • <pre>: 预格式化文本
    • <blockquote>: 块引用
    • <ol>: 有序列表
    • <ul>: 无序列表
    • <li>: 列表项
    • <dl>: 定义列表
    • <dt>: 定义术语
    • <dd>: 定义描述
    • <figure>: 图文组合
    • <figcaption>: 图文说明

  5. 内联文本语义

    • <a>: 超链接
    • <em>: 强调
    • <strong>: 重要
    • <small>: 小号字体
    • <s>: 删除线
    • <cite>: 引用
    • <q>: 行内引用
    • <dfn>: 定义
    • <abbr>: 缩写
    • <data>: 机器可读数据
    • <time>: 时间
    • <code>: 代码
    • <var>: 变量
    • <samp>: 程序输出
    • <kbd>: 键盘输入
    • <sub>: 下标
    • <sup>: 上标
    • <i>: 斜体
    • <b>: 粗体
    • <u>: 下划线
    • <mark>: 标记
    • <ruby>: 注音
    • <rt>: 注音文本
    • <rp>: 注音括号
    • <bdi>: 双向文本隔离
    • <bdo>: 文本方向
    • <span>: 通用行内容器
    • <br>: 换行
    • <wbr>: 可选换行

  6. 图片和多媒体

    • <img>: 图片
    • <audio>: 音频
    • <video>: 视频
    • <source>: 媒体源
    • <track>: 媒体轨道
    • <map>: 图像映射
    • <area>: 图像映射区域
    • <picture>: 图片容器

  7. 内嵌内容

    • <iframe>: 内联框架
    • <embed>: 嵌入外部内容
    • <object>: 嵌入对象
    • <param>: 对象参数
    • <portal>: 门户元素

  8. 脚本

  • <script>: 脚本
  • <noscript>: 不支持脚本时的替代内容
  • <canvas>: 画布
  • <dialog>: 对话框
  1. 表格内容
  • <table>: 表格
  • <caption>: 表格标题
  • <colgroup>: 表格列组
  • <col>: 表格列
  • <thead>: 表头
  • <tbody>: 表格主体
  • <tfoot>: 表格页脚
  • <tr>: 表格行
  • <td>: 单元格
  • <th>: 表头单元格

  1. 表单

    • <form>: 表单
    • <label>: 标签
    • <input>: 输入框
    • <button>: 按钮
    • <select>: 下拉选择
    • <datalist>: 数据列表
    • <optgroup>: 选项组
    • <option>: 选项
    • <textarea>: 多行文本框
    • <output>: 输出
    • <progress>: 进度条
    • <meter>: 度量衡
    • <fieldset>: 表单分组
    • <legend>: 分组标题

  2. 交互元素

  • <details>: 详细信息
  • <summary>: 详细信息标题
  • <dialog>: 对话框
  1. Web 组件
  • <slot>: 插槽
  • <template>: 模板

延伸阅读

HTML5 中 meta 标签作用是啥​

答案

HTML5 中的 meta 标签用于提供关于 HTML 文档的元数据（metadata），不会直接在页面上显示，但对浏览器、搜索引擎和其他服务非常重要。常见作用包括：

作用示例说明
字符编码声明<meta charset="UTF-8">指定页面字符集，防止乱码
视口设置<meta name="viewport" content="width=device-width, initial-scale=1.0">移动端响应式布局基础
SEO信息<meta name="description" content="页面描述">``<meta name="keywords" content="关键词1,关键词2">``<meta name="author" content="作者名">搜索引擎优化相关信息
缓存控制<meta http-equiv="cache-control" content="no-cache">``<meta http-equiv="expires" content="0">``<meta http-equiv="pragma" content="no-cache">控制浏览器缓存策略
安全策略<meta http-equiv="Content-Security-Policy" content="default-src 'self'">防止XSS等攻击，增强安全性
刷新/重定向<meta http-equiv="refresh" content="5;url=https://example.com">页面自动刷新或跳转

注意事项：

  • meta 标签应放在 <head> 内。
  • 字符集声明应尽量靠前，避免乱码。
  • 滥用关键词和描述不会提升 SEO，需合理设置。
  • 安全相关的 meta（如 CSP）需谨慎配置，避免误伤正常功能。

参考：

header 的作用 和 head 的区别​

答案
对比项<header><head>
语义页面头部内容，通常包含导航、logo、标题等文档元数据，包含样式、脚本、meta等信息
位置<body> 内，多处可用<html> 内，仅有一个
内容导航、logo、标题等只含元数据，不显示
子元素<h1>-<h6>、<nav>等<title>、<meta>等
可见性是否
答案

CSS <link> 放在 <head>，JS <script> 放在 </body> 前，主要是为了优化页面渲染速度和用户体验，避免阻塞渲染。

  • CSS 是渲染页面内容所必需的，浏览器在解析 HTML 时遇到 <link> 会立即加载并阻塞渲染，确保页面样式在内容显示前就绪，防止“无样式内容闪烁”（FOUC）。

  • JS <script> 默认会阻塞 HTML 解析，若放在 <head>，会延迟页面内容渲染，影响首屏速度。放在 </body> 前，能让 HTML 和 CSS 先加载、渲染，提升用户体验。

  • 例外情况：

    • 需要在页面渲染前执行的 JS（如 polyfill、关键监控脚本）可放在 <head>，但应加 defer 或 async 属性减少阻塞。
    • 某些 CSS（如 @import 动态样式）或 JS（如模块化、ESM）有特殊加载需求。
    • SPA 框架常用 defer、async 或模块化 <script type="module">，可安全放在 <head>。
<!-- 推荐写法 -->
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- ... -->
  <script src="main.js"></script>
</body>

<!-- 例外：关键 JS，使用 defer -->
<head>
  <script src="polyfill.js" defer></script>
</head>

延伸阅读

提示

实际开发中，推荐为 JS 脚本加上 defer 或 async，既可放在 <head>，又不会阻塞页面渲染。

答案

HTML <link> 标签用于在文档与外部资源之间建立关系，常用于引入样式表、图标等。其常用属性及作用如下表：

属性作用说明示例值/说明
rel指定当前文档与外部资源的关系stylesheet、icon
href外部资源的 URL/style.css
type指定资源的 MIME 类型text/css、image/png
media指定资源适用的媒体类型或查询条件screen、print、(max-width:600px)
sizes指定图标资源的尺寸（仅 rel=icon 时有效）16x16、32x32
crossorigin设置跨域请求策略（如加载字体、图标等）anonymous、use-credentials
as资源类型（仅预加载/预获取时使用）script、style
title资源的标题（部分场景下可用于切换样式表）暗色模式
integrity子资源完整性校验，防止资源被篡改sha384-xxx
disabled禁用样式表（仅切换样式表时用）true/false
<!-- 引入样式表 -->
<link rel="stylesheet" href="/main.css" media="all">

<!-- 引入网站图标 -->
<link rel="icon" href="/favicon.ico" sizes="32x32" type="image/x-icon">

<!-- 预加载字体资源 -->
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
提示

常用场景：rel="stylesheet" 用于引入 CSS，rel="icon" 设置网页图标，rel="preload" 优化资源加载。

延伸阅读

48%