前端面试——HTML篇

01-href和src的区别

请求资源类型不同：

href表示超文本引用，用来建立当前元素和文档之间的连接，如: link、a
请求src资源时会将其指向的资源下载并应用到文档中，如script、img、iframe

作用结果不同：

href用于在当前文档和引用资源之间确立联系
src用于替换当前内容

浏览器解析方式不同：

用href引入，浏览器会识别为css文件，会并行下载资源并且不会停止对当前文档的处理（因此建议css使用link加载）
使用src，浏览器解析到src时会暂停其他资源的下载和处理，直到将资源加载、编译、执行完毕（因此建议js脚本放body最后）

02-对html语义化的理解

根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码，同时也爱让浏览器的爬虫和机器能够很好地解析

常见的语义化标签：

header、main、footer、nav、section、artical、aside

03-DOCTYPE(文档类型)的作用？严格模式和混杂模式？

作用： <!DOCTYPE>声明位于文档的最前面，用于告诉浏览器用什么文档类型定义（DTD）来解析文档

严格模式与混杂模式：

DTD（文档类型定义）分为三种类型：严格型、过渡型、框架型
浏览器解析文档的两种类型:
- 严格模式（标准模式）：又称标准模式，是指浏览器按照W3C标准解析代码
- 混杂模式（怪异模式）：浏览器按照自己的方式解析代码
- 二者最常见的区别：怪异模式下盒模型为IE模型，严格模式下为标准盒模型
这两种模式的区分于DTD有密切联系：
- 严格DTD - 严格模式
- 有URI的过渡DTD - 严格模式
- 没有URI的过渡DTD - 混杂模式
- DTD不存在或者格式不正确 - 混杂模式
- HTML5没有严格模式之分
严格模式与混杂模式存在的意义：
- 如果只存在严格模式，很多旧版网站必然受到影响，如果只存在混杂模式，每个浏览器都有自己的解析模式，将会出现混乱
DTD：通过定义元素、属性、标记以及文档中的实体及其相互关系来保证XML/HTML文档的合法性

04-script标签中defer和async的区别

async：表示应该立即开始下载脚本，但不能下载资源、等待其他脚本下载等页面动作。并且只对外部脚本文件有效

defer: 表示脚本可以延迟到文档被完全解析和显示之后再执行。只对外部脚本文件有效（IE7及以前对行内脚本也有效）

05-meta

位于head标签中，对于SEO(搜索引擎优化)起着重要作用

SEO优化部分

<!-- 页面标题<title>标签(head 头部必须) -->
<title>your title</title>
<!-- 页面关键词 keywords -->
<meta name="keywords" content="your keywords">
<!-- 页面描述内容 description -->
<meta name="description" content="your description">
<!-- 定义网页作者 author -->
<meta name="author" content="author,email address">
<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">

可提供有关页面的元数据，比如针对搜索引擎和更新频度的描述和关键词
charset：声明文档使用的字符编码，解决乱码的主要方式，写在第一行
- ```
<meta charset="utf-8"/>
```
name设置属性名(author、keywords、description)，content设置属性值
viewport：主要是影响移动端布局的：
- ```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- width/height：viewport的宽/高度（数值/device-width、数值/device-height）
- initial-scale: 初始缩放比例
- maximum-scale: 最大缩放比例
- minimum-scale: 最小缩放比例
- user-scalable: 是否允许用户进行缩放（yes/no）

06-h5新增特性？

语义化标签: header、main、footer、aside、artical、section、nav
新的表单控件：date、time、email、url、search、file、tel
video、audio标签
drag和drop（draggable=“true”）：用于拖放
- 被拖动元素上触发事件：
  - ondragstart、ondrag、ondragend
  - ondragenter、ondragover、ondragleave
  - ondrop
localStorage、sessionStorage - 用于本地离线存储
canvas、svg - 用于绘画的元素，canvas绘制的图片会失真而svg绘制的不会失真
Geolocation - 用于获取地理位置
web Worker - 独立于其他脚本、不影响页面性能、运行在后台的javaScript
webSocket - 单个TCP连接上进行全双工通讯的协议

07-行内元素、块级元素？

行内元素:

排列成行，宽度随内容变化，设置宽高无效
a、span、b、strong、em、i

块级元素：

独占一行，可以设置宽高
p、div、ul、ol、li、h1~h6、dl…

行内块级元素：

排列成行，可设置宽高
img、input、button

08-移动端手势、适配方案

touch事件：touchstart、touchmove、touchend

移动端适配方案：

伸缩布局：flex
流式布局：百分比
响应式布局：媒体查询（超小屏的时候：流式布局）

rem布局（宽高等比缩放）：通过控制html上的字体大小去控制页面上所有以rem为单位的尺寸

把页面上的px换成rem
适配的时候设置基准值
换算公式：当前rem基准值=预设的基准值/设计稿宽度*当前设备宽度
通过媒体查询去改变（另一种方式是通过触发window的resize事件去改变html字体大小）

//在设备大小为1280px时，字体大小16px
const handleResize=()=>{
        
        
    let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;
    let htmlDom=document.getElementsByTagName("html")[0]
    htmlDom.style.fontSize=htmlwidth/80+'px';
}
handleResize();//初始执行一次
window.addEventListener('resize',handleResize);

em和rem

都是相对单位
em相对于父元素的字体大小，rem相对于html的字体大小，r 指的是root
浏览器默认字体大小是16px

媒体查询：使用@media针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕大小，编写多套样式，从而达到自适应的效果

@media screen and (max-width: 960px/768px/550px/320px){
    
    
    //定义不同样式
    body{
    
    
        background-color:#000;
    }
}