专栏首页编程创造城市html中的<!DOCTYPE html>起到什么作用?前端面试经常考到

html中的<!DOCTYPE html>起到什么作用?前端面试经常考到

相信很多小伙伴都写过html代码,即使是一些刚接触零基础网页编程的小伙伴也是,但是很多人在学习到html较多以后,却不知,在一个网页创建的时候,很多编辑器都会自动为网页键入一行代码<!DOCTYPE html>你注意到了吗?

举例hbuilder在新建一个html网页的时候会自动增加如下代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>

很多人都注意到了html根标签,但是却忽视了网页中的开头的第一行代码。然而在前面面试中,特别喜欢问很多人忽视的这些代码,譬如就是<!DOCTYPE html>

注意:<!DOCTYPE>来什么一个文档类型,必须要写在第一行,实际上写过程序的人都清楚,计算机程序在读代码文件的时候就是默认从上到下,从左到右来读取的。

先来解释一下<!DOCTYPE html>到底是什么意思?

实际上<!DOCTYPE html>就是告诉所有的浏览器在进行页面渲染解析的时候按照W3C的网页标签解析标准来解析渲染页面,这个标准实际上是html5中的w3c标准,所有支持html5的浏览器都支持这个标签解析标准。

老的网页程序源码都知道,在html4及以下的开头一行都是非常长的,并且直接暴露了w3c的网址,例如:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

尾声:

其实在浏览器中存在两种文档解析模式:

1.怪异模式:BackCompat,使用浏览器自己的模式解析标签。

2.标准模式:CSS1Compat,使用W3C标签来解析标签。

使用了<!DOCTYPE html>就相当于开启了CSS1Compat模式,让浏览器按照该W3C标准解析html标签和css代码


相关文章:

html网页开发基础

本文分享自微信公众号 - 编程创造城市(bcczcs),作者:刘金玉编程

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍

    html翻译一下:hype text mark language 超文本标记语言

    刘金玉编程
  • vue如何在页面上面输出html代码效果

    一般情况下vue中使用双大括号{{这里是变量}} 这种形式输出变量的话,即使变量中是html代码,它输出的结果也会将html代码转为普通文本输出。

    刘金玉编程
  • html网页开发基础

    1.可以写网页名称(显示在浏览器的左上方),网页名称用标记<title></title>

    刘金玉编程
  • Django之Template

    这样在浏览器中渲染出的就是sfencs,即把{{ name }}替换成了views函数传递的字典对应的值。

    py3study
  • [Go] gin框架渲染html字符串

    在文档里有直接渲染一个html的文件 , 但是我的需求是渲染html的字符串 , 因为我的html要打包进二进制 , 不能只是外部文件的形式

    陶士涵
  • web前端入门

    8 = html + css +javascript(jQuery和vue就是js封装的函数而已)

    小闫同学啊
  • salesforce零基础学习(七十二)项目中的零碎知识点小总结(一)

    项目终于告一段落,虽然比较苦逼,不过也学到了好多知识,总结一下,以后当作参考。 一.visualforce标签中使用html相关的属性使用 曾经看文档没有看得仔...

    用户1169343
  • HTML-CSS的三种使用方式

    HTML标签其实是为了展示文档而发明的,而标签的出现是为了满足文档的展示效果。HTML 提供的标签有很多,比如 div、span、a、img、p 等等,其中 d...

    傅_hc
  • 零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍

    html翻译一下:hype text mark language 超文本标记语言

    刘金玉编程
  • 项目练习:自己写一个读取指定html文件的Razor

    静心物语313

扫码关注云+社区

领取腾讯云代金券