HTML入门教程20:HTML头部

news/2024/10/30 13:59:51/

一、HTML头部的基本结构

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文档标题</title><link rel="stylesheet" href="styles.css"><script src="script.js"></script>
</head>
<body><!-- 文档内容 -->
</body>
</html>

二、头部标签详解

  1. <title>

    • 定义了文档的标题,在浏览器标签栏或窗口标题中显示。
    • 每个HTML文档都应该有且仅有一个<title>标签。
  2. <meta>

    • 提供了关于HTML文档的元数据,如字符集、页面描述、关键词等。
    • 常见的<meta>标签包括:
      • <meta charset="UTF-8">:定义文档的字符编码为UTF-8。
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">:用于响应式设计,使页面在移动设备上正确显示。
      • <meta name="description" content="页面描述内容">:提供页面的简短描述,有助于搜索引擎优化(SEO)。
  3. <link>

    • 用于链接外部资源,如CSS样式表。
    • 常见的用法是链接样式表:<link rel="stylesheet" href="styles.css">
  4. <script>

    • 用于嵌入或引用JavaScript代码。
    • 可以在<head>中引用外部JavaScript文件:<script src="script.js"></script>
    • 也可以直接在<script>标签内编写JavaScript代码。
  5. <style>

    • 用于在文档内嵌入CSS样式。
    • 示例:<style>body { background-color: lightblue; }</style>
  6. <base>

    • 指定了页面中所有相对URL的基准URL。
    • 示例:<base href="https://www.example.com/">
  7. 其他标签

    • <noscript>:当浏览器不支持或禁用了JavaScript时,显示替代内容。
    • <header>(HTML5新增):定义文档或文档部分的页眉,但通常不放在<head>标签内,而是放在<body>中作为内容的一部分。

三、注意事项

  1. 头部标签的顺序:虽然HTML规范对头部标签的顺序没有严格规定,但建议按照一定的顺序来排列,以便提高代码的可读性和维护性。

  2. 性能优化:为了提高页面加载速度,建议将CSS样式表放在<head>标签内,而将JavaScript脚本放在<body>标签的底部。这是因为浏览器在解析HTML文档时,会按照标签的顺序逐个加载资源。将CSS放在头部可以确保样式在页面内容加载之前被应用,而将JavaScript放在底部可以避免脚本阻塞页面的渲染。

  3. 响应式设计:使用<meta name="viewport">标签来确保你的网页在移动设备上能够正确显示和缩放。

通过合理地使用HTML头部标签,你可以为网页提供必要的元数据和样式,同时提高网页的可访问性、可搜索性和用户体验。


http://www.ppmy.cn/news/1543119.html

相关文章

【计算机图形学】 a.世界坐标系 - > 相机坐标系 b.正交投影和透视投影 c.视椎体

总结&#xff1a;计算机图形学更适合精通高等数学和线性代数的美術理论生 文章目录 虚拟照相机观察变换相机的控制 【世界坐标系 - > 相机坐标系】总 - 投影变换【正交投影】 - Orthographic Projection视景体&#xff08;裁剪体&#xff09;投影规范化&#xff08;Projecti…

Win11GBK, idea2024.2.4, 使用Gradle8.8本地安装构建,不使用包装器, 解决utf-8乱码问题, 笔记241028

Win11GBK, idea2024.2.4, 使用Gradle8.8本地安装构建,不使用包装器, 解决utf-8乱码问题, 笔记241028 解决办法: 在 gradle.properties 配置文件中, 设置jvm启动项参数, 字符编码设为gbk, -Dfile.encodinggbk 与操作系统保持一致; -Dfile.encodinggbk如: org.gradle.jvmargs-Xm…

【Linux】信号量,线程池

目录 信号量 初始化​编辑 销毁 等待 发布 基于环形队列的生产消费模型 问题解答&#xff1a; 代码&#xff1a; 线程池 线程池的实现 &#xff08;1&#xff09;初始化&#xff0c;构造大致框架 &#xff08;2&#xff09;创建线程 &#xff08;3&#xff09;创建任…

单细胞数据分析(三):单细胞聚类分析

文章目录 介绍目的加载R包数据链接导入数据可视化聚类选择聚类分辨率值输出结果系统信息介绍 单细胞聚类分析是一种用于解析单细胞RNA测序(scRNA-seq)数据的方法,旨在将成千上万个单细胞根据它们的基因表达模式分组到不同的类别或“簇”中。每个簇代表了具有相似基因表达特…

rnn/lstm

tip&#xff1a;本人比较小白&#xff0c;看到july大佬的文章受益匪浅&#xff0c;现在其文章基础上加上自己的归纳、理解&#xff0c;以及gpt的答疑&#xff0c;如果有侵权会删。 july大佬文章来源&#xff1a;如何从RNN起步&#xff0c;一步一步通俗理解LSTM_rnn lstm-CSDN博…

微服务的发布策略与设计约束

分布策略微服务架构中的蓝绿发布和金丝雀发布策略是两种常见的版本控制和发布管理方法,旨在提高软件的发布安全性和可用性。 蓝绿发布 概念:蓝绿发布是一种将两个相同的环境(蓝和绿)进行交替使用的发布策略。在某个时刻,只有一个环境在处理用户请求,而另一个环境则处于…

EJB项目如何升级SpringCloud

记录某金融机构老项目重构升级为微服务过程1 如何从EJB架构拆分微服务 这个非常有趣的过程&#xff0c;整个过程耗时大致接近半年时光&#xff0c;需要考虑到重构升级保留原来的业务线&#xff0c;而且还要考虑后续的维护成本&#xff0c;保留现有的数据库表结构&#xff0c;…

vue3父组件控制子组件表单验证及获取子组件数值方法

1、关键部分的代码如下&#xff0c;我努力交代清楚了&#xff0c;希望能让大家看懂。 <template><KeepAlive><component ref"comp" :is"compNames[steps[compIndex].comp]" /></KeepAlive><el-button click"prevBtn"…