正文
循序渐进Python3（十一） --0-- web之html
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
HTML：
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。
相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
网页的组成：
一个网页一般由两部分组成即：
1> HTML（Hypertext Markup Language）
2> CSS（Cascade Style Sheets）。
HTML负责描述网页的结构和内容（如标题，导航栏等） CSS则负责网页的表现（外观）（如背景颜色，字体样式等）。
下面来看html的格式：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1> HTML（Hypertext Markup Language）
2> CSS（Cascade Style Sheets）。
HTML负责描述网页的结构和内容（如标题，导航栏等） CSS则负责网页的表现（外观）（如背景颜色，字体样式等）。
下面来看html的格式：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
HTML负责描述网页的结构和内容（如标题，导航栏等） CSS则负责网页的表现（外观）（如背景颜色，字体样式等）。
下面来看html的格式：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>告诉浏览器使用什么样的html或xhtml规范来解析html文档。
<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body>。
<head>和</head>之间的内容，是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息。
<body>和</body>之间的内容，是浏览器呈现出来的，用户看到的页面效果。也就是说这里是网页的主体
详细的解释一下：
详细的解释一下：
为什么要使用<!DOCTYPE html>这个去告诉浏览器呢？：
我们先了解一下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文档中允许有什么，不允许有什么，CTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明）用以告诉其他人 这个文档的类型风格。
head部分
1、Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
--meta属于自闭合标签
<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/" /> #指定1秒之后跳转页面至另一个网页
关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收
<meta name="keywords" content="博客,Mr、心弦,帅哥">
（4）描述
例如cnblog里的就是一个描述：
<meta name="description" content="博客园是一个面向开发者的知识分享社区。"
（5）X-UA-Compatible 这个是IE8特有的，知道即可，解决版本兼容问题
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
2、title
网页头部信息，如下图所示：
<title
name="123"
>测试页</title> #在标签里写""="" 就是标签的属性，如本句蓝色标注的地方。
注意：引号必须为英文的，并且"<"后面不能有空格。
3、Link
-->（由此引入css）
网页头部的图标
<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样式导入到当前文件中使用
5、Script
1、在当前文件中写JS
2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用
body部分
基础知识
body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用
的实际大小如下图：
<div style="background-color: green;">
无名
</div>
<span style="background-color: red">
小妖
</span>
注：
要在html中显示"<"和">" 需要这样写"<" ">" , 显示空格这样写" "
常用标签：
1、<p></p>标签和<br/>标签
<p></p>标签：段落标签，每一对p标签为一段,代码如下:
2、<a></a>标签
<a></a>标签用来跳转和锚
<a>标签之：跳转，代码如下：
效果就是点击
跳转到百度。
但是这个跳转是在当前页跳转的，如果想跳转到新的页面，用如下代码：
<a>标签之：锚
锚的作用是类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置 。
代码如下：
当点击“第一章”的时候，
页面会把指定位置的内容置于页面顶部：
3、H标签
即标题标签,代码如下：
效果如下：
4、input标签
用于输入，代码：
文本框 密码框：
这些效果只是默认的，后面学习css之后还可以单选框：
<p>性别：
<br /> 男 <input type="radio" name="nannv" />
<br /> 女 <input type="radio" name="nannv" />
name 属性值一致即可。
效果：
复选框： 可添加name属性，value值，name 一样 值不同。
效果：
可以添加默认选项（checked="checked" ）：
效果：
注： 对于radio 和 checkbox 需要指定value，在提交的时候就会发送相应的值
按钮：
submit：提交当前表单下的内容
button：默认无功能
reset：重置当前表单下的内容
选择文件：
<p>
文件：<input type="file" />
</p>
效果：
上传文件 ， 需要下面两个配置
email框：
<p><input type="email" /></p>
当提交时浏览器会自动检测输入框内是否符合邮件格式，但有些低版本浏览器不支持该功能。
多行文本框：
<body>
<textarea>123</textarea>
</body>
效果：
可见，中间的内容会默认显示。
5、form表单 -->(action提交url,method提交方式,enctype上传文件)
<form>
<p>用户名:<input type="text"/></p>
<p>密码:<input type="password"/>
</p><input type="submit" value="提交"/>
<input type="button" value="按钮"/>
<!--这里按提交才有反映，submit是用来提交当前的表单的，当然可以有多个表单-->
<!--但是，这个submit需要写入表单内，那么提交的时候是提交的当前表单-->
</form>
提交数据到某个网址
6、select标签
1>
效果：
2>
效果：
size=2 表示显示两个，如上图。
3>
效果如下： （按住ctrl可以多选）
4>
7、
label标签
代码：
显示效果，这里我点击文字的时候也会进入到相应的框体，他类似一个跳转：
8、列表 ul/ol/dl
ul列表在前面自动加“点”，代码如下：
<ul>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ul>
ol列表在前面自动加“数字”，代码如下：
<ol>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ol>
dl列表自动分组，代码如下：
<dl>
<dt>河北省</dt>
<!--dt是标签，dd是标签里的内容-->
<dd>石家庄</dd>
<dd>衡水市</dd>
<dt>山东省</dt>
<!--dt是标签，dd是标签里的内容-->
<dd>济南市</dd>
<dd>烟台市</dd>
</dl>
9、表格
<table border="1">
<!--border这里是加上边框-->
<thead>
<!--表头-->
<tr>
<!--th表头，有加粗效果-->
<th>name1</th>
<th>name2</th>
<th>name3</th>
</tr>
</thead>
<tbody>
<!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
<!--如果想加多个行就加多个tr即可-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
效果：
语法：
合并列：
看效果：
也就是说，当我们想要一个字段对应多个列的时候，可以这样设置。
合并行：
这里的关键字是td和rowspan
当我们想让一行数据占据多行宽度的时候，可以这样设置。
效果：
如果把上面代码的注释取消，则效果如下：
<tr>
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<!--<td>5</td>-->
<td>6</td>
</tr>
可见，数据被”排挤“到一边了 。
10.fieldest 大边框
<fieldset>
<legend>无名小妖的后花园</legend>
<p>血晶花 小果花</p>
<p>冰莲花</p>
</fieldset>
11.iframe （上传文件 跨域 ajex）<!DOCTYPE html>
可以直接打开网站内容：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的汽车之家</title>
</head>
<body>
<iframe style="width: 100%;height:2000px;" src="http://autohome.com.cn">
</iframe>
</body>
</html>
效果：
12.img 图片标签
<img src="3.png" alt="图片">
alt 表示，当图片无法正常显示的时候，显示alt所设置的值.
解决方案：允许网站开发者能够选择他们所熟知的模式。
依然使用旧式规则显示陈旧的网站。换句话说，所有的浏览器需要提供两种模式：怪异模式（即兼容模式）服务于旧式规则，严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式，Mozilla， Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。选择使用哪种模式需要一个触发器，而“DOCTYP切换” 则用于此目的。依照标准：任何一个(X)HTML文档必须拥有一个DOCTYPE（译注：DTD（文档类型定义）是一组机器可读的规则，它们指示 (X)HTML文档中允许有什么，不允许有什么，CTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明）用以告诉其他人 这个文档的类型风格。
head部分
1、Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
--meta属于自闭合标签
<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/" /> #指定1秒之后跳转页面至另一个网页
关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收
<meta name="keywords" content="博客,Mr、心弦,帅哥">
（4）描述
例如cnblog里的就是一个描述：
<meta name="description" content="博客园是一个面向开发者的知识分享社区。"
（5）X-UA-Compatible 这个是IE8特有的，知道即可，解决版本兼容问题
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
2、title
网页头部信息，如下图所示：
<title
name="123"
>测试页</title> #在标签里写""="" 就是标签的属性，如本句蓝色标注的地方。
3、Link -->（由此引入css）
网页头部的图标
<link rel="shortcut icon" href="favicon.ico"> # 固定语法，只需替换图片名称
导入CSS类似python中导入模块类似
<link rel="stylesheet" href="css/css_model.css">
4、Style
2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用
5、Script
1、在当前文件中写JS
2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用
body部分
基础知识
body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用
的实际大小如下图：
<div style="background-color: green;">
无名
</div>
<span style="background-color: red">
小妖
</span>
注：
要在html中显示"<"和">" 需要这样写"<" ">" , 显示空格这样写" "
常用标签：
1、<p></p>标签和<br/>标签
<p></p>标签：段落标签，每一对p标签为一段,代码如下:
2、<a></a>标签
<a></a>标签用来跳转和锚
<a>标签之：跳转，代码如下：
跳转到百度。
但是这个跳转是在当前页跳转的，如果想跳转到新的页面，用如下代码：
<a>标签之：锚
锚的作用是类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置 。
代码如下：
当点击“第一章”的时候，
页面会把指定位置的内容置于页面顶部：
3、H标签
即标题标签,代码如下：
效果如下：
4、input标签
用于输入，代码：
文本框 密码框：
这些效果只是默认的，后面学习css之后还可以单选框：
<p>性别：
<br /> 男 <input type="radio" name="nannv" />
<br /> 女 <input type="radio" name="nannv" />
name 属性值一致即可。
效果：
复选框： 可添加name属性，value值，name 一样 值不同。
效果：
可以添加默认选项（checked="checked" ）：
效果：
注： 对于radio 和 checkbox 需要指定value，在提交的时候就会发送相应的值
按钮：
submit：提交当前表单下的内容
button：默认无功能
reset：重置当前表单下的内容
文件：<input type="file" />
</p>
上传文件 ， 需要下面两个配置
email框：
<p><input type="email" /></p>
当提交时浏览器会自动检测输入框内是否符合邮件格式，但有些低版本浏览器不支持该功能。
多行文本框：
<body>
<textarea>123</textarea>
</body>
效果：
可见，中间的内容会默认显示。
5、form表单 -->(action提交url,method提交方式,enctype上传文件)
<form>
<p>用户名:<input type="text"/></p>
<p>密码:<input type="password"/>
</p><input type="submit" value="提交"/>
<input type="button" value="按钮"/>
<!--这里按提交才有反映，submit是用来提交当前的表单的，当然可以有多个表单-->
<!--但是，这个submit需要写入表单内，那么提交的时候是提交的当前表单-->
</form>
提交数据到某个网址
1>
效果：
2>
效果：
size=2 表示显示两个，如上图。
3>
效果如下： （按住ctrl可以多选）
4>
7、
label标签
代码：
显示效果，这里我点击文字的时候也会进入到相应的框体，他类似一个跳转：
8、列表 ul/ol/dl
ul列表在前面自动加“点”，代码如下：
<ul>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ul>
ol列表在前面自动加“数字”，代码如下：
<ol>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ol>
dl列表自动分组，代码如下：
<dl>
<dt>河北省</dt>
<!--dt是标签，dd是标签里的内容-->
<dd>石家庄</dd>
<dd>衡水市</dd>
<dt>山东省</dt>
<!--dt是标签，dd是标签里的内容-->
<dd>济南市</dd>
<dd>烟台市</dd>
</dl>
9、表格
<table border="1">
<!--border这里是加上边框-->
<thead>
<!--表头-->
<tr>
<th>name1</th>
<th>name2</th>
<th>name3</th>
</tr>
</thead>
<tbody>
<!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
<!--如果想加多个行就加多个tr即可-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
效果：
合并列：
看效果：
也就是说，当我们想要一个字段对应多个列的时候，可以这样设置。
合并行：
这里的关键字是td和rowspan
当我们想让一行数据占据多行宽度的时候，可以这样设置。
效果：
如果把上面代码的注释取消，则效果如下：
<tr>
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<!--<td>5</td>-->
<td>6</td>
</tr>
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<!--<td>5</td>-->
<td>6</td>
</tr>
10.fieldest 大边框
<legend>无名小妖的后花园</legend>
<p>血晶花 小果花</p>
<p>冰莲花</p>
</fieldset>
11.iframe （上传文件 跨域 ajex）<!DOCTYPE html>
可以直接打开网站内容：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的汽车之家</title>
</head>
<body>
<iframe style="width: 100%;height:2000px;" src="http://autohome.com.cn">
</iframe>
</body>
</html>
效果：
12.img 图片标签
<img src="3.png" alt="图片">
alt 表示，当图片无法正常显示的时候，显示alt所设置的值.
来自为知笔记(Wiz)
