Python 前端 Html基础
概述
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页的标准语言。相当于定义统一
的规则。大家都来遵守它，这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看的懂”的格式，呈献给用户。
文档树、html的基本结构
网页样式：
各段的意义：
<!DOCTYPE html> :定义html的规则，如同python中的/usr/bin/python
html规则：
<head> 头部信息。
<body> 网页的主体
Html结构之head
heade里面的内容：
1.页面的编码(告诉浏览器是什么编码)
<meta charset='UTF-8'>
这是简写，如果看到更长的定义方式，那就是啰嗦的写法，了解这种即可。
2.刷新和跳转
<meta http-equiv="Refresh" content="5; Url=http://www.baidu.com" />
5秒钟会跳转到www.baidu.com的页面
<meta http-equiv="Refresh" content="5" />
5秒中刷新一次
3. 网站关键字
<meta name="keywords" content="Mr.python">
4.X-UA-Compatible
这个是针对IE的时代而生的，过去ie一家独大，而版本之间差别挺大，所以通过这个来这设定，html的运行模式
<meta http-equiv="X-UA-Compatible" content="IE=EnulateIE7" />
如果IE=edge,就是已最新的模式去执行。
5.标题
<title>Mr.python</title>
6.css 文件
7.css 代码块
8.js 文件
9.js 代码块
后面的这四种后面用到时在详述
Html标签之分类、符号、p以及br标签
标签的分类分为两种： 块级标签 和 行内标签
行内标签：a、span、select 等
块级标签：div 、h1、p 等
行内标签，是只会在一行中，且只占用自己有的地方，自己的后面还可以添加别的东西
块级标签，会占用一整行
页面中各种符号：
用法： < h1 >
这样的话，页面就会直接显示<h1> 也不会被浏览器直接翻译为html的语言
页面中的特殊符号如何展示？可以参考下面的博客
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
p 和 br 标签
p 标签，段落标签
如果想要这个段落换行，那就需要插入</br>
<div style="width:200px; border: 1px solid red;word-break:break-all;"> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p> </div>
运行结果：
word-break:break-all #遇到头就会自动换行
总结：
1.标签的包含
2.p与p之间是有间隔的
3.br 自闭合标签
a 标签
a标签标示超链接
代码： <a href="http://www.baidu.com" target="_blank">百度</a>
锚：
代码：
<a href="#hello">百度</a> <div style="height: 2220px;background: red;">第一章</div> <div id="hello" style="height: 2000px;background: green;">第二章</div>
锚是通过#来指向到页面的某个地方的。上面的例子是通过id来指定的
规范：这个id在页面中应该是唯一的！！
img 标签
<img title='name' src="1.jpg" style="height:10px;width:10px;" />
h 标签
<h1> 标题 </h1>
.
.
.
.
<h6> 最小标题 </h6>
Html标签之select标签
<select>
<option value="1">北京</option>
<option value="2">天津</option>
<option selected="selected" value="3">重庆</option>
</select>
<select size="2">
<option>北京</option>
<option>天津</option>
<option>重庆</option>
</select>
<select>
<optgroup label="河北省">
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label="山西省">
<option>太原</option>
<option>大同</option>
</optgroup>
</select>
运行结果
value:指定value值，后期与后端做交互
size：显示几个出来
selected:指定哪一个在框中显示
Html标签之input系列和form标签
<input type="checkbox" /> <input type="checkbox" /> <br/> <br/> <p> 男<input type="radio" name="gender"/></p> <p> 女<input type="radio" name="gender"/></p> <br/> <br/> <input type="text" /> <input type="password" /> <br/> <br/> <input type="button" value="btn" /> <input type="submit" value="sub" /> <br/> <br/> <input type="file" /> <br/> <br/> <form action="http://www.baidu.com/"> <div> 主机名：<input name="host" type="text"/> </div> <div> ip：<input name="ip" type="text"/> </div> </form>
checkbox:多选框
radio:单选框，通过相同的name来控制，只能选择一个
如果要想后端提交数据，需要写到一个form里面来做提交
Html标签之label和列表标签
<textarea>iii</textarea> <input type="text" value="jjj" /> <br/> <br/> <label for="cb1">婚否</label> <input id="cb1" type="checkbox"> <br/> <br/> <ul> <li>11</li> <li>22</li> <li>33</li> <li>44</li> </ul> <ol> <li>11</li> <li>22</li> <li>33</li> <li>44</li> </ol> <dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> </dl>
运行结果：
textarea：可以显示默认的内容
input:如果也要显示默认的内容，则需要加上name=‘xxx’
label：可以通过for=‘xxxx’来实现，点击婚否就可以勾选上小框，xxxx是input的id
Table 标签
<table border="1"> <thead> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <td colspan="2">h1,h2</td> <td>h3</td> </tr> <tr> <td rowspan="2">hh1,hhh1</td> <td>hh2</td> <td>hh3</td> </tr> <tr> <td>hhh2</td> <td>hhh3</td> </tr> </tbody> </table>
运行结果：
<tr>: 行
<th>: thead中的行
<td>:tbody中的行
colspan="2"：合并行
rowspan="2" 合并列
后端向前端传参数
for循环
{% for row in user_list %}
{{row}}
{% endfor %}
列表取索引
{{ user_list.0 }}
字典取key
{{ user_list.key }}
{% for key in user_list.keys %} #获取字典的key
{% for key in user_list.values %} #获取字典的value
{% for key, value in user_list.item %} #获取字典的 key, value
if 条件
{% if age %}
{% if age > 16 %}
{% endif %}
{% else %}
pass
{{ endif }}
上传文件(django)
html
<form action="/login/" method="POST" enctype="multipart/form-data">
<input type="file" name='fff'>
django
obj = request.FILES.get('fff')
file_path = os.path.join('upload', obj.name) #下载到指定的目录
f = open(file_path, mode='wb')
for i in obj.chunks():
f.write(i)
f.clost()
