营销型网站如何制作,广东建设网站公司,做相框的网站,苏州企业网站优化转载自 前端面试常考系列一
一、简述HTML5的优点和缺点#xff1f;
优点#xff1a;
1、网络标准统一、HTML5是由W3C推出的。
2、多设备、跨平台 #xff0c;移植性强。
3、自适应网页设计。
4、即时更新。
5、新增了几个标签#xff0c;有助于开发人员定义重要的内容
优点
1、网络标准统一、HTML5是由W3C推出的。
2、多设备、跨平台 移植性强。
3、自适应网页设计。
4、即时更新。
5、新增了几个标签有助于开发人员定义重要的内容
6、给站点带来了视频和音频等多媒体元素
7、很好的替代Flash和Silverlight
8、涉及到网站的抓取和索引时对于SEO很友好
9、可大量应用于移动应用程序和游戏。 缺点
1、声音问题HTML5的声音制作存在很大问题。
2、安全问题Firefox4的web socket和透明代理的实现存在严重的安全问题web storage、web socket 等功能容易被黑客利用导致用户的信息和资料被窃取。
3、完善性各浏览器对一些特性的支持程度不一样。
4、技术门槛HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习提升了技术门槛。
5、性能某些平台上的引擎问题导致HTML5性能低下。
6、浏览器兼容性IE9以下浏览器几乎全部不兼容。二、简单介绍一下浏览器的页面由几层组成以及相应功能是什么?
浏览器页面由三层构成分别是结构层、表示层和行为层。
结构层structural layer由HTML或XHTML之类的标记语言负责创建其功能是实现页面的结构。
表示层presentation layer由CSS负责创建其功能是完成页面的表现和风格。
网页的行为层由JavaScript负责创建其功能是实现一些客户端的功能和相应的业务。三、Doctype的作用是什么?
!DOCTYPE声明叫做文件类型定义DTD声明的作用是为了告诉浏览器所声明文件的类型。让浏览器解析器知道解析文档需要用什么规范。四、严格模式与混杂模式是什么如何区分有何意义?
定义
严格模式又称标准模式是指浏览器按照 W3C 标准解析代码。
混杂模式又称怪异模式或兼容模式是指浏览器用自己的方式解析代码。区分方法
1、严格 DTD ——严格模式文档包含严格的DOCTYPE一般以严格模式呈现。
2、有 URI 的过渡 DTD ——严格模式没有 URI 的过渡 DTD ——混杂模式。
3、DTD不存在或者格式不正确——混杂模式。
4、HTML5 没有严格和混杂之分。意义
浏览器解析时到底使用严格模式还是混杂模式由网页中的 DTD 声明决定。 DTD 声明定义了标准文档的类型标准模式解析文档类型会使浏览器使用相应的方式加载网页并显示忽略DTD声明 ,网页将会进入混杂模式。五、简单介绍一下HTML5并说明一下其出现的原因
简介
HTML5 是 HTML 最新版本是2014年10月由万维网联盟 W3C 完成标准制定的一套技术组合包括 HTML 、 CSS 和 JavaScript 。主要作用是为了减少网页浏览器对于需要插件的丰富性网络应用服务的需求并且提供更多能有效加强网络应用的标准集。最终目的是为了替换 1999 年所制定的 HTML 4.01和 XHTML 1.0 标准希望能在互联网应用迅速发展的时期使网络标准达到时代对于网络的需求。出现原因
随着时代的发展HTML4已经不能满足日益发展的互联网需要为了增强浏览器功能 广泛的使用了Flash导致了稳定性和安全性较差且不适合在移动端使用。在这种情况下HTML5应运而生它增强了浏览器的原生功能减少了 Web 应用对插件的依赖给开发带来了方便也带来了更好的用户体验。六、说一下你对于WEB标准以及W3C的理解与认识
1.Web标准规范要求书写标签必须闭合、标签小写、不乱嵌套可提高搜索机器人对网页内容的搜索几率。
2.建议使用外链css和js脚本从而达到结构与行为、结构与表现的分离提高页面的渲染速度能更快地显示页面的内容。
3.样式与标签的分离更合理的语义化标签使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件 从而降低维护成本、改版更方便。
4.不需要变动页面内容便可提供打印版本而不需要复制内容提高网站易用性遵循w3c制定的Web标准能够使用户浏览者更方便的阅读使网页开发者之间更好的交流。七、WebGL是什么有什么优点?
WebGL全写 Web Graphics Library 是一种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游戏开发。八、请你描述一下 cookiessessionStorage 和 localStorage 的区别?
Cookie
在浏览器和服务器之间来回传递。
每个域名存储量比较小各浏览器不同大致 4K
所有域名的存储量有限制各浏览器不同大致 4K
有个数限制各浏览器不同
LocalStorage
仅在本地保存。
永久存储
单个域名存储量比较大推荐 5MB 各浏览器不同
总体数量无限制
SessionStorage
仅在本地保存。
只在Session内有效
存储量更大推荐没有限制但是实际上各浏览器也不同九、说说你对HTML语义化的理解?
1.什么是HTML语义化
基本上都是围绕着几个主要的标签像标题H1~H6、列表li、强调strong em等等。根据内容的结构化内容语义化选择合适的标签代码语义化便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2.为什么要语义化
为了在没有CSS的情况下页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看
用户体验例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用
有利于SEO和搜索引擎建立良好沟通有助于爬虫抓取更多的有效信息爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析如屏幕阅读器、盲人阅读器、移动设备以意义的方式来渲染网页
便于团队开发和维护语义化更具可读性是下一步网页的重要动向遵循W3C标准的团队都遵循这个标准可以减少差异化。3.语义化标签
header/header
footer/footer
nav/nav
section/section
article/article SM:用来在页面中表示一套结构完整且独立的内容部分
aslde/aside SM:主题的附属信息(用途很广主要就是一个附属内容)如果 article 里面为一篇文章的话那么文章的作者以及信息内容就是这篇文章的附属内容了。
figure/figureSM:媒体元素比如一些视频图片啊等等
datalist/datalist
SM:选项列表与input元素配合使用来定义input可能的值
details/details
SM:用于描述文档或者文档某个部分的细节~默认属性为open~
ps:配合summary一起使用十、你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
1、 IE: trident 内核
2、 Firefox gecko 内核
3、 Safari、Chromewebkit:webkit 内核
4、 Opera、Chrome: Blink 内核十一、HTML5有哪些新特性、移除了哪些元素
Html5新增了27个元素废弃了16个元素根据现有的标准规范把HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素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视频元素用于支持和实现视频文件的直接播放支持缓冲预载和多种视频媒体格式。
audio音频元素用于支持和实现音频文件的直接播放支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达会有一定的内容和数据的关联是各种事件的基础。
details用来表示一段具体的内容但是内容默认可能不显示通过某种手段如单击与legend交互才会显示出来。
datagrid用来控制客户端数据与显示可以由动态脚本及时更新。
menu主要用于交互菜单曾被废弃又被重新启用的元素。
command用来处理命令按钮。十二、HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?
参考答案
(1)行内元素
a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体 (不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码 (在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定 (不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线 (不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
(2)块元素 (block element)
* address - 地址
* blockquote - 块引用
* center - 居中对齐块
* dir - 目录列表
* div - 常用块级容易也是 css layout 的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容对于不支持script的浏览器显示此内容
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块 (map)
* object - object对象
* script - 客户端脚本
(3)空元素 (在HTML[1]元素中没有内容的HTML元素被称为空元素)
br/ //换行
hr //分隔线
input //文本框等
img //图片
link meta
