HTML 面试题

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来代替　　

posted @ 2019-07-02 22:00  时光凉忆  阅读(322)  评论(0)  编辑  收藏  举报