Python开发之--前端 HTML基础

一:HTML介绍

HTML:超文本标记语言,标准通用标记语言下的一个应用。包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

标记语言: 标记(标签)构成的语言.

 

网页==HTML文档,由浏览器解析,用来展示的

静态网页:静态的资源,如xxx.html

动态网页:html代码是由某种开发语言根据用户请求动态生成的

平常我们就是先通过浏览器(也就是客户端)输入网址去访问页面,百度(即服务端)再把信息传递给我们,在打开的页面右键检查一下就会发现一大堆代码,其实这就是这个页面的HTML实现代码,

 我们来写一个服务端的py文件来看一下客户端和服务端的之间的信息传递,来看代码的实现

import socketdef main():sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)sock.bind(('localhost',8089))sock.listen(5)while True:connection, address = sock.accept()buf = connection.recv(1024)print(buf.decode("utf8"))connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))connection.close()if __name__ == '__main__':main()
服务端

我们在网页上输入端口号就可以看到我们在py文件里写的内容,而浏览器也会把内容发给我们

GET / HTTP/1.1
Host: 127.0.0.1:8089
Connection: keep-alive
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.22 Safari/537.36 SE 2.X MetaSr 1.0
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8
反馈内容

我们也可以在新建一个html文件把我们想要展示的内容写在里面,在py文件里面已打开文件的形式读取。

在后面我们还会介绍一下css和jss,以及他们之间的关系,这个在后面会有介绍。

二:HTML的入门学习

来看一下html的文件格式:

<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>hello yuan
<h1>yuan</h1> </body> </html>

下面是html的树结构:此处为借鉴别人的图片

 2.1什么是标签?

1 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
2 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
3 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
4 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
5 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

2.2标签的属性:

1 通常是以键值对形式出现的. 例如 name="alex"
2 属性只能出现在开始标签 或 自闭和标签中.
3 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
4 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

2.3具体有哪些标签?

2.31    head标签

meta

<meta>meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。1: name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。     
1<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
2<meta name="description" content="老男孩培训机构是由一个老的男孩创建的">2: http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,              content中的内容其实就是各个参数的变量值。   1<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号,分别在秒数的前面和网址的后面)通俗的来说就是做刷新用的
2<meta http-equiv="content-Type" charset=UTF8">3<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />   用来做兼容的

非meta标签

<title>oldboy</title><link rel="icon" href="http://www.jd.com/favicon.ico">         这个语句就是比如说京东就是前面的那个图标JD<link rel="stylesheet" href="css.css"><script src="hello.js"></script> 

2.32  body标签

2.321  基本标签(块级标签(block)和内敛标签()inline)通俗来讲块级标签就是单独占一部分除了他自己其他不能用,内敛就是一行可以与多个值,

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.<b> <strong>: 加粗标签.<strike>: 为文字加上一条中线.<em>: 文字变成斜体.<sup>和<sub>: 上角标 和 下角表.<br>:换行.<hr>:水平线<div><span>
基本标签

注意下div标签就是什么都不做,即它的内容以及格式不会变化,因为后面我们会大量使用一个标签,我们不希望内容改变,所以呢每一个标签都有自己得一个功能。

块级标签:<p><h1><table><ol><ul><form><div>

内联标签:<a><input><img><sub><sup><textarea><span>

所有标签通分为块级标签和内敛标签

block(块)元素的特点① 总是在新行上开始;
② 高度,行高以及外边距和内边距都可控制;
③ 宽度缺省是它的容器的100%,除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素inline元素的特点① 和其他元素都在一行上;
② 高,行高及外边距和内边距不可改变;
③ 宽度就是它的文字或图片的宽度,不可改变
④ 内联元素只能容纳文本或者其他内联元素对行内元素,需要注意如下 
设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。特殊字符&lt; &gt;&quot;&copy;&reg;

2.33  图形标签(img)

src: 要显示图片的路径.alt: 图片没有加载成功时的提示.title: 鼠标悬浮时的提示信息.width: 图片的宽height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
图形标签

2.34  超链接标签   锚标签  <a>

href:要连接的资源路径 格式如下: href="http://www.baidu.com" target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.name: 定义一个页面的书签.用于跳转 href : #id.(锚)
超链接标签

2.35  列表标签

<ul>: 无序列表<ol>: 有序列表<li>:列表中的每一项.<dl>  定义列表<dt> 列表标题<dd> 列表项
列表标签

2.36  表格标签<table>

border: 表格边框.cellpadding: 内边距cellspacing: 外边距.width: 像素 百分比.(最好通过css来设置长宽)<tr>: table row<th>: table head cell<td>: table data cellrowspan:  单元格竖跨多少行colspan:  单元格横跨多少列(即合并单元格)<th>: table header <tbody>(不常用): 为表格进行分区.
表格标签

2.37  表单标签<form>

表单用于向服务器传输数据。

      表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

      表单还可以包含textarea、select、fieldset和 label 元素。

2.371  表单属性:

HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,比如https://www.sogou.com/webmethod: 表单的提交方式 post/get 默认取值 就是 get(信封)get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.get/post是常见的两种请求方式.

2.372  表单元素

 <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 type="button", "reset", "submit" - 定义按钮上的显示的文本2 type="text", "password", "hidden" - 定义输入字段的初始值3 type="checkbox", "radio", "image" - 定义与输入相关联的值  checked:  radio 和 checkbox 默认被选中4 readonly: 只读. text 和 password5 disabled: 对所用input都好使.
表单元素

上传文件:

def index(request):print request.POSTprint request.GETprint request.FILESfor item in request.FILES:fileObj = request.FILES.get(item)f = open(fileObj.name, 'wb')iter_file = fileObj.chunks()for line in iter_file:f.write(line)f.close()return HttpResponse('ok')

2.38    <select> 下拉选标签属性

name:表单提交项的键.size:选项个数multiple:multiple <option> 下拉选中的每一项 属性:value:表单提交项的值.   selected: selected下拉选默认被选中<optgroup>为每一项加上分组
View Code

2.39    <textarea> 文本域    

1 name:    表单提交项的键.
2 
3 cols:    文本域默认有多少列
4 
5 rows:    文本域默认有多少行
<label>    1  <label for="www">姓名</label>
2  <input id="www" type="text"><fieldset>1  <fieldset>
2    <legend>登录吧</legend>
3   <input type="text">
4  </fieldset>

 

转载于:https://www.cnblogs.com/mars527/p/6026730.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/429866.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

给与用户建立dblink的权限_网络安全 之 NTFS安全权限

NTFS安全权限一、NTFS权限概述1、通过设置NTFS权限&#xff0c;实现不同的用户访问不同的权限2、分配了正确的访问权限后&#xff0c;用户才能访问其资源3、设置权限防止资源被篡改、删除二、文件系统概述 文件系统即在外部存储设备上组织文件的方法常用的文件系统&#xff1a;…

TCP 连接中的TIME_WAIT

原文&#xff1a;http://blog.csdn.net/wangpengqi/article/details/17245349 这就有个细节&#xff0c;一次http请求&#xff0c;谁会先断开TCP连接&#xff1f;什么情况下客户端先断&#xff0c;什么情况下服务端先断&#xff1f; 百度后&#xff0c;找到原因&#xff0c;主要…

丁丁打折网卷能用吗_微信群控还能用吗?现在什么群控还能使用吗?

微信群控系统还能用吗&#xff1f;为什么现在微信群控系统越来越被限制了呢&#xff1f;其实&#xff0c;微信群控我想在生活中占据着很大的位置&#xff01;因为微信这么多的使用&#xff0c;现在微信使用人数都是几十亿了&#xff0c;所以很多人看重微信群控系统的市场&#…

错题整理

1.JAVA语言的下面几种数组复制方法中&#xff0c;哪个效率最高&#xff1f; A for循环逐一复制 B System.arraycopy C System.copyof D 使用clone方法 答案&#xff1a;B A、for循环的话&#xff0c;很灵活&#xff0c;但是代码不够简洁. for循环为什么慢&#xff0c;java中所…

xpath中两个冒号_爬虫学习(5)—XPath

之前我们写了一个简单的爬虫&#xff0c;在提取页面信息时我们使用正则表达式来匹配内容&#xff0c;但是正则表达式的书写比较繁琐&#xff0c;而且一旦错误就可能导致匹配失败。对于网页的节点来说&#xff0c;它可以定义id&#xff0c;class或其他的属性&#xff0c;而且节点…

Linux压缩与解压常用命令

欢迎和大家交流技术相关问题&#xff1a; 邮箱: jiangxinnju163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://github.com/jiangxincode 知乎地址: https://www.zhihu.com/people/jiangxinnju tar的相关参数-c: 建立压缩档案-x&#xff1a;解压-t&…

mysql 预留一个自定义字段_MySQL 按指定字段自定义列表排序 | DevOps

问题描述大家都知道, MySQL 中按某字段升序排列的 SQL 为 (以 id 为例, 下同):SELECT * FROM MyTableWHERE id IN (1, 7, 3, 5)ORDER BY id ASC降序排列的 SQL 为:SELECT * FROM MyTableWHERE id IN (1, 7, 3, 5)ORDER BY id DESC有时以上排序并不能满足我们的需求. 例如, 我们…

canny算法的实现(android加载图片,数组写入文件换行)

Canny边缘检测首先要对图像进行高斯去噪&#xff0c;前面讲到了高斯去噪处理&#xff0c;这里从对图像灰度进行微分运算讲起吧。微分运算常用的方法是利用模板算子&#xff0c;把模板中心对应到图像的每一个像素位置&#xff0c;然后按照模板对应的公式对中心像素和它周围的像素…

python程序中想使用正则表达式_python中正则表达式的使用方法

本文主要关于python的正则表达式的符号与方法。findall: 找寻所有匹配&#xff0c;返回所有组合的列表search: 找寻第一个匹配并返回sub: 替换符合规律的内容&#xff0c;并返回替换后的内容.&#xff1a;匹配除了换行符以外的任意字符a xy123b re.findall(x...,a)print(b)# …

jQ实现JSON.stringify(obj)方法

jQstringify是使用jQuery实现的JSON.stringify(obj)方法代码如下&#xff1a;<script type"text/javascript" src"http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>function jQstringify( obj ) {var arr [];$.each(…

解决问题的反馈机制_谈谈HBase中的Nonce机制

最近在读hbase源码关于rpc的一些实现细节&#xff0c;想正好趁此机会和大家分享一下我理解到的hbase关于Nonce机制的实现。Nonce机制的来源Nonce这个词由来已久&#xff0c;且在各个领域都会有相对应的名词解释。对于HBase来说&#xff0c;由于网络环境的复杂性&#xff0c;在客…

【VirtualBox】VirtualBox的桥接网络模式,为啥网络不稳定?

网桥模式访问外网非常慢&#xff0c;经常卡死&#xff0c;ping时断时续 七搞八搞&#xff0c;反复重启了几次 TMD 就好了&#xff0c;也不知道什么情况&#xff0c;VirtualBox还是不太好使啊。。。。。 网桥模式 设置 如下&#xff1a; 参考资料&#xff1a; http://blog.csdn…

白盒基本路径发测试实验报告_软件生命周期、白盒测试、黑盒测试

继上一讲&#xff1a;隅巳毕月&#xff1a;达摩克里斯之——排序与查找技术​zhuanlan.zhihu.com我们今天来讲一下软件周期与两种软件测试方法软件开发应遵循一个软件的生命周期&#xff0c;通常把软件产品从提出、实现、使用、维护到停止使用、退役的过程称为软件生命周期。软…

Windows7睡眠后自动唤醒

笔者的电脑&#xff08;Windows7 64位旗舰版&#xff09;睡眠后&#xff0c;隔段时间后会自动唤醒。经两项配置后&#xff0c;解决了该问题。 1 禁用唤醒定时器 控制面板里进入"电源选项""更改计划设置"界面&#xff0c;如下图所示 单击上图的"更改高…

bootstrap 两个轮播图冲突_为什么使用bootstrap在一个页面同时做两个轮播效果时,只有第一个有效??...

我们都知道使用bootstrap做轮播效果非常快&#xff0c;但是有时候一个页面会需要两个轮播&#xff1b;但这个时候再次使用bootstrap做轮播效果时就会失效&#xff1b;原因在于bootstrap的Carousel问题&#xff0c;只要修改一下id&#xff0c;就好了~~这是第一个轮播&#xff1a…

Ajax的用法

1 Ajax是什么 1.1 Asynchronous JavaScript and XML&#xff08;异步的javascript和xml&#xff09; 实质为&#xff1a;使用浏览器内置的一个对象&#xff08;XmlHttpRequest&#xff09;向服务器发送请求&#xff0c;服务器返回xml数据或文本数据给浏览器&#xff0c;然后在浏…

mysql降级_mysql8降级到mysql5的方法介绍

本篇文章给大家带来的内容是关于mysql8降级到mysql5的方法介绍&#xff0c;有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对你有所帮助。最近在研究liferay的使用。liferay可以连接mysql数据库。电脑中装的mysql的最新版本是mysql8。于是开始按照life…

Node.js server使用

一、创建项目 #创建项目目录 cd /data mkdir webroot cd webroot#初始化git git init vim .gitignore 输入&#xff1a; node_modules/ 保存: :wq#初始化npm,生成package.json npm init#安装express npm install -D express#创建入口文件 vim app.js输入&#xff1a; var expr…

ubuntu安装jdk_mysql_Ubuntu server 安装及jdk+mysql安装教程

Ubuntu server 安装教程1.查找及下载Ubuntu镜像文件可以在以下页面下载想要的版本,我这里选择19.04 server版的iso镜像文件:http://mirrors.163.com/ubuntu-releases/19.04/2.腾出一个空U盘&#xff0c;4G左右就行&#xff0c;iso文件本身就有750M左右,制作安装盘1).使用UltraI…

模仿Linux内核kfifo实现的循环缓存

想实现个循环缓冲区&#xff08;Circular Buffer&#xff09;&#xff0c;搜了些资料多数是基于循环队列的实现方式。使用一个变量存放缓冲区中的数据长度或者空出来一个空间来判断缓冲区是否满了。偶然间看到分析Linux内核的循环缓冲队列kfifo的实现&#xff0c;确实极其巧妙。…