.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. 【赵渝强老师】搭建Hadoop环境

    说明:这里我们以本地模式和伪分布模式伪列,为大家介绍如何搭建Hadoop环境.有了这个基础,大家可以自行搭建Hadoop的全分布模式. 需要使用的安装介质: hadoop-2.7.3.tar.gz j ...

  2. Serilog文档翻译系列（八） - 记录器的生命周期、可靠性

    01.记录器的生命周期 Serilog 大多数情况下"只需使用",并且在创建和处理日志记录器时不需要过多考虑.然而,由于以下原因: 某些接收器(sink)涉及后台进程,特别是那些使 ...

  3. 多平台文章同步浏览器插件 – ArticleSync

    ArticleSync - 多平台文章同步插件 ArticleSync 是一个浏览器扩展,帮助用户轻松将文章同步发布到多个社交平台.支持将文章从本地草稿发布到各大平台,如知乎.Bilibili 等.它 ...

  4. 警告：攻击者利用 SnoarQube 漏洞盗取国内多个机构的大量源码！

    2021 年 10 月 22 日,国外知名媒体 cybernews 发文称,有未知攻击者攻击并渗透了博世 iSite 的服务器,并盗取了这家制造业巨头的 5G 物联网连接平台的源代码. 攻击者声称通过 ...

  5. Redhat 7安装Oracle 11.2.0.4 RAC 数据库软件中报错：Error in invoking target 'agent nmhs' of makefile

    环境:Redhat Linux 7.6 + Oracle 11.2.0.4 RAC 现象:图像化安装数据库软件过程中的86%时,报错. 1. 具体现象 2. 定位问题 3. 解决问题 1. 具体现象 ...

  6. ansible批量部署apache

    ansible批量部署apache 目录 ansible批量部署apache 安装ansible 基于ansible进行基础准备 配置受控端本地软件仓库 安装受控端Apache(httpd)的最新版本 ...

  7. 《一篇就够系列》之HTTP详解，覆盖高频面试考点！

    一.写在开头 前几篇博文大概介绍了什么是网络编程,以及网络编程的实战作用,今日起,我们将针对里面涉及到的重要知识点,进行详细的梳理与学习! 在整个WEB编程中,有个应用层的协议是我们无法跳过的,那就是 ...

  8. MarkDown用法学习笔记

    标题: 用 '#'标识,可以到从1到6级标题设置,有多少个'#'符号就对应多少级标题 粗体: 用''标识,如果两边只有一个''标识是斜体,如果两有2个这符号标题是加粗,如果有3个这符号标识是斜体和加粗 ...

  9. Flink CDC 与Hudi整合

    介绍 之前写过Flink CDC sink 到 Iceberg中,本篇主要实践如何CDC到hudi中. 什么是hudi? Hudi is a rich platform to build stream ...

  10. 强化学习训练过程中的过度拟合(overfitting)

    相关: A.I. Learns to Drive From Scratch in Trackmania 本文讨论的是强化学习中的过度拟合问题,要知道强化学习中的过拟合和其他的监督.无监督学习的过拟合不 ...