HTML 面试题

.code { background-color: rgba(246, 246, 246, 1); color: rgba(232, 62, 140, 1) }

DOCTYPE的作用？

DOCTYPE即Dcoument Type，网页文件的文档类型标准

声明于html文档的最前面。告知浏览器的解析器，使用哪种HTML规范或XHTML规范来解析页面

HTML5为什么只需要写<!DOCTYPE HTML>

<!DOCTYPE HTML>是文档类型声明，声明了文档类型为HTML5，告知浏览器使用的是HTML5标准

html5 新增哪些新特性？相比html4

新增api

本地存储：localStorage、sessionStorage
地理定位：Geolocation
Canvas绘图
即时通信WebSocket

新增标签

aside：定义页面主区域之外的内容，比如侧边栏
article：定义页面中的独立结构
video：多媒体
canvas：画布
footer：定义文档的底部区域
header：定义文档头部区域
nav：定义导航链接的部分
section：定义文档中的独立内容，比如章节、页眉、页脚

新增全局属性

新增contenteditable属性（任何dom节点只要加上contenteditable = 'true'，就变得可编辑）
draggable 推拽
hidden

input增加一些新属性：date、email、url等

什么是标签语义化？

定义：更直观的表现出每个标签的含义和作用

优点：

代码结构清晰，易于阅读，利于开发和维护
方便其他设备解析（如屏幕阅读器）根据语义渲染页面，自动生成不同的目录
有利于seo（搜索引擎）搜索引擎会根据不同的标签来赋予不同的权重

在script标签上使用 defer 和 async 的区别是什么？

不使用

没有使用 defer 和 async 属性，浏览器读到脚本就会立即开始加载和执行，不会等待后续文档元素的加载，会造成阻塞

async

有了async属性：后续文档和js脚本是并行加载，异步执行

defer

有了defer属性：后续文档和js脚本是并行加载的，此时js脚本仅加载不执行，等到文档所有元素解析完成之后，DOMContentLoaded事件触发之前执行

img标签上的title和alt属性？

title：鼠标划入提供描述信息
alt：当图片不显示时，显示在网页上的替代文字
alt是必要属性，title非必要

img底边距去除？

display: block;
float: left;
vertical-align: bottom;

img标签的srcset的作用是什么？

srcset响应式图片，通过使用img标签的srcset属性，定义一组额外的图片集合，让浏览器根据不同的屏幕状况选取合适的图片来显示

meta标签有哪些常用用法？

如果设置name属性。则描述的是网页文档的信息（例如：网页描述、关键词、作者、日期、事件）
如果设置http-equiv属性，则描述的相当于是HTTP响应头信息（例如：网页内容信息、网页缓存等）

name：description、keywords、auther

<meta name="keywords" content="电商,好货,便宜" />

http-equiv：no-cache、Set-Cookie

<meta http-equiv="Pragma" contect="no-cache">

canvas 和 svg 有什么区别？

canvas：html5新增元素，通过js来绘制2D图形
svg：可伸缩矢量图，使用xml描述2D图形，不是html5新增

input属性readonly和disabled，有什么区别？

readonly：不可编辑，可以选择和复制，值可以传递到后台
disabled：不可编辑，不可以选择和复制，值不可以传递到后台

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

块级元素：div、ul、li、p、article、main、header、table、tr、h1-h6
行级元素：span、a、img、input、select、stron
空元素：br、img、input、link、meta

　　区别：

块级元素：独占一行，margin上下左右均有效，可以设置宽高
行级元素：不独占一行，margin只对左右有效，不可以设置宽高

什么是FOUC，如何避免？

fouc：css放在页面底部，使得css在html之后加载，当加载到此样式表时，页面会停止之前的渲染，样式表被下载和解析后，会重新渲染页面，也就会出现短暂的花屏现象。

解决：使用link加载css文件，放在head里面

CSS中link和@import的区别是什么

link属于html标签，无兼容问题，而@import是CSS提供的，只能在IE5以上才能识别
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载
link方式的权重高于@import
当使用JavaScript控制DOM去改变样式的时候，只能使用link方式，因为@import只有CSS才能识别，无法控

HTML全局属性(global attribute)有哪些

class：为元素设置类标识
id：文档唯一
data-*：为元素增加自定义属性
lang：元素内容的语言
style：行内css样式
title：元素相关的建议信息
dir：规定元素中内容的文本方式（ltr：从左到右，rtl：从右到左）
contenteditable：设置true，可编辑元素

渐进增强与优雅降级的区别

渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后在针对高级浏览器进行效果，交互，追加功能达到更好的体验

优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复，

.transition { /*渐进增强写法*/

  -webkit-transition: all .5s;

     -moz-transition: all .5s;

       -o-transition: all .5s;

          transition: all .5s;

}

.transition { /*优雅降级写法*/

          transition: all .5s;

       -o-transition: all .5s;

     -moz-transition: all .5s;

  -webkit-transition: all .5s;

}

iframe的优越点？有什么替代方法？

优点：

iframe能够原封不动的把嵌入的网页展示出来
提高页面代码的复用性
避免页面整体刷新
iframe解决部分跨域问题
解决加载缓慢的第三方内容，如图标、广告等的加载问题

缺点

阻塞onload，window的onload事件会等页面中iframe的所有内容加载完成，才会运行
会产生很对页面，不便于管理
移动端无法完全显示框架，设备兼容性差
创建iframe比其他dom元素更耗费性能创建iframe耗费的性能比其他DOM元素（包括style或script）多10-100倍
无法被一些搜索引擎索引到
页面会增加服务器的http请求
会出现区域的上下、左右滚动条，挤占页面控件

解决办法：可以使用ajax来代替　　

h1, h2, h3, h4, h5, h6 { margin-top: 27px !important }
code { font-size: 14px; color: rgba(255, 80, 44, 1) }
.note-label { color: rgba(102, 102, 102, 1) }
@keyframes text-animation { 0% { background-position: left top } { background-position: -100% 0 } }
.topic-label { position: relative; top: 25px; font-size: 30px !important; background-image: linear-gradient(270deg, rgba(34, 193, 195, 1), rgba(253, 187, 45, 1) 25%, rgba(34, 193, 195, 1) 50%, rgba(253, 187, 45, 1) 75%, rgba(34, 193, 195, 1)); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: text-animation 3s infinite linear }

HTML 面试题的更多相关文章

.NET面试题系列[8] - 泛型
“可变性是以一种类型安全的方式,将一个对象作为另一个对象来使用.“ - Jon Skeet .NET面试题系列目录 .NET面试题系列[1] - .NET框架基础知识(1) .NET面试题系列[2] ...
关于面试题 Array.indexof() 方法的实现及思考
这是我在面试大公司时碰到的一个笔试题,当时自己云里雾里的胡写了一番,回头也曾思考过,最终没实现也就不了了之了. 昨天看到有网友说面试中也碰到过这个问题,我就重新思考了这个问题的实现方法. 对于想进大公 ...
对Thoughtworks的有趣笔试题实践
记得2014年在网上看到Thoughtworks的一道笔试题,当时觉得挺有意思,但是没动手去写.这几天又在网上看到了,于是我抽了一点时间写了下,我把程序运行的结果跟网上的答案对了一下,应该是对的,但是 ...
从阿里巴巴笔试题看Java加载顺序
一.阿里巴巴笔试题: public class T implements Cloneable { public static int k = 0; public static T t1 = new T ...
JAVA面试题
在这里我将收录我面试过程中遇到的一些好玩的面试题目第一个面试题:ABC问题,有三个线程,工作的内容分别是打印出"A""B""C",需要做的 ...
C++常考面试题汇总
c++面试题一用简洁的语言描述 c++ 在 c 语言的基础上开发的一种面向对象编程的语言: 应用广泛: 支持多种编程范式,面向对象编程,泛型编程,和过程化编程:广泛应用于系统开发,引擎开发:支持类 ...
.NET面试题系列[4] - C# 基础知识(2)
2 类型转换面试出现频率:主要考察装箱和拆箱.对于有笔试题的场合也可能会考一些基本的类型转换是否合法. 重要程度:10/10 CLR最重要的特性之一就是类型安全性.在运行时,CLR总是知道一个对象是 ...
我们公司的ASP.NET 笔试题，你觉得难度如何
本套试题共8个题,主要考察C#面向对象基础,SQL和ASP.NET MVC基础知识. 第1-3题会使用到一个枚举类,其定义如下: public enum QuestionType { Text = , ...
我设计的ASP.NET笔试题，你会多少呢
本笔试题考查范围包括面向对象基础.HTML.CSS.JS.EF.jQuery.SQL.编码思想.算法等范围. 第1题:接口和抽象类有何区别? 第2题:静态方法和实例方法有何区别? 第3题:什么是多态? ...
猫哥网络编程系列：详解 BAT 面试题
从产品上线前的接口开发和调试,到上线后的 bug 定位.性能优化,网络编程知识贯穿着一个互联网产品的整个生命周期.不论你是前后端的开发岗位,还是 SQA.运维等其他技术岗位,掌握网络编程知识均是岗位的 ...

随机推荐

keycloak~关于授权码认证中的scope的实践
前言在 Keycloak 14.0.0 中,使用 protocol/openid-connect/auth 接口获取授权码时,scope 参数是可选的,但它确实有作用.下面是关于 scope 参数的 ...
Java项目笔记（二）
一.分页待解决的问题分页是在service层实现的在controller层和service层同时写了这句代码 PageHelper.startPage(Integer.valueOf(pageNo ...
模板声明的两种形式：template<int N> 和 template<N>
template<int N>:非类型模板参数 template<int N> 是一个典型的非类型模板参数的例子.这里的 N 是模板的参数,但它不是一个类型,而是一个具体的整数 ...
mono 下运行 VB.NET 编写的 WinForm 程序
操作系统环境 UOS 20 安装 Mono 可以参考 dotnet 在 UOS 国产系统上安装 Mono 开发工具的方法要点如下 nano /etc/apt/sources.list 增加一行 D ...
Python之爬虫-全民k歌
import re import os import requests from aip import AipSpeech from pydub import AudioSegment APP_ID ...
云原生周刊：OpenTofu Registry 获得用户界面和 API｜2024.9.9
开源项目推荐 kubectl trace kubectl trace 是一个 kubectl 插件,它允许你在 Kubernetes 集群中调度执行 bpftrace 程序. Kondense Kon ...
AMCL 原理解读
AMCL(adaptive Monte Carlo Localization)自适应蒙特卡洛定位,A也可以理解为augmented,,源于MCL算法的一种增强,是机器人在二维移动过程中概率定位系统,采 ...
att&ack学习笔记6
att&ck攻击能力和防御能力的可量化可衡量的标准,是否防得住,是否检测的了,和同行的对比攻击行为(网络威胁分析,研究,行业报告)----->ATT&CK(对抗模型,对抗流程细分 ...
全面解释人工智能LLM模型的真实工作原理（三）
前一篇:<全面解释人工智能LLM模型的真实工作原理(二)> 序言:前面两节中,我们介绍了大语言模型的设计图和实现了一个能够生成自然语言的神经网络.这正是现代先进人工智能语言模型的雏形.不过 ...
Centos7安装部署prometheus
普罗米修斯的主要特点是: 具有由度量名称和键/值对标识的时间序列数据的多维数据模型 PromQL,一种灵活的查询语言, 可以利用这一维度不依赖分布式存储; 单个服务器节点是自治的时间序列集合通过H ...