.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标签有哪些常用用法？

<meta>标签的具体功能一般由name / http-equiv 和  content两部分属性来定义

  • 如果设置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 面试题的更多相关文章

  1. .NET面试题系列[8] - 泛型

    “可变性是以一种类型安全的方式,将一个对象作为另一个对象来使用.“ - Jon Skeet .NET面试题系列目录 .NET面试题系列[1] - .NET框架基础知识(1) .NET面试题系列[2] ...

  2. 关于面试题 Array.indexof() 方法的实现及思考

    这是我在面试大公司时碰到的一个笔试题,当时自己云里雾里的胡写了一番,回头也曾思考过,最终没实现也就不了了之了. 昨天看到有网友说面试中也碰到过这个问题,我就重新思考了这个问题的实现方法. 对于想进大公 ...

  3. 对Thoughtworks的有趣笔试题实践

    记得2014年在网上看到Thoughtworks的一道笔试题,当时觉得挺有意思,但是没动手去写.这几天又在网上看到了,于是我抽了一点时间写了下,我把程序运行的结果跟网上的答案对了一下,应该是对的,但是 ...

  4. 从阿里巴巴笔试题看Java加载顺序

    一.阿里巴巴笔试题: public class T implements Cloneable { public static int k = 0; public static T t1 = new T ...

  5. JAVA面试题

    在这里我将收录我面试过程中遇到的一些好玩的面试题目 第一个面试题:ABC问题,有三个线程,工作的内容分别是打印出"A""B""C",需要做的 ...

  6. C++常考面试题汇总

    c++面试题 一 用简洁的语言描述 c++ 在 c 语言的基础上开发的一种面向对象编程的语言: 应用广泛: 支持多种编程范式,面向对象编程,泛型编程,和过程化编程:广泛应用于系统开发,引擎开发:支持类 ...

  7. .NET面试题系列[4] - C# 基础知识(2)

    2 类型转换 面试出现频率:主要考察装箱和拆箱.对于有笔试题的场合也可能会考一些基本的类型转换是否合法. 重要程度:10/10 CLR最重要的特性之一就是类型安全性.在运行时,CLR总是知道一个对象是 ...

  8. 我们公司的ASP.NET 笔试题，你觉得难度如何

    本套试题共8个题,主要考察C#面向对象基础,SQL和ASP.NET MVC基础知识. 第1-3题会使用到一个枚举类,其定义如下: public enum QuestionType { Text = , ...

  9. 我设计的ASP.NET笔试题，你会多少呢

    本笔试题考查范围包括面向对象基础.HTML.CSS.JS.EF.jQuery.SQL.编码思想.算法等范围. 第1题:接口和抽象类有何区别? 第2题:静态方法和实例方法有何区别? 第3题:什么是多态? ...

  10. 猫哥网络编程系列：详解 BAT 面试题

    从产品上线前的接口开发和调试,到上线后的 bug 定位.性能优化,网络编程知识贯穿着一个互联网产品的整个生命周期.不论你是前后端的开发岗位,还是 SQA.运维等其他技术岗位,掌握网络编程知识均是岗位的 ...

随机推荐

  1. 为什么用 AWS CLI？因为我懒得点鼠标！

    在这篇博客中,我们一起深入探索 AWS CLI 的世界,从零开始,逐步构建在云端的家园.将介绍 AWS CLI 的基本功能和使用场景,如何创建 IAM 用户.VPC.子网.安全组.EC2 实例等,甚至 ...

  2. 利用 Page Visibility API 优化网页性能与用户体验

    在现代 Web 开发中,用户可能会频繁切换标签页,或让网页处于后台运行.为了避免不必要的资源浪费并提升用户体验,合理利用 Page Visibility API 可以在页面不可见时暂停或减少资源的消耗 ...

  3. Sealos Devbox 发布，珍爱生命，远离 CI/CD

    水滴攻击太阳系用的是最原始的攻击方式:撞击!却又如此有效率. 当我们搞了一堆容器.编排.CI/CD.DevOps,发明了一大堆没什么用的名词之后,最终发现这些操作都是花里胡哨,让开发者越陷越深. 最终 ...

  4. Linux环境下的mysql安装

    MySQL8.0.26-Linux版安装 1.准备一台Linux服务器 云服务器或者虚拟机都可以; Linux的版本为 Centos7; 2.下载Linux版MySQL安装包 https://down ...

  5. Tomcat通信概念篇

    在上一篇了解完网络通信的基本概念之后,本章节为了解Tomcat的基本逻辑方便以后对 UDP:(发短信,不管是否能接受成功都会发送) //发送端 //不需要连接服务器 public static voi ...

  6. 9.23 csp

    今天模拟赛出了四道zroi的题,挺GG的. T1.奇观 因为删除的边比较少,所以从m入手,f[i][j]表示长度为i,终点为j的链的方案数. C 是长度为3的链,F是 1条 长度为3 的链 和 2条 ...

  7. 斜率优化DP简单总结&&“土地购买”题解

    今天刚刷完了斜率优化DP,简单从头回顾一下. \[首先,能写出DP方程应该是最重要的,毕竟斜率只是用来优化的 \] 那么一个DP方程能用斜率优化,具备一种形式: \[f[i]+s1[i]+A[i]*B ...

  8. 用easyVget下载B站油管视频

    B站油管等视频平台简直就是无所不有的宝库,动漫.番剧.纪录片.科普,更有海量的学习资源,可以极大地满足你的视觉欲和求知欲. 作为一只视频仓鼠,我热衷于下载自己感兴趣的视频到本地,不用担心视频被和谐.不 ...

  9. idea高效实用快捷键【待补充】

    1.快捷键 ctrl+alt+L代码格式化 2.快捷键 ctrl+h查看hierarchy,只能查看向上向下继承关系,而不能看实现了哪些接口. 3,选中右键--Diagram可以查看实现了哪些接口 4 ...

  10. C语言（从入门到入土）

    1.C语言整体上需要记住的 总体上必须清楚的: 1)程序结构是三种: 顺序结构 , 循环结构 (三个循环结构), 选择结构 (if 和 switch) 2)读程序都要从main()入口, 然后从最上面 ...