概述

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

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

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

     

python前端框架django模板 python前端框架html_标记语言

 

文档树、html的基本结构

     

python前端框架django模板 python前端框架html_html_02

     

python前端框架django模板 python前端框架html_python前端框架django模板_03

    

 网页样式：

     

python前端框架django模板 python前端框架html_html_04

 各段的意义：

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

           html规则：

          

python前端框架django模板 python前端框架html_python_05

      <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 等

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

      块级标签，会占用一整行

 

页面中各种符号：

      用法： &lt h1 &gt

      这样的话，页面就会直接显示<h1> 也不会被浏览器直接翻译为html的语言

 

      页面中的特殊符号如何展示？可以参考下面的博客

      

 

p 和 br 标签

       p 标签，段落标签

      如果想要这个段落换行，那就需要插入</br>

<div style="width:200px; border: 1px solid red;word-break:break-all;">
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>

运行结果：

      

python前端框架django模板 python前端框架html_python_06

       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>

运行结果

     

python前端框架django模板 python前端框架html_html_07

      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:多选框

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>

运行结果：

     

python前端框架django模板 python前端框架html_标记语言_08

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>

 

运行结果：

python前端框架django模板 python前端框架html_python前端框架django模板_09

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

    no pain no gain