Python之路-python(html、css)

概述：

　　HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！

Doctype

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

有和无的区别

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

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

有，用什么？

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

Python之路-python(html、css)

现在我们告诉了浏览器要用什么样的标准去打开html文件了，但是只知道这些还是不行的，网页的具体内容是什么样的呢。

<!DOCTYPE html><!--这里定义标准-->
<html lang="en"><!--网页详细从这里开始-->
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
#大体上除了告诉浏览器用什么样的标准打开，还得head（头）、body（身体）。
#头里面主要存放例如用什么编码，网页的title（title里面例如有图片文字之类的），页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词都是放到head里面的。
body里面是网页上的主要的显示给用户的东西，例如文字，样式、图片都放在这里
注意：
　　书写规范,例如：<head>表示开始</head>表示结束

标签：

什么是标签呢，例如<head> 张三</head>，这种出现在html文件中以<括号开始并以>结束的都叫标签，例如上面写的，head标签，body标签，html标签。

　　分类：

　　　　自闭合标签：

　　　　例如meta和link标签

　　　　主动闭合标签：

　　　　例如a标签：

<a> </a>#有斜杠的这种称作主动闭合标签，换句话说，你写一个标签从左往右依次写，它能主动给你不全并加上/的是主动闭合标签，否则就是自闭合标签。

注释：

python中我们用#注释一行用用三个单引号或者3个双引号表示注释多行，在html文件中这种才是注释方式，多行的也是这种方式。

注意事项：

　　html文件中，只能有一个html标签。

head标签：

head标签中除了title其它的都不在网页上显示（title是打开一个网页表头的文字）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
</body>
</html>

Meta(metadata information)

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

　　1、页面编码（告诉浏览器是什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

　　2、刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

　　3、关键词（例如百度利用关键字搜索相关关键字的网站）

< meta name="keywords" content="html，学习，python" >

　　4、描述

　　　　例如（别人在看你的网页的时候，只要通过网页地址就知道你的网站是做什么用的）：

　　　　<meta name="description" content="这个网站是用用来测试使用的" />

5、X-UA-Compatible

　　　微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。

与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示该网页。如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。更多

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

link标签：

　　如果你想让自己的网页头部除了在title里显示文字，还得显示图片，那么就得在head标签中加上这句，前面都是固定写法，后面href里面是你的图片路径，这里是相对路径。　

<link rel="shortcut icon" href="../image/logo.ico">

body部分：

各种符号（多个符号直接用分号隔开）：

　　空格：&nbsp

　　小于号：&lt

　　大于号：&gt

　　更多：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p标签（段落）：

写法：内容

　　我们知道段落直接跟段落直接是有空行的，但是有人要说了，那你段落跟段落直接是有空行的，那我一个段落里面不能行行都有空行吧，我们往下看。

br标签：

写法：

例如：内 容（段落里面行与行直接的换行）

　　在内容直接加上br标签，行与行之间就没有空行了。

h标签（标题）：

　　h1-h6，没有h7

<h1>A</h1>
<h2>A</h2>
<h3>A</h3>
<h4>A</h4>
<h5>A</h5>
<h6>A</h6>

View Code