Young87

当前位置：首页 >个人收藏

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

日期： 2021-04-21    分类： 个人收藏 534次阅读

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 有什么用？

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

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

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

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

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

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

  • 如何区分：

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

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

  • 怪异模式和标准模式

  • 怪异模式（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 name="viewport" content="width=device-width, initial-scale=1.0" />

Meta 的目的是什么？

  • meta 元素可用于包含描述 HTML 文档属性的名称/值对，如作者，字符编号，关键字列表，文档作者等信息
<!DOCTYPE html>
<html>
  <head>
    <!-- 推荐 Meta Tags -->
    <meta charset="utf-8" />
    <meta name="language" content="english" />
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="Author Name" />
    <meta name="designer" content="Designer Name" />
    <meta name="publisher" content="Publisher Name" />
    <meta name="no-email-collection" content="name@email.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- 搜索引擎优化 Meta Tags -->
    <meta name="description" content="Project Description" />
    <meta
      name="keywords"
      content="Software Engineer,Product Manager,Project Manager,Data Scientist"
    />
    <meta name="robots" content="index,follow" />
    <meta name="revisit-after" content="7 days" />
    <meta name="distribution" content="web" />
    <meta name="robots" content="noodp" />

    <!-- 可选 Meta Tags-->
    <meta name="distribution" content="web" />
    <meta name="web_author" content="" />
    <meta name="rating" content="" />
    <meta name="subject" content="Personal" />
    <meta name="title" content=" - Official Website." />
    <meta name="copyright" content="Copyright 2020" />
    <meta name="reply-to" content="" />
    <meta name="abstract" content="" />
    <meta name="city" content="Bangalore" />
    <meta name="country" content="INDIA" />
    <meta name="distribution" content="" />
    <meta name="classification" content="" />

    <!-- 移动设备上 HTML 页面的 Meta Tgas -->
    <meta name="format-detection" content="telephone=yes" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- http-equiv Tags -->
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />

    <title>HTML5 Meta Tags</title>
  </head>
  <body>
    ...
  </body>
</html>
  • Meta Refresh
<!-- 在5秒钟内重定向到提供的 URL。设置为0可立即重定向 -->
<meta http-equiv="refresh" content="3;url=https://juejin.cn/user/96412754251390" />

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

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

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

  • HTML4.01 中，元素被分成两大类：inlink（行内元素）与 block（块级元素）。区别如下：
块级元素行内元素
独占一行不独占一行
可以设置宽高（盒模型）不可以设置宽高，宽高由元素内部的内容决定，padding 和 margin 的 top/bottom 不会对元素生效
可以包含行内元素和其他块级元素行内元素只能包含文本和其他行内元素。

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

  • CSS 规范规定，每个元素都有 display 属性，每个元素都有默认的 display 值。例如：
    • div 默认display 属性值为 block，为块级元素；
    • span 默认 display 属性值为 inline，为行内元素。
  • 块级元素：
    • <h1>-<h6>、<p>、<div>、<ul>、<ol>、<form>、<table>、<address>、<blockquote>、<center>、<dir>、<dl>、<fieldset>、<hr>、<menu>、<noscript>、<pre>、<noframes>、<isindex>
    • 当元素的 display 属性为 block、list-item 或 table 时，该元素将成为 “块级元素”。
  • 行内元素：
    • <a>、<img>、<input>、<span>、<textarea>、<label>、<select>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<kbd>、<q>、<s>、<samp>、<small>、<strike>、<strong>、<sub>、<sup>、<tt>、<u>
    • 当元素的 display 属性为 inline、inline-block 或 inline-table 时，该元素将成为 “行内元素”
  • 常见的空元素：标签内没有内容的 HTML 标签被称为空元素。
    • <br>、<hr>、<img>、<input>、<link>、<meta>
  • 不常见的空元素：<area>、<base>、<col>、<command>、<embed>、<keygen>、<param>、<source> <track>、<wbr>

什么是可选标签？为什么要使用它？

  • 在 HTML 中，某些元素具有可选标记。实际上，即使元素本身是必需的，也可以从 HTML 文档中完全删除某些元素的开始和结束标签。

  • p，li，td，tr，th，html，head，body 等。如：

<p>Paragraph one.
<p>Paragraph two.
<p>Paragraph three.
  • 您不必提供 </p> 结束标签。浏览器会检测到它需要它们，并且无论如何都会正确显示在 DOM 中。但这可能带给你编写上的困难！
  • 您可以节省一些字节并减少需要在 html 文件中下载的字节。

为了便于阅读，当您的标签内有内容/文本时，带上结束标签。

简述一下 src 与 href 的区别？

  • src 用于引用资源，替换当前元素；href 用于在当前文档和引用资源之间确立联系。
  • href（hyperReference）即超文本引用：浏览器遇到并行下载资源，不阻塞页面解析，与 link 引入 css 一样，浏览器并行下载 css 不阻塞页面解析
    • href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
  • src （resource）即资源：当浏览器遇到 src 时，会暂停页面解析，直到该资源下载或执行完毕，这也是script 标签之所以放底部的原因
    • src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
    • 在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。
    • 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。

img 上 title 与 alt

  • title 是鼠标放在图片上面时显示的文字，title 是对图片的描述和进一步的说明。
  • alt 定义了图像的备用文本描述。
  • tips：浏览器并非总是会显示图像。当有下列情况时，alt 属性可以为图像提供替代的信息：
    • 非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器）
    • 用户选择不显示图像（比如为了节省带宽，或出于隐私等考虑不加载包括图片在内的第三方资源文件）
    • 图像文件无效，或是使用了不支持的格式
    • 浏览器禁用图像等
    • tips：建议尽可能地通过 alt 属性提供一些有用的信息。
<!-- × -->
<img src="wenhao.jpg" alt="图片" />

<!-- √ -->
<img src="wenhao.jpg" alt="满脸问号的男人" />
  • 图像上 alt 属性的用途是什么？
    • 如果用户无法查看图像，alt 属性将为图像提供可选信息。alt 属性应该用来描述任何图像，除了那些仅用于装饰目的的图像，在这种情况下，应该将其留空。
    • 装饰性图像应具有空 alt 属性。
    • 网络爬虫使用 alt 标签来理解图像内容，因此它们被认为对搜索引擎优化（SEO）很重要。
    • 在 alt 标签的末尾增加可访问性。
  • img

为什么在 img 标签中使用 srcset 属性？请描述浏览器遇到该属性后的处理过程。

  • 为了设计响应式图片。我们可以使用两个新的属性 srcset 和 sizes 来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
  • srcset：定义了我们允许浏览器选择的图像集，以及每个图像的大小。
  • sizes：定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。
  • 处理过程：
    • 查看设备宽度
    • 检查 sizes 列表中哪个媒体条件是第一个为真
    • 查看给予该媒体查询的槽大小
    • 加载 srcset 列表中引用的最接近所选的槽大小的图像
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">

noscript 标签的作用

  • <noscript> 元素用来定义在脚本未被执行时的替代内容（文本）。
  • <noscript> 标签中的内容只有在下列情况下才会显示出来：
    • 浏览器不支持脚本
    • 浏览器支持脚本，但脚本被禁用
<!-- 给予用户友好的提示! -->
<noscript>您的浏览器不支持 JavaScript！</noscript>

label 的作用是什么？是怎么用的？

  • label 标签定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
  • 两种用法：一种是 id 绑定，一种是嵌套
<label for="select">爱我</label>
<input type="radio" id="select" name="love" value="love" />
<label>恨我<input type="radio" name="hate" value="hate" /></label>

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

  • <title> 与 <h1> 的区别
    • <title> 用于网站信息标题，一个网站可以有多个 title，seo 权重高于 h1；
    • <h1> 概括的是文章主题，一个页面最好只用一个 h1，seo 权重低于 title。
  • <b> 与 <strong> 的区别
    • <b> 为了加粗而加粗
    • <strong> 为了标明重点内容而加粗，有语气加强的含义
  • <i> 与 <em> 的区别
    • <i> 为了斜体而斜体，<em> 为了标明重点而斜体，且对于搜索引擎来说 <strong> 和 <em> 比 <b> 和 <i> 要重视的多

rel="noopener" 应在什么场景下使用，为什么？

  • rel="noopener" 是 <a> 标签的一个属性。他可以禁止打开的新页面中使用 window.opener 属性，这样一来打开的新页面就不能通过 window.opener 去操作你的页面。

  • 新页面可以通过 window.opener.location = newURL 将你的页面导航至任何网址。

<!-- home.html -->
<a href="./home.html" target="_blank">home</a>
<!-- <a href="./home.html" target="_blank" rel="noopener">home</a> -->

<!-- details.html -->
<h1>点关注 不迷路！</h1>
<script>
  window.opener.location = 'https://juejin.cn/user/96412754251390'
</script>
  • 如果您正在使用带有 target ="_ blank" 的外部链接，则您的链接应具有 rel="noopener" 属性，以防止标签被挪用。如果您需要支持旧版本的 Firefox，请使用 rel="noopener noreferrer"
  • 总结：rel="noopener" 应用于超链接，防止打开的链接操纵源页面

为什么最好把 link 标签放在 head 之间？

  • 把 <link> 标签放在 <head></head> 之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。
  • 将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。
  • 一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。
  • 这种做法可以防止呈现给用户空白的页面或没有样式的内容。

为什么最好把 JS 的 script 标签放在 body 之前，有例外情况吗？

  • 脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。
  • 例外情况：当你的脚本里包含 document.write() 时。
    • 但是现在，document.write() 不推荐使用。
    • 同时，将 <script> 标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。对此比较好的做法是，<script> 使用 defer 属性，放在 <head> 中。

HTML 全局属性（global attribute）有哪些

  • accesskey：设置快捷键，提供快速访问元素
  • class：为元素设置类标识，多个类名用空格分开，CSS 和 JavaScript 可通过 class 属性获取元素
  • contenteditable：指定元素内容是否可编辑
  • contextmenu：自定义鼠标右键弹出菜单内容
  • data-*：为元素增加自定义属性
  • dir：设置元素文本方向
  • draggable：设置元素是否可拖拽
  • dropzone：设置元素拖放类型： copy，move，link
  • hidden：表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
  • id：元素 id，文档内唯一
  • lang：元素内容的的语言
  • spellcheck：是否启动拼写和语法检查
  • style：行内 CSS 样式
  • tabindex：设置元素可以获得焦点，通过 tab 可以导航
  • title：元素相关的建议信息
  • translate：元素和子孙节点内容是否需要本地化

请描述下 SEO 中的 TDK？

  • 在 SEO 中，所谓的 TDK 其实就是 title、description、keywords 这三个标签
    • title 标题标签
    • description 描述标签
    • keywords 关键词标签

你有使用过什么模板引擎？为什么使用它？

  • 常用模板引擎：Pug（以前叫 Jade）、 Haml、Handlebars、art-template 等
  • 这些模版语言大多是相似的，都提供了用于展示数据的内容替换和过滤器的功能
  • 大部分模版引擎都支持自定义过滤器，以展示自定义格式的内容。
!!! 5 
html 
  head 
    title = HelloWorld 
  body 
    h1使用Jade创建HelloWorld网页

编译为

<!DOCTYPE html>
<html>
  <head>
    <title>HelloWorld</title>
  </head>
  <body>
    <h1>使用Jade创建HelloWorld网页</h1>
  </body>
</html>
  • 它帮助我们用更少的代码更快地编写 HTML 代码。

iframe 是什么？有什么优缺点？

  • HTML内联框架元素（<iframe>）表示嵌入的浏览上下文。它能够将另一个 HTML 页面嵌入到当前页面中。
  • iframe 是用来在网页中插入第三方页面，早期的页面使用 iframe 主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。
  • tips：可以将提示文字放在 <iframe></iframe> 之间，来提示某些不支持 iframe 的浏览器
  • 优点
    • 便于修改，模拟分离，像一些信息管理系统会用到。
    • iframe 能够原封不动的把嵌入的网页展现出来。
    • 如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
    • 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。
    • 并行加载脚本
    • security sandbox（安全沙盒）
    • 解决加载缓慢的第三方内容。如：图标和广告等的加载问题。
  • 缺点
    • 没有语意。搜索引擎无法解读这种页面，不利于SEO
    • 会产生很多页面，不容易管理。
    • 即使内容为空，加载也需要时间。
    • iframe 的创建比一般的 DOM 元素慢了 1-2 个数量级
    • 很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
    • iframe 框架页面会增加服务器的 http 请求，对于大型网站是不可取的。
    • iframe 会阻塞主页面的 onload 事件。
    • iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
    • 如果需要使用 iframe，最好通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题
    • iframe 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
  • tips：除非特殊需要，一般不推荐使用。目前 iframe 的优点完全可以使用 Ajax 实现，因此已经没有必要使用 iframe 了。
  • iframe

div+css 的布局较 table 布局有什么优点？

  • 分离方便、改版快、清晰简洁、seo
    • 表现与结构相分离。
    • 改版的时候更方便，只要改 css 文件。
    • 页面加载速度更快、结构化清晰、页面显示简洁。
    • 易于优化（seo）搜索引擎更友好，排名更容易靠前。

很多网站不常用 table，iframe 这两个元素，知道原因吗？

因为浏览器页面渲染的时候是从上至下的，而 table 和 iframe 这两种元素会改变这样渲染规则，他们需要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。

HTML 中的 lang 属性有什么作用？

  • 通过在 css:lang() 伪类拼写和语法检查器中使用页面样式来帮助搜索引擎进行语言检测
:lang(zh) {
  font-size: 1.5em;
}

标签：html html5 前端 面试

上一篇： 用Python做一个游戏辅助脚本，完整编程思路分享

下一篇： 当程序员真难，又一次被编辑器坑了！

精华推荐