html 经常使用的body标签概括

 块级元素与行内元素的区别： 

　　所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。若是单独在网页中插入这两个元素，不会对页面产生任何的影响。
　　这两个元素是专门为定义CSS样式而生的。

　　块元素能够写入高和款，行内元素则根据自有内容和浏览器窗口比例自适应调节宽和高

 

1 标题标签

　　块元素

　　　　<h1>标题1</h1>
　　　　<h2>标题2</h2>
　　　　<h3>标题3</h3>
　　　　<h4>标题4</h4>
　　　　<h5>标题5</h5>
　　　　<h6>标题6</h6>

2  经常使用小标签

　　　　<!--换行-->
　　　　<br>
　　　　<!--水平线--><hr>
　　　　<b>加粗</b>

　　　　<i>斜体</i>
　　　　<u>下划线</u>
　　　　<s>删除</s>
　　　　<p>段落标签</p>

3 特殊字符　

　　　　　空格    　　　　
　　　　　大于   >　　　　
　　　　　小于 　<　　　　
　　　　　人民币符号  &yen；
　　　　　&      &
　　　　  版权   ©
　　　　  注册   ®

 4 div标签和span标签

　　div标签用来定义一个块级元素，并没有实际的意义。主要经过CSS样式为其赋予不一样的表现。
　　span标签用来定义内联(行内)元素，并没有实际的意义。主要经过CSS样式为其赋予不一样的表现。

　　p标签不能包含块级标签，p标签也不能包含p标签。

5  img标签

　　<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

6 a标签

　　超连接标签

　　所谓的超连接是指从一个网页指向一个目标的链接关系，这个目标能够是另外一个网页，也能够是相同网页上的不一样位置，还能够是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

　　<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

href属性指定目标网页地址。该地址能够有几种类型：

• 绝对URL - 指向另外一个站点（好比 href="http://www.jd.com）
• 相对URL - 指当前站点中确切的路径（href="index.htm"）
• 锚URL - 指向页面中的锚（href="#top"）

 　　

target：

• _blank表示在新标签页中打开目标网页
• _self表示在当前标签页中打开目标网页

对超连接下划线设置

使用代码"text-decoration"
语法： 
text-decoration : none || underline || blink || overline || line-through 

text-decoration参数： 
none : 　无装饰
blink : 　闪烁
underline : 　下划线
line-through : 　贯穿线
overline : 　上划线

7 列表　

1.无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性：

• disc（实心圆点，默认值）
• circle（空心圆圈）
• square（实心方块）
• none（无样式）

2.有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性：

• 1 数字列表，默认值
• A 大写字母
• a 小写字母
• Ⅰ大写罗马
• ⅰ小写罗马

3.标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

8 表格

　　　　表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里能够包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：

　　　　

<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Egon</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

属性:

• border: 表格边框.
• cellpadding: 内边距
• cellspacing: 外边距.
• width: 像素 百分比.（最好经过css来设置长宽）
• rowspan: 单元格竖跨多少行
• colspan: 单元格横跨多少列（即合并单元格）

9 form 表单　

　　功能：

　　表单用于向服务器传输数据，从而实现用户与Web服务器的交互

　　表单可以包含input系列标签，好比文本字段、复选框、单选框、提交按钮等等。

　　表单还能够包含textarea、select、fieldset和 label标签。

　　

from django.conf.urls import url
from django.shortcuts import HttpResponse


def upload(request):
    print("request.GET:", request.GET)
    print("request.POST:", request.POST)

    if request.FILES:
        filename = request.FILES["file"].name
        with open(filename, 'wb') as f:
            for chunk in request.FILES['file'].chunks():
                f.write(chunk)
            return HttpResponse('上传成功')
    return HttpResponse("收到了！")

urlpatterns = [
    url(r'^upload/', upload),
]

10 input

　　<input> 元素会根据不一样的 type 属性，变化为多种形态。

　　type属性:

　　<input type=text" />   单行输入文本

　　<input type="password"  />   密码输入框

　　<input type="date" />　　　日期输入框

　　<input type="checkbox" checked="checked"  />    复选框

　　<input type="radio"  />       单选框

　　<input type="submit" value="提交" />   提交按钮

　　<input type="reset" value="重置"  />     重置按钮

　　<input type="button" value="普通按钮"  />    普通按钮

　　<input type="hidden"  />      隐藏输入框

　　<input type="file"  />        文件选择框

　　<input type='email' />      可对内容检查是否符合Email格式的字符串

　　 属性说明:

• name：表单提交时的“键”，注意和id的区别
• value：表单提交时对应项的值
  • type="button", "reset", "submit"时，为按钮上显示的文本年内容
  • type="text","password","hidden"时，为输入框的初始值
  • type="checkbox", "radio", "file"，为输入相关联的值
• checked：radio和checkbox默认被选中的项
• readonly：text和password设置只读
• disabled：全部input均适用
• placeholder：  占位符，效果是input框里面有浅色的没法选中的字符

11  select标签　

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

　　属性说明：

• multiple：布尔属性，设置后为多选，不然默认单选
• disabled：禁用
• selected：默认选中该项
• value：定义提交时的选项值,值由选定option值决定

12 label标签

　　定义：<label> 标签为 input 元素定义标注（标记）。

　　

　　

说明：

1. label 元素不会向用户呈现任何特殊效果。
2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">

  <label for="username">

　　　　<input type="text" id="username" name="username">用户名

  </label>
  

</form>

13 textarea 多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

属性说明：

• name：名称
• rows：行数
• cols：列数
• disabled：禁用