html知识点整理

来源：互联网发布：23端口是什么服务编辑：程序博客网时间：2024/05/11 15:57

1.html行内元素，块级元素，空元素都有哪些？
行内元素：<a> <input> <img> <label> <span> <select> <br> <textarea> <abbr> <acronym> <b> <bdo> <big> <cite> <code> <dfn> <em> <font> <i> <kbd><q> <s> <samp> <small> <strike> <strong> <sub> <sup> <tt> <u> <var>
块级元素：<div> <form> <h1>..<h6> <p> <hr> <ul> <dl> <ol> <pre> <table> <address> <blockquote> <center> <dir> <fieldset> <isindex> <menu>
可变元素：可变元素为根据上下文语境决定该元素为块元素或者内联元素。<applet> <button> <del> <iframe> <ins> <map> <object> <script>
空元素：<br/> <hr> <input> <img> <link> <meta>

2.对SVG的理解？
SVG可缩放矢量图形（ Scalable Vector Graphics ）是基于可扩展标记语言（ XML ），用于描述二维矢量图形的一种图形格式。
特点：
(1)任意放缩
用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
(2)文本独立
SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
(3)较小文件
总体来讲，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。
(4)超强显示效果
SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
(5)超级颜色控制
SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。
(6)交互 X 和智能化。 SVG 面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式 Flash 竞争的问题，另一个问题就是 SVG 的本地运行环境下的厂家支持程度。

3.canvas元素的理解？
<canvas>元素，是HTML5中新增一个HTML5标签。负责在页面中设定一个区域，然后可以通过javascript动态地在这个区域绘制图形。

4.描述一下cookie与webstorage？
sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据。
cookies会发送到服务器端。其余两个不会。
区别：
- Cookie
每个域名存储量比较小（各浏览器不同，大致 4K ）
所有域名的存储量有限制（各浏览器不同，大致 4K ）
有个数限制（各浏览器不同）
会随请求发送到服务器
- LocalStorage
永久存储
单个域名存储量比较大（推荐 5MB ，各浏览器不同）
- 总体数量无限制
SessionStorage
只在 Session 内有效
存储量更大（推荐没有限制，但是实际上各浏览器也不同）

5.html5的语义化标签有哪些？

<header></header> 、<footer></footer> 、<nav></nav> 、<section></section> 、<article></article>、<aside></aside>、<figure></figure>、<datalist></datalist>、<details></details>

6.html5表单元素新增了哪些元素？
datalist 规定输入域的选项列表、keygen 提供一种验证用户的可靠方法、output 用于不同类型的输出，比如计算或脚本输出

7.img的alt与title有哪些区别？
alt 用于图片无法加载时显示； title 为该图片提供信息，通常当鼠标滑动到元素上的时候显示

8.html5应用程序缓存与浏览器缓存的区别？
应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML 、 CSS 、图片以及 JavaScript 。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：

<!doctype html><html manifest=”example.appcache”>…..</html>

与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

9.BFC的理解？IFC的理解？
a、BFC（Block Formatting Context）即“块级格式化上下文”， IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文。
b、BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。
c、在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化。

10.如何产生BFC？
当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：
a、float的值不为none
b、overflow的值不为visible
c、display的值为table-cell, table-caption, inline-block中的任何一个
d、position的值不为relative和static
CSS3触发BFC方式则可以简单描述为：在元素定位非static，relative的情况下触发，float也是一种定位方式。

11.BFC的作用与特点？
不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖
如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态，当float不为none时，position为absolute、fixed时元素将脱离标准流。

12.WebGL的理解？
WebGL是针对canvas的3D上下文，是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。
WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：
第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;
第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。
通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于 HTML5 游戏开发。

13.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
①声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
②严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。
③在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
④DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

14.常见浏览器内核？
Trident内核： IE,MaxThon,TT,The World,360, 搜狗浏览器等。 [ 又称 MSHTML]
Gecko内核： Netscape6 及以上版本， FF,MozillaSuite/SeaMonkey 等
Presto内核： Opera7 及以上。 [Opera 内核原为： Presto ，现为： Blink;]
Webkit内核： Safari,Chrome 等。 [ Chrome 的： Blink （ WebKit 的分支） ]

15.HTML5 标准提供了哪些新的 API？
HTML5 提供的应用程序 API 主要有：
· Media API
· Text Track API
· Application Cache API
· User Interaction
· Data Transfer API
· Command API
· Constraint Validation API
· History API

阅读全文

0 0