前端 初级篇(HTML&CSS)

Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

有和无的区别

1. BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
2. CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

有，用什么？

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

问题产生：

当Netscape4（译注：网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题（bugs），但是依然延续CSS实现中的其它故障（主要是盒模型（box model）问题）。

为了保证自己的网站在不同的浏览器中都能正确展现，网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。

然而随着标准一致性变得越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现，完整去遵循标准，会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS，陈旧的网站显示必然受到影响。

因此立即遵循标准会产生问题，然而忽略标准则又会维持浏览器大战时（译注：微软和网景之间的一段竞争）所产生的混乱

解决方案：

1. 允许网站开发者能够选择他们所熟知的模式。
2. 依然使用旧式规则显示陈旧的网站。

换句话说，所有的浏览器需要提供两种模式：怪异模式（即兼容模式）服务于旧式规则，严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式，Mozilla， Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。

选择使用哪种模式需要一个触发器，而 “DOCTYP切换” 则用于此目的。依照标准：任何一个(X)HTML文档必须拥有一个DOCTYPE（译注：DTD（文档类型定义）是一组机器可读的规则，它们指示 (X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明）用以告诉其他人 这个文档的类型风格

1. 产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此‘没有DOCTYPE‘意味着触发怪异模式：既依据旧式的CSS规则渲染网页。
2. 相反，如果开发者明确知道包含DOCTYPE，他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式：即依据标准的CSS规则渲染网页。
3. 任何新的或未知的DOCTYPE将触发严格模式。
4. 一些页面依据怪异模式而写，但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式，参照下面的浏览器比较图表

Head Part

1、Meta(metadata information)

 提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

 1、页面编码

<meta charset="UTF-8">  #指定编码类型为UTF-8

2、刷新和跳转

<meta http-equiv="refresh" content="5">  #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒之后跳转页面至另一个网页

3、关键字

关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。

<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区">

4、描述

例如cnblog里的就是一个描述：

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

5、X-UA-Compatible

X-UA-Compatible  这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

2、title

网页头部信息，如下图所示：

3、Link

网页头部的图标

<link rel="shortcut icon" href="favicon.ico">  

效果图如下：

导入CSS类似python中导入模块类似

<link rel="stylesheet" href="css/css_model.css">

4、Style

1、在当前文件中写Css样式

2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用

< style type="text/css" > 
.bb{ 
      background-color: red; 
   } 
< /style> 

5、Script

1、在当前文件中写JS

2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

写js代码
< script type="text/javascript" > ... </script >

Body part

1、body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小如下图：

块级别标签&内联标签：

<!--内联和块级-->
    <div style="background-color: red;">12</div>
    <span style="background-color: green;">12</span>

2、特殊符号特殊处理

举例来说<p>是段落标签，如果我想输出<p>这个字符串，而不是想获取<p>的样式怎么办呢？

<div>
        &lt;p&nbsp;&gt;
</div>

所以特殊符号有自己的定义更多请看连接：更多