网页基本信息

Lhuang-attic

已于 2024-04-28 16:53:59 修改

阅读量416

点赞数 4

分类专栏： HTML 文章标签： html 前端

于 2024-04-28 16:39:27 首次发布

本文链接：https://blog.csdn.net/chuxiqianye2020/article/details/138283047

版权

HTML 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的DOCTYPE声明、title标签、meta标签（包括关键字、描述和viewport）的作用。通过讲解如何在代码中使用这些元素，以及查看源代码的方法，帮助读者理解网页基础结构和SEO优化。

摘要由CSDN通过智能技术生成

网页基本信息

DOCTYPE声明
< title >标签
< meta > 标签

小tips：打开我们上次新建好的HTML基本结构，在英文模式下输入，这是html程序里的注释，它里面的内容不会影响程序的运行且能用于标记代码的作用等。这个注释如果每次都手动输入还是比较麻烦的，这时可以用快捷键’Ctrl + /'即可直接生成注释。

DOCTYPE

在HTML基本结构中第一行是,DOCTYPE表示的是告诉浏览器，我们要使用什么规范，因为浏览器默认用的都是HTML，所以就算把这一句删除，代码还是可正常运行的；然后就是基本结构里的标签这是一个总的大标签 ,我们所有的html代码必须在这个总的标签里写；然后就是body标签，这是网页的主题，网页显示什么内容就是由body标签中的内容决定，如下图。

请添加图片描述

title标签

顾名思义，该标签就是用来显示网页标题的，如上图。

meta标签

meta标签也叫元标签，里面的元素叫元数据。这个标签是用来描述网站信息的，它不会展示给用户看，平时我们会通过关关键字搜索自己想要的网页，为什么能够搜到网页就是因为meta标签里的描述有关键字的信息。

<head>
    <!-- keyword是与页面内容相关的关键字 -->
    <meta name="keyword"content="小黄的阁楼，Lhuang_attic">
    <!-- description是描述 -->
    <meta name="description"content="和我一起学编程">
    <!-- viewport是视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

keywords：与页面内容相关的关键词，使用逗号分隔。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类
description：是一段简短而精确的、对页面内容的描述
viewport：为viewport（视口）的初始大小提供指示。目前仅用于移动设备；width用来设置viewport的宽度为设备宽度；initial-scale为设备宽度与viewport大小之间的缩放比例。

我们在网页端右键，点击查看源代码

请添加图片描述