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.运维等其他技术岗位,掌握网络编程知识均是岗位的 ...

随机推荐

Java项目笔记（五）
这里写目录标题 @Valid 失效解析jwt 无法建立SSL连接 windows下打jar包,读取nacos 配置文件异常 @Valid 失效加入以下依赖 <dependency> ...
Android 内存分析(java native heap内存、虚拟内存、处理器内存.
1.jvm 堆内存(dalvik 堆内存) 每个Java应用程序在运行时都会拥有自己的JVM实例,这个实例会为其分配独立的堆内存空间.这意味着不同的应用程序之间不会共享堆内存. 不同手机中app进程的 ...
使用DeepKE训练命名实体识别模型DEMO（官方DEMO）
使用DeepKE训练命名实体识别模型DEMO(官方DEMO) 说明: 首次发表日期:2024-10-10 DeepKE资源: 文档: https://www.zjukg.org/DeepKE/ 网站: ...
新建数据库 phpStudy
官网:https://www.xp.cn/下载phpStudy : 环境配置:1. 下载MySQL8.0.12 2. 安装HeidiSQL11.0 开启 MySQL8.0.12 修改MySQL的密码: ...
「模拟赛」多校 A 层联训 5
A.好数(number) 很签,打完之后"不是这题我能做一个小时??" 对于每个数,都把它与前面的所有数的加和求一遍存进桶里,再遇到一个新数 \(a_i\) 时,枚举前面的所有 \ ...
JOI Open 2017（口胡）
T1 Amusement Park 题意:通信题.给定一张 \(n\) 个点 \(m\) 条边的无向连通图.Alice 会得到一个 \([0, 2^{60})\) 中的数 \(x\),并且她需要给这张 ...
Saas多租户数据权限设计（参考RuoYi）
导航引子场景梳理基于角色的访问控制(RBAC) 多租户系统的权限设计 RuoYi系统的数据权限设计最终设计方案参考本文首发<智客工坊-Saas多租户数据权限设计(参考RuoYi)&g ...
看图认识Javascript
采用线性回归实现训练和预测（Python）
已知测得某块地,当温度处于15至40度之间时,数得某块草地上小花朵的数量和温度值的数据如下表所示.现在要来找出这些数据中蕴含的规律,用来预测其它未测温度时的小花朵的数量. 测得数据如下图所示: imp ...
Nginx增加网页认证功能
Nginx增加网页认证功能增加认证功能模块 ngx_http_auth_basic_module 模块实现让访问者,只有输入正确的用户密码才允许访问web内容.web上的一些内容不想被其他人知道,但 ...