python之路-前端相关

最新推荐文章于 2024-08-09 04:13:48 发布

韩子凡

最新推荐文章于 2024-08-09 04:13:48 发布

阅读量1.1k

点赞数 2

分类专栏： python

本文链接：https://blog.csdn.net/hanshengzhao/article/details/50583722

版权

python 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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>

普通文本输入
<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
简单的装饰

<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 好像没此限制。