python学习之路前端-HTML
HTML概述
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)
HTML文档
我们通过文档树来说明HTML文档是由哪些元素组成的
一、初识HTML
在PyCharm中我们新建一个HTML文件，默认情况下会生成如下的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1.Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档,dtd文件则包含了标记、attributes 、properties、约束规则。
有和无的区别：
BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么CompatMode默认就是BackCompat，这也就是恶魔的开始。浏览器按照自己的方式解析渲染页面，那么在不同的浏览器就会显示不同的样式。如果你的页面添加了DOCTYPE则等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，
你的页面在所有的浏览器里显示的都是同一个模样。
2.Meta(metadata information)
提供有关页面的元信息，例如：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”> 等同于 <meta charset="UTF-8">
刷新和跳转
< meta http-equiv=“Refresh” Content=“30″> #30秒自动刷新 < meta http-equiv=”Refresh“ Content=”5; Url=http://blog.51ctom.com“ /> #5秒刷新后跳转到blog.51cto.com
关键词
< meta name="keywords" content="技术博客,51cto博客,it博客,网络技术,开发技术,移动开发,数据库,路由器,交换机,路由交换,服务器存储,linux,Java,安全,漏洞,android,ios,Oracle,操作系统,网络安全,防火墙,网络编程,存储备份,windows,网络管理,项目管理,编程语言,blog,系统运维,企业架构" >
描述信息
<meta name="description" content="51CTO博客是国内领先的IT技术博客,移动开发博客,网络技术博客,IT运维博客,IT blog,云计算博客,数据库博客.博客拥有大批IT技术人和技术文章,博客每日备份.">
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=edge" />
Title：网站头部信息
<title> 51CTO技术博客-领先的IT技术博客</title>
简单应用一
<!DOCTYPE html>
<html lang="en">
<head>
<!--<自闭合标签>-->
<!--<定义浏览器使用什么编码来解释页面>-->
<meta charset="UTF-8" />
<!--<兼容IE>-->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<!--<meta http-equiv="Refresh" Content="2" />-->
<meta http-equiv="Refresh" content="2; Url=http://blog.51cto.com" />
<link rel="shortcut icon" href="favicon.ico">
<title>第一个前端页面</title>
</head>
<body>
<h1>第一个测试页面</h1>
</body>
</html>
常用标签
1.标签一般分为两种：块级标签和内联标签（也成行内标签）
div #行内标签要结合css来使用，内容有多少就占多少空间 span #块级标签要结合css来使用 p #段落，默认段落之间是有间隔的
br #换行 h1-h6 #设置字体大小的标签 a标签 #常用于跳转 target属性，_black表示在新的页面打开，href是a标签所特有的，别的标签不可用
简单应用一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个测试页面</title>
</head>
<body>
<!--<内联和块级>-->
<div style="background: red;">12</div>
<span style="background: green;">12</span>
<!--<符号>-->
<
<a
<a b >
>
<p>段落1：寒风飘飘落叶，<br />军队是一朵绿</p>
<p>段落2：声声我日夜呼唤，<br />多少句信息化</p>
<p>段落3：不要离别时两眼泪花，<br />军营是咱温暖的家</p>
<!--<设置字体大小的标签>-->
<h1>a</h1>
<h2>b</h2>
<h3>c</h3>
<h4>d</h4>
<h5>e</h5>
<h6>f</h6>
<!--<a标签>-->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">跳转1</a>
<!--<在一个新的标签页中打开>-->
<a href="http://www.baidu.com" target="_blank">跳转2</a>
<!--<寻找页面中id=i1的标签，将其标签放置在页面顶部>-->
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1" style="height: 500px;">第一章内容</div>
<div id="i2" style="height: 500px;">第二章内容</div>
<div id="i3" style="height: 500px;">第三章内容</div>
</body>
</html>
说明:在html中，< >和空格具有特殊的含义 "<" 使用< 表示 ">" 使用 > 来表示 空格" " 使用  来表示
更多符号的表示请参考http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
2.input和select标签
input系列和select系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>写博客</title>
</head>
<body>
<!--<input系列>-->
<p>用户名：<input type="text"/></p>
<p>密码：<input type="password"/></p>
<p>E_mail:<input type="email"/></p>
<p>性别(单选框)：
<br />男<input type="radio" name="gender" />
<br />女<input type="radio" name="gender" />
</p>
<p>爱好：
<br />唱歌<input type="checkbox" />
<br />跳舞<input type="checkbox" />
<br />篮球<input type="checkbox" />
<br />足球<input type="checkbox" />
</p>
<!--文件上传-->
<p>文件：<input type="file"/></p>
<input type="submit" value="submit" />
<input type="button" value="button"/>
<input type="reset" value="reset"/>
<!--select系列-->
<p>城市：
<select>
<option>北京</option>
<option>上海</option>
<option>南宁</option>
</select>
<select multiple size = "6">
<option>河南</option>
<option>河北</option>
<option>新疆</option>
<option>内蒙</option>
<option>江苏</option>
<option>深圳</option>
<option>广东</option>
<option>福建</option>
<option>辽宁</option>
<option>黑龙江</option>
<option>吉林/option>
</select>
<select>
<optgroup label="aaa">北京</optgroup>
<option>海淀区</option>
<option>西城区</option>
<option>昌平区</option>
<option>东城区</option>
<optgroup label="bbb">郑州</optgroup>
<option>二七区</option>
<option>金水区</option>
<optgroup label="ccc">上海</optgroup>
<option>浦东</option>
<option>新区</option>
<option>金沙嘴</option>
</select>
</p>
</body>
</html>
简单应用二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text" />
</form>
<form>
<div style="border: 1px solid red;">
<p>用户名：<input type="text" /> </p>
<p>密码：<input type="password" /> </p>
<!--<p>邮箱：<input type="email" /> </p>-->
<p>性别(单选框)：
<br /> 男<input type="radio" name="ee" />
<br /> 女<input type="radio" name="ee"/>
</p>
<p>爱好（复选框）：
<br /> 男1<input type="checkbox" />
<br /> 男2<input type="checkbox" />
<br /> 男3<input type="checkbox" />
<br /> 男4<input type="checkbox" />
<br /> 男5<input type="checkbox" />
</p>
<p>城市：
<select>
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<select multiple size="10">
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<select>
<optgroup label="AAA">
<option>上海</option>
<option>北京</option>
</optgroup>
<optgroup label="BBB">
<option>广州</option>
</optgroup>
</select>
</p>
<p>文件：<input type="file" /></p>
<p>备注 ： <textarea></textarea> </p>
<input type="submit" value="submit"/>
<input type="button" value="button"/>
<input type="reset" value="reset"/>
</div>
</form>
</body>
</html>
3.form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--submit是针对form中的内容进行提交，另外form中需要注意的操作：-->
<!--1.action:动作 2.method:get/post 3.上传文件时必须添加enctype，否则上传不成功-->
<!--<form action="https://www.sogou.com/web" method="get">-->
<!--<input type="text" name="query" />-->
<!--<input type="submit" value="提交" />-->
<!--</form>-->
<form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">
<input type="text" name="user" />
<input type="password" name="pwd" />
男<input type="radio" name="gender" value="1" />
女<input type="radio" name="gender" value="0"/>
<p>爱好：
篮球<input name="favor" type="checkbox" value="1"/>
足球<input name="favor" type="checkbox" value="2"/>
玻璃球<input name="favor" type="checkbox" value="3"/>
</p>
<p>文件：
<input type="file" name="fafafa"/>
</p>
<p>
<select name="city">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">广州</option>
</select>
</p>
<p>
备注：<textarea name="extra"></textarea>
</p>
<input type="submit" value="提交" />
</form>
<hr />
<form>
<input type="text" />
<input type="submit" value="提交" />
</form>
</body>
</html>
说明：textarea是多行文本
4、ul/ol/dl标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>写博客</title>
</head>
<body>
<ul>
<li>a标签</li>
<li>p标签</li>
<li>div标签</li>
<li>br标签</li>
</ul>
<ol>
<li>各种符号表示方法</li>
<li>p和br标签</li>
<li>标签选择器</li>
<li>class选择器</li>
</ol>
<dl>
<dt>北京</dt>
<dd>海淀区</dd>
<dd>昌平区</dd>
<dd>西城区</dd>
<dd>通州区</dd>
<dt>上海</dt>
<dd>金沙嘴</dd>
<dd>浦东</dd>
<dd>新区</dd>
</dl>
</body>
</html>
效果图：
5.table标签
应用：table的创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table的创建和合并</title>
</head>
<body>
<table border="1" bgcolor="#49ffe1">
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容四</td>
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容四</td>
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容四</td>
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容四</td>
</tr>
</tbody>
</table>
</body>
</html>
效果图：
应用：table的合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table的合并</title>
</head>
<body>
<table border="1" bgcolor="#49ffe1">
<thead>
<tr >
<th colspan="2">第一列</th>
<!--<th>第二列</th>-->
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td rowspan="3">内容四</td>
</tr>
<tr>
<td rowspan="3">内容一</td>
<td>内容二</td>
<td>内容三</td>
<!--<td>内容四</td>-->
</tr>
<tr>
<!--<td>内容一</td>-->
<td>内容二</td>
<td rowspan="2">内容三</td>
<!--<td>内容四</td>-->
</tr>
<tr>
<!--<td>内容一</td>-->
<td>内容二</td>
<!--<td>内容三</td>-->
<td>内容四</td>
</tr>
</tbody>
</table>
</body>
</html>
效果图：
6.label标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>label标签</title>
</head>
<body>
<h2>Label</h2>
姓名：<input id="name1" type="text"/>
婚否：<input id="marry1" type="checkbox"/>
<br />
<label for="name2">
姓名：<input id="name2" type="text"/>
</label>
<label for="marry2">
婚否：<input id="marry2" type="checkbox"/>
</label>
</body>
</html>
效果图：
7.filedset标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filedset标签</title>
</head>
<body>
<fieldset>
<legend>登录</legend>
<p>用户名：</p>
<p>密码：</p>
</fieldset>
</body>
</html>
效果图：
