前端面试题之HTML篇

这篇具有很好参考价值的文章主要介绍了前端面试题之HTML篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、src 和 href 的区别

具有src的标签有:script、img、iframe
具有href的标签有:link、a

区别
src 是source的缩写。表示源的意思,指向资源的地址并下载应用到文档中。会阻塞文档的渲染,也就是为什么js脚本放在底部而不是头部的原因。

<script src="./index.js"></script>
<img src="./cat.jpeg" alt="">
<iframe src="./iframe-page.html"></iframe>

href 是hypertext reference 的缩写。表示超文本引用。用来引用外部的资源。不会阻塞文档的渲染。

<link rel="stylesheet" href="./index.css">
<a href="https://baidu.com">跳转</a>

@import 和 link 的区别

  1. link 在文档加载的时候一并加载,@import在页面完全加载之后加载。
  2. @import 只能加载css,link还可以定义RSS等其他事务;
  3. link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
  4. link 支持使用js控制dom改变样式,而@import不支持。

2、DOCTYPE(文档类型)的作用

必须写在HTML文件的第一行,例如:<!DOCTYPE html>,用来告诉浏览器应该以什么方式(html或者xhtml)解析页面,不同的渲染方式会影响css甚至Javascript的解析。

浏览器渲染页面有两种模式(可用通过document.compatMode获取):

  • CSS1Compat(HTML strick mode 标准模式):大多数网页都是这个模式,浏览器使用W3C的标准来渲染页面,在标准模式中,浏览器使用其支持的最高标准来渲染页面。
  • BackCompat(XHTML Quirk mode 怪异模式):浏览器使用自己的怪异模式来渲染页面,在怪异模式中,浏览器使用比较宽松的向后兼容的方式显示。

3、script 中defer 和 async的区别

    <script src="./index.js"></script>
    <script async src="./index-async.js"></script>
    <script defer src="./index-defer.js"></script>

如果没有defer或者async,浏览器会立即加载并执行js脚本,会阻塞页面的渲染,如果文件比较大或者脚本比较耗时的话,页面就会出现卡顿的情况。

下面这张图可以直观看出它们的区别:
前端面试题之HTML篇,前端面试,前端,html,html5

绿色:表示页面渲染。蓝色:表示资源加载。红色:表示js脚本执行。

从图中不难看出,<script>会立即加载并执行脚本,阻塞了页面的渲染。<script defer><script async>加载资源的时候不会阻塞页面渲染,但是<script async>资源加载完成之后会立即执行js脚本。<script defer>是页面渲染完成之后(DOMContentLoaded事件出发之前)执行脚本。

<script async><script defer>的区别

  • <script async>多个带async标签是异步加载,也就是并行下载。脚本也是并行执行。
  • <script defer>多个带defer标签是异步下载,按加载顺序执行。

4、iframe 有哪些优点和缺点

优点:

  • 用来加载速度较慢的内容(如广告)
  • 可以使脚本并行下载
  • 可以实现跨子域通信

缺点:

  • 会阻塞页面的onload事件
  • 无法被一些搜索引擎识别到
  • 会产生很多页面,不易管理

5、label 标签的使用

label标签用来定义表单控件的关系,当用户点击label标签时,浏览器会自动将焦点转到和label标签关联的表单控件。

用法一:

    <label for="username">点我聚焦:</label>
    <input type="text" id="username">

用法二:

    <label for="password">密码:
        <input type="password" id="password">
    </label>

6、Canvas 和 SVG的区别

SVG
SVG 是可缩放矢量图形,是基于可扩展标记语言XML描述的2D图形,基于XML意味着每个DOM都是可用的,可以为每个元素附加Javascript事件处理器,在SVG中,每个绘制的图形叫做对象,对象的属性发生变化时,浏览器会自动重现图形。

特点:

  • 不依赖分辨率(可做一些logo之类)
  • 支持Javascript事件处理器
  • 最适合做大型渲染区域的页面(比如google地图)
  • 过于复杂会减缓渲染速度(任何基于 DOM的应用都不快)
  • 不适合做游戏应用

Canvas
通过Javascript来绘制图形,是逐像素进行渲染的,其位置发生改变,就会重新进行绘制。

特点

  • 依赖分辨率
  • 弱文本渲染能力
  • 不支持事件处理能力
  • 能够以.png或者.jpg 保存图像
  • 最适合做大型密集型游戏,其中很多对象会频繁重绘

7、浏览器乱码的原因是什么?如何解决

网页源代码使用GBK编码,而内容中的中文使用的是UTF-8编码,就会出现乱码,反之亦然。

解决办法就是将编码格式转化成一致的编码。文章来源地址https://www.toymoban.com/news/detail-742932.html

8、title和h1、strong和b、i和em的区别?

  • title和h1 :title表示文档的标题,h1 有明确的层级意义,对页面的抓取有很大的影响。
  • strong和b :strong 有具体的语义,具有加重语气的效果。而b只是简单的字体加粗,搜索引擎更侧重于strong标签。
  • i和em:i 是斜体,em表示强调文本。

到了这里,关于前端面试题之HTML篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html5前端学习

    定义HTML文档,浏览器看到后就明白这个是HTML文档,所以其他元素要包裹在它里面,标签限定了文档的开始点和结束点。 head标签用于定义文档的头部,描述了文档的各种属性和信息,包括文档的标题、在Web的位置以及和其他文档的关系等,绝大多数文档头部包含的数据都不会

    2024年02月08日
    浏览(53)
  • 前端学习——HTML5

    新增布局标签 新增状态标签 新增列表标签 新增文本标签 新增表单控件属性 input新增type属性值 新增视频标签 新增音频标签

    2024年02月12日
    浏览(58)
  • HTML5前端标签练习

    标签的分类 标签的嵌套 a标签 验证form表单朝后端提交数据 效果 代码

    2024年02月08日
    浏览(57)
  • html5前端学习2

    一篇思维题题解: 第五周任务 [Cloned] - Virtual Judge (vjudge.net) K - Summer Vacation-CSDN博客  快捷键: Ctrl+Alt+Down        向下选取 Ctrl+Alt+Up             向上选取(会出现多个光标,可以同时输入) Ctrl+Enter                无论光标在哪个位置,都向下换行,与Enter有区别 链接分

    2024年02月10日
    浏览(100)
  • 面试题更新之-HTML5的新特性

    面试题更新之-HTML5的新特性 HTML5引入了许多新特性和改进,以下是一些HTML5的新特性: 语义化标签:HTML5引入了一系列的语义化标签,如 header 、 nav 、 section 、 article 、 footer 等,用于更清晰地定义文档结构和内容。 视频和音频支持:HTML5提供了和标签,使得在网页中嵌入视

    2024年02月15日
    浏览(38)
  • 02-前端基础第二天-HTML5

    能够书写表格 能够写出无序列表 能够写出3~4个常用input表单类型 能够写出下拉列表表单 能够使用表单元素实现注册页面 能够独立查阅W3C文档 表格标签 列表标签 表单标签 综合案例 查阅文档 表格是实际开发中非常常用的标签: 表格的主要作用 表格的基本语法 1.1表格的主要

    2024年02月12日
    浏览(38)
  • 前端-01Html5基本知识

    内容 使用浏览器打开 浏览器 谷歌浏览器 清缓存 ctrl+shift+delete vscode 生成浏览器文件.html的快捷方式 !+回车 常用快捷键 快速打开浏览器 插件open in browser 安装,就会多出两个选项来 概念 是一种用来描述网页的一种语言,被称为超文本标记语言,本质是标记语言,标记语言是

    2024年02月04日
    浏览(44)
  • 前端 | ( 十)HTML5简介及相关新增属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(58)
  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(69)
  • HTML5 跨屏前端框架 Amaze UI

    Amaze UI采用国际最前沿的“组件式开发”以及“移动优先”的设计理念,基于其丰富的组件,开发者可通过简单拼装即可快速构建出HTML5网页应用,上线仅半年,Amaze UI就成为了国内最流行的前端框架,目前在Github上收获Star数近万,服务于全球50W开发者。 Amaze UI 的开发历程 云

    2024年02月08日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包