前端笔试常考题1

作者: 饥人谷_Jack | 来源:发表于2017-09-08 10:55 被阅读0次

    1.HTML、XML、XHTML 有什么区别?

    HTML,超文本标记语言,是语法较为松散的、不严格的Web语言;
    XML,可扩展标记语言,主要用于存储数据和结构,可扩展,不显示数据;
    XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格。

    2.怎样理解 HTML 语义化

    首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。

    通俗理解:你写的HTML标签要让其他人或者浏览器知道你写的这个标签的意思和表达的用途和作用。

    3.怎样理解内容与样式分离的原则

    在 Web 开发中,所谓内容与样式分离,就是让内容的归 HTML, 样式归 CSS, 不要混着用。不要使用行内样式。尽量使用js控制css的属性,不要直接修改属性内容。

    4.有哪些常见的meta标签

    meta 说明和作用
    <meta name="keywords" content="your tags" /> 页面关键词
    <meta name="description" content="150 words" /> 页面描述
    <meta name="robots" content="index,follow" /> 搜索引擎索引方式
    <meta http-equiv="refresh" content="0;url=" /> 页面重定向和刷新
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> 移动设备
    <meta name="apple-mobile-web-app-capable" content="yes" /> WebApp全屏模式
    <meta charset='utf-8' /> 申明编码
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 优先使用 IE 最新版本和 Chrome
    <meta http-equiv="Pragma" content="no-cache"> 禁止浏览器从本地计算机的缓存中访问页面内容
    <meta name="MobileOptimized" content="240"/> 浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放

    4.文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

    • <!doctype>标签用来声明文档对象模型,用来告诉浏览器应该使用哪种方式来解析渲染页面。
    • 严格模式就是使用<!doctype>标签来显式声明该用哪种方式来渲染页面,混杂模式即不加<!doctype>标签,允许浏览器使用自己的方式来渲染页面。
    • <!doctype html>就是声明使用HTML5来解析渲染页面

    5.浏览器乱码的原因是什么?如何解决?

    浏览器出现乱码一般是由于在制作页面时使用非英文字符时,保存的编码格式与浏览器解析时的解码格式不匹配。为了解决这个问题,就要在页面保存时就在HTML的<head>里添加<meta charset="">来声明编码格式,来告诉浏览器应该用什么解码格式来解码,例如使用UTF-8来编码的页面,添加<meta charset="UTF-8">`来告诉浏览器使用UTF-8格式来解码,就不会出现乱码了。

    6.常见的浏览器有哪些,什么内核?

    • 常见浏览器有IE、Google Chrome、Safari、opera、Firefox等,还有世界之窗、傲游浏览器、360安全浏览器、搜狗告诉浏览器、QQ安全浏览器、猎豹安全浏览器等。
    • 使用Trident内核的浏览器:IE、Maxthon、TT、The World等。
      使用Gecko内核的浏览器:Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey。
      使用Presto内核的浏览器:Opera7及以上版本。
      使用Webkit内核的浏览器:Safari、Chrome。
      使用Chromium内核的浏览器:Chrome、搜狗、360、QQ浏览器。
    • Trident(IE内核):
      这是微软开发的一种排版引擎。该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的 IE7。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等)。此外,为了方便也有很多人直接简称其为IE内核(当然也不排除有部分人是因为不知道内 核名称而只好如此说,至少老N就是如此。。。)。自从发布后,Trident不断地被更新和完善:
      Trident II(IE5)——增进对CSS1.0的支持及对CSS2重大的变更;
      Trident III(IE5.5)——修正部分CSS的排版控制;
      Trident IV(IE6)——修正了一部分box-model的错误以及增加了“兼容模式(Quirks Mode)”切换功能,以增加对文件类型描述(Document Type Definition,DTD)的支持;
      Trident V(IE7)——修正许多CSS排版处理上的错误以及增加对PNG格式alpha通道(半透明)的支持。(这就是IE6经常被诟病的对png图片支持不良的之处!)
    • Gecko:
      Gecko是套开放源代码的、以C++编写的网页排版引擎。这软件原本是由网景通讯公司开发的,Netcape6开始采用该内核。后来的 Mozilla FireFox也采用了该内核,Geckos的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。Geckos 现在由Mozilla基金会维护。
    • Webkit:
      苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软 件,在GPL条约下授权,同时支持BSD系统的开发。所以Webkit也是自由软件,同时开发源代码。在安全方面不受IE、Firefox的制约,所以 Safari浏览器在国内还是很安全的。
    • Chromium/Blink:
      Chromium fork 自开源引擎 WebKit,却把 WebKit 的代码梳理得可读性提高很多,Chrome浏览器就使用Chromium内核,搜狗、360、QQ浏览器等等双核浏览器的一核都是Chromium。2013年谷歌宣布 Chromium 项目中研发 Blink 渲染引擎,内置于 Chrome 浏览器之中。
    • Presto:
      Presto是一个由Opera Software开发的浏览器排版引擎,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核。
    • 目前移动端系统内置浏览器的内核, iOS 平台主要是 WebKit,Android 4.4 之前的系统浏览器内核是 WebKit;Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink;Windows Phone 8 系统浏览器内核则是 Trident。

    7.列出常见的标签,并简单介绍这些标签用在什么场景.

    标签名称 标签常用的使用场景
    <a> 定义锚。
    <abbr> 定义缩写。
    <b> 定义粗体字。
    <body> 定义文档的主体。

    定义简单的折行。
    <button> 定义按钮
    <canvas> 定义图形,动画
    <caption> 定义表格标题。
    <dl> 定义定义列表。
    <dt> 定义定义列表中的项目。
    <dd> 定义定义列表中项目的描述。
    <div> 定义文档中一块区域。
    <em> 定义强调文本。
    <h1> to <h6> 定义 HTML 标题。

    定义水平线。
    <iframe> 定义内联框架。
    <img> 定义图像。
    <input> 定义输入控件。
    <ol> 定义有序列表。
    <ul> 定义无序列表。
    <li> 定义列表的项目。
    <meta> 定义关于 HTML 文档的元信息。
    <p> 定义段落。
    <span> 定义文档中的节。(普通文本)
    <textarea> 定义多行的文本输入控件。
    <table> 定义表格。
    <tbody> 定义表格中的主体内容。
    <caption> 定义表格标题。
    <thead> 定义表格中的表头内容。
    <tfoot> 定义表格中的表注内容(脚注)。
    <tr> 定义表格中的行。
    <td> 定义表格中的单元。
    <th> 定义表格中的表头单元格。

    相关文章

      网友评论

        本文标题:前端笔试常考题1

        本文链接:https://www.haomeiwen.com/subject/ukqgjxtx.html