python之路-前端相关
2016-01-25 23:07
791 查看
HTML
python 要做web展示的一些东西就必须要掌握前端的相关知识,HTML+CSS+javascript。之前最早接触html的时候还是用dreamwere编辑呢。
现在既然因为python而需要学习前端的相关知识,那么直接用pycharm就好了。
现在用pycharm新建一个html文件说起
<!DOCTYPE html> <!--告诉浏览器用什么样的html规范来解析html文档。推荐使用上述规范--> <!--html之间的文本描述网页--> <html lang="en"> <head> <!--提供有关页面的元信息,比如页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词--> <meta charset="UTF-8"> <meta http-equiv=”Refresh“ Content=”5; Url=http://www.7moor.com“ /> <meta name="keywords" content="呼叫中心,云客服" > <!--引入样式文件--> <link rel="stylesheet" type="text/css" href="test.css"> <link rel="shortcut icon" href="favicon.ico"> <!--引入js文件--> <script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script > <!-- title之间的是网页的标题--> <title>HTML学习</title> </head> <!--body之间的文本是可见的页面内容--> <body> <!--或者也可以把js直接写到html里面--> <script type="text/javascript">document.write("<h1>这是用js写的</h1>")</script> <button type="button" onclick="alert('测试')">点击测试</button> </body> </html>
标签
html的标签分为两大类:块级标签 行内标签它们最大的不同就是块级占了一整行,行内只占它内容的长度。
块级标签
常见的<h1></h1> <h2></h2>
等
还有<p>表示段落<br>表示换行
行内标签
a标签<a target="_blank" href="index.html">主页</a> target="_blank"表示在新页面打开
a标签除了作为跳转之外还可以作为锚点。比如常见的有每个页面有返回顶部这个功能。跳转到指定id的位置。
<div id="div1"> .... </div> <a href="#div1">返回div1</a>
其他常用
简单的下拉列表选择,如果再form表单里面,提交的时候就是select的name值。size值是显示的长度,缺省值是1。 <select name = "level" size="1"> <option value="level1">level1</option> <option value="level2">level2</option> </select>
简单的单选框,如果name值设置为一样那么就是单选,如果不设置就是复选框。 性别 <input type="radio" name = "gender" value="1"/>男 <input type="radio" name = "gender" value="2"/>女 <input type="radio" name = "gender" value="3"/>其他
input
input标签是比较重要的一个
简单的输入,和密码
普通文本输入 <input type="text"> 密码输入 <input type="password"> 普通按钮 <input type="button" value="button"> 提交按钮 <input type="submit" value="submit"> 添加文件按钮 <input type="file" value="file"> 文本框 <textarea style="width:500px;height: 200px;"></textarea> label,点击label可以定位到输入框中去 <label for="name">名称: <input id="name" type="text"> </label>
列表相关
以下为引用
1.ul是无序列表,也就是说没有排列限制可以随意加li; <ul> <li>可以随意放置</li> <li>可以随意放置</li> <li>可以随意放置</li> </ul> .可以随意放置 .可以随意放置 .可以随意放置 2.ol就序列表,会按照你写的li前后依次排列; <ol> <li>我是第一</li> <li>我是第二</li> <li>我是第三</li> </ol> 1.我是第一 2.我是第二 3.我是第三 3.dl是定义列表,会默认前后层级关系; <dl> <dt>我是头</dt> <dd>我是内容</dd> <dd>我是内容</dd> </dl> 我是头 --我是内容 --我是内容
table
<table width="700px" border="1px dotted red"> <thead> <th colspan="2">1</th> <!--<th>2</th>--> <th >3</th> </thead> <tr> <td>test1</td> <td>test2</td> <td>test3</td> </tr> </table>
1 | 3 | |
---|---|---|
test1 | test2 | test3 |
简单的装饰
<fieldset> <legend>登录</legend> <p>用户名:</p> <p>密码:</p> </fieldset>
form表单!!!!!!!!!!
<form></form>标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
action {URL}:一个URL地址;指定form表单向何处发送数据。 enctype {string}:规定在发送表单数据之前,如何对表单数据进行编码。 指定的值有:application/x-www-form-urlencoded :在发送前编码所有字符(默认为此方式); multipart/form-data :不对字符编码。使用包含文件上传控件的表单时,必须使用该值 method {get/post}:指定表单以何种方式发送到指定的页面。 指定的值有:get :from表单里所填的值,附加在action指定的URL后面,做为URL链接而传递。 post :from表单里所填的值,附加在HTML Headers上。
get
from表单里所填的值,附加在action指定的URL后面,做为URL链接而传递。变量提交的样式为:html元素的name属性=提交的值。多个变量,以 & 符号隔开。
post
from表单里所填的值,附加在HTML Headers上。两者的对比
①数据的查询:比如浏览论坛时,URL一般包含了分类、页码数、每页记录数等信息。 get 方式,能一目了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息,不方便进行检验查询条件。
②敏感数据的提交(安全性):对一项记录,进行更改、添加操作时,比如注册用户、更改用户资料等。get
方式附加在URL上,会泄露掉敏感的消息。 post 方式,能隐藏掉敏感的信息。
③大数据文本传递:get 虽然方便查询,但由于是附加在URL上,各浏览器对URL也有个长度限制。IE :2048字符。Chrome、FF
好像是 8182字符。post 好像没此限制。
相关文章推荐
- Python 6.1 错误处理
- 基于python的爬虫
- python numpy的使用
- Python分词统计
- Python遥感数据主成分分析
- python打印等腰三角形
- 让python在hadoop上跑起来
- python下文件的批量复制
- Python基本代码
- Python -- 装饰器
- python小白-day4迭代器和生成器
- 《笨办法学Python》 第23课手记
- 【python脚本收集】全角半角转换
- python,numpy matplotlib WIN7 64位 安装教程
- Cisco Syslog 处理
- 【Python】抓取拉勾网全国Python的招聘信息
- python调试
- python 条件判断与循环
- python数字图像处理(15):霍夫线变换
- python 文件操作