htm5 css 面试题

系列文章目录

1.HTML 常问的面试题

2.CSS 常问的面试题

文章目录

• 一、HTML 4 HTML5 XML 的区别
• 二、HTML5 新增标签
• 三、CSS  有哪些隐藏元素
• 四、px ,em ,rem  之间有什么区别
• 五、如可解决BFC
• 六、CSS 中有哪些布局 

一 1.HTML 4 HTML5  XML 的区别

1.HTML 4  是超文本标记语言   主要用于作页面呈现。html 是现有实现 后面才慢慢制定标准，才导致

HTML 非常混乱，语法不严谨。

2.是可扩展标记语言  主要用于存储数据和结构。语法严谨，扩展强，但由于JSON也有类似的作用易用，所以XML市场越来越小了。

3. HTML5 在HTML4 基础进行扩展，用于标准页面，使得语法严谨更加语义化。

二、HTML5 新增标签

1.HTML5 的语义理解：主要利于SEO，可读性更好

2.新的特殊内容元素：比如article,footer,header,nav,section

3.新的表单控件：比如calendar、date、time、email、url、search

  <!-- 新增了input 表单 type属性值：data(日历)，email(自带表单验证) ，url (自带表单网站) -->


  <form action="">
    邮箱：<input type="email">
    地址：<input type="url">
    <input type="submit">
  </form>

二 前端存储有几种：

.Cookies
1.会为每个请求自动携带所有的Cookies数据，比较方便，但是也是缺点，浪费流量；<br
HTML5 前加入了,容量只有4K-DF
2.每个domain(站点)限制存储20个cookie;sbr/s
3.浏览器API比较原始，需要自行封装操作。 (is-cookie)

localStorage HTML5 加入 

1.兼容1E8+，操作方便
2永久存储，除非手动刪除
3.容量为5M

sessionStorage HTML5 10 X
1.功能基本与 localStorage 相似，但当前页面关闭后即被自动清理
2.5Cookies. localStorage 不同点是不能在所有同源窗口间共享，属于会话级别的存储

 Web SQL
非标准功能
1.2010年已被废奔，但一达主流浏览器中都有相关的史现
2.类似于 sQLite 数据库，是一种真正意义上的关系型数据库，用SQL进行操作

IndexedDB
1.是一种 NoSQL 数据库，用键值对进行储存，可进行快速读取操作；cbr)
HTML5 加入 2.适合复杂 Web存储场景，用JS操作方便(前端大量存数据的场景较少，如果有,可以用
3.存储空间容量，大于等于250MB，甚至没有上限

三、CSS  有哪些隐藏元素

opacity:0 通过将元素的透明度设置为0,实现看起来隐藏的效果，但依然会占用空间并可以进行交互visibility:hidden 与透明为0的方案非常类似，但依然会占用空间，不可以进行交互

overflow:hidden 只会隐藏溢出部分，用空间，不可进行交互

display:none 可以彻底隐藏元素并从文档中消失，不占用空间，也不能进行交互，不影响布局

z-index:-9999 通过将元素的层级置于最底层，让其他元素复盖住它。

left:-9999px   通过将元素定位到屏幕外面，达到看起来看不到的效果

四、px ,em ,rem 之间的区别

px  绝对单位 。页面会按照给出的精准像素进行展式

em 相对单位。默认的基准点为父元素的字体大小，而如果自身定义字体大小按顺序自身来算。所以即使在同一个页面内lem 可以能一个固定值。

rem  相对单位 。 根据html跟标签 来制定大小，一般使用于移动适配。

五、如何理解BFC

BFC：块级格式化上下文，是一块独立的渲染区域（触发了BFC，这块区域就是一块独立的泣染区域）
会将处于BFC的内容 和 处于BFC外的内容 隔离

触发BFC的方式：

1position:absolute/fixed 2,float:left/righhht  浮动的元素多个放在一起，会相互隔开

4.display:inline-block

BFC作用

1，处理块元素，上下margin 合并的问题

2，处理margin 塌陷

3，清除浮动

4，实现自适应，左边固定 右边自适应

---