Python3学习之路~14 html基础
一 HTML本质
我们把html比作一个赤裸裸的人的话,css就是给这个人穿上华丽的衣服,js就是让这个人想怎么动就怎么动。
WEB框架本质:对于所有的web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端。
一段socket服务端代码:
#Author:Zheng Na import socket def handle_request(client): buf = client.recv(1024) client.send(b"HTTP/1.1 200 ok \r\n\r\n") client.send(b"Hello Seven") def main(): sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM) sock.bind(("localhost",8000)) sock.listen(5) while True: connection,address = sock.accept() handle_request(connection) connection.close() if __name__ == '__main__': main() #启动后在浏览器输入localhost:8000就可看消息:Hello Seven #WEB框架本质:对于所有的web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端。 #所有的web服务器本质上都是以上这20行代码
代码运行后在浏览器输入localhost:8000就可看消息:Hello Seven。所有的web服务器本质上都是以上这20行代码。
我们修改一下以上代码,给返回的数据修饰一下。
将client.send(b"Hello Seven")
改为client.send(b"<h1 style='background-color:red'>Hello Seven</h1>")
此时浏览器端返回如下图所示:
由上我们得知:
1.客户端跟服务器端交互的时候,服务器端返回的永远都是赤裸裸的字符串;
2.而服务端返回的字符串中如果恰好有浏览器认识的格式的话,浏览器就可以将其解析出来,使数据以各种效果在页面上显示。
所以,HTML本质上就是一套规则,一套浏览器认识的规则。
接下来,为了方便,我们可以将服务器端发送的包含HTML规则的数据放在一个html文件中。
但是,如果一个浏览器有成千上万个网页,那我们岂不是要写成千上万个HTML?太麻烦了。
所以,我们可以想办法写一个HTML模板,每次发送数据时都可以套用同一个模板,这样就方便多了。
比如下面代码:
#Author:Zheng Na import socket def handle_request(client): buf = client.recv(1024) client.send(b"HTTP/1.1 200 ok \r\n\r\n") f = open('index.html','r') data = f.read() f.close() client.send(bytes(data,encoding='UTF-8')) def main(): sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM) sock.bind(("localhost",8000)) sock.listen(5) while True: connection,address = sock.accept() handle_request(connection) connection.close() if __name__ == '__main__': main()
<h1 style='background-color:red'>Hello Seven</h1>
因此,作为开发者,需要做的就是:
1.学习HTML规则
2.开发后台程序
3.写HTML文件(充当模板的作用)
4.数据库获取数据,然后替换到HTML文件的指定位置(web框架)
其实,当我们学习HTML时,如果想要查看显示效果,不需要提前写一个服务端代码这么麻烦。
以下2种方法均可以简单地进行本地测试:
1.找到html文件路径,直接浏览器打开
2.pycharm打开测试,如下图所示
二 HTML简介
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
1.<!DOCTYPE html>:doctype对应关系,指遵循一套统一的HTML规范。
2.标签:标签内部可以写属性。一个页面只能有一个html标签,一个head标签,一个body标签。
3.注释:<!-- xxx --> 在pycharm中按住ctrl+?可自动注释或者释放本行。
4.标签分类:自闭合标签(非常少)、主动闭合标签(pycharm可以帮你自动补全)。
5.自闭合标签:后面可以有/也可以没有/。比如<br>与<br />、<meta>与<meta />是一样的。但是推荐后面写/。
6.标签不区分大小写。
7.所有标签分为:
块级标签:H系列、P标签、div标签(白板)等。
行内标签:span(白板)等。
8.标签之间可以互相嵌套。
9.标签存在的意义:定位,方便css操作、js操作。
10.chorme审查元素的使用:1.定位 2.查看样式。
三 HTML的head内标签
1.meta(metadata information)标签:提供有关页面的元信息。自闭合。
功能:页面编码(告诉浏览器是什么编码)、刷新和跳转、关键字、描述、IE兼容(X-UA-Compatible)等。
X-UA-Compatible:IE6采用的是微软内部标准,与行业标准不一样,导致很多网站在其他浏览器运行正常,但是一到了IE6就不行了。但是当时IE6有很大的客户群,导致写前端的人既要兼容遵循行业标准的浏览器,又要兼容IE6,非常痛苦。后来微软出了IE8,IE8就厉害了,既可以遵循内部标准,又可以遵循行业标准。那么问题又来啦,IE浏览器没那么智能,可以区分用哪个模式打开比较好,而且现在所有的网站都放弃了兼容IE6,因此就在代码中加入这个设置,使IE8主动以行业标准的模式进行渲染。
<!--1.页面编码(告诉浏览器是什么编码)--> <meta charset="UTF-8"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--2.刷新:每30秒刷新一次--> <meta http-equiv="Refresh" content="30"> <!--3.跳转:5秒后跳转到百度首页--> <meta http-equiv="Refresh" content="5;Url=http://www.baidu.com"> <!--4.关键字--> <meta name="keywords" content="测试,IT,software"> <!--5.描述--> <meta name="description" content="本页面主要介绍了..."> <!--6.IE兼容--> <meta http-equiv="X-UA-Compatible" content="IE9;IE8">
2.title标签:网页标题。
<title>Title Name</title>
3.link和style标签:这2个标签一般都是结合css使用,很重要,讲css时再具体说吧。
<link rel="short_icon" href="image/favicon.ico"> <style></style>
四 HTML的body内标签
1.特殊符号。更多
不断行的空白 < < > >
2.p标签:段落(段落和段落之间有间距)
<p>段落1</p> <p>段落2</p> <p>段落3</p>
3.br标签:换行
<p>换行<br/>换行</p>
4.h系列:标题(加大加粗)
<h1>标题1最大</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6最小</h6>
5.span标签:行内标签,白板。既然它是一个白板,那我们为什么要学它呢?是为了学css的时候,在一块白板上面我们可以任意画来画去。
<span>白板不换行</span> <span>白板不换行</span>
6.div标签:块级标签,白板,用的最多。通过div+css可以构造出几乎所有的标签。
<div>白板换行</div> <div>白板换行</div>
7.input系列:
input type="text" - name属性,value属性(默认值)
input type="password" - name属性,value属性(默认值)
input type="button" - value="登录",按钮
input type="submit" - value="提交",提交按钮,结合form表单
input type="radio" - 单选框,value属性,name属性(name相同则互斥),checked="checked"(默认被选中)
input type="checkbox" - 复选框,value属性,name属性(批量获取数据),checked="checked"(默认被选中)
input type="file" - 依赖form表单的一个属性enctype="multipart/form-data"(意思是把文件一点一点的删除到服务器)才能上传文件
input type="reset" - 重置
<!--1.单行文本输入、密码、按钮、提交--> <form> <input type="text" name="name" value="默认值"/> <input type="password" name="psd"/> <input type="button" value="登录1"/> <input type="submit" value="登录2"/> </form> <!--2.单选框--> <form> <div> <p>请选择性别:</p> 男:<input type="radio" name="gender" value="0" checked="checked"/> 女:<input type="radio" name="gender" value="1"/> </div> <input type="submit" value="提交"/> </form> <!--3.多选框--> <form> <div> <p>请选择爱好:</p> 篮球:<input type="checkbox" name="favor" value="1" checked="checked"/> 足球:<input type="checkbox" name="favor" value="2"/> 台球:<input type="checkbox" name="favor" value="3"/> 网球:<input type="checkbox" name="favor" value="4"/> </div> <input type="submit" value="提交"/> </form> <!--4.上传文件--> <form enctype="multipart/form-data"> <div> <p>上传文件:</p> <input type="file" name="fname"/> </div> <input type="submit" value="提交"/> </form> <!--5.重置--> <form> <div> <input type="text" name="name" value="默认值"/> <input type="password" name="psd"/> </div> <input type="reset" value="重置"/> </form>
8.textarea标签:多行文本输入,默认值在标签中间,name属性用于后台获取数据。
<form> <div> <p>多行文本输入:</p> <textarea name="myresult">默认值</textarea> </div> <input type="submit" value="提交"/> </form>
9.select标签:name属性,内部option标签(value属性)提交到后台,size设置显示多少,multiple设置多选。
<form> <div> <p>select标签:</p> <select name="city1"> <option value="1" selected="selected">上海</option> <option value="2">北京</option> <option value="3">广州</option> </select> <select name="city2" size="10"> <option value="1" selected="selected">上海</option> <option value="2">北京</option> <option value="3">广州</option> </select> <select name="city3" size="10" multiple="multiple"> <option value="1" selected="selected">上海</option> <option value="2">北京</option> <option value="3">广州</option> </select> </select> <select name="city4"> <optgroup label="山东省"> <option value="1">济南</option> <option value="2">青岛</option> </optgroup> <optgroup label="河北省"> <option value="1">石家庄</option> <option value="2">邯郸</option> </optgroup> </select> </div> <input type="submit" value="提交"/> </form>
注意:可以把数据提交到后台的标签:input、textarea和select标签。
仅仅将input标签的type属性改为submit是不能实现把内容提交到后台的,要想把内容提交到后台必须加上form标签。此时点击submit按钮会将表单内容(input、textarea和select标签内容)全部提交给后台。
表单提交方式默认为get,get方式会将内容拼接到URL后面发送给后台,如下图所示;
如果把提交方式改为post(<form method="post"></form>),就会直接把内容发送到后台而不会将其拼接到URL。
10.a标签:
功能1:跳转,href="www.baidu.com" target="_blank"(新窗口打开)
功能2:锚,href="#某个标签的ID",标签的ID不允许重复
<!--1.跳转--> <a href="www.baidu.com">百度</a> <a href="www.baidu.com" target="_blank">百度</a> <!--2.锚--> <a href="#i1">第1章</a> <a href="#i2">第2章</a> <a href="#i3">第3章</a> <a href="#i4">第4章</a> <div id="i1" style="height:600px;">第1章的内容</div> <div id="i2" style="height:600px;">第2章的内容</div> <div id="i3" style="height:600px;">第3章的内容</div> <div id="i4" style="height:600px;">第4章的内容</div>
11.img标签:src(显示图片),title(鼠标放在图片时上显示),alt(图片无法加载时显示)属性
<img src="1.jpg"> <img src="1.jp" title="这是一个机器猫" style="height: 200px;width: 200px;" alt="机器猫"> <a href="http://www.baidu.com"> <img src="1.jpg" style="height: 200px;width: 200px;"> </a>
12.列表(知道即可,用的不多):ul + li、ol + li、dl + dt&dd
<!--列表1:每行之前显示黑点--> <ul> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> </ul> <!--列表2:每行之前显示序号--> <ol> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> </ol> <!--列表3:有标题及缩进--> <dl> <dt>aaaa</dt> <dd>bbbb</dd> <dd>bbbb</dd> <dd>bbbb</dd> </dl> <dl> <dt>aaaa</dt> <dd>bbbb</dd> <dd>bbbb</dd> <dd>bbbb</dd> </dl>
13.表格:table thead tr th tbody tr td
合并单元格:colspan = '' 、rowspan = ''
<!--1.不规范的写法--> <table border="1"> <tr> <td>主机</td> <td>端口</td> <td>操作</td> </tr> <tr> <td>1.1.1.1</td> <td>80</td> <td>修改</td> </tr> <tr> <td>1.1.1.2</td> <td>80</td> <td> <a href="index.html">查看</a> </td> </tr> </table> <!--2.规范的写法--> <table border="1"> <thead> <tr> <th>主机</th> <th>端口</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1.1.1.1</td> <td>80</td> <td>修改</td> </tr> <tr> <td>1.1.1.2</td> <td>80</td> <td> <a href="index.html">查看</a> </td> </tr> </tbody> </table> <!--3.合并单元格--> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头1</th> <th>表头1</th> <th>表头</th> </tr> </thead> <tbody> <tr> <td colspan="3">1</td> <td>1</td> </tr> <tr> <td rowspan="2">1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table>
14.label标签:用于点击文件,使关联的标签获取光标
<!--通过label标签的for属性与input标签的id进行关联,使用户点击label时,input获取光标,进入编辑状态--> <label for="username">用户名:</label> <input id="username" type="text" name="user"/>
15.fieldset标签:框框框起来
<fieldset> <legend>登录</legend> <label for="username">用户名:</label> <input id="username" type="text" name="user"/> <br/> <label for="pwd">密码:</label> <input id="pwd" type="password" name="pwd"/> </fieldset>