Python之路-python（html、css）
html：
概述：
HTML是英⽂Hyper Text Mark-up Language(超⽂本标记语⾔)的缩写，他是⼀种制作万维⽹页⾯标准语⾔（标记）。相当于定义统⼀的⼀套规则，⼤家都来遵守他，这样就可以让浏览器根据标记语⾔的规则去解释它。
浏览器负责将标签翻译成⽤户“看得懂”的格式，呈现给⽤户！
Doctype
网页设计html代码翻译 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、约束规则。
现在我们告诉了浏览器要⽤什么样的标准去打开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标签
<meta charset="UTF-8">这种后⾯没有/的就是⾃闭合标签，补全也没有斜杠的标签，标签中是⾃闭
合标签的不多。
主动闭合标签：
例如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″>
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" />
<meta http-equiv="X-UA-Compatible" content="IE=;IE9;IE8;IE7" />让⽤户打开⽹页以后通过IE⼏的⽅式取展⽰，如果是IE9就⽤9，否则就⽤IE8，还不⾏就⽤IE7，注意⽤分好隔开。
link标签：
如果你想让⾃⼰的⽹页头部除了在title⾥显⽰⽂字，还得显⽰图⽚，那么就得在head标签中加上这句，前⾯都是固定写法，后⾯href⾥⾯是你的图⽚路径，这⾥是相对路径。
<link rel="shortcut icon" href="../image/logo.ico">
body部分：
各种符号（多个符号直接⽤分号隔开）：
空格：
⼩于号：<
⼤于号：>
p标签（段落）：
写法：<p>内容</p>
我们知道段落直接跟段落直接是有空⾏的，但是有⼈要说了，那你段落跟段落直接是有空⾏的，那我⼀个段落⾥⾯不能⾏⾏都有空⾏吧，我们往下看。
br标签：
写法：<br />
例如：<p>内<br />容</p>（段落⾥⾯⾏与⾏直接的换⾏）
在内容直接加上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
现象：
A
A
A
A
A
A
span标签（⽩班）：
写法：
<span>AAA </span>
<span>AAA </span>
<span>AAA </span>
<span>AAA </span>
<span>AAA </span>
View Code
现象：
AAA AAA AAA AAA AAA
不知道你有没有发现，span是横着显⽰的，没有加⼤加粗。但是H标签是竖着显⽰的，⽽且还加⼤加粗。
标签的分类：
上⾯我们说了，标签分为⾃闭合标签和主动闭合标签，这个只是标签的⼀种写法，下⾯我们看看真正的分类。 块级标签：h（加⼤加粗）、div（⽩班）、p（段落）
⾏内标签（内联标签）：span
特性：
标签与标签之间是可以互相嵌套的。
标签存在的意义，可以再标签上加上属性，就知道它的具体位置，好⽅便css和js渲染时候到位置。
div标签：
div是⼀个使⽤⾮常频繁的标签。
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
View Code
现象：
123
123
123
123
123
特点：
没有加⼤加粗，是⼀个块级标签。
input标签：
输⼊框和按钮：
我们都知道很多⽹页上都提供了让⽤户输⼊和确认提交之类的按钮，这些都叫做输⼊框和按钮。
写法：
<form action = "127.0.0.1:8888/index" method = "GET">
<input type="text" name="user"/>
<input type="password" name="pwd"/>
<input type="text" name="email">
<input type="submit" value="登录"/>
<input type="button" value="登录"/>
</form>
<input type="text" name="user"/>普通输⼊框，⽤户可以看到⾃⼰的内容
<input type="password" name="pwd"/>密码输⼊框，⽤户只能看到⼩⿊点。
那为什么要放到form标签中呢？是因为⽹页中要是有很多这样的输⼊框，程序⽆法判断哪个跟哪个是⼀起的，所以放到form标签中。action是告诉html这组数据提交到什么位置。
method是提交⽅法：
GET：⽤户输⼊的数据会放到url⾥⾯提交给后台程序。
POST：会⼀字典的⽅式提交给后台程序，后⾯跟的name其实就是key名。
View Code
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="shortcut icon" href="..html/image/name.ico">
</head>
<body>
<form action = "127.0.0.1:8888/index" method = "GET">
<input type="text" name="user"/>
<input type="password" name="pwd"/>
<input type="text" name="email">
<input type="submit" value="登录"/>
<input type="button" value="登录"/>
</form>
<br>
<form action = "127.0.0.1:8888/index" method = "GET">
<input type="text" name="user"/>
<input type="password" name="pwd"/>
<input type="text" name="email">
<input type="submit" value="登录"/>
<input type="button" value="登录"/>
</form>
</body>
</html>
注意:
submit是提交，它是真正会给后台程序传参数的，但是button只是⼀个按钮，具体需要它做什么还得告诉它该⼲什么。
View Code
GET和POST区别：
本质上没有任何区别，只是GET把⽤户输⼊的数据放到url⾥⾯⼀起传送给后台程序，⽽POST是以字典的形式把⽤户输⼊的内容发送给后台程序。
input type="radio" 单选按钮，不过需要在需要单选按钮的属性⾥⾯把⼀组需要单选的按钮name名字定义成⼀样的，后台不知道你这个单选按钮是什么，所以你还需要加上⼀个value值，也就是说是互斥关系，只能选择input type="checkbox"复选框，name值批量取值，value值是多少
input type="file"选择⽂件框，点击后会⾃动弹出⼀个框，可以选择⽂件，我们上⾯说了程序是不知道谁是谁的所以想要后台回去到数据，需要在form标签属性中定义enctype="multipart/form-data"html就会把⽂件⼀点⼀input type="reset"重置，把⽹页上所有的值恢复到默认
<textarea name = " 1"> 哈哈哈</textarea>其实就是⼀个很⼤的⽂本输⼊框，name属性也是⽅便获取到这个框的输⼊数据，哈哈哈就是默认写的是什么。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="shortcut icon" href="..html/image/name.ico"/>
</head>
<body>
<form enctype="multipart/form-data">
<div>
<p>姓名</p>
<input type="text" name="user"/>
<p>性别:</p>
男：<input type="radio" name="gender" value="1" checked="checked"/>
⼥：<input type="radio" name="gender" value="2"/>
<p>爱好:</p>
篮球：<input type="checkbox" name="favor" value="1" checked="checked"/>
⾜球：<input type="checkbox" name="favor" value="2"/>
⽹球：<input type="checkbox" name="favor" value="3"/>
跑步：<input type="checkbox" name="favor" value="4"/>
<p>技能:</p>
上天：<input type="checkbox" name="shang" checked="checked"/>
⼊地：<input type="checkbox" name="xia"/>
<p>上传⽂件</p>
<input type="file" name="fname"/>
<br>
<br>
</div>
<p>建议:</p>
<textarea name = " 1">哈哈哈</textarea>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
View Code
select标签：
我们都知道在⼀些⽹页上可以看到很多类似下图的选项：
<select name = "city" size="4" multiple = "multiple">
<option value="1" selected = selected>北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">北京</option>
</select>
select属性中，name是告诉后台程序底下这些是做什么的，size是同时能显⽰⼏⾏，multiple是多选（⼀次可以选择多个）
value其实就是区别⼀下这个选项⽽已，selected=selected是默认程序已经选中的。
a标签：
跳转功能：
<a href="www.baidu" target="_blank">百度</a>
href是代表要跳转到哪⾥，百度是页⾯显⽰的⽂字（不过这个⽂字像是⼀个超链接⼀样是蓝⾊的字体），target=“_blank”是在⼀个⽹页新的签中打开，默认是在当前页⾯跳转。
锚点：
如下，如果我想通过点击的第⼀章或者其它任意⼀章的⽂本，就跳转到下⾯具体的那⼀章位置，怎么做呢。
我先定义四个div标签，让它们都占⾼600像素的⽂字，每张内容的名字。⽽上⾯a标签中写的就好像是⼀本书的⽬录，固定写法是href=“#”，#号后⾯才是下⾯每个div快的名字。这样的话我点击第⼏章，⽹页就能⾃动跳转到我想去的位置，再也不⽤⿏标滑轮傻傻的往下翻了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="#i1">第⼀章</a>
<a href="#i2">第⼆章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<div id="i1" >第⼀章</div>
<div id="i2" >第⼆章</div>
<div id="i3" >第三章</div>
<div id="i4" >第四章</div>
</body>
</html>
image标签：
其实就是现实图⽚的标签
需求：
2、下⾯的图⽚是因为放到当前⽬录，如果有个image⽬录⾥⾯专门放标签的话，就写上相对路劲即可。
3、title就是你⿏标放到这个图⽚上的时候显⽰的⽂字。
4、style就是风格，我让它⾼200和宽都是两百像素。
5、alt意思是如果服务器不到图⽚了，就会在图⽚的位置显⽰的⽂字。
<a href="www.baidu">
<img src="图⽚.png" title="⼤⼤头兵" alt="⼤头兵">
</a>
ul、ol、dl标签：
<!-- ul和li标签搭配使⽤-->
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<!-- 0l和li标签搭配使⽤-->
<ol>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论