前端基础知识

什么是html？

html是一种网页标记语言，叫超文本标记语言，我们平时上网所看到的所有网页均来自于html，英文全称Hyper Text（超文本） Markup（标记） Language（语言）。
图片、链接、音乐、视频、程序等等现在都是通过html实现。但严格讲，它并不算编程语言而是属于标记语言（标记标签 markup tag）。所以，不论你是否是程序员，这个语言最好掌握。期初学习时可能觉得html很简单，一度以为当个程序员太简单，后面会接触到html5、css3，兼容性，可能这还不是最难得，直到......javascript，WTF！！！没点基础还真会怀疑人生！总之，对于html而言，
并没有想象中的那么难，也没有想象中那么简单。

了解html的历史

• html1.0 - 2.0（1991-1995）：到底有没有1.0我也没搞清楚，网上找的资料也都存在争议，因为当时版本很多，无法确定谁的是初版。《Head First HTM》这本书里也是1.0-2.0的说法，但至少可以肯定的是虽然简陋，但确实已经支持超文本了。
• html3.2（1997.1）：那时候W3C的标准组织还未正式成立，很多标准制定都是在浏览器开发者相互讨论的环境下产生的，直到应用广泛的4.01也是没改善。3.0期初设计主要用来兼容2.0的，且过于复杂如表格，文字绕排和复杂数学元素的显示，浏览器厂商也根本不鸟，最后挂了！3.1也根本没有人提起，后来3.2去掉了很多3.0的特性才被认同。但那时大都是先有实现后才有标准。所以，html的标准就很不规范，加之浏览器之间的竞争，会产生只有自家浏览器支持的特性，也正因如此，那时候的浏览器对html页面中的错误都很宽容，这反而加重了页面的不标准性，很多web从业者写了更多的不标准页面。传说，时至今日互联网上仍有90%多的页面不符合标准。而在那个年代这种事很普遍就像今天h5页面普及一样，大家都这么干，当时，最大的两家浏览器厂家是Netpcape和Microsoft，那时候不像现在上网入口这么多，谁能统治浏览器，谁就能统治宇宙！浏览器为了保持领先，不停地增加自己的专用扩展包。战争的受害者永远都是百姓，这害得很多web开发者甚至要写两个单独的页面来做兼容，有的兼容差的，搞得浏览器还得想想怎么去显示。开发人员会经常会对着浏览器大骂：“他妈的支持个标准真有这么难吗?!”
• html4.0（1997.12）：战争总有结束的时候，这个救世主就是W3C万维网协会（world Wide Web Consortium）！他们看不下去了，认为这是互联网最基础的问题，应该得以解决，若这样战下去，是没有希望的，没有标准何来统一？于是，他们想制定出一个“标准”，将html分割成两种语言，一个负责表现，一个负责结构，这样岂不是更好？于是最初的html+css分离的html4.0标准诞生了，要求浏览器厂商也遵从这些标准，这确实解决了很多问题，但仍然有不完美，这就是后话了，起码世界安静了，能让开发人员睡个好觉了。
• html4.01（1999.12）：4.01闪亮登场，这个版本成了未来10年的经典款。相对于4.0只是做了稍许改变，做了些修补。正当大家各自安好便是晴天的时候，xhtml1.0来了。
• xhtml1.0（2001）：这个期间诞生了一个新事物，xml，可扩展标记语言，它被设计用来传输和存储数据。语法严谨，对比html简直就是别人家的孩子，于是他们在了解接触中杂交出了xhtml1.0。xhtml承诺，因为它严格，又是90后，新方法多。只要遵从它的标准，天下即可统一。可问题是，80后和70后们，根本看不惯90后的做法，因为他们对4.01已经非常钟情，只需要完善4.01即可，根本不想要也不想懂xhtml的新方法。因为4.01比较灵活，而xhtml语法确实太过严谨。
  比如：

• 标签必须都小写
• 非空标签必须成对出现
• 标签顺序必须正确
• 所有属性必须使用双引号
• 不允许属性最简化或省略

等等，这是违反鲁棒性原则（对自己输出要严格， 对他人的输入要灵活）的，因为xhtml并没有增加新的tag，它只是要求按照XML的规范来要求HTML，并定义了一个新的MIME type，application/xhtml+xml。W3C的初衷是想让浏览器强行检查错误，如果页面有HTML错误，浏览器就要显示错误信息。而实际情况是大家已经用4.01的标准做了大量不符合要求的网页了，你这么一搞，那就是啪啪打脸啊，自然不被大家认可，这也不符合浏览器向后兼容的原则。后来，W3C不得已，就在xhtml 1.0的标准之后加了一个附录C，允许开发者自己选择是使用XHTML语法或是旧的MIME type，来分发页面。因为旧的MIME type不会触发浏览器的强错误检查。也就是说，很多网站虽然宣称自己符合xhtml1.0标准，但并不能保证完全无错。主要要看web服务器使用的是那种mime type来分发的。但是，W3C仍不死心啊！又在XHTML 1.1中取消了附录C，还是让大家全部使用新的MIME type来分发，并要求大家把文档标记成xml。结果很显然，然并卵！W3C锲而不舍啊，在后来流产的XHTML 2.0身上，还是非要强行错误检查，强行检查错误就是如果你页面有错误，网页显示就是黄屏，哪怕只有一个小错误，你丫别想看这个网页了！这要是不失败难道还等着程序员给它送上神坛么？而且这个情况正好解释了乱战期间的先实现后标准的现象存在的合理性。因为，先有标准再来实现是行不通的。

• html5（2014.10）：上面的教训也为后来制定下一代标准，即html5的时候交了学费。所以，在html5诞生初期，带着鲁棒性原则的思想主线，向后兼容就成了h5最重要的原则。h5不但兼容4.01的大部分特性，还引入了许多新特性，甚至可以直接将旧网页的第一行改成，让它变成一个HTML5页面，照样都会生成相同的DOM树，在浏览器里也会正常解析。老的已经运行了十几年，开发者确实已经需要更多特性来满足日益发展的需求了。h5正好满足了这个需求，不但支持博客、视频、图形功能，还有一大堆用来构建web应用的功能，所以，h5的成功就不难理解了。现在h5已经不单只一个技术或标准了，它已成为了一个技术合集的简称，在移动端的表现更像是一批黑马。但是，要注意的是，HTML5并不是直接由W3C制定的，w3c好像经历太多后累觉不爱了，觉得4.01可以作为最后一个版本了，html就这样吧。但总有一些另外的声音，Opera的伊恩-克森这时就提出来再改进下html的建议，但W3C的投票结果是NO，他们认为HTML已死，xHTML2才是未来，真是打不死的小强，死心不改啊！于是，Opera，Apple等浏览器厂商脱离W3C成立了WHATWG。接下来WHATWG的工作效率非常高，因为他们的工作组成员就是浏览器厂商，他们不仅可以说加就加，还可以实现，大家不断地提出一些好点子并且逐一做到了浏览器中，并且在短时间得出了一些成果。反观W3C的xHTML2没有什么实质性的进展，特别是从实现的角度来看，用原地踏步形容都不足为过。2006年蒂姆-伯纳斯-李（这个人也是牛的一逼，最好google下）写博文承认因为想法太不切实际了，导致失败，并建议重建HTML工作组。于是，2007年W3C组建了HTML5工作组并投票通过在WHATWG工作组的既有成果上开始工作而非从头开始。于是有了两个工作组并行的现象：一个专治，一个民主。但这都不重要了，重要的是只要他们的设计原则是统一的，对吗！

html结构

html的结构包括头部head，内容body，头部中可包含页面的标题title、关键词keywords、描述说明description等，它本身不会显示，主要是给浏览器看的，但非常之重要，可以影响网页显示的效果。里面就是网页要显示的主要内容了，里面有很多闭合标签构成。

html结构速记

html、css、js的作用？

一个网站由N多个网页组成，一个网页则有html、css和js构成。

• html是主体，装载显示各种dom元素，属于结构框架层。
  • html可以比做一个骨骼架构的人体。
• css用来装饰dom元素，属于显示表现层。
  • css可以比做人体穿的衣服和妆容。
• javascript用来控制dom元素，属于动作交互层。
  • javascript可以比做人体的可以控制动作的思想。

三剑客

网站裸奔：如果没有衣服（css）的装饰，人只有躯干身体（html），那就是人（网站）在裸奔，之前我记得美帝好像还搞过一个网站裸奔活动，很多网站哪天全都下架了css，全都裸奔，想想也很壮观。

如果人（网站）没有可以控制其动作（抬胳膊，转向，走路，吃饭，说话）的思想（js），这人（网站）也可以称之为人，但更像一个植物人。当然，借助css3的新技术，可以把植物人打扮的更漂亮，甚至可以协助他做一些简单的动作，但没有js，他依然是无交互反馈的。

有了html5后，增加了更多新的骨头，去掉了以前老化无用的骨头，但作为人更重要的依然是思想，没有思想和闲鱼有何区别？而jQuery等框架的作用则更像是把控制人体的动作编排成一套招式，比如吃饭这个动作编排进了：拿起勺子→挖食物→把勺子送嘴边→张嘴→送食物进嘴→咀嚼。

html和html5区别

html

html5

没有JavaScript的网页会由图2变为图1，只是好看了，但还是黑板，交互性依然不行。

HTML、XML、XHTML区别

• HTML：超文本标记语言。语法松散，不严格。可以理解为通过一系列标签集合组合成一个文本文件，用于网页浏览。
• XML：可扩展标记语言。用于存储数据和结构。XML来源于SGML，最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。注意，XML是用于传输数据，而非显示数据。其标签没有被预定义，需要根据自己需求自行定义标签。
• XHTML：可扩展超文本标记语言。基于XML，作用与HTML类似，但语法更严格。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，在HTML4.01的基础上，用XML的规则对其进行扩展，得到了XHTML。其目的就是实现HTML向XML的过渡。

什么是html语义化？

所谓html语义化实际上是除了让人容易通过标签的意思理解外，也要易于搜索引擎和浏览器爬虫理解。简单讲就是在合适的时间合适的地方使用合适的有语义信息的标签，例header,nav,aside,footer,section,ul,ol,em,strong等代替那些没有语义div,span信息的标签和big,center,strike,font,b,u等完全可以用css来取代的标签。同时，语义化也有助于seo和团队的开发维护，它的目的是让机器更接近人的思想，都能看懂，提高处理效率。比如我们经常犯的错误就是在一个div里面对某一个词要加重强调的时候，会使用span包起来，然后控制span的css为font-weight为bold。这种显然不是语义化，因为有加重强调的标签strong。

结构表现行为分离原则

html（内容结构层）、css（样式表现层）、js（行为控制层）。html结构层作为网页的重要基础，其标签赋予内容的含义，主要包含内容（注意：这里的内容是指纯粹的数据信息本身，并不包含辅助信息，如装饰性的图片图标等）。css表现层则是定义您的html该如何显示。js行为层则是为页面增加一些交互动作。实际上，html4.0诞生的时候就是希望将css和html的分离开，css负责表现，而不是通过一些html的样式标签来实现，这样做好处在于一方面有利于搜索优化，另一方面方便修改维护和改版重构。在实现分离时候保持两个原则即可：

• html只管结构，不要太复杂，写html时不要管css和js的事儿，只管语义化，简洁化，不要涉及表现的标签、不要把样式写在行内。
• css表现层和js行为层分别用独自的.css和.js文件来写。写js行为控制样式的时候尽量不要去直接控制css样式，而是通过在结构层html上添加class和id，在css中定义class来是实现。

编码规范的黄金定律：

永远遵循同一套编码规范 -不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

HTML规范：

• 申明可写可不写；
• 必须是root根元素；
• 和是中一定有且只有的元素；
• 必须有