Python 第十二篇：HTML基础
一：基础知识：
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！
#超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
网页的组成：
一个网页一般由两部分组成即：
- HTML（Hypertext Markup Language）
- 和CSS（Cascade Style Sheets）。
HTML负责描述网页的结构和内容（如标题，导航栏等） CSS则负责网页的表现（外观）（如背景颜色，字体样式等）。
HTML文档：
<head>和</head>之间的内容，是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息
<body>和</body>之间的内容，是浏览器呈现出来的，用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意
<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body>
二：html的head部分：
<!DOCTYPE html> #表示是一种规则，支持的浏览器，这是html5的写法 <html lang="en"> #可以删除，如果不删除的，用谷歌之类打开，它会认为是英文的，会自动给翻译（如果设置了自动翻译的话） <head> #head 是大脑,很多东西都是隐藏的，这是head的开头 <meta http-equiv="content-type" content="text/html;charset=utf-8"> #定义文档语言编码格式 <meta http-equiv="Refresh" Content=“2″> #自定义页面的刷新时间，即多少秒以后自动刷新 <meta http-equiv="Refresh" Content="5; Url=http://www.baidu.com" /> #定义一定时间之后自动访问别的网站 <title>第一个</title> #标题，用浏览器打开后在浏览器上方显示的 <link rel="icon" href="1.png"> #引用一个图标，在打开后浏览器会显示 <meta name="keywords" content="技术,宅男,美女,帅哥" > #关键字，用于爬虫搜索关键字 <meta name="description" content="这是一个自定义的网站"> #网站描述，包含在网站头部内容里面 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> #兼容IE浏览器，这是兼容IE7 <style> .cc { color: #3c763d; background-color: red; } #在页面中写样式，然后在body中可以调用样式 </style> #Script #引进文件 <script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script > #写js代码 <script type="text/javascript" > ... </script > </head> #这是head部分的结束
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 HTML语言需要一个标准，当我们在第一行指定了<!DOCTYPE html>的时候，当浏览器去访问我们的代码的时候就就按照HTML代码里指定的标准去读取和渲染给我们展现的页面。
为什么要使用<!DOCTYPE html>这个去告诉浏览器呢？？？？？？？？： DOCTYPE模式： 我们先了解一下DOCTYPE的模式 BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式） CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]） 问题产生： 当Netscape4（译注：网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题（bugs），但是依然延续CSS实现中的其它故障（主要是盒模型（box model）问题）。 为了保证自己的网站在不同的浏览器中都能正确展现，网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。 然而随着标准一致性变得越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现，完整去遵循标准，会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS，陈旧的网站显示必然受到影响。 因此立即遵循标准会产生问题，然而忽略标准则又会维持浏览器大战时（译注：微软和网景之间的一段竞争）所产生的混乱。 解决方案： 允许网站开发者能够选择他们所熟知的模式。 依然使用旧式规则显示陈旧的网站。 换句话说，所有的浏览器需要提供两种模式：怪异模式（即兼容模式）服务于旧式规则，严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式，Mozilla， Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。 选择使用哪种模式需要一个触发器，而 “DOCTYP切换” 则用于此目的。依照标准：任何一个(X)HTML文档必须拥有一个DOCTYPE（译注：DTD（文档类型定义）是一组机器可读的规则，它们指示 (X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明）用以告诉其他人 这个文档的类型风格 产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式：既依据旧式的CSS规则渲染网页。 相反，如果开发者明确知道包含DOCTYPE，他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式：即依据标准的CSS规则渲染网页。 任何新的或未知的DOCTYPE将触发严格模式。 一些页面依据怪异模式而写，但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式，参照下面的浏览器比较图表 。
head部分内容详细：
1、Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
2、页面编码
<meta charset="UTF-8"> #指定编码类型为UTF-8
3、刷新和跳转
<meta http-equiv="refresh" content="5"> #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/zhang-shijie/" /> #指定1秒之后跳转页面至另一个网页
4、关键字
关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。
<meta name="keywords" content="博客，技术，linux，python">
5、描述
例如cnblog里的就是一个描述：
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
6、X-UA-Compatible
X-UA-Compatible 这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
7、title：
网页头部信息，如下图所示：
8、link:
网页头部的图标
<link rel="shortcut icon" href="favicon.ico">
效果图如下：
9、Style：
1、在当前文件中写Css样式
2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用
10、Script：
1、在当前文件中写JS
2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用
2、内联标签和块级标签：
三:html的body部分
基础知识
1、body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小如下图：
内联标签：a、span、select 等
块级标签：div、h1、p 、h1-->h6等
<h1 style="background-color: #0d3349">xxx</h1> #块级标签，占用了一整行 <a style="background-color: red"> xxx</a> #内联标签，有多少内容占用多少位置
如下: 
注：块级标签可以通过 style="display: inline" 设置为内联标签，而内联标签则可以通过style="display: block"变为块级标签
如：
<body> <h2 style="display: inline">块级标签</h2> #h2从块级标签变为内联标签 <a style="display: block">sssss</a> #a从内联标签变为块级标签 </body>
2、各种特殊符号:
例如注册符号：
®
3、 <p></p>标签：
p表示段落，默认段落之间是有间隔的！
<body> <p>4月4日，广州再次遭遇强雷雨袭击，当日下午15时，广州白云机场启动了今年以来第三次航班大面积延误橙色预警，延误1小时以上出港航班最多达106班。截至18：00，天气有所好转，白云机场全力放行航班，总体保障正常有序。</p> <p>受强雷雨天气影响，4日13时30分白云机场启动了航班大面积延误蓝色预警，15时升级为橙色。截至18:00，延误一小时以上出港航班74班，取消出港航班41班、取消进港航班32班，备降桂林、厦门等地14班。</p> </body>
4、br：表示要换行了
<body> <p>4月4日，广州再次遭遇强雷雨袭击，当日下午15时，广州白云机场启动了今年以来第三次航班大面积延误橙色预警，<br>延误1小时以上出港航班最多达106班。截至18：00，天气有所好转，白云机场全力放行航班，总体保障正常有序。</p> </body>
5、a标签：
< a href="http://www.autohome.com.cn"> </a>
1、target属性，_black表示在新的页面打开
2、锚：锚的作用是类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置
<a href="http://www.baidu.com">百度</a> <a href="#1">看第一章</a> #锚 <a href="#2">看第二章</a> #锚 <div id="1" style="height: 2000px;background-color: rebeccapurple"> #id的值对应<a href="#2">看第二章</a>，#是保留的值，#后面是id的值 <p> 5英寸夏普/JDI 高色彩饱和度显示屏,1920 x 1080 像素分辨率，441 PPI,高灵敏触摸屏,升级至95% NTSC色域,2015年前销售版本为84% NTSC色域 </p> </div> <div id="2" style="height: 2000px;background-color: green">第二章</div> #id的值对应<a href="#2">看第二章</a>，#是保留的值，#后面是id的值 <h1>hello!</h1> <a href="input.html" target="_blank">文件链接</a> #链接到一个内部文件input.html <img src="2.png"> <br> #显示一个图片
3、H标签：标题字体的大小，h1最大，h6最小
<h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
显示效果如下：
H1
H2
H3
H4
H5
H6
4、select 标签：选择的标签，有多选、单选等几种格式，如下:
单选格式的select标签，并设置默认选择的深圳：
<select> <option>北京</option> <option>上海</option> <option>广州</option> <option selected="selected">深圳</option> <!--设置默认选的 --> </select>
如下：
多显示单选择按钮select标签：
<select size="2"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select>
结果如下：
多显示多选择按钮select标签:
<select size="2" multiple="multiple"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select>
可以按住ctrl键多选：
可分组select标签：
<select > <optgroup label="China"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </optgroup> <optgroup label="Asia"> <option>泰国</option> <option>新加坡</option> <option>马来西亚 </option> </optgroup> </select>
结果如下：
四：input系列标签
1、input:checkbox标签-复选框
<body> <input type="checkbox"> <input type="checkbox"> <input type="checkbox" checked="checked"> #设置默认就选择了 </body>
结果如下：
2、input:radio标签-单选框，即只能单选，常用语性别选择等场景：
<body> 男:<input name="xx" type="radio" checked="checked"/> <!--只能单选,所有的标签都可以有name,在radio里面name是有特殊含义,起到同名互斥--> 女:<input name="xx" type="radio" /> <!--只能单选--> </body>
结果如下：
3、input:text & password 输入框：
<body> <input type="text" /> <!-- 明文的文本输入框--> <input type="password"> <!-- 专用的密码输入框,输入的秘密是隐藏的 --> </body>
结果如下：
4、input:button & submit 提交按钮：
<body> <input type="button" value="btu"> #不能在form里将表单提交 <input type="submit" value="sub"> #和form结合，提交当前的form数据表单到后台 </body>
结果如下：
5、file标签-用来提交文件时使用：
<body> <input type="file"> </body>
6、多行文本框：
<body> <textarea style="height: 100px;width: 100px;"></textarea> </body>
结果如下：
7、form表单：
<body> <form action="http://10.0.4.42:8000/django_form/" method="get"> #将form表单以什么方法提交到什么地址，需要使用action指定地址，对象接收到的将是下面的name为区分的列表 <div> 主机: <input name="host" type="text"> </div> <div> 端口: <input name="port" type="text"> </div> <div> 类型: <input name="type" type="text"> </div> <div> 用户: <input name="user" type="text"> </div> <input type="button" value="button"> <input type="submit" value="submit提交"> </form> </body>
8、label标签：
较好的体验，在点击lable的字体的时候，即可选中与其对应的输入框或选择框：
<body> <div> <label for="name"> 姓名: <input id="name" type="text"> </label> <label for="name1"> 婚否:<input id="name1" type="checkbox"> </label> </div> </body>
结果如下：
9、列表 ul/ol/dl
ul列表在前面自动加“点”，代码如下：
<body> <div> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> </body>
结果如下：
10、ol列表在前面自动加“数字”，代码如下：
<body> <div> <ol> <li>111</li> <li>222</li> <li>333</li> </ol> </div> </body>
结果如下：
11、dl列表自动分组，代码如下：
<body> <div> <dl> <dt>标题</dt> <dd>内容1</dd> <dd>内容1</dd> </dl> <dl> <dt>标题2</dt> <dd>内容2</dd> <dd>内容2</dd> </dl> </div> </body>
结果如下：
12、表格：
<body> <div> <table border="1"> <!--border这里是加上内外边框--> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <!--一个tr是1行，一个td是一列，一行里可能有很多列。--> <!--如果想加多个行就加多个tr即可--> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </div> </body>
结果如下：
13、合并单元格：
<body> <div> <table border="1"> <thead> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <td colspan="2">h1,h2</td> <!-- 合并行 --> <!--<td>h2</td> --> <td>h3</td> </tr> <tr> <td rowspan="2">a1,b1</td> <td>a2</td> <td>a3</td> </tr> <tr> <!-- <td>b1</td> --> <td>b2</td> <td>b3</td> </tr> </tbody> </table> </div> </body>
结果如下：
14、fieldset标签：
<body> <fieldset> <legend>协议</legend> 请仔细阅读协议内容：签字即认为已经完全阅读本协议 </fieldset> </body>
结果如下：
五：CSS基本使用
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <!-- 导入css样式文件common.css，是在同级目录 --> <style> .cc { #自定义的css样式，调用的时候直接写名字cc即可，可定义背景色、字体大小、字体颜色等 color: #3c763d; background-color: red; } #idselect {background-color: olivedrab;color: #3a87ad} #所有id是idselect的将会应用此效果 div{background-color: tan} #所有div都会应用此效果 </style> </head> <body> <div class="bb">导入的css样式</div> <br> <div class="cc">自带的css样式</div> <br> <div class="bb cc">导入加混合的样式</div> <div id="idselect">id选择器</div> <div>标签选择器</div> </body>
执行结果：
五：background及边框系列：
1、background-color： #背景色
<body>
<h1 style="background-color: aqua">H1</h1>
</body>
结果如下：
2、style="background-image #背景图片
<head> <meta charset="UTF-8"> <title>我的标题</title> <style> .b1{ background-image: url("image/bg.jpeg"); height: 800px; width: 1200px; } </style> </head> <body> <div class="b1">自定义的背景图片</div> </body>
结果如下：
3、background-repeat: repeat ： 重复背景图片 x方向 和 y 方向 同时重复的
<head> <meta charset="UTF-8"> <title>我的标题</title> <style> .b1{ height: 800px; background-image: url("image/chrome.jpg"); background-repeat: repeat; } </style> </head> <body> <div class="b1">自定义的背景图片</div> </body>
结果如下：
4、background-repeat: repeat-x ： x方向即水平方向重复
<head> <meta charset="UTF-8"> <title>我的标题</title> <style> .b1{ height: 800px; background-image: url("image/chrome.jpg"); background-repeat: repeat-x; } </style> </head> <body> <div class="b1">自定义的背景图片</div> </body>
结果如下：
5、background-repeat: repeat-y ： y方向即竖直方向重复
<head> <meta charset="UTF-8"> <title>我的标题</title> <style> .b1{ height: 800px; background-image: url("image/chrome.jpg"); background-repeat: repeat-y; } </style> </head> <body> <div class="b1">自定义的背景图片</div> </body>
结果如下：
6、定义图片的位置：background-position，是用来定位图片的位置的，最主要使用在 一张png 上有多个logo 或者 ico 这个时候就用到background-position了，background-position：x y x等于平行轴 y等于竖行轴，x y的取值可以为正数，也可以是负数：
<head> <meta charset="UTF-8"> <title>我的标题</title> <style> .b1{ height: 800px; background-image: url("image/chrome.jpg"); background-repeat: no-repeat; background-position: 40px -50px; #x（40px）是平行，y（-50px）是上下浮动，负数表示是图片消失了多少px } </style> </head> <body> <div class="b1">自定义的背景图片</div> </body>
结果如下：由于y是-50，所以图标上下部分消失了50像素的位置
六：border，边框系列
<body> <div style="border: 2px double red">border</div> #border的值依次为边框线条的宽度，线条的样式（实心还是空心），以及线条的颜色 </body>
结果如下：
另外还可以按照上下左右的顺序依次设置单个边框的效果，也可以设置border-top单独设置上边或某一个边的样式
七：display属性：
style="display: block" #可以将内联标签转换为块级标签
style="display: inline"> #将块级标签转换为内联标签
style="display: none" #隐藏此标签，不在浏览器显示
八：cursor系列：
1、定义鼠标的各种效果：
<body> <p> <span style="cursor: pointer">pointer</span> <span style="cursor: help">help</span> <span style="cursor: wait">wait</span> <span style="cursor: move">move</span> <span style="cursor: crosshair">crosshair</span> </p> </body>
结果如下：
鼠标点击不同的选项会出现不同的效果：
2、自定义显示图片：
<body> <p> <span style="cursor:url(image/chrome.jpg),auto">mine</span> </p> </body>
九：flost属性，在页面布局的时候使用，此功能非常重要
1、flot可以将标签上下左右浮动，可以布局在整个页面使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的框架</title> <style type="text/css"> html,body { height: 100%; margin: 0; } .container{ height: 100%; } .header{ height: 30px; background: oldlace; } .content{ border: 1px dotted; height: 100%; } .left_content{ background: #265a88; width: 15%; height: 100%; float: left; } .right_content { width: 85%; height: 100%; background: #adadad; float: left; } .end{ background: red; height: 10px dotted; } </style> </head> <body> <div class="container"> <div class="header"> <h3>头部</h3> </div> <div class="content"> <div class="left_content"> <h3>左侧</h3> </div> <div class="right_content"> <h3>右侧</h3> </div> </div> <div class="end"> <h3>底部</h3> </div> </div> </body> </html>
注：这里需要注意，有一种情况，如果不给父div设置高度，并且设置了float之后，子的float可能会覆盖父div的颜色怎么办？
可以加一条来阻止子div的效果，从而继承父div的效果：
<div style="clear:both;"></div>
十：position属性
position一共有三个值：
1、fixed：固定，可以用在返回顶部及对话框等场景，针对整个窗口：
<body> <div style="position: fixed;bottom: 10%;right: 10px;">返回顶部</div> <div style="height: 5000px;background-color: red"></div> </body>
结果如下：
2、absolute：绝对，一般和relative一起出现，如果不配个relative，则只出现一在一个位置，页面上下浮动其也上下浮动
<body> <div style="position: absolute;bottom: 10%;right: 10px;">返回顶部</div> <div style="height: 5000px;background-color: red"></div> </body>
3、relative：相对，本身不产生任何效果，和absolute搭配产生效果，会在指定的div内部的指定位置，即取决于relative所在的div决定absolute的位置：
<body> <div style="position:relative;background-color: green;height: 400px;width: 400px"> <div style="position: absolute;bottom: 10%;right: 10px;">返回顶部</div> </div> <div style="height: 5000px;background-color: red"></div> </body>
结果如下：
十一：透明度和层级：
层级：使用z-index指定，数值越大，越在前端显示
透明度：使用opacity指定，值在0-1之间，数值越大，越不透明，值越小，越透明
<body> <div style="z-index:5;position:fixed;background-color: black;top: 0;right: 0;left: 0;bottom: 0;color: white">我是黑色</div> <div style="opacity: 0.3;z-index:10;position:fixed;background-color: red;top: 0;right: 0;left: 0;bottom: 0;color: white">xxxxxxxxxxxx</div> </body>
结果如下：
十二：padding和margin属性：用于页面布局
1、padding：内边距，将自己内部进行增减相应的增加，即对自身增加相应的像素，达到与原div产生相应的间距，是自身填充边距，默认顺序是上右下左，这是内部增加，所以是内边距：
padding: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
<body> <div style="height: 70px;border: 1px solid red"> <div style="height: 50px;background-color: green"></div> </div> </body>
调整之前的效果：
<body> <div style="height: 70px;border: 1px solid red"> <div style="height: 50px;background-color: green;padding: 10px"></div> </div> </body>
调整之后的效果：四周都增加了10像素，即用自身填充增加的像素大小，这是内部增加，因此是内边距
<body> <div style="height: 70px;border: 1px solid red"> <div style="height: 50px;background-color: green;"></div> </div> </body>
调整之前的效果：
调整之后：
<body> <div style="height: 70px;border: 1px solid red"> <div style="height: 50px;background-color: green;margin-top: 30px"></div> </div> </body>
调整之后的效果：可以看到绿色区域下移了30像素的位置，即绿色区域和父级区域产生了30像素的间隔
3、高级写法1-->两个值：
<body> <div style="height: 60px;width: 510px;border: 1px solid red"> <div style="height: 50px;background-color: green;width: 500px;margin: 20px 10px"></div> <!-- 20px代表上下，10px表示左右 </div> </body>
4、高级写法2-->四个值：
<body> <div style="height: 60px;width: 510px;border: 1px solid red"> <div style="height: 50px;background-color: green;width: 500px;margin: 20px 10px 5px 15px"></div> #依次是上 右 下 左的间距大小 </div> </body>
