1前言1-1W3C标准W3C标准是一系列标准的集合，其本质是一种结构化的标准语言。就像通常的HTML、CSS等都必须遵守这些标准。我们在这里只讨论W3C网络标准。根据网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。相应的标准也分为以下三个方面：结构标准语言：HTML、XML、XHML表现标准语言：CSS行为标准语言：ECMAScript为什么要遵循W3C标准？对于我们开发者来说，我们介于浏览器制造商和浏览器最终用户之间。也相当于一个接口的位置，也就是说我们要同时满足浏览器厂商和浏览器终端用户的需求。在程序的语言中，它是一个“转换器”。这也意味着我们必须尽最大努力使我们的页面和程序支持所有浏览器并满足尽可能多的用户。HTML、XML、XHTML的区别HTML是指超文本标记语言（HyperTextMarkupLanguage）HTML不是一种编程语言，而是一种标记语言（markuplanguage）标记语言是一组标记标签（markuptags）HTML使用标记标签来描述网页XML是指可扩展标记语言（EXtensibleMarkupLanguage）XML是一种标记语言，很像HTMLXML旨在传输数据，而不是显示数据XML标签没有预定义。您需要自己定义标签。XML被设计为自描述的。XML是W3C的推荐标准。XHTML是指可扩展超文本标记语言（EXtensibleHyperTextMarkupLanguage）。XHTML的目标是取代HTML。XHTML几乎与HTML4.01相同。XHTML是HTML的更严格、更简洁的版本。XHTML是将HTML重新定义为XML的应用程序。XHTML是W3C标准。W3C标准规范1.声明（DOCTYPE）DOCTYPE是DocumentType（文档类型）的缩写。在页面中，它用于指定页面使用的XHTML（或HTML）的版本。制作符合标准的页面的基本和关键组成部分是DOCTYPE声明。只有确定了正确的DOCTYPE，XHTML中的标识和CSS才能正常生效。2、需要定义语言代码（忘记定义可能会出现乱码） 必须修改为： 6.更多规范请参考链接W3C代码标准规范W3c代码标准规范！DOCTYPEHTML元素和文档类型（Doctype）1-2浏览器和内核浏览器最重要的部分是内核。浏览器内核是浏览器的核心，也被称为“渲染引擎”，用于解释网页的语法并渲染到网页上。浏览器内核决定了浏览器如何显示网页内容和页面格式信息。不同的浏览器内核对网页语法的解释不同，因此网页开发者需要测试网页在不同内核的浏览器中的渲染效果。五大浏览器都采用单核，随着浏览器的发展，现在出现了双核。360、QQ浏览器等浏览器都是双核的。五款主流浏览器和四款核心IE浏览器是微软的浏览器，也是中国用户数量最多的浏览器。Opera浏览器使用Trident内核（也称为IE内核）。Opera是挪威OperaSoftwareASA拥有的浏览器。它最初是它自己的Presto内核。2016年，奇虎♂和昆仑万维收购了Opera浏览器。此后，强大的Presto内核被抛弃，转而使用谷歌开源的webkit内核。后来Opera浏览器效仿Google，将浏览器内核改为Blink内核。Blink只是Webkit的一个分支。Safari浏览器是苹果公司旗下的一款浏览器，Safari是第一个使用webkit内核的浏览器，现在是苹果公司的默认浏览器。Chrome浏览器Chrome浏览器是谷歌旗下的一款浏览器。以前是Webkit内核，现在是Blink内核。Firefox浏览器Firefox浏览器是Mozilla旗下的一款浏览器，使用Gecko内核，俗称Firefox内核其他常见浏览器及内核360浏览器，Cheetah浏览器内核：IE+Chrome双核；浏览器内核：Trident（兼容模式）+Webkit（高速模式）；百度浏览器，世界之窗内核：IE内核；2345浏览器：以前是IE内核，现在也是IE+Chrome双内核；1-3cssbrowsingVendorprefix——浏览器引擎前缀是放置在CSS属性前面的一个小字符串，保证此类属性只能在特定的浏览器渲染引擎下被识别并生效。GoogleChrome和Safari浏览器使用WebKit渲染引擎，Firefox使用Gecko引擎，InternetExplorer使用Trident引擎，而Opera在改用WebKit引擎之前一直使用Presto引擎。浏览器引擎一般不会实现其他引擎前缀标识的CSS属性，但由于以WebKit为引擎的移动浏览器相当流行，Firefox等浏览器在其移动版本中也实现了一些以WebKit引擎为前缀的CSS属性。什么是浏览器引擎前缀（VendorPrefix）？为什么InternetExplorer需要浏览器引擎前缀（VendorPrefix）这些浏览器引擎前缀（VendorPrefix）主要被各种浏览器用来试验或测试新兴的CSS3属性特性。可以概括为以下三点：尝试一些尚未成为标准的CSS属性——也许它们永远不会成为标准。新出现的标准CSS3属性特性的实验实现。CSS3中一些新属性的等效语义。并非所有这些前缀对于个别实现都是必需的，但通常添加它们不会造成任何伤害-只需记住将未加前缀的版本放在最后一行：#div{-moz-border-radius:10px;-webkit-边框半径：10px；-o-边框半径：10px；border-radius:10px;}一些新的CSS3属性已经试验了很长时间，一些浏览器不再使用这些属性前缀。Border-radius属性就是一个非常典型的例子。最新版本的浏览器支持不带前缀的Border-radius属性。浏览器引擎前缀（vendor-prefix）的使用当需要使用浏览器引擎前缀（vendor-prefix）时，最好把有各种前缀的写法放在前面，然后把没有前缀的标准写法放在最后。例如：.myClass{-webkit-animation-name:fadeIn;-moz-动画名称：淡入；-o-动画名称：淡入；-ms-动画名称：淡入；动画名称：淡入；/*no将带前缀的放在最后*/}/*复杂属性关键帧*/@-webkit-keyframesfadeIn{0%{opacity:0;}100%{不透明度：1;}}@-moz-keyframesfadeIn{0%{不透明度：0；}100%{不透明度：1;}}@-o-keyframesfadeIn{0%{不透明度：0；}100%{不透明度：1;}}@-ms-keyframesfadeIn{0%{不透明度：0；}100%{不透明度：1;}}/*把没有前缀的放在最后*/@keyframesfadeIn{0%{opacity:0;}100%{不透明度：1;}}2基础知识点2-1CSS知识点css知识点2-2html知识点html知识点2-3javascript知识点javascript知识点2-4盒模型盒模型是css中的一个重要概念，只有理解了盒子模型可以排版更好，css盒子模型有两种，分别是IE盒子模型和标准盒子模型（标准W3C盒子模型）。他们对盒子模型有不同的解释。从上图可以看出标准的盒子模型。标准盒模型的范围包括margin、border、padding、content，content部分不包含其他部分，即元素的宽度为content的宽度IE盒模型从上图可以看到IE盒模型的范围还包括margin、border、padding、content，这与标准盒模型不同的是最重要的是：IE盒模型的content部分包含了border和pading。元素的宽度包括content、border、padding3部分。盒子模型的使用我们可以使用box-sizing属性来决定浏览器使用哪种模型来解析html。用法如下：*{-webkit-box-sizing:content-box;-moz-box-sizing：内容框；box-sizing:content-box;}在上图中我们可以看到IE兼容属性box-sizing必须为8以上，其他浏览器可以自动升级，不用担心兼容性问题。如果我们不使用这个属性，浏览器应该选择哪种盒模型呢？其实浏览器选择哪种盒模型主要取决于浏览器是StandardsMode还是QuirksMode。我们都记得语句，它告诉浏览器选择哪个版本的HTML。后通常有一个DTD语句。如果有DTD语句，则浏览器处于标准模式；如果没有DTD语句或者HTML4以下的DTD语句，浏览器会按照自己的方式解析代码，处于怪异模式。标准模式下的浏览器（IE浏览器版本必须为6以上）会选择标准盒模型解析代码；怪异模式的浏览器会按照自己的方式解析代码，IE6及以下会选择IE盒模型，其他现代浏览器使用标准盒模型。因为IE6以下版本的浏览器不遵循Web标准，无论页面开头是否有DTD语句，都是按照IE框模型解析代码。2-5内联元素和块级元素内联元素和块级元素说明根据CSS规范，每个网页元素都有一个display属性，用于判断元素的类型，每个元素都有一个默认显示属性值，比如一个div元素，它的默认显示属性值为“block”，即成为“块级”元素（block-level）；span元素默认的display属性值为“inline”，称为“内联”元素。内联元素和块级元素的区别块级元素：块级元素占据单行，其宽度自动填充其父元素的宽度。您可以通过设置高度、宽度以及内外边距等属性来调整该元素的大小。内联元素：内联元素也称为行内元素。内联元素不会占一行，相邻的内联元素会排在同一行，直到不超过一行才换行，其宽度随着元素内容的变化而变化。内联元素设置宽高是无效的，它是附加在其他块级元素上存在的。内联元素一般只容纳文本或其他内联元素。3网页布局3-1静态布局（staticlayout）是指传统的网页设计，网页上所有元素的大小都以px为单位。布局特点无论浏览器大小如何，网页的布局总是按照最初编写代码时的布局显示。常规PC网站都是静态（定宽）布局，即设置了min-width，这样小于这个宽度就会出现滚动条，大于这个宽度就会居中显示内容并且将添加背景。这种设计在PC端很常见。设计方式PC：居中布局，所有样式都使用绝对宽/高（px），设计一个Layout，调整屏幕宽高时，使用水平和垂直滚动条查看被覆盖的部分；移动设备：创建一个移动网站，单独设计布局，使用不同的域名，如wap。orm..优点：这种布局方式对于设计师和CSS编写者来说是最简单的，不存在兼容性问题。缺点：很明显，就是不能根据用户的屏幕尺寸进行不同的表现。目前，大多数门户网站和企业PC宣传站点都采用这种布局方式。固定像素大小的网页是匹配固定像素大小显示器的最简单方法。但是这种方式并不是一种完全兼容未来网页的制作方式，我们需要一些方法来适配未知的设备。3-2LiquidLayoutLiquid（也称“Fluid”）的特点是页面元素的宽度会根据屏幕分辨率适配和调整，但整体布局保持不变。代表作品栅栏系统（gridsystem）。网页中主要划分区域的大小使用百分比（与min-和max-属性一起使用），例如设置网页主体的宽度为80%，min-width为960px。图片也做类似的处理（width：100%，max-width一般设置为图片本身的大小，防止被拉伸扭曲）。布局特性当屏幕分辨率发生变化时，页面中元素的大小会发生变化，但布局不会发生变化。【这会导致屏幕过大或过小，元素无法正常显示】设计方式采用%百分比定义宽度，高度多为px固定，可自行确定根据可见区域（视口）和父元素的实时大小进行调整，尽可能适应各种分辨率。常结合max-width/min-width等属性来控制尺寸流量范围，以免过大或过小影响阅读。这种布局方式在Web前端发展的早期用于处理不同尺寸的PC屏幕（当时屏幕尺寸的差异不会太大），也是当今移动端常见的布局方式开发，但缺点也很明显：主要问题是如果屏幕比例跨度过大，在与原设计相比过小或过大的屏幕上都无法正常显示。因为宽度是用%百分比来定义的，而高度和文字大小大多是由px固定的，所以在大屏手机上的显示效果会变成有些页面元素的宽度被拉得很长，但是高度和文字大小还是和以前一样（就是这些东西不能变成“流动的”），显示很不协调布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态部分（页面元素的位置发生变化），但是在每个静态布局中，页面元素不会随着窗口大小的调整而改变。将自适应布局视为一系列静态布局。布局特性当屏幕分辨率发生变化时，元素在页面中的位置会发生变化，但大小不会发生变化。该设计方法使用@media媒体查询为不同尺寸和媒体的设备切换不同的样式。在优秀的响应范围设计下，可以给适配范围内的设备最好的体验，实际布局依然固定在同一设备下。3-4响应式布局（ResponsiveLayout）随着CSS3媒体查询技术的出现，响应式设计的概念应运而生。响应式设计的目标是保证一个页面在所有终端（各种尺寸的PC、手机、手表、冰箱网络浏览器等）上都能显示出令人满意的效果。实现上不局限于具体的方法，通常是流体布局+灵活布局的组合，再配合媒体查询技术。——定义不同屏幕分辨率的布局。同时，在每个布局中，应用了流体布局的概念，即页面元素的宽度随着窗口的调整而自动适应。即：创建多个流体布局，每个布局对应一个屏幕分辨率范围。将响应式布局视为流体布局和自适应布局设计概念的融合。响应能力几乎已经成为良好页面布局的标准。布局特点每个屏幕分辨率下都会有一种布局风格，即元素的位置和大小会发生变化。设计方法媒体查询+流体布局。通常使用@media媒体查询和网格系统（GridSystem）配合相对布局单元进行布局。实际上，它是通过CSS在单个网页上将不同样式返回给不同设备的技术的总称，例如综合响应和流量。优点：适配PC端和移动端，如果你足够耐心，效果会很完美。缺点：（1）媒体查询有局限性，即可以枚举，只能适应主流的宽高。(2)匹配足够多的屏幕尺寸，工作量不小，设计也需要多个版本。响应式页面会在头部添加这段代码：
