前端笔试常考题1

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> 定义表格中的表头单元格。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容