从页面仔到前端工程师——这些你都知道吗？-CSDN博客

自从1997年HTML4正式诞生至今，前端工程师经历了从美工到切图仔再到页面仔的转变。不得不说，自从HTML5诞生以来，各种框架如雨后春笋。而早前的网页三剑客（Dreamwear，Flash，Firewoks）则被各中工具所取代，现在的前端则具体到（HTML+CSS+JavaScirpt）三个方面。随着时间的推移，越来越多的前端开发框架也逐渐被前端人所接受。

HTML是什么？与XML，XHTML有什么区别呢？

在维基百科中说：HTML是超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。 XML是相比较与HTML是一种可扩展标记语言，主要用于存储数据和结构参考；在语义上也比HTML所有所严肃规范。

怎么理解HTML的语义化？

其次从继承关系上讲，HTML是一种基于标准通用标记语言（SGML）的应用，是一種非常灵活的置標語言，而XHTML则基于可扩展标记语言（XML）,它的语义也相比较于HTML，XML最为严谨规范。而随着HTML5的诞生以来，语义化的HTML被人们要求越来越熟知。语义化HTML是一种编写HTML的方式，选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器很好地解析，也方便其他开发者共同维护代码的可提升性。从侧面也可以看出语义化的要求也成为企业纳入人才的基本标准。

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

首先我们浅显的把前端工程师所做的工作分为:HTML+CSS+JavaScript。一个网站的形成我们把它比作是一幢大楼,HTML决定了大楼的架构,大楼的高度,占地面积之类等等,而CSS是大楼的外表,是选择是玻璃外墙还是粉色菜式,最后JavaScirpt则是大楼的内部功能,例如,我可以通过我走路参过隔壁的楼层,理论上各司其职,HTML,CSS,JS老死不相往来,但是从一定程度上来说JS也可以决定一部分CSS的功能。而一旦JS过多的插手CSS领域，或者CSS过多的参与JS的相关工作对于代码后期的维护或者修改都有可能造成很大的损失。最后从专业的角度来看，软件的设计包括一个网站，要尽可能的遵循"高内聚低耦合"的设计理念。

高内聚是指模块内部要高度聚合，低耦合是说模块与模块之间的藕合度要尽量低。前者是说模块内部的关系，后者是说模块与模块间的关系。

有哪些常见的meta标签？

meta标签位于网站head首部中，并不会显示在实际的页面当中。主要功能是用于提高搜索引擎的优化，提高网站SEO权重。从SEO的角度来分析标签一般不要超过4个。越是简明扼要的内容越是能提高SEO的权重。常见的meta有以下几种：（排名不分先后）

 <meta name="keywords"  name="关键词">
 <meta name="Description" name="描述网页的主要内容">
 <meta  charset="UTF-8">
 <meta name="viewport" content="width=device-width,intial-scale=1,maxinum=scale=1">
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
复制代码

前2种顾名思义较为理解，第三种则是用于实现网页的字符编码格式，第四种则是实现移动端的正常显示，第五种则多用于网站的兼容。

文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
```
<html ch="en"></html>
<html xml:lang="en-EN" lang="en-EN">
复制代码
```

文档声明必须是HTML文档的第一行、且顶格显示，对大小写不敏感HTML文档通常以类型声明开始，该声明将帮助浏览器确定其尝试解析和显示的HTML文档类型。以早期的HTML头文件说起，分为HTML Strict DTD（请求比较严格的HTML类型）HTML Transitional DTD（相对严格但是不规范）Frameset DTD（框架标准）最后则是我们现在绝大多数使用的(H5的标准)。 ** 越是严格的要求在一定程度上则越是限制了内容的活动性！** 随着HTML5格式化的标准大众的浏览器所接受，而上面所提到的是为了告诉不同的浏览器要以同样的方式渲染HTML5界面。

浏览器乱码的原因是什么？

导致乱码的主要原因是开发者书写的编码格式和浏览器的解码格式不相同所导致。也有可能是没有在meta所做声明。所以我们找到编码和解码的格式是否相同是解决乱码的关键。当然也不排除有下面这种情况的发生：

常见的浏览器有哪些，什么内核?

一、Trident内核代表产品Internet Explorer，又称其为IE内核。

Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

二、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。

Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

三、WebKit内核代表作品Safari、Chromewebkit

是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

四、Presto内核代表作品OperaPresto

是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

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

<img/>图片标签：单标签，主要用于图片引入.有相对路径和绝对路径两者方式。
<hr/>标签：单标签，页面显示一条线。
<br/>换行标签：单标签.主要用于换行，其中“/”可以省略
<a>超链接标签</a>：超链接标签。内容有“href=“引入网页”
<p>段落标签</p>：主要用于段落的开始。
<ul><li>无序列表标签</li></ul>：用户创建无需列表，li可以嵌套ul
<ol><li>有序列表标签</li></ol>:有序列表标签，用于创建有序列表。
<title>头部标签</title>:用于显示网站头部标题
<body>网站主题</body>:用户显示网站主题内容，管理大部分标签
<table>表格标签</table>：用于显示一个表格，在HTML5被抛弃。
<input>表单标签</input>: 用于创建表单元素。
<h1>~<h6>用于显示大小不同标题。
复制代码