HTML面试题系列一（附答案与解析）

最新推荐文章于 2024-08-09 18:20:18 发布

进击中的大学生

最新推荐文章于 2024-08-09 18:20:18 发布

阅读量808

点赞数 28

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/2301_76760417/article/details/136132384

版权

一、常用的meta元素

    <!-- 1、html文档的编码格式 -->
    <meta charset="UTF-8">
    <!-- 2、viewport——对页面视图相关进行定义 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 3、author——定义了页面的作者 -->
    <meta name="author" content="tony">
    <!-- 4、keywords——为搜索引擎提供关键字 -->
    <meta name="keywords" content="html、css、javascript">
    <!-- 5、定义主题色 -->
    <meta name="theme-color" content="#222">
    <!-- 6、no-transform——不得对资源进行转换或转变。
            no-siteapp——禁止百度进行转码 
    -->
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">

二、 async 和 defer 两个属性有什么用途和区别

script标签用于加载脚本与执行脚本，直接使用script脚本时，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。

比如现在大家习惯于在页面中引用各种第三方脚本，但如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。

针对上述情况，script标签提供了两种方式来解决问题，就是加入属性async以及defer，这两个属性使得script标签加载都不会阻塞DOM的渲染。

defer：此布尔属性被设置为向浏览器指示脚本在文档被解析后执行。
async：设置此布尔属性，以指示浏览器如果可能的话，应异步执行脚本。

三、HTML 语义化作用

语义化的优点：

标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说。
有利于不同设备的解析（屏幕阅读器，盲人阅读器等）
有利于构建清晰的机构，有利于团队的开发、维护

四、如何禁用a标签跳转页面或定位链接?

当页面中a标签不需要任何跳转时，从原理上来讲，可分如下两种方法：

4.1 标签属性href，使其指向空或不返回任何内容。如：

<a href="javascript:void(0);" >点此无反应javascript:void(0)</a>
<a href="javascript:;" >点此无反应javascript:</a>

4.2 从标签事件入手，阻止其默认行为。如：

html方法

<a href="" onclick="return false;">return false;</a>
<a href="#" onclick="return false;">return false;</a>

在css文件中处理点击，不响应任何鼠标事件

pointer-events: none;

五、HTML 标签中的 src 和 href 有什么区别

href 是超文本引用，它是指向资源的位置，建立与目标文件的联系；
src 目的是把资源下载到页面中；
浏览器解析 href 不会阻塞对文档的处理（这就是官方建议使用 link 引入而不是 @ import 的原因），src 会阻塞对文档的处理

六、DOCTYPE 标签有什么用

DOCTYPE声明于文档最前面，告诉浏览器以何种方式来渲染页面。HTML5中的声明方式如下：

<!DOCTYPE html>

七、HTML5 有哪些新特性？

新增语义化标签：nav、header、footer、aside、section、article
音频、视频标签：audio、video
数据存储：localStorage、sessionStorage
canvas（画布）、Geolocation（地理定位）、websocket（通信协议）、webworkers（开辟线程）
input标签新增属性：placeholder、autocomplete、autofocus、required
history API
- go、forward、back、pushstate

八、简述html页面渲染过程

整个渲染过程其实就是将URL对应的各种资源，通过浏览器渲染引擎的解析，输出可视化的图像。

基本过程：

1、解析HTML文件，创建DOM树。浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。
2、解析CSS,形成CSS对象模型。浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。
3、将CSS与DOM合并，构建渲染树（renderingtree）
4、布局和绘制，一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

九、重绘和重排

Repaint(重绘)

重绘是改变不影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)，visibility(可见性)，浏览器会根据元素的新属性重新绘制一次(这就是重绘，或者说重新构造样式)，使元素呈现新的外观。

Reflow（重排）

渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排。"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。

十、说说 HTML、XML、XHTML 的区别

HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；
XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；
XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

十一、input上传文件可以同时选择多张吗？怎么设置？

可以，通过给input标签设置multiple属性。

<input type="file" name="files" multiple/>

十二、使用input标签上传图片时，怎样触发默认拍照功能？

capture 属性用于指定文件上传控件中媒体拍摄的方式。

可选值：

user 前置
environment 后置
camera 相机
camcorder 摄像机
microphone 录音

<input type='file' accept='image/*;' capture='camera'>