一，面试基础 HTML和CSS

ps：这俩面试答不上来的，基本就可以回去了，以下是HTML题，一般来说这地方不会出太多题，面试官也不愿意花太多时间在这上面。

创新互联建站专业网站设计、成都网站建设，集网站策划、网站设计、网站制作于一体，网站seo、网站优化、网站营销、软文平台等专业人才根据搜索规律编程设计，让网站在运行后，在搜索中有好的表现，专业设计制作为您带来效益的网站！让网站建设为您创造效益。

1，HTML语义化，如何理解语义化？

让人更容易懂（增加代码的可读性）

让搜索引擎更容易懂，有利于爬虫抓取

在没有css的情况下，页面也能更好的展现出其内容结构，代码·结构

2，script 标签中 defer 和 async 的区别？

script：会阻碍HTML解析，只有下载好并执行完脚本才会继续解析HTML

async：解析HTML的过程中会异步下载脚本，下载成功后立即执行，可能会阻断HTML的解析

defer：完全不会阻断HTML解析，解析完成之后在按顺序执行脚本

图解 script 标签中的 async 和 defer 属性

3，从浏览器地址栏输入 url 到请求返回发生了什么

3.1，输入url之后，会解析出主机，端口，路径，协议等信息，构造一个HTTP请求

3.2，DNS域名解析

3.3，TCP链接，http请求

3.4，服务器处理请求并返回HTTP报文

3.5，浏览器渲染（HTML解析，css解析，js解析，render树）

推文：从输入 URL 开始建立前端知识体系

推文：从 URL 输入到页面展现到底发生什么

推文：字节面试被虐后，是时候搞懂 DNS 了

从上到下依次阅读

4，HTTP和HTTPS的区别

http：

• • • 不安全
    • 协议对客户端没有状态存储【没有状态】
    • 每次请求需要TCP三次握手四次挥手，和服务器重新建立连接【没有连接】
    • 基本的特性，由客户端发起请求，服务端响应
    • 简单快速、灵活
    • 使用明文、请求和响应不进行确认

https：

• • • 安全
    • HTTP安全版本，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护
    • 采用混合加密技术，传输过程无法直接查看明文内容【传输加密】
    • 通过证书认证客户端访问的是自己的服务器【身份认证】
    • 传输过程防止被篡改【数据完整】

ps：以下是css的面试题，打不出来的话可能会有非常不好的印象

5，css盒子模型的介绍

css3中盒子模型有两种，一种是W3C标准盒子模型，一种是IE盒子模型

两种盒子模型都是由content，margin，padding，border构成，其大小都是由content，padding，border决定的，但是盒子内容却有所不同：

• • • 标准盒模型：只包含content。
    • IE（替代）盒模型：content + padding + border。

可以通过box-sizing来改变元素的盒模型：

• • • box-sizing: content-box：标准盒模型（默认值）。
    • box-sizing: border-box：IE（替代）盒模型。

6，css选择器

选择器	权重	使用示例
!important	1111	* {color: '#00f' !important}
行内	1000
id	0100	#id{color:'#00f}
class	0010	.calssName{color:'#00f}
标签	0001	div{color:'#00f}
子选择	0001	div > span{color:'#00f}
伪类	0001	a:hover {color:'#00f}>

文章标题：前端面试HTML和CSS总结，这一篇就够了！
文章出自：http://mswzjz.cn/article/dsojcpi.html