HTML面试题

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 系列文章目录
• 前言
• 一、pandas是什么？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

一、HTML基础

1.DOCTYPE (文档类型) 的作用

        DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。

        值的注意的是，它必须声明在HTML⽂档的第⼀⾏。

2.script标签中defer和async的区别

        如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载

        

        defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：

         执行顺序：
                 多个带async属性的标签，不能保证加载的顺序；
                 多个带defer属性的标签，按照加载顺序执行；
        脚本是否并行执行：
                async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；
                defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

3.HTML、XML、XHTML 的区别

  HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；

  XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；

  XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

4.行内元素有哪些？块级元素有那些？空元素有哪些？    

        行内元素： a, b, span, img, input, select, strong;

        块级元素： div, ul, li, dl, dt, dd, h1-5, p等；

        空元素： <br>, <hr>, <img>, <link>, <meta>;

5.标签上 title 属性与alt属性的区别是什么？

   alt是为了在图片未能正常显示时（屏幕阅读器）给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

   title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

6.input 与 textarea 的区别

        input 是单行文本框，不会换行。通过size属性指定显示字符的长度，注意：当使用css限定了宽高，那么size属性就不再起作用。value属性指定初始值，Maxlength属性指定文本框可以输入的最长长度。可以通过width和height设置宽高，但是也不会增加行数。

        textarea 是多行文本输入框，文本区中可容纳无限数量的文本，无value属性，其中的文本的默认字体是等宽字体（通常是 Courier） ，可以通 过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

7.head 标签有什么用？其中有什么标签必不可少？

        标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等

        文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

        下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, <title>。

        其中 <title> 定义文档的标题，它是 head 部分中唯一必需的元素。

8.浏览器乱码的原因是什么？如何解决？

产生乱码的原因：

        网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码；

  html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；

        浏览器不能自动检测网页编码，造成网页乱码。

解决办法：

        使用软件编辑HTML网页内容；

        如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；

        如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

9.src 与 href 有什么区别？

        src 用于替换当前元素；href用于在当前文档和引用资源之间确立联系；

        src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；

        href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。

10.什么是前端的结构，样式和行为相分离？以及分离的好处是什么？

结构，样式和行为分离：              

　   web标准的核心理念就是结构标准、样式标准和行为标准，提倡结构、表现和行为相分离，即HTML-结构-css-表现、Javascript-行为分离。

　　HTML标签给予内容含义，CSS表现层则定义HTML该如何显示（外观），JavaScript行为成为页面增加交互。

　　举个例子,如果一个网页是一棵树，那么HTML负责主干，CSS负责枝叶、花、果等，而JavaScript则负责外界条件，比如风、雨、阳光等。这样做有利于思考文档的语义结构，更容易维护和更改。

在结构，样式和行为分离，就是将三者分离开，各自负责各自的内容，各部分可以通过引用进行使用。

在分离的基础上，我们需要做到代码的：精简， 重用， 有序。

分离的好处：

代码分离，利于团队的开发和后期的维护；
减少维护成本，提高可读性和更好的兼容性；
 

---