HTML结构 HTML模板HTML：htypertextmarkuplanguage，即超文本标记语言<!DOCTYPEhtml>#按标准最新模式解析<
HTML模板
HTML：htyper text markup language， 即超文本标记语言
<!DOCTYPE html>
#按标准最新模式解析
<html lang="en">
#语言
<head>
#头标签内的内容不会显示在浏览器内，是页面的配置信息
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
#体标签内的内容会显示在浏览器
<h1>Hello world!!!</h1>
</body>
</html>
HTML标签
HTML标签解释有两种模式：
alert(window.top.document.compatMode)：
#提示当前解析模式
1、BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
2、CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
页面解析默认是怪异模式，如果页面首行添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的
标准解析渲染页面，
这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
这就是<!DOCTYPE html>的作用。
head标签
2.1、meta标签之name属性
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
meta标签的keyword关键词，是浏览器搜索引擎搜索时快速匹配本页面的关键词
<meta name="description" content="老男孩培训机构是由一个老的男孩创建的">
meta标签的description描述，是搜索引擎匹配到关键字，在未进入本页面时对页面的简单介绍
2.2、meta标签之http-equiv属性
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
meta标签的Refresh刷新，2秒后页面自动调整到URL网站
<meta http-equiv="content-Type" charset="UTF8">
页面编码方式为UTF8
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
浏览器兼容最低版本IE7
2.3、title标签
<title>首页</title>
#页面标签文字
2.4、rel图标链接
<link rel="icon" href="http://www.jd.com/favicon.ico">
配置图标属性及图标的地址，图标地址也可以是本地地址
2.5、rel脚本属性
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
link标签引入mystyle.css样式，stylesheet样式表单
body标签
3.1 <h1>标签: <hn>n的取值范围是1~6; 从大到小. 用来表示标题.
<h1>China 中国</h1>
3.2 <p>标签，即paragraph段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<p>China 中国</p>
3.3 <b>和<strong>标签: 字体加粗标签.
<b>China 中国</b>
<strong>中华人民共和国</strong>
3.4 <strike>和<del>标签: 为文字上加一条中线，即文字删除线,strike标签过时了。
<strike>美国</strike>
<del>美国</del>
3.5 <em>标签：文字斜体标签
<em>日本</em>
3.6 <sup>和<sub>标签: 上角标 和 下角表.
<sup>上</sup>
<sub>下</sub>
3.7 <br/>标签：即break换行
<br>:换行.
3.8 <hr>标签，即水平分隔线(horizontal rule)
<hr>:水平线
3.9 <div>标签：块标签，无格式，独自占一行
<div>独自占一行</div>
3.10 <span>标签：类似div的无格式内敛标签
<span>内联标签</span>
3.11、<img>标签属性：
<img src="1.jgp" alt="图片加载中" width="200px" height="300px" title="立春">
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮在图片上时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
3.12、<a>超链接标签属性：超链接功能及锚链功能
超链接：
<a href="http://www.baidu.com">百度</a>
href:要连接的资源路径 格式如下: href="http://www.baidu.com"
text-decoration: none;#将标签a链接自带的下划线去掉
锚链：定义一个页面的书签.用于跳转 href : #id（锚）
<a href="#div1">第一章</a>
<a href="#div2">第一章</a>
<a href="#div3">第一章</a>
<div id="div1">第一章</div>
<div id="div2">第二章</div>
<div id="div3">第三章</div>
target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
3.13、列表标签：
<ul>: 无序列表，UNorder list，
<li>列表项
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol>: 有序列表，order list,
<li>列表项
<ol>
<li>1</li>
<li>2</li>
</ol>
<dl>：定义列表；
<dt> 列表标题；
<dd> 列表项
<dl>
<dt>第一章</dt>
<dd>第一节</dd>
</dl>
3.14、<table>表格标签属性：
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<th>: table header
<tbody>(不常用): 为表格进行分区.
3.15、<form>表单标签：
表单用于向服务器传输数据。表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和label元素。
<form action="api.weahter.com/post/" method="post">
<p>账号：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<p><input type="submit" name="submit" value="登录"></p>
<p>爱好：篮球<input type="checkbox" name="hobby" value="basketball"></p>
<p>足球<input type="checkbox" name="hobby" value="football"></p>
<p>男<input type="radio" name="sex" value="male"></p>
<p>女<input type="radio" name="sex" value="female"></p>
<p><input type="file" name="upfile"></p>#选择打开文件
<p><input type="reset" value="重置"></p>
</form>
1.表单属性
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
action: 将表单数据提交到指定服务接口,比如https://www.sogou.com/web
method: 表单的提交方式post和get，默认取值get。
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
<input>标签的属性和对应值：
type属性:输入的对象的类型
text：文本输入框
password：密码输入框
radio：单选框
checkbox：多选框
submit：提交按钮
button：按钮(需要配合js使用.) button和submit的区别？
file：提交文件：form表单需要加上属性enctype="multipart/form-data"
name属性:表单提交时各个数据项的键名.注意和id属性的区别
name属性是和服务器通信时使用的名称；id属性是浏览器端使用的名称，该属性主要是通过css和javascript渲染时索引使用。
value:表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.
form表单上传文件注意两点：
1 请求方式必须是post，文件信息封装在request.FILES对象中
2 enctype="multipart/form-data"
3 上传文件接入到服务器实例代码
def uploadfile(request):
print request.FILES
for item in request.FILES:
fileObj = request.FILES.get(item)#循环文件列表
f = open(fileObj.name, 'wb')#获取上传文件名
iter_file = fileObj.chunks()#将文件切块上传
for line in iter_file:
f.write(line)
f.close()
return HttpResponse('ok')
<select>下拉标签属性：
name:表单提交项的键.
size：选项的可视候选个数
multiple：multiple 支持多选
<option> 下拉选中的每一项 属性：
value:表单提交项的值. selected: selected下拉选默认被选中
<optgroup>为每一项加上分组
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<textarea>：文本域标签属性
name:表单提交项的键.
cols:文本域默认有多少列
rows:文本域默认有多少行
<label>标签：label的for属性值与其他标签的id值相同即关联，当点击label名时，自动选中关联标签
<label for="www">姓名</label>
<input id="www" type="text">
<fieldset>标签：
<fieldset>
<legend>登录吧</legend>
<input type="text">
</fieldset>
4、块标签与内联标签
4.1、标签分为：
块标签（block）、
内联标签（inline）、
特殊标签
4.2、块标签特点: <p> <h1> <table> <ol> <ul> <form> <div>
总是在新行上开始；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素
4.3、内联标签特点：<a> <input> <img> <sub> <sup> <textarea> <span>
和其他元素都在一行上；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素
4.4、特殊字符：
< ：小于号
>；：大于号
"：双引号
: 空格
4.5、标签嵌套规则：
1、块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
2、有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
3、li内可以包含div
4、块级元素与块级元素并列、内联元素与内联元素并列。