前端基础面试题(HTML5+CSS3部分)

一 ，前端知识及面试集锦第一部分：HTML和HTML5

1、HTML与HTML5，声明模式有什么不同，为什么不同?

解答：
声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
声明位于文档中的最前面的位置，处于 标签之前，声明告知浏览器的解析器用什么文档标准解析这个文档（标准模式）。若声明错误或未声明会导致文档以兼容模式/混杂模式呈现。
标签没有结束标签。 声明不区分大小写。总是先给 HTML 文档添加 声明，确保浏览器能够预先知道文档类型.
在html4.01中,声明需要引用DTD（文档类型声明），因为它是基于SGML（Standard Generalized Markup Language 标准通用标记语言），DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。

HTML5不基于SGML因此不需要引用DTD。

HTML5只有一种声明方式：

HTML 4.01 规定了三种不同的 声明，分别是：Strict、Transitional 和 Frameset

Strict模式，不允许使用表现性、废弃元素（如font）以及框架集（如frameset）。

Transitional 模式 ，允许使用表现性、废弃元素（如font），不允许使用框架集（如frameset）。

Frameset 模式，允许表现性元素，废弃元素以及框架集

2、HTML的组成部分，每个部分的结构和作用

解答：

一个标准完整的HTML主要由声明、html标签，head标签,body标签等组成

head中可以包括 meta 、link、title、base、style、script等标签

body定义文档的主题，大部分实体元素在body中

其中meta标签：可提供有关页面的原信息（mata-information）,meta 有一个必选属性content 和三个可选属性 http-equiv ,name, scheme

link标签：用于引入CSS样式表文件，只能出现在head中

title标签：定义文档的标题，可显示在浏览器页签中

base标签： 为页面上的所有链接规定默认地址或默认目标。通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 标签可以改变这一点。浏览器随后将不再使用 当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 、、、 标签中的 URL。

style标签：标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，唯一可能的值是 “text/css”。

script标签：标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

3、HTML中的块级元素、行内元素、行内块元素各有哪些，其语义表达的是什么?

解答：
元素按照功能可以分为基础元素、格式元素、表单元素、框架元素、图像元素、多媒体元素、链接元素、列表元素、表格元素、样式语义元素、脚本元素、元信息元素等
（1）常用块级元素div、h1-h6、p、table、ul、ol、dl、li、dt、dd、header、footer、article、aside、section
(2) 常用行内元素span、大部分的格式元素b、strong、i、del、em、pre、sub、sup、u等，image、a、input、button、select、textarea、label

4、HTML5中新增了哪些元素？废除了哪些元素？

（1）HTML5中引入了新的canvas元素，新的多媒体元素audio、video、source、embed、track等，新的表单元素datelist、keygen、output，新的语义化元素article、aside、details、command、header、footer、nav、section等

（2） 废除了旧版中一些用于格式的元素，applet、basefont、font、center、big、dir、frame等

5、HTML5中的WebStorage技术

解答：

WebStorage是HTML新增的本地存储解决方案之一，但并不是为了取代cookie而制定的标准，

cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的，session正是依赖于实现的客户端状态保持。

WebStorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。

HTML5 提供了两种在客户端存储数据的新方法：localStorage,sessionStorage,

localStorage在本地永久性存储数据，除非显式将其删除或清空，

sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。两个对象都有共同的API

length、key、getItem、setItem、removeItem、clear

同时HTML5规定了一个storage事件，在WebStorage发生变化的时候触发，可以用此监视不同页面对storage的修改

6、HTML5中的Websocket

解答：
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

7，HTML5的十大新特性

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等

(1)语义标签 :　语义化标签使得页面的内容结构化，见名知义
(2)增强型表单:HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
(3)视频和音频
(4)Canvas绘图:标签只是图形容器，必须使用脚本来绘制图形。
(5)SVG绘图:SVG是指可伸缩的矢量图形
(6)地理定位:HTML5 Geolocation（地理定位）用于定位用户的位置。
(7)拖放API:拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。
(8)Web Worker
(9)Web Storage
(10)WebSocket

8.请解释一下什么是语义化的html

语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
　　1.语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
　　2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
　　3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
　　4.支持多终端设备的浏览器渲染

9. 什么是渐进式渲染?

渐进式渲染是用于改进网页性能的技术的名称（特别是，改善感知的加载时间），以尽可能快地呈现内容以供显示
它曾经在宽带互联网出现之前的日子里变得更加普遍，但它仍然在现代开发中使用，因为移动数据连接变得越来 越流行（并且不可靠）！
这种技术的例子：
延迟加载图像 - 页面上的图像不会同时加载。当用户滚动到显示图像的页面部分时，JavaScript将用于加载图像。
优先考虑可见内容（或首屏渲染） - 仅包括首先在用户浏览器中呈现的页面数量所需的最小CSS /内容/脚本，以便 尽快显示，然后可以使用延迟脚本或者监听DOMContentLoaded/ loadevent加载其他资源和内容。
异步HTML片段 - 在后端构建页面时将部分HTML刷新到浏览器。有关该技术的更多细节可以在这里找到

10，将HTML5视为开放的Web平台。HTML5的构建块是什么？

语义 - 允许您更准确地描述您的内容。
连接 - 允许您以全新的创新方式与服务器通信。
离线和存储 - 允许网页在本地存储客户端数据并更有效地脱机运行。
多媒体 - 在Open Web中制作视频和音频一等公民。
2D / 3D图形和效果 - 允许更多样化的演示选项。
性能和集成 - 提供更高的速度优化和更好的计算机硬件使用。
设备访问 - 允许使用各种输入和输出设备。
造型 - 让作者写出更复杂的主题。

二，CSS3新特性

1.过渡

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码

2.动画

animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）复制代码

3.形状转换

ransform:适用于2D或3D转换的元素
rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg);

4.CSS3新增伪类选择器

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

5.阴影

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;

6.边框

border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式–重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;

7. 背景

background-clip 制定背景绘制（显示）区域 background-origin background-size
1.（background-clip: border-box;）默认情况（从边框开始绘制） 2.（background-clip: padding-box;）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！ 3.（background-clip: content-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！

8.反射

-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片

10.文字 换行 语法：word-break: normal|break-all|keep-all;、语法：word-wrap: normal|break-word; 超出省略号 text-overflow:clip|ellipsis|string 文字阴影 语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。

11.颜色 rgba（rgb为颜色值，a为透明度） color: rgba(255,00,00,1);background: rgba(00,00,00,.5); hsla h:色相”，“s：饱和度”，“l：亮度”，“a：透明度” color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68);复制代码

9.渐变

左上（0% 0%）到右上（0% 100%）即从左到右水平渐变
左到右的渐变 background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));加粗样式

10.Filter（滤镜）：

黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)

11.弹性布局 Flex

 flex-direction属性决定主轴的方向（即项目的排列方向flex-wrap属性定义，如果一条轴线排不下，如何换行justify-content属性定义了项目在主轴上的对齐方式align-items属性定义项目在交叉轴上下如何对齐。order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

12.栅格布局 grid

13.多列布局

Column-count：表示布局几列。

Column-rule：表示列与列之间的间隔条的样式

Column-gap：表示列于列之间的间隔

14.盒模型定义

box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！ box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！如下图

15.媒体查询

就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！