Python 前端 Html基础

概述

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页的标准语言。相当于定义统一

的规则。大家都来遵守它，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看的懂”的格式，呈献给用户。

文档树、html的基本结构

网页样式：

各段的意义：

<!DOCTYPE html> :定义html的规则，如同python中的/usr/bin/python

html规则：

<head> 头部信息。

<body> 网页的主体

Html结构之head

heade里面的内容：

1.页面的编码(告诉浏览器是什么编码)

这是简写，如果看到更长的定义方式，那就是啰嗦的写法，了解这种即可。

2.刷新和跳转

5秒钟会跳转到www.baidu.com的页面

5秒中刷新一次

3. 网站关键字

4.X-UA-Compatible

这个是针对IE的时代而生的，过去ie一家独大，而版本之间差别挺大，所以通过这个来这设定，html的运行模式

如果IE=edge,就是已最新的模式去执行。

5.标题

<title>Mr.python</title>

6.css 文件

7.css 代码块

8.js 文件

9.js 代码块

后面的这四种后面用到时在详述

Html标签之分类、符号、p以及br标签

标签的分类分为两种：块级标签和行内标签

行内标签：a、span、select 等

块级标签：div 、h1、p 等

行内标签，是只会在一行中，且只占用自己有的地方，自己的后面还可以添加别的东西

块级标签，会占用一整行

页面中各种符号：

用法： &lt h1 &gt

这样的话，页面就会直接显示<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 标签

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 %}

　　{% endfor %}

　 列表取索引

　字典取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

上传文件(django)

　　html

　　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()