HTML5与CSS基础知识点（一）

1.浏览器页面有哪三层构成，分别是什么，作用是什么？ 答：构成：结构层、表示层、行为层； 分别是：HTML、CSS、Javascript 作用：HTML实现页面结构，CSS完成页面的表现与风格，Javascript实现一些客户端的功能与业务。 2.HTML5的优点与缺点？ 答：优点：①网络标准统一、H5本身是有W3C推荐出来的； ②多设备、跨平台； ③即时更新； ④提高可用性和改进用户的友好体验； ⑤有几个新的标签，有助于开发人员定义重要的内容； ⑥可以给站点带来更多的多媒体元素（视频和音频）； ⑦可以很好的代替Flash和Silverlight； ⑧涉及到网站的抓取和索引的时候，对于SEO很友好； ⑨被大量应用于移动应用程序和游戏。 缺点：①安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket这样的功能很容易被黑客利用，来盗取用户的信息和资料； ②完善性：许多特性个浏览器的支持程度不一样； ③技术门槛：H5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战； ④性能：某些品台上的引擎问题导致H5性能低下； ⑤浏览器兼容性：最大缺点，IE9以下浏览器全军覆没。 3.Doctype作用？严格模式与混杂模式如何区分？它们有何意义？ 答：（1）声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。 （2）严格模式的排版和JS运作模式是以核浏览器支持的最高标准运行。 （3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 （4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 4.HTML5有哪些新特性、移除了哪些元素？ 答：H5新增了27个元素，废弃了16个元素，根据现有的标准规范，把H5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素4大类。 结构性元素主要负责web上下文结构的定义。 section: 在web页面应用中，该元素也可以用于区域的章节描述。 header: 页面主体上的头部，header元素往往在一对body元素中。 footer: 页面的底部，通常会标出网站的相关信息。 nav: 专门用于菜单导航、链接导航的元素，是navigator的缩写。 article: 用于表现一篇文章的主体内容，一般为文字集中显示的区域。 级块性元素主要完成web页面区域的划分，确保内容的有效分割。 aside: 用于表达注记、贴士、侧栏、摘要、插入的引用的等作为补充主体的内容。 figure: 是对多个元素进行组合并展示的元素，通常与ficaption联合使用。 code: 表示一段代码块。 dialog: 用于表达人与人之间的对话，该元素包含dt和dd这两个组合元素，dt用于表示说话者，而dd用来表示说话内容。 行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。 meter: 表示特定范围内的数值，可用于工资、数量、百分比等。 time: 表示时间值。 progress: 用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监事。 video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。 autio: 音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种视频媒体格式。 交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。 details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与legend交互才会显示出来。 datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。 menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。 commend: 用来处理命令按钮。 5.你做网页在哪些浏览器测试过，这些浏览器的内核分别是什么？ 答：IE: trident内核； Firefox: gecko内核； Safari: webkit内核； Opera: 以前是presto内核，Opera现已改用Google Chrome的Blink内核； Chrome: Blink（基于webkit,Google与Opera Software共同开发） 6.Doctype是干什么的？ 答：声明位于文档中的最前面的位置，在标签之前。告知浏览器文档使用哪些HTML或XHTML规范。 7.说说你对H5的认识？（是什么？为什么？） 答：（是什么）HTML5指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（RIA），H5是HTML最新版本，2014年10月由万维网联盟完成标准制定。目标是替换1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。 （为什么）HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。H5增强了浏览器的原生功能，符合H5规范的浏览器功能将更加强大，减少了Web应用对插件的依赖，让用户体验更好，让开发更加方便。 8.对WEB标准以及W3C的理解与认识？ 答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率，使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。 9.H5行内元素有哪些，块级元素有哪些，空元素有哪些？ 答：（1）行内元素 a--锚点 abbr--缩写 acronym--首字母 b--粗体 big--大字体 br--换行 cite--引用 code--代码 dfn--定义字段 em--强调 font--字体 i--斜体 img--图片 input--输入框 kbd--定义键盘文本 label--表格标签 q--短引用 s--中划线 samp--定义范例计算机代码 span--内联容器，定义文本内区块 select--项目选择 small--小字体 strike--中划线 strong--粗体强调 sub--下标 sup--上标 textarea--多行文本输入框 tt--电传文本 u--下划线 var--定义变量 （2）块元素 address--地址 blockquote--块引用 center--居中对齐块 dir--目录列表 div--块级主要标签 dl--定义列表 fieldset--form控制组 form--交互表单 h1,h2,h3,h4,h5,h6--各级标题 hr--水平分割线 menu--菜单列表 ol--排序列表 p--段落 pre--格式化文本 table--表格 ul--非排序列表 （3）可变元素 button--按钮 del--删除文本 iframe--inline frame ins--插入的文本 map--图片区块 object--object对象 script--客户端脚本 （4）空元素
换行

---

分割线 文本框等 图片 10.什么是WebGL,它有什么优点？ 答：WebGL是一种3D绘图标准，这种绘图技术标准允许JavaScript和OpenGL ES2.0结合在一起，通过增加OpenGL ES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地显示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。 WebGL完美地解决了现有的Web交互式三维动画的两个问题： 第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持； 第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。 通俗说WebGL中canvas绘图中的3D版本。因为原生的WebGL很复杂，我们经常会使用一些三方的库，这些库多数用于H5游戏开发。 11.请描述一下cookies,sessionStorage和localStorage的区别？ 答：sessionStorage和localStorage是HTML5 Web Storage API提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。 sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口的概念”。sessionStorage是在同源的同窗口中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。 cookies会发送到服务器端，其余两个不会。 12.说说你对HTML语义化的理解？ 答：（1）什么是HTML语义化？ 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 （2）为什么要语义化？ ①为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构； ②用户体验：例如title、alt用于解释名词或解释图片信息、label标签活用； ③有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重； ④方便其他设备解析以意义的方式来渲染网页； ⑤便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。 （3）语义化标签 ：内容部分 :附属部分

：媒体元素，比如一些视频、图片等 ：选项列表，与input元素配合使用，来定义input可能的值。

：用于描述文档或者文档某个部分的细节，默认属性为open。 13.link和@import的区别？ 答：写法上： 两者都是外部引用CSS的方式，但是存在一定的区别： 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。 区别4：link是支持使用Javascript控制DOM去改变样式；而@import不支持。 14.说说你对SVG的理解？ 答：SVG可缩放矢量图形是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C（‘World Wide Web ConSortium’即‘国际互联网标准组织’）在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG于2003年1月14日成为W3C推荐标准。 特点：（1）任意缩放 用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。 （2）文本独立 SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统及时没有安装某一字体，也会看到他们制作时完全相同的画面。 （3）较小文件 总体上，SVG文件编写GIF和JPEG格式的文件要小很多，因而下载也很快。 （4）超强显示效果 SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。 （5）超级颜色控制 SVG图像提供一个1600万种颜色的调色板，支持ICC颜色描述文件标准，RGB、线X填充、渐变和蒙版。 （6）交互X和智能化 SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题，另一个问题就是SVG的本地运行环境下的厂家支持程度。 浏览器支持： Internet Explorer9,火狐，谷歌Chrome,Opera和Safari都支持SVG。 IE8和早期版本都需要一个插件—如Adobe SVG浏览器，这是免费提供的。 15.HTML全局属性有哪些？ 答：accesskey：规定激活元素的快捷键； class：规定元素的一个或多个类名； contenteditable：规定元素内容是否可编辑； contextmenu：规定元素的上下文菜单。上下文菜单在用户点击元素时显示； data-*：用于存储页面或应用程序的私有定制数据； dir：规定元素中内容的文本方向； draggable：规定元素是否可拖动。 dropzone：规定在拖动被拖动数据时是否进行复制、移动或链接。 hidden：样式上导致元素不显示，但是不能用这个属性实现样式； id：规定元素的唯一id； lang：规定元素内容的语言； spellcheck：规定是否对元素进行拼写和语法检查； style：规定元素的CSS行内元素； tabindex：规定元素的tab键次序； title：规定有关元素的额外信息； translate：规定是否应该翻译元素内容。 16.说说超链接target属性的取值和作用？ 答：target这个属性制定所链接的页面在浏览器窗口中的打开方式。 它的参数值主要有： _blank：在新浏览器窗口中打开链接文件； _parent：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果还有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就像_self参数一； _self：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。 _top：在当前的整个浏览器窗口打开所链接的文档，因而会删除所有框架。 17.介绍一下你对浏览器内核的理解？ 答：主要分成两部分：渲染引擎和JS引擎。 渲染引擎：负责取得网页的内容、整理讯息，以及计算网页的显示方式，然后会输出显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。 JS引擎：解析和执行javascript来实现网页的动态效果。 最开始两者并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于指渲染引擎。 18.常见的浏览器内核有哪些？ 答：Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。 Gecko内核：Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等 Presto内核：Opera7及以上。（Operan内核原来使用的，现为：Blink） Webkit内核：Safari,Chrome等。（Chrome:Blink,为Webkit的分支） 19.iframe有哪些缺点？ 答：iframe会阻塞主页面的Onload事件； 搜索引擎的检索程序无法解读这种页面，不利于SEO； iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好通过javascript。 动态给iframe添加src属性值，这样可以绕开以上两个问题。 20.Label的作用是什么，是怎么用的？ 答：label标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。 注意：label的for属性值要与后面对应的input标签id属性值相同。