(X)HTML中常常被忽略的DOCTYPE

本文解析了HTML和XHTML文档中DOCTYPE声明的作用及语法,包括其在不同文档类型中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在html文件的开始,我们都能看到这样的语句:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

这个语句被称作“文档类型定义语句”,其中的“DOCTYPE”就是文档定义类型的标签,“<!DOCTYPE ”这一段表示这个标签开始,"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 这一部分表示它指定了一个html的规范文件,这个规范文件说明了在一个网页文件当中所能够使用的html标签以及这些标签之间的嵌套关系,如果我们把一个<html>....</html>标签比做一个合同文件,那么<!DOCTYPE> 标签中所指定的规范文件就好比是在合同中我们引述的类似“依据国家某某法的条文...的规定”这样的说明,并且给出了 “某某法的条文”这个文档的具体位置,使我们更好的参考严格按照规定来执行这些规定,所以<!DOCTYPE> 标签的意义在于:如果能准确的知道创建这个html文件的版本,将更加有助于浏览器和其他的软件程序更精确的对网页内容显示和控制
文档类型定义 Document Type Definition ,DTD

DTD语法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

分解:

1.DOCTYPE 说明这是一个文档类型定义说明语句

2.html 指定了文档类型的名称,说明他是一个网页文件,所以他也可以是XML

3.PUBLIC 表明所依据的DTD文件可对任何人公开访问,而不是某公司内部的规范文件

4."-//W3C//DTD XHTML 1.0 Strict//EN" 引号内的是version name即版本名称,其中,开头的减号"-"表示的含义:对于ISO标准的DTD以“ISO”三个字母开头,被改进的非ISO标准的DTD以加号“+”开头,未被改进的非ISO标准的DTD以减号“-”开头;“W3C”表示DTD文件所有者的名称,它属于W3C组织;“DTD XHTML 1.0 Strict”表示DTD文件的类型;“EN”是这个DTD文件所用的语言

5.http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd 这个url指定的是该html语言的定义规范文件再Internet上的位置,就是说它就是以上"-//W3C//DTD XHTML 1.0 Strict//EN" 这个DTD版本文件的具体存储位置

6.对于strict.dtd,我们还可以将他修改为loose.dtd或frameset.dtd,其中strict.dtd说明当前的网页文档里的所以xhtml的元素是符合xhtml 1.0严格标准的,loose.dtd说明当前的网页文档当中可能含有xhtml 1.0严格标准所定义的元素以及标准以外的一些元素,frameset.dtd说明当前的网页文档当中除了含有xhtml 1.0严格标准所定义的元素以外还包括框架和连接目标等元素。 

 

上述内容是本人看完视频教程后整理出来的,讲解比较详细、通俗,以下内容摘自网络http://www.w3school.com.cn/tags/tag_doctype.asp

定义和用法

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

以下面这个 <!DOCTYPE> 标签为例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在上面的声明中,声明了文档的根元素是 html,它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到,浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。

 

提示和注释:

注释:<!DOCTYPE> 标签没有结束标签!

HTML

HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

HTML Strict DTD

如果您需要干净的标记,免于表现层的混乱,请使用此类型。请与层叠样式表(CSS)配合使用:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">

HTML Transitional DTD

Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 HTML 的呈现特性时,请使用此类型:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD

Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">

XHTML

XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。

XHTML Strict DTD

如果您需要干净的标记,免于表现层的混乱,请使用此类型。请与层叠样式表(CSS)配合使用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional DTD

Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 XHTML 的呈现特性时,请使用此类型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset DTD

当您希望使用框架时,请使用此 DTD!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
如需检查你是否编写了带有正确 DTD 的合法 XHTML 文档,您可以把您的 XHTML 页面链接到一个 XHTML 验证器。
<think>好的,我现在要详细分析用户关于Vue项目中public文件夹下index.html的作用以及各标签功能的提问。首先,我需要回忆Vue项目的结构,尤其是public目录的作用。根据之前的引用资料,index.html是项目的入口文件,main.js中的Vue实例会挂载到其中的div#app上。 接下来,我需要解析index.html中的各个标签。用户特别提到了meta标签和div容器的作用。首先,DOCTYPE html声明文档类型为HTML5,确保浏览器以标准模式渲染。然后html标签是根元素,包含整个页面的内容。 head部分中的meta标签,比如charset="utf-8"设置字符编码,防止乱码。viewport meta标签对于响应式设计很重要,控制视口的行为,比如初始缩放比例。其他meta标签如author和description用于SEO和页面描述,帮助搜索引擎理解和显示页面内容。 title标签定义页面标题,显示在浏览器标签页上,对SEO也很重要。div#app是Vue实例挂载的容器,所有的Vue组件内容都会替换这里。注释提到built files会被自动注入,说明构建工具如Webpack会将打包后的资源自动插入到这里。 用户可能还关心public文件夹的特殊性,比如其中的文件会被直接复制到构建目录,不会被Webpack处理,适合放置静态资源如favicon.ico或第三方库。需要确认是否正确引用了相关资料,例如引用[3]提到index.html是首站点,main.js挂载到div#app,App.vue作为根组件填充内容。 可能还需要补充meta标签的其他用途,比如移动端适配或社交媒体分享时的og标签,但用户没有具体问这些,所以简要提及即可。最后,确保回答结构清晰,分点说明各标签的作用,并生成相关问题供用户进一步探索。</think>### Vue项目中public/index.html文件解析 在Vue项目中,`public/index.html`是**整个应用的入口页面**,负责定义基础HTML结构和全局配置。以下是其核心标签的功能解析: --- #### 1. **基础结构标签** - `<!DOCTYPE html>` 声明文档类型为HTML5,确保浏览器以标准模式解析页面[^3]。 - `<html>` 根元素,包裹整个页面内容。 - `<head>` 定义文档的元数据(如编码、标题等)和外部资源引用。 --- #### 2. **`<meta>`标签功能** - **字符集声明** `<meta charset="utf-8">` 指定页面使用UTF-8编码,避免中文乱码问题。 - **视口配置** `<meta name="viewport" content="width=device-width,initial-scale=1.0">` 控制移动端视口缩放行为,确保响应式布局适配不同设备[^3]。 - **浏览器兼容模式** `<meta http-equiv="X-UA-Compatible" content="IE=edge">` 强制IE浏览器使用最新渲染引擎。 - **SEO优化** `<meta name="description" content="页面描述">` 提供页面摘要信息,影响搜索引擎结果展示。 `<meta name="keywords" content="关键词">` 定义页面关键词(部分搜索引擎已忽略此标签)。 --- #### 3. **关键容器与脚本** - **挂载点容器** `<div id="app"></div>` Vue实例的挂载目标,后续所有组件内容将替换此容器[^1]。 例如,在`main.js`中通过`new Vue().$mount('#app')`绑定。 - **构建文件注入** `<!-- built files will be auto injected -->` Webpack/Vue CLI在构建时自动插入打包后的JavaScript和CSS文件。 --- #### 4. **`public`文件夹的特殊性** - 该目录下的文件会**直接复制到构建输出目录**(如`dist`),适用于无需Webpack处理的静态资源(如`favicon.ico`)。 - 若需动态引用路径,可使用`<%= BASE_URL %>`占位符(如`<link rel="icon" href="<%= BASE_URL %>favicon.ico">`)。 --- ###
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值