前言

哈喽！大家好我是壹流浪的小猪流浪，第一次创作决定要写的原因是看了其他博主的作品激励新手要多去创作去了解拓展自己，初次写的面试总结，刚开始要写就被格式搞的无从下手，然后就在掘金上面搜索看了一些博主写面试题的一些格式，就开始了现在的创作了，我就把近期学习的面试题做一个简单的汇总，有写的不好的的还请多多指教，也希望能帮助到和我一样正在努力的小伙伴。

图片.jpg

1.前端页面有那三层构成，分别是什么？作用是上面？

a.结构层：由HTML或XHTML之类的标记语言负责创造，仅负责语义的表达，解决了页面“内容是什么”问题。

b.表现层：由CSS负责创建，解决了页面“如何显示内容”的问题。

C.行为层由脚本负责，解决了页面“内容如何对事件做出反应”的问题.

2.简述盒子模型

a.IE6盒子模型与W3C盒子模型

b.文档中每一个元素都被描绘为矩形盒子、盒子有四个边界：外边距边界margin.边框边界border，内边距边界padding，与内容边界content

c.CSS3有一个box-sizin该属性可以控制盒子的计算方式

d.content-box：padding和border不被包含在width和height之内，对象的实际宽度就等于widtgh和 padding和bapping之和（W3C盒子模型）

e.border-box：padding和border被包含在定义中的width和heigth之中，对象的实际宽度就等于width值（IE6盒子模型）.

3.简述一下scr和和href的区别

a.scr用于替换当前元素

b.href：用于在当前文档和引用资源之间确立联系

c.scr是source的缩写。指向外部资源发位置。指向的内容将会嵌入到文档中当前标签所在位置

d.href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

4. 请阐述 table 的缺点

a. 太深的嵌套，比如 table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量

b. 灵活性差，比如要将 tr 设置 border 等属性，是不行的，得通过 td

c. 代码臃肿，当在 table 中套用 table 的时候，阅读代码会显得异常混乱

d. 混乱的 colspan 与 rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱 e. 不够语义

iframe 的优缺点优点：

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe 无刷新文件上传

c. iframe 跨域通信缺点：

d. iframe 会阻塞主页面的 Onload 事件

e. 无法被一些搜索引擎索引到

f. 页面会增加服务器的 http 请求

g. 会产生很多页面，不容易管理

5. html5 有哪些新特性、移除了那些元素？（扩展）新特性：

a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

b. 拖拽释放(Drag and drop) API

c. 语义化更好的内容标签（header,nav,footer,aside,article,section）

d. 音频、视频 API(audio,video)

e. 画布(Canvas) API

f. 地理(Geolocation) API

g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失 

h. sessionStorage 的数据在页面会话结束时会被清除

i. 表单控件，calendar、date、time、email、url、search 

 j. 新的技术 webworker, websocket 等 移除的元素：
 
 k. 纯表现的元素：basefont，big，center, 
 
   s，strike，tt，u l. 对可用性产生负面影响的元素：frame，frameset，noframes

6. 谈谈你对 CSS 布局的理解

   a. 固定布局 
  b. 流式布局 
  c. 弹性布局 
  d. 浮动布局 
  e. 定位布局
  f. margin 和 padding

7. 述 CSS 样式表继承

  a. CSS 样式表继承指的是，特定的 CSS 属性向下传递到子孙元素，会被继承下去的属性：
  b.文本相关：font-family，font-size，font-style，font-variant，font-weight，font，letter-spacing，line-height， color 
  c. 列表相关：list-style-image，list-style-position，list-style-type， list-style

8. 请简述 CSS 的选择器

  a. 元素选择器：* 、E、 E#id、 E.class 
  b. 关系选择器：E、F、E>F、E+F、E~F 
  c. 属性选择器：E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、 E[att|="val"]
  d. 伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、 E:last-chil 等 
  e. 伪 对 象 选 择 器 ： E:first-letter/E::first-letter 、 E:first-line/E::first-line 、 E:before/E::before 、 E:after/E::after、E::selection

图.gif

WEB前端A：HTML&CSS基础面试题总结

前言