什么是HTML?
HTML的全称为 超文本标记语言 ,是一种 标记语言 。 它包括一系列标签 ,通过这些标签可以将网络上的文档格式统一,使分散的 Internet 资源连接为一个逻辑整体。
DOCTYPE 的作用是什么?标准模式与兼容模式(混杂模式)各有什么区别?
DOCTYPE告诉浏览器的解析器 用什么文档标准解析这个文档。
DOCTYPE不存在或格式不正确,会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行
在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作.
html5为什么只需要写<!doctype html>? 你知道多少种Doctype文档类型?
HTML5不基于SGML,所以不需要引用DTD,但是需要DOCTYPE来规范浏览器行为
有3种文档类型定义分别是过渡的(Transitional)、严格的(Strict)和框架的(Frameset)。
编码集的作用是什么?说出几个常见的编码集?为什么常用utf-8?
编码集有数据传输的作用 Unicode 相当于规定了字符对应的码值,这个码值必须编码成字节的形式去传输和存储。
最常见的编码方式是: UTF-8,另外还有 UTF-16,UTF-32 等。
utf-8优点:支持多种语言,不会有乱码,不会有重码和字符冲突,不需要调整页面的语言编码设置即可正常浏览,多种语言字符可以同时共存在页面上。
ASCII编码 GB2312 编码 GBK 编码 ANSI 编码 Unicode编码
meta viewport是什么? 原理是什么?
Viewprot是用户网页的可视区域。
meta 标签的作用是让当前 viewport 的宽度等于设备的宽度,同时不允许用户进行手动缩放
viewport的原理:移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗 口中渲染页面,这个虚拟窗口就是... viewport; 目的是正常展示没有做移动端适配的网页,让他们完整的展示给用户;
行内元素有哪些?块级元素有哪些? 行内块元素有那些?他们有什么区别?
行内元素有: a、 b、span、br、 i、 s。
块级元素有:div、 ul、ol、li、h1...h6、p、td、th、form。
行内块元素有:img、input、textarea。
区别:
行内元素:从左往右排列,不占据一行:对其设置宽高及margin的上下距离无效。
块级元素:单独占据一行。
行内块元素:不会自动换行,相比行内可以设 置宽高,具有和行内块级共同特征
简述a标签target属性的取值和作用?
target可能的值:
_blank:在新窗口/选项卡中打开。
_self:在同一框架中打开。
_parent:在父框架中打开。派润他
_top:在整个窗口中打开。
<img>标签上的 title 属性与 alt 属性的区别是什么?
title; 对链接起注释作用,图片正常显示使鼠标划上去会显示他的值。
alt; 对图片起注释作用,图片无法加载的时候会显示它的值。
对WEB标准以及W3C的理解与认识
web标准,就是将页面的结构、表现和行为这三部分独立分开,使其更具有模块化。
W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范。
前端页面有哪三层构成,分别是什么,作用是什么?
结构层:HTML 搭建文档的结构
样式层:CSS 设置文档的呈现效果
行为层:JS 实现文档的动态行为
什么是iframe?请讲述一下iframe的优缺点?
iframe
是嵌入式框架, 是html标签, 还是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架(即行内框架) . 说白了, iframe用来在页面嵌入其他页面.通常我们使用iframe直接在页面嵌套iframe标签指定src就可以了。
优点:
-
页面和程序分离,几乎不会受到外界任何js或者css的影响, 便于使用
-
可以通过iframe嵌套通用的页面, 提高代码的重用率, 比如页面的头部样式和底部版权信息
-
重新加载页面时, 不需要重载iframe框架页的内容, 增加页面重载速度.
-
iframe可以解决第三方内容加载缓慢的问题.
缺点:
-
会产生很多页面,不容易管理
-
iframe框架的内容无法被搜索引擎捕获, 所以iframe不适用于首页
-
iframe兼容性较差
-
iframe有一定的安全风险
-
iframe会阻塞主页面的Onload事件
input只读,禁用,必填,提示词(占位符)属性分别是什么?
readonly 属性规定输入字段为只读(不能修改)
disabled 属性规定输入字段是禁用的
required 属性规定必需在提交之前填写输入字段。
placeholder 属性规定可描述输入 <input> 字段预期值的简短提示信息 。
div+css 的布局较 table 布局有什么优点?
分离 方便改版 快清晰简洁 seo
-
改版的时候更方便 只要改 css 文件。
-
页面加载速度更快、结构化清晰、页面显示简洁。
-
表现与结构相分离。
-
易于优化(seo)搜索引擎更友好,排名更容易靠前。
SGML 、 HTML 、XML 和 XHTML 的区别?
SGML 是标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言,是所有电子文档标记语言的起源。
HTML 是超文本标记语言,主要是用于规定怎么显示网页。
XML 是可扩展标记语言是未来网页语言的发展方向,XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的,数量无限多,
而 HTML 的标签都是固定的而且数量有限。
XHTML 也是现在基本上所有网页都在用的标记语言,他其实和 HTML 没什么本质的区别,标签都一样,用法也都一样,就是比 HTML
更严格,比如标签必须都用小写,标签都必须有闭合标签等。
如何实现浏览器内多个标签页之间的通信?
(1)使用 WebSocket,通信的标签页连接同一个服务器,发送消息到服务器后,服务器推送消息给所有连接的客户端。
(2)使用 SharedWorker (只在 chrome 浏览器实现了),两个页面共享同一个线程,通过向线程发送数据和接收数据来实现标签页之间的双向通行。
(3)可以调用 localStorage、cookies 等本地存储方式,localStorge 另一个浏览上下文里被添加、修改或删除时,它都会触发一个 storage 事件,我们通过监听 storage 事件,控制它的值来进行页面信息通信;
(4)如果我们能够获得对应标签页的引用,通过 postMessage 方法也是可以实现多个标签页通信的。