前端学习之HTML
HTML（htyper text markup language）即超文本标记语言。超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。标记语言: 标记（标签）构成的语言。
一、HTML文档结构
HTML文件固定结构如下
<!DOCTYPE HTML> <html> <head>...</head> <body>...</body> </html>
首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前。如果页面添加了<!DOCTYPE html>，那么就等同于开启了标准模式，浏览器就得老老实实的按照W3C的
标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
1、<html></html> 称为根标签，所有的网页标签都在<html></html>中。
2、<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签
3、在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。
二、标签介绍
1、什么是标签
1、是由一对尖括号包裹的单词构成 例如: <html> 所有标签中的单词不可能以数字开头. 2、标签不区分大小写.<html> 和 <HTML>. 推荐使用小写. 3、标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体. 4、有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img /> 5、标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>
2、标签的属性
1、通常是以键值对形式出现的. 例如 name="aaaa" 2、属性只能出现在开始标签 或 自闭和标签中 3、属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="aaaa" 4、如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
3、标签分类
标签可以分为块级标签和内联标签
块级标签：顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的<div>、<p>、<ul>默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的，float也具有此功能。
block（块）元素的特点：
1、总是在新行上开始； 2、宽度缺省是它的容器的100%，除非设定一个宽度。 3、它可以容纳内联元素和其他块元素
4、占据整行，自带换行效果。除了div以外，一般块级标签都会有内外边距，宽度和高度
常见的块级标签：<h1-h6></h1-h6>，<p></p>，<div></div>
内联标签：通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。内联元素的显示特点就是像文本一样的显示，不会独自占据一个行。当然块级元素也能变成内联元素，那就是通过css的display:inline;和float来实现。
inline元素的特点：
1、和其他元素都在一行上； 2、宽度就是它的文字或图片的宽度，不可改变 3、内联元素只能容纳文本或者其他内联元素
常见的内联标签：<span></span>，<a></a>，<img/>
注意：在内联标签中，有一个标签，img标签，是有边距和宽度和高度的，叫行内块级标签
三、基本标签
1、head标签
head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>
1、<title>：指定整个网页的标题，在浏览器最上方显示。 2、<meta>：提供有关页面的基本信息 3、<link>：定义文档与外部资源的关系。 4、<style>:定义内部样式表与网页的关系
meta标签介绍
元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
（1）http-equiv属性
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址，注意分号--> <meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge">
（2）name属性
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。
<meta name="Description" content="网易是中国领先的互联网技术公司，.........................................。" />
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
非 meta标签
以下标签都属于非meta标签
<title>oldboy</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
2、body标签
想要在网页上展示出来的内容一定要放在body标签中。
（1）基本标签
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 <div><span>
（2）图形标签: <img>
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片
语法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息，鼠标放在上面会显示" />
可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度
<img src="1.jpg" alt="图片加载失败时显示的内容" title = "提示信息，鼠标放在上面会显示" style="width:500px;height:500px" />
（3）超链接标签(锚标签)<a>
超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像
href:要连接的资源路径 格式如下: href="http://www.baidu.com" target: 打开目标方式 。 _blank ：新建标签窗口页，设置此属性，点击锚文本后对应新建标签网页窗口卡打开对应地址 。 _parent：父级打开网页，此属性可以理解为本页网页从新载入锚文本的网页，针对html框架iframe网页中，整个网页将重新载入打开目标网址地址 name: 定义一个页面的书签. 用于跳转 href : #id.（锚）
例子：
<a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
<a href="a.zip">下载包</a>
锚跳转例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--用css设置对应div标签样式--> <style> #div1{ height: 500px; background-color: #cc3399; } #div2{ height: 500px; background-color: yellow; } #div3{ height: 500px; background-color:blue; } </style> </head> <body> <div id="div_top">开始</div> <!--点第一章后会直接跳转到id='div1'的div标签的内容处--> <a href="#div1">第一章</a> <a href="#div2">第二章</a> <a href="#div3">第三章</a> <div id="div1">第一章</div> <!--点返回后会直接跳转到id='div_top'的div标签的内容处--> <a href="#div_top">返回</a> <div id="div2">第二章</div> <a href="#div_top">返回</a> <div id="div3">第三章</div> <a href="#div_top">返回</a> <div href="#div_top">test</div> </body> </html>
（4）列表标签ul，ol
网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用，每条li表示列表的内容。
<li>标签定义和用法：
<li> 标签定义列表项目
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中
<ol>:ordered listsde的缩写 有序列表。
有序列表，编号列表标记。其功能是将文字段落向内缩进，并在段落的每个项目前面加上1，2，3 有顺序的数字。<ol>标记必须搭配<li>标记使用。
ol标签的属性：
type：列表标识的类型 1：数字 a：小写字母 A：大写字母 i：小写罗马字符 I：大写罗马字符 start：规定有序列表的起始值 默认为1
ol标签示例
<ol type="1" start="2"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> 显示： 2.咖啡 3.牛奶 4.茶
<ul>:unordered lists的缩写 无序列表
无序列表，其功能是将文字段落向内缩进，并在段落前面加上圆形或空心圆形或方块等项目符号，以达到醒目的效果。<ul>必须搭配<li>标记使用。
ul标签的属性：
type：列表标识的类型
disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识
ul标签示例
<ul type="circle"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ul>
显示：
<dl> 自定义列表
列表项包含在<dt></dt>标签对中，<dd></dd>与定义项对应的每个定义，自定义列表以<dl></dl>定义，项目前有符号缩进
dl标签示例
<dl>
<dt>第一章</dt>
<dd>111</dd>
<dd>222</dd>
<dd>333</dd>
<dt>第二章</dt>
<dd>444</dd>
<dd>555</dd>
<dd>666</dd>
</dl>
显示
（5）表格标签: <table>
表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. width: 像素 百分比.（最好通过css来设置长宽） <tr>: table row <th>: table head cell <td>: table data cell rowspan: 单元格竖跨多少行 合并行(竖着合并) colspan: 单元格横跨多少列（即合并单元格） 合并列(横着合并) <th>: table header <tbody>(不常用): 为表格进行分区.
示例
<div class="table"> <table border="1" cellspacing="0"> <!--表格头--> <thead> <!--表格行--> <tr> <!--表格列，【注意】这里使用的是th--> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!--表格主体--> <tbody> <!--表格行--> <tr> <td rowspan="3">上午</td> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> <tr> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> <tr> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> <tr> <td rowspan ="2">下午</td> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> <tr> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <td colspan="6">课程表</td> </tr> </tfoot> </table> </div>
（6）表单标签<form>
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）
表单用于向服务器传输数据。
语法：
<form>允许出现表单控件</form>
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label 元素。
1、表单属性
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理
method: 表单的提交方式 post/get 默认取值 就是 get
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制
<form action="/host/add/" method="post"> </form>
2、表单元素
语法：
<input type="text"（input元素类型）name="fname"（input元素名称） value="text"（input元素的值）/>
<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 属性的用法也不同：
|
1
2
3
4
5
|
type="button", "reset", "submit" - 定义按钮上的显示的文本type="text", "password", "hidden" - 定义输入字段的初始值type="checkbox", "radio", "image" - 定义与输入相关联的值 |
checked: radio 和 checkbox 默认被选中 readonly: 只读. text 和 password disabled: 对所用input都好使.
常用的例子：
文本框-语法 <p>姓名： <input type="text"(文本框) name="userName"(文本框名称) value="用户名"(文本框初始值一般不写) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) /> </p> 密码框-语法 <p>密码：<input type="password "(密码框) name="pass"(密码框的名称) size="20"(密码框的长度) /></p> 单选按钮-语法 <p><input name="gen" type="radio"(单选按钮框) value="男"(值) checked(单选按钮选中状态) />男</p> <p><input name="gen" type="radio" value="女" />女</p> 复选框-语法 <p><input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动</p> <p><input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天</p> <p><input type="checkbox" name="interest" value="play"/>玩游戏</p> 按钮-语法 <input type="reset" (重置按钮) name="butReset" value="reset按钮"(按钮上显示的文字)> <input type="submit"(提交按钮) name="butSubmit" value="submit按钮"> <input type="button"(普通按钮) name="butButton" value="button按钮"/>
多行文本域-语法
<textarea(多行文本域) name="showText" cols="x"(显示的列数) rows="y"(显示的行数)>文本内容 </textarea >
<select> 下拉选标签属性
name:表单提交项的键. size：选项个数 multiple：multiple multiple设置以后实现多选效果，ctrl+鼠标左键进行多选 <option> 下拉选中的每一项 属性： value:表单提交项的值. selected: selected下拉选默认被选中 <optgroup>为每一项加上分组
示例
<!--选择框-->
<!--滚动列表 multiple设置以后实现多选效果，ctrl+鼠标左键进行多选-->
<p>籍贯：
<select name="sel" size="3" multiple>
<option value="广州" selected>广州</option>
<optgroup label="深圳">
<option value="罗湖区">罗湖区</option>
<option value="福田区">福田区</option>
</optgroup>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
</p>
<!--下拉列表-->
<p>意向工作城市：
<select name="sel">
<option value="深圳">深圳</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected>广州</option>
</select>
</p>
<label>
在HTML中<label>标签不会向用户展示任何特殊内容,它的作用是把自己与其他标签"绑定"起来，也可以说是与其他元素关联到一起。
<label>与其他元素关联的方式有两种：
1、显式联系：显式联系通过<label>的 "for" 属性和目标标签的 ID 来完成 2、隐式联系：隐式联系可通过标签嵌套完成
显示联系例子：
<label for="www">姓名</label> <input id="www" type="text">
四、和Django进行数据交互
django的使用就不多介绍了，通过django相关命令创建project，然后创建app，编写url以及views.py
url设置 url(r'^learn/$',learn) views.py from django.http import HttpResponse from django.views.decorators import csrf import requests def learn(request): #if request.method == "POST": print(request.POST) return HttpResponse('ok')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://192.168.149.129:8080/learn/" method="post"> <p>姓名： <input type="text" name="username") size="30" maxlength="20" /> </p> <p>密码：<input type="password " name="pass") size="20" /></p> <p><input name="sex" type="radio" value="男" />男</p> <p><input name="sex" type="radio" value="女" />女</p> <p><input type="checkbox" name="hobby" value="sports"/>运动</p> <p><input type="checkbox" name="hobby" value="talk" />聊天</p> <p><input type="checkbox" name="hobby" value="play"/>玩游戏</p> <!--选择框--> <!--滚动列表 multiple设置以后实现多选效果，ctrl+鼠标左键进行多选--> <p>籍贯： <select name="jiguan" size="3" multiple> <option value="罗湖区">罗湖区</option> <option value="福田区">福田区</option> <option value="北京">北京</option> <option value="上海">上海</option> </select> </p> <!--下拉列表--> <p>意向工作城市： <select name="city"> <option value="深圳">深圳</option> <option value="北京">北京</option> <option value="上海">上海</option> </select> </p> <input type="reset" name="butReset" value="重置"> <input type="submit" name="butSubmit" value="提交"> </form> </body> </html>
打开html页面填入数据提交，django即可获取到用户输入的数据
通过django后端可以看到程序后端已经拿到用户输入的相关数据，然后根据业务逻辑代码即可进行相关数据处理
<QueryDict: {'username': ['admin'], 'pass': ['123456'], 'sex': ['男'], 'hobby': ['sports', 'play'], 'jiguan': ['北京'], 'city': ['上海'], 'butSubmit': ['提交']}>
文件上传
实现django获取用户上传的文件然后写入服务器上
相关代码
创建一个form表单，需要特别注意的是，在有文件上传的form表单中，method属性必须为post，而且必须指定它的enctype为"multipart/form-data"，表明不对字符进行编码。只有设置了enctype，这样当request方法是POST时，处理这个form的view中才能接受到request.FILES中的文件数据，可以通过request.FILES['file']来存取。如果不设置这个属性，request.FILES则为空。具体的代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://192.168.149.129:8080/learn/" method="post" enctype="multipart/form-data"> <p><input type="file" name="txt"></p> <input type="reset" name="butReset" value="重置"> <input type="submit" name="butSubmit" value="提交"> </form> </body> </html>
from django.shortcuts import render # Create your views here. from django.http import HttpResponse from django.views.decorators import csrf import json import requests import re import os def upload(request): #if request.method == "POST": print(request.POST) print(request.FILES) obj = request.FILES.get('txt',None) ## 获取上传的文件，如果没有文件，则默认为None print(obj) if not obj: return HttpResponse("no files for upload!") print(obj.name) f = open(os.path.join('file',obj.name), 'wb') for chunk in obj.chunks(): f.write(chunk) f.close() return HttpResponse('ok')
说明：
对于上传的文件需要通过request.FILES["txt"]或者request.FILES.get("txt", None)来访问，上传的文件是保存在FILES这个字典中的
obj.read()：从文件中读取整个上传的数据，这个方法只适合小文件；
obj.chunks()：返回一个上传文件的分块生成器，按块返回文件，通过在for循环中进行迭代，可以将大文件按块写入到服务器中；
obj.multiple_chunks()：这个方法根据myFile的大小，返回True或者False，当myFile文件大于2.5M(默认为2.5M，可以调整)时，该方法返回True，否则返回False，因此可以根据该方法来选择选用read方法读取还是采用chunks方法
obj.name:这是一个属性，不是方法，该属性得到上传的文件名，包括后缀,如：0711.txt
obj.size：这也是一个属性，该属性得到上传文件的大小
通过django后台可以看到用户上传文件相关信息
<QueryDict: {'butSubmit': ['提交']}>
<MultiValueDict: {'txt': [<InMemoryUploadedFile: 0711.txt (text/plain)>]}>
0711.txt
在服务上看，文件已经上传到相关目录
[root@ myops]# ll file/ total 4 -rw-r--r--. 1 root root 267 Jul 12 02:34 0711.txt
