lio_zero
lio_zero

HTML/HTML5 基础知识 | 面试题专用

DTD 介绍

  • DTD（Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏 览器将使用这些规则检查页面的有效性并且采取相应的措施。
  • DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）

SGML 、 HTML 、XML 和 XHTML 的区别？

  • SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言， 是所有电子文档标记语言的起源
  • HTML（HyperText Markup Language）是超文本标记语言，它定义了网页内容的含义和结构。
  • XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
  • XHTML 是一个基于 XML 的标记语言，他与 HTML 没什么本质的区别，但他比 HTML 更加严格。
  • 为了规范 HTML，W3C 结合 XML 制定了 XHTML1.0 标准，这个标准没有增加任何新的标签，只是按照 XML 的要求来规范 HTML。两者最主要的区别是：
    • 文档顶部 doctype 声明不同，XHTML 的 doctype 顶部声明中明确规定了xhtml DTD的写法
    • 元素必须始终正确嵌套
    • 标签必须始终关闭
    • 标签名必须小写
    • 特殊字符必须转义
    • 文档必须有根元素
    • 属性值必须用双引号 "" 括起来
    • 禁止属性最小化（例如，必须使用 checked="checked" 而不是 checked）

DOCTYPE 有什么用？

  • 声明位于 HTML 文档中的第一行，处于 标签之前。告知浏览器的解析器使用标准模式渲染文档。DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。
// 返回当前文档关联的文档类型定义（DTD），如果当前文档没有 DTD，则该属性返回 null。
document.doctype
  • Doctype

标准模式与兼容模式各有什么区别？它们有何意义？

  • 标准模式：又称严格模式，是指浏览器按照 W3C 标准解析代码。

    • 标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。

  • 兼容模式：又称怪异模式或混杂模式，是指浏览器用自己的方式解析代码。

    • 在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

  • 如何区分：

    • 在 HTML4.01 标准中，浏览器解析时到底使用标准模式还是兼容模式，与网页中的 DTD 直接相关，因为 HTML 4.01 基于 SGML，DTD 规定了标记语言的规则，这样浏览器才能正确地呈现。 且有三种
    • HTML5 不基于 SGML，因此不需要对 DTD 进行引用。只需要在顶部声明

  • 目的：防止呈现文档时浏览器切换到 “兼容模式”。

  • 怪异模式和标准模式

  • 怪异模式（Quirks Mode）对 HTML 页面的影响

页面导入样式时，使用 link 和 @import 有什么区别？

  • link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS，定义 rel 连接属性等作用；而 @import 是 CSS 提供的，只能用于加载 CSS；

  • 页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载；

  • @import 是CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题；

  • link 方式的样式的权重高于 @import 的权重。

HTML 中 form 里 action 方法的 Get 和 Post 有什么区别？

  • Get：Form 的默认方法。

  • Get 是用来从服务器上获得数据。Post 是用来向服务器上传递数据

  • Get 将表单中数据的按照 name=value 的形式，添加到 action 所指向的 URL 后面，并且两者使用 "?" 连接，而各个变量之间使用 "&" 连接。Post 是将表单中的数据放在 form 的数据体中，按照变量和值相对应的方式，传递到 action 所指向 URL

  • Get 是不安全的，因为在传输过程，数据被放在请求的 URL 中。Post 的所有操作对用户来说都是不可见的，其放置 request body 中

  • Get 传输的数据量小，这主要是因为受 URL 长度限制。Post 可以传输大量的数据，所以在上传文件只能使用 Post

  • Get 限制 Form 表单的数据集的值必须为 ASCII 字符。Post 支持整个 ISO10646 字符集

  • Get 请求浏览器会主动 cache。Post 支持不会

  • Get 请求参数会被完整保留在浏览历史记录中。Post 中的参数不会被保留。

  • GET 和 POST 本质上就是 TCP 链接，并无差别。但是由于 HTTP 的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

  • GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。

Meta viewport 原理是什么？

  • meta viewport 标签的作用是让当前 viewport 的宽度等于设备的宽度，同时当设置 user-scalbale="no" 时不允许用户进行手动缩放
  • viewport 的原理：移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是 viewport；目的是正常展示没有做移动端适配的网页，让他们完整的展示给用户；
  • viewport 属性值
属性 描述
width 设备的虚拟视口的宽度。
height 设备的虚拟视口的高度。
device-width 设备屏幕的物理宽度。
device-height 设备屏幕的物理高度。
initial-scale 访问页面时的初始缩放。1.0无法缩放。
user-scalable 允许设备放大和缩小，值为 yes 或 no。
minimum-scale 允许用户的最小缩放值，1.0 表无法缩放。
maximum-scale 允许用户的最大缩放值，1.0 表无法缩放。

Meta 的目的是什么？

  • meta 元素可用于包含描述 HTML 文档属性的名称/值对，如作者，字符编号，关键字列表，文档作者等信息


  
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    

    
    
    

    HTML5 Meta Tags
  
  
    ...
  • Meta Refresh
  • Note：如果你的网站不是专门为响应而设计的，并且在这个尺寸下工作得很好，不要使用响应元标签，因为它会让体验变得更糟。
  • Stop using the viewport meta tag (until you know how to use it)
  • metatags

什么是替换元素与非替换元素

  • 替换元素：就是浏览器根据其标签的元素属性来判断显示具体的内容的元素，且元素一般拥有固定的尺寸（宽高或宽高比）。
    • 在 html 中像这样的元素有 img，input，textarea，select，object，这些都是替换元素，这些元素都没有实际的内容。
  • 非替换元素：html 中大多数都是非替换元素，他们直接将内容告诉浏览器，直接显示出来。
    • 如：p标签，浏览器会直接显示 p标签里的内容。
  • tips：替换元素和非替换元素不仅是在行内元素中有，块级元素也有替换和非替换之分，比如嵌入的文档 iframe，audio，canvas 在某些情况下也为替换元素。

块级元素和行内元素的区别？

  • HTML4.01 中，元素被分成两大类：inlink（行内元素）与 block（块级元素）。区别如下：
块级元素 行内元素
独占一行 不独占一行
可以设置宽高（盒模型） 不可以设置宽高，宽高由元素内部的内容决定，padding 和 margin 的 top/bottom 不会对元素生效
可以包含行内元素和其他块级元素 行内元素只能包含文本和其他行内元素。
  • 默认情况下是这样，但可以利用 display 来修改其为块级还是行内
  • 内联元素和块级元素

块级元素和行内元素分别有哪些？ 空（void）元素有哪些？

  • CSS 规范规定，每个元素都有 display 属性，每个元素都有默认的 display 值。例如：
    • div 默认display 属性值为 block，为块级元素；
    • span 默认 display 属性值为 inline，为行内元素。
  • 块级元素：

    • -

      、

      、

      、
        、
          、
          、、
          、
          、
          、、
          、
          、
          、、