前端面试——HTML+CSS(续)

https://www.nowcoder.com/ta/front-end-interview?query=&asc=true&order=&page=3

1.说一下HTML5的新特性？

https://blog.csdn.net/chandoudeyuyi/article/details/69206236

1.1 新标签

（1）<canvas>

      HTML5 <canvas> 元素用于图形的绘制，<canvas> 标签只是图形容器，本身是没有绘图能力，所有的绘制工作必须在脚本(一般是JavaScript)内部完成。

（2）<audio>和<video>

     在网页上嵌入音频元素的标准，使用 <audio> 元素，嵌入视频的标准方法，使用<video>元素。

（3）input元素的新类型

       提供了更好的输入控制和验证。color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week。

1.2  新的表单元素和表单属性

• 表单元素：<datalist>，<keygen>，<output>
• <form> 和 <input>标签添加了几个新属性：autocomplete等

1.3 语义元素

     HTML5提供了新的语义元素来明确一个Web页面的不同部分。<header>，<nav>，<section>，<article>，<aside>，<figcaption>，<figure>，<footer>。

1.4 地理定位

     HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

1.5 拖放

       拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

     （1）首先，为了使元素可拖动，把 draggable 属性设置为 true

     （2）拖动什么 - ondragstart 和 setData()

     （3）放到何处 - ondragover

     （4）进行放置 - ondrop

1.6 Web存储

     Web Storage DOM API 为Web应用提供了一个能够替代cookie的Javascript解决方案

• sessionStorage—客户端数据存储，只能维持在当前会话范围内。sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
• localStorage—客户端数据存储，能维持在多个会话范围内。

2.谈一下对语义化的理解？

3.HTML和XML?

     XML，即扩展标记语言（EXtensible Markup Language），它 不是 HTML 的替代。XML 和 HTML 为不同的目的而设计，HTML 旨在显示信息，而 XML 旨在传输信息。

• XML 被设计为传输和存储数据，其焦点是数据的内容。
• HTML 被设计用来显示数据，其焦点是数据的外观。

4.JSON

      4.1 JSON简介
     JSON：JavaScript 对象表示法（JavaScript Object Notation）。JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析。
    （1）JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
    （2）JSON 是轻量级的文本数据交换格式
    （3）JSON 独立于语言 *
    （4）JSON 具有自我描述性，更易理解
* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

     4.2 JSON语法

     JSON 语法是 JavaScript 对象表示法语法的子集。

• 数据在名称/值对中
• 数据由逗号分隔
• 花括号保存对象
• 方括号保存数组

   4.3  JSON使用

       常用于JSON字符串和JS对象之间的转换。

• JSON.parse()      JSON字符串文本-------》JS对象
• JSON.stringify()      JS对象-------》JSON字符串文本

       JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

4.4 eval()与JSON.parse()

       eval()函数和JSON.parse()的功能类似，但是由于eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

5.CSS选择器

https://segmentfault.com/a/1190000013745407

5.1 CSS选择器

（1）基本选择器   id, class, *, element

（2）组合选择器    div,p    div p    div>p

（3）属性选择器

（4）伪类选择器:  a:visited  a:hover

（5）伪元素选择器    ::after ::before

5.2 选择器优先级

https://segmentfault.com/a/1190000013755953

（1）在没有!important时

      内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素（类型）选择器 = 伪元素选择器

（2）有!important的肯定权重大，进一步，如果都加了!important或者都没加，判断来源

   （2.1）当都加了!importance时，浏览器预设>用户设置（user style sheet）>开发者开发（author）
   （2.2）当都不加!importance时，浏览器预设<用户设置（user style sheet）<开发者开发（author）

5.3 插入CSS的方式

http://www.w3school.com.cn/css/css_howto.asp

  三种：外部样式表、内部样式表、内联样式表

（1）外部样式表

（2）内部样式表

（3）内联样式表

    由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。