前端学习之HTML
HTML（htyper text markup language）即超文本标记语言。超文本: 就是指页面内能够包含图片、连接，甚至音乐、程序等非文字元素。标记语言: 标记（标签）构成的语言。javascript
1、HTML文档结构
HTML文件固定结构以下css
<!DOCTYPE HTML> <html> <head>...</head> <body>...</body> </html>
首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签以前。若是页面添加了<!DOCTYPE html>，那么就等同于开启了标准模式，浏览器就得老老实实的按照W3C的html
标准解析渲染页面，这样一来，你的页面在全部的浏览器里显示的就都是一个样子了。java
一、<html></html> 称为根标签，全部的网页标签都在<html></html>中。python
二、<head></head> 标签用于定义文档的头部，它是全部头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签django
三、在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部份内容）最终会在浏览器中显示出来。编程
2、标签介绍
一、什么是标签
一、是由一对尖括号包裹的单词构成 例如: <html> 全部标签中的单词不可能以数字开头. 二、标签不区分大小写.<html> 和 <HTML>. 推荐使用小写. 三、标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 咱们叫作标签体. 四、有些标签功能比较简单.使用一个标签便可.这种标签叫作自闭和标签.例如: <br/> <hr/> <input /> <img /> 五、标签能够嵌套.可是不能交叉嵌套. <a><b></a></b>
二、标签的属性
一、一般是以键值对形式出现的. 例如 name="aaaa" 2、属性只能出如今开始标签 或 自闭和标签中 三、属性名字所有小写. *属性值必须使用双引号或单引号包裹 例如 name="aaaa" 四、若是属性值和属性名彻底同样.直接写属性名便可. 例如 readonly
三、标签分类
标签能够分为块级标签和内联标签json
块级标签：顾名思义就是以块显示的元素，高度宽度都是能够设置的。好比咱们经常使用的<div>、<p>、<ul>默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。固然非块级元素也能够经过css的display:block;将其更改为块级元素。此外还有个特殊的，float也具备此功能。后端
block（块）元素的特色：浏览器
1、老是在新行上开始； 二、宽度缺省是它的容器的100%，除非设定一个宽度。 三、它能够容纳内联元素和其余块元素
四、占据整行，自带换行效果。除了div之外，通常块级标签都会有内外边距，宽度和高度
常见的块级标签：<h1-h6></h1-h6>，<p></p>，<div></div>
内联标签：通俗点来讲就是文本的显示方式，与块级元素相反，内联元素的高度宽度都是不能够设置的，其宽度就是自身文字或者图片的宽度。咱们经常使用到的<a>、<span>、<em>都属于内联元素。内联元素的显示特色就是像文本同样的显示，不会独自占据一个行。固然块级元素也能变成内联元素，那就是经过css的display:inline;和float来实现。
inline元素的特色：
1、和其余元素都在一行上； 2、宽度就是它的文字或图片的宽度，不可改变 三、内联元素只能容纳文本或者其余内联元素
常见的内联标签：<span></span>，<a></a>，<img/>
注意：在内联标签中，有一个标签，img标签，是有边距和宽度和高度的，叫行内块级标签
3、基本标签
一、head标签
head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>
一、<title>：指定整个网页的标题，在浏览器最上方显示。 二、<meta>：提供有关页面的基本信息 三、<link>：定义文档与外部资源的关系。 四、<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>
二、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 元素。
一、表单属性
HTML 表单用于接收不一样类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的全部内容都应该在该标签中.
action: 表单提交到哪. 通常指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）做相应处理
method: 表单的提交方式 post/get 默认取值 就是 get
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制
<form action="/host/add/" method="post"> </form>
二、表单元素
语法：
<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>与其余元素关联的方式有两种：
一、显式联系：显式联系经过<label>的 "for" 属性和目标标签的 ID 来完成 二、隐式联系：隐式联系可经过标签嵌套完成
显示联系例子：
<label for="www">姓名</label> <input id="www" type="text">
4、和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
- 1. 前端学习之旅——HTML
- 2. 前端学习 之 HTML
- 3. 前端学习之html
- 4. 前端学习之HTML-1
- 5. 前端学习之html（一）
- 6. 前端学习之HTML
- 7. 前端学习之-Html
- 8. 前端学习之html Day01
- 9. 前端学习----HTML
- 10. web前端学习之HTML与CSS
- 更多相关文章...
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 适用于PHP初学者的学习线路和建议
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端学习之旅——HTML
- 2. 前端学习 之 HTML
- 3. 前端学习之html
- 4. 前端学习之HTML-1
- 5. 前端学习之html（一）
- 6. 前端学习之HTML
- 7. 前端学习之-Html
- 8. 前端学习之html Day01
- 9. 前端学习----HTML
- 10. web前端学习之HTML与CSS