前端HTML要了解的知识,DOCTYPE 声明究竟是做什么的、作用是什么?

news2024/11/20 14:17:09

🌟🌟🌟 专栏详解 🎉 🎉 🎉

欢迎来到前端开发之旅专栏! 不管你是完全小白,还是有一点经验的开发者,在这里你会了解到最简单易懂的语言,与你分享有关前端技术和实用技巧的内容。此专栏的目标是提供易于理解且实用的内容,通过深入浅出的方式让大家掌握前端开发的核心概念和技能。我也相信,通过这个专栏,各位开发者们将更好地理解Web开发的本质,从而掌握更深层次的技术。Are you ready? 各位开发者们你们准备好了吗?
在这里插入图片描述

文章目录

  • 一、DOCTYPE究竟是做什么的?
  • 二、DOCTYPE的作用
      • 2.1、 确定文档类型
      • 2.2、 触发浏览器进入相应的文档模式:
      • 2.3、验证和错误检测
      • 2.3、向开发者和工具提供信息
    • 结语

一、DOCTYPE究竟是做什么的?

在我们构建一个html文件时,我们常常会发现,一个标准的html并不是只会有htmlheadbody这三个标签,而是会有很多另外的标签包裹在其中,诸如 <!DOCTYPE html>
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  归来巨星
</body>
</html>

<!DOCTYPE html> 写在头部,并且没有结束标签,和我们之前所学习到的单标签,双标签不一致,那么接下来就为大家介绍此标签的作用

DOCTYPE声明是HTML文档的一条特殊指令,它告诉浏览器如何正确解析和显示网页。我们写这个的作用就是让浏览器认识我们这个html页面(当然大家或许会说,那我不写也能呈现出来页面呀?注:因为现在很多浏览器都有着一定各自的标准,但是基本的差异其实是大差不差的,都对html进行了一定的识别所以能呈现出来效果)

首先,DOCTYPE声明的格式是,就像是一种开头的标识。它告诉浏览器,这个网页是用HTML这种语言写的,并且是HTML5这个版本。

在html5之前还有多个版本(有兴趣的同学可以去了解一下)快速跳转

HTML 1.0(1993年):HTML的最初版本,提供了基本的文本标记和链接功能。

HTML 2.0(1995年):引入了一些新的标记和功能,例如表格和图像。

HTML 3.2(1997年):增加了更多的标记和功能,包括框架(Frameset)和表单(Form)。

HTML 4.01(1999年):对HTML进行了一些修订和标准化,引入了样式表(CSS)和脚本编程(Scripting)等功能。

XHTML 1.0(2000年):基于XML的HTML版本,强调文档的结构和规范性,更严格地遵循XML的语法规则。

XHTML 1.1(2001年):对XHTML 1.0进行了一些扩展和修订,增加了一些模块和规范。

HTML5(2014年):HTML的最新版本,引入了许多新特性和改进,如语义化标签(Semantic Tags)、多媒体支持、Canvas绘图、本地存储等。HTML5也更加灵活,并且提供了更好的跨浏览器兼容性。

二、DOCTYPE的作用

既然我们知道了HTML的DOCTYPE声明的作用是告诉浏览器如何解析和渲染HTML文档。那同样的我们也要知道DOCTYPE声明的具体作用是什么

2.1、 确定文档类型

DOCTYPE声明指定了HTML文档的类型和版本。不同的HTML版本可能具有不同的语法和功能,因此指定正确的DOCTYPE声明可以确保文档被正确解析。

2.2、 触发浏览器进入相应的文档模式:

根据DOCTYPE声明的不同,浏览器会进入不同的文档模式(也称为渲染模式或呈现模式),以确定如何解析和呈现HTML文档。常见的文档模式包括标准模式、怪异模式以及准标准模式。不同的文档模式会影响浏览器对HTML和CSS的解析规则和渲染结果,因此DOCTYPE声明对于确保一致的跨浏览器显示非常重要。

2.3、验证和错误检测

DOCTYPE明可以用于验证HTML文档的正确性。浏览器会根据指定的DOCTYPE声明来检查文档的结构和语法是否符合规范。如果存在错误或不合法的代码,浏览器可能会给出警告或错误信息,帮助开发者及时发现和修复问题。

2.3、向开发者和工具提供信息

DOCTYPE声明还为开发者和相关工具提供了关于文档类型和版本的重要信息。这有助于开发者选择适当的工具和技术来处理和处理HTML文档。

总的来说,DOCTYPE声明是HTML文档中的重要指令,用于指定文档类型和版本。它对于正确解析和渲染HTML文档以及确保文档在不同浏览器中一致显示非常重要。使用HTML5的DOCTYPE声明是现代Web开发的标准做法。

结语

✨ 每天创作一点点
✨ 开心快乐一整天
✨ 点赞关注加收藏
✨ 美好一天又一天

铁铁们 感谢支持 我需要你们的三连 👍👍👍
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1105305.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Vue3】响应式原理

【Vue3】响应式原理 一、问题什么是数据响应式&#xff1f;vue2使用Object.defineProperty实现响应式&#xff1f;Proxy和Reflect1、Proxy2、Reflect3、Proxy和Reflect的使用4、 使用Proxy和Reflect完成响应式 一、问题 1、Vue3的响应式原理和Vue2有什么不同呢&#xff1f; V…

zabbix中文乱码解决方法

1、 问题描述 zabbix在页面中将语言设置为中文后出现乱码问题 监控中文乱码解决方法 1、之前看过一个从Windows里面将本机电脑字体的ttf文件传入服务器中&#xff0c;但是Windows的C&#xff1a;\windows\fonts里面的字体TTF文件可能因为权限的原因无法传到服务器上&#x…

陪诊小程序|陪诊小程序关爱健康,无忧陪伴

随着社会发展和人们生活水平的提高&#xff0c;健康问题成为人们关注的焦点。然而&#xff0c;在就医过程中&#xff0c;许多患者常常感到孤独和无助&#xff0c;缺乏得到家人陪伴的温暖与安慰。为了解决这一问题&#xff0c;我们公司开发了一款创新的陪诊小程序软件&#xff0…

开启机器人学新时代,《机器人学建模、规划与控制》完美诠释未来

机器人学是未来发展的热点领域之一&#xff0c;而在这个领域中&#xff0c;建模、规划与控制则是必不可少的基础技术。今天作者要向大家推荐一本机器人学领域的经典教材——《机器人学建模、规划与控制》。 这本书由西安交通大学出版社出版&#xff0c;作者是机器人学专业的鼎…

JSX的本质

一、本质 React.createElement即h函数&#xff0c;返回vnode第一个参数&#xff0c;可能是组件&#xff0c;也可能是html tag组件名&#xff0c;首字母必须大写&#xff08;React规定&#xff09; 二、babel试一试 &#xff08;babel集成了jsx的编译环境&#xff09; // JSX…

【python海洋专题二十四】南海年平均海流图

【python海洋专题二十四】南海年平均海流图 南海年平均海流图都是些基础图形&#xff0c;但又是重要的&#xff01; 结果展示 关键语句 quiver([X, Y], U, V, [C], **kw)参考资料 图片 Python气象数据处理与绘图(11)&#xff1a;矢量箭头图(风场&#xff0c;通量场) - 简书…

海通国际:颐海国际第三方业务表现承压,关联方收入恢复

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;由于颐海国际&#xff08;01579&#xff09;发布2023年半年报&#xff1a;23H1主营业务收入同比-2.7%至26.16亿元&#xff0c;归母净利润同比36.0%至3.58亿元&#xff0c;海通国际发布关于颐海国际…

如何使用C/C++刷新修改已经打印显示在终端上的内容

写本文的起源是因为在安装一些工具的时候&#xff0c;发现在终端上并行安装的情况下&#xff0c;显示安装信息是会修改之前已经打印出来的内容&#xff0c;这是怎么做到的呢&#xff1f;抱着对这个问题的好奇我进行了一些探索。 终端是如何运行的 首先是最关键的问题&#xf…

一文了解数据管理框架以及数据战略制定方法

这一节主要介绍数据管理这一章的另一重要部分&#xff0c;也就是我们在数据管理经常使用到的数据管理框架以及数据战略制定方法。 要制定数据管理框架&#xff0c;或者是组织需要制定数据治理规划或数据管理规划&#xff0c;需要首先制定与业务战略对齐的数据战略。 01、数据…

图片转base64

图片转 base64 我们将展示如何将图片转换为 base64 编码&#xff0c;并演示如何读取选择的文件并显示在页面中。 base64 编码转换 const a atob("sasd"); // 将 base64 编码转换为原始字符串 console.log(a); // sasdconst b btoa(a); // 将原始字符串转换为 ba…

集结AI创新力量,“华为云杯”2023人工智能应用创新大赛圆满落幕

在AI梦想照进现实的同时&#xff0c;一场历时近三个月的“华为云杯” 2023 人工智能应用创新大赛终于落下帷幕。自6月份启动以来&#xff0c;此次大赛在全国范围内汇聚AI人才、聚焦AI应用场景创新&#xff0c;今年大赛吸引了来自全国各地的5714名优秀精英和153个优秀团队报名参…

00TD时尚儿童穿搭,这件小熊毛衣太好看了吧

寒冷的秋冬季怎么少的了毛衣呢 软糯亲肤又时尚百搭的款谁不爱 除了纯色还有条纹设计 可爱小熊图案可爱又吸睛 经典时尚的款怎么穿都好看哦&#xff01;

二叉树的前 中 后序的非递归实现(图文详解)

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;强烈推荐优质专栏: &#x1f354;&#x1f35f;&#x1f32f;C的世界(持续更新中) &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;…

在亚马逊云科技Amazon SageMaker上进行Stable Diffusion模型训练和推理

Stable Diffusion Quick Kit是一个基于亚马逊云科技Amazon SageMaker进行Stable Diffusion模型快速部署的工具包&#xff0c;包括了一组示例代码、服务部署脚本、前端UI&#xff0c;可以帮助可以快速部署一套Stable Diffusion的原型服务。 本文将介绍如何在SageMaker Training …

想要上抖音同城热搜榜很难吗

首先&#xff0c;我们需要了解抖音同城热搜榜的推荐机制。抖音采用了先进的推荐算法&#xff0c;根据用户的行为、兴趣和社交关系进行内容推荐。一个具有话题性的内容往往能够引发用户的讨论和传播。在创作过程中&#xff0c;可以从热门事件、潮流话题、地域特色等方面切入&…

VB.Net 任务管理器相关操作

WindowsExplorer 任务管理器 程序对进程文件操作类&#xff1a;&#xff08;实例&#xff09; 1、打开进程文件目录 2、激活窗口&#xff08;有主窗口的程序&#xff09; 3、关闭程序&#xff08;向进程文件发送关闭指令&#xff09; 4、结束进程 5、挂起 6、恢复挂起 …

MDNNSVM

介绍 h v , l ^{v,l} v,l σ \sigma σ((W v , l ) T ^{v,l})^T v,l)Th v , l − 1 ^{v,l-1} v,l−1b v , l ^{v,l} v,l) h 1 ^1 1 σ \sigma σ( ∑ v 1 V \sum_{v1}^V ∑v1V​W v , L 1 ) T ^{v,L1})^T v,L1)Th v , L ^{v,L} v,Lb v , L 1 ^{v,L1} v,L1) h 1 ^1 1是融合DN…

群晖synology DSM 7.2设置钉钉Webhooks通知

现在越来越多的小伙伴都有了自己的Nas系统&#xff0c;为了更加方便的接收Nas的消息&#xff0c;这篇文章带着大家一起配置一个钉钉&#xff08;机器人&#xff09;即时消息通知 首先登录钉钉的开放平台&#xff1a;开发者后台统一登录 - 钉钉统一身份认证 1.创建一个机器人&…

getBoundingClientRect使用场景(table固定表头)

getBoundingClientRect()用于获得页面中某个元素的左&#xff0c;上&#xff0c;右和下分别相对浏览器视窗的位置&#xff0c;是DOM元素到浏览器可视范围的距离&#xff08;不包含文档scroll的部分&#xff09;。该函数返回一个Object对象&#xff0c;该对象有6个属性&#xff…

【前端学习】—箭头函数和普通函数的区别(十四)

【前端学习】—箭头函数和普通函数的区别&#xff08;十四&#xff09; 一、箭头函数和普通函数的区别 const obj{fullName:zz,sayName(){console.log(this.fullName,this.fullName)//zz}}obj.sayName();const obj{fullName:zz,sayName:()>{console.log(this.fullName,this…