front end
Any user can deal directly and is the front-end interface
1) software development framework
c / s structure
b / s architecture: in essence is c / s architecture
2) browser, enter the URL to send a few things?
1. Enter the URL
2. towards the server sends a request
3. The server receives the request and query data back to the browser you want the browser
4. browser to get the data show page
3) HTTP protocol
Hypertext Transfer Protocol
client server when data exchange must follow the agreement
4) identification characteristics of electronic equipment, the transmission of information: binary ↓
1. Web-based transmission, only to follow the http protocol was easy to write generic parsing
2. file extension in the end to see who it? Just posters
The nature of web services
import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = conn.recv(8096) conn.send(b"HTTP/1.1 200 OK\r\n\r\n") conn.send(b"<h1>Hello world!</h1>") conn.close()
HTML Introduction
Wenben Chao Biaoji Yuyan Hypertext Markup Language, used for creating web pages
HTML is not a programming language! ! ! It uses tags to describe web pages.
Nature: the rules of the browser is recognized, in accordance with the rules of writing web, browser rendering web pages according to the rules;
For different browsers may have different interpretations of the same label. (Compatibility issues)
Web page file name extension: .html or .htm
Open html file:
Option 1: Locate the file selection browser opens
Embodiment 2: the automatic opening pycharm
1) Document Structure
<! DOCTYPE HTML > <-! Declared as HTML5 document, you must be the first line of an HTML document -> < HTML lang = "EN" > < head > <-! Head content stored in the user can not see , mainly to browsers and search engines -> < Meta charset = "UTF-8" > < title > the title </ title > </ head > < body > <-! users to see content in the body inside -> </ body > </ HTML >
2) label syntax:
<Tag attribute name = 1 "attribute value 1" Attribute 2 = "attribute value 2" ......> content portion </ tag name>
- <Html>, </ html> tag of the document is the beginning and end tags. Root element of the HTML page, the middle top of the document (head) and the body (body)
- <Head>, </ head> defines the beginning of the HTML document. It contains documents yuan (meta) data.
- <Title>, </ title> defines the page title is displayed in the browser title bar.
- <Body>, the text between the </ body> is visible page body content.
- Note: For Chinese web pages need to use <meta charset = "utf-8"> statement, otherwise it will be garbled.
- Some browsers set as the default encoding GBK, you need to set <meta charset = "gbk">.
- <! DOCTYPE> declaration is not an HTML tag; it is an indication about which web browser using the HTML version of the page be written instructions
3) a few very important properties:
- id: The unique ID defined tags, HTML document tree unique
- class: defining one or more class name for the html element (classname) (CSS style class name)
- style: the elements specified inline styles (CSS style)
Common HTML tags
<Head> </ head> tag used within
<Title> </ title> Page Title
<Style> </ style> css code written
<Script> </ script> js code write directly inside, can also be introduced by external code file src attribute js
<Link /> href by introducing external files css
<Meta /> define the original page information
<body></body>内常用标签
1）基本标签
<p>段落标签</p> <h1>标题1</h1> <!--最大号--> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--最小号--> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <!--换行--> <br> <!--水平线--><hr>
2）特殊字符
空格 & & < < > > ¥ ￥ © © 版权 ® ® 注册
3）常用标签 * * * * * *
<div></div> <!--用来定义一个块级元素，另起一行--> <span></span> <!--用来定义一个行内元素--> <p></p> <!--p标签：不能包含块级标签，也不能包含p标签--> <a href=""></a> <!--超链接标签--> <img src="" alt=""> <!--图片标签-->
4）列表标签
<ul type=""> <!--无序列表--> <li>a</li> </ul> <ol type=""> <!--有序列表--> <li>111</li> </ol> <dl> <!--标题列表--> <dt>标题</dt> <dd>内容</dd> </dl>
5）表格标签
固定就以下面的格式书写
<table>
<thead></thead>
<tbody></tbody>
</table>
tr 一个tr表示一行
rowspan 垂直方向合并
colspan 水平方向合并
border 调整列表的边框
cellspacing 调单元格与外边框之间的距离
cellpadding 调文本与单元格之间的距离
<table border="1" cellspacing="20" cellpadding="10"> <!--表单标签--> <thead> <tr> <!--一行--> <th>name</th> <th>age</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td colspan="2">json</td> <!--横向方向占两格--> <!--<td>18</td>--> <td rowspan="2">read</td> <!--竖直方向占两格--> </tr> <tr> <td>nick</td> <td>18 </td> <!--<td>run</td>--> </tr> </tbody> <tefooter></tefooter> </table>
6）form表单：前后端数据交互 * * * * * *
获取用户输入(手动输入/选择/默认值)，并将获取到的用户信息发送给后端
form表单中只有input的type类型为submit才会触发提交信息的动作
如果不想通过input标签来触发提交动作 那么可以直接写一个<button>button按钮</button>
input
通过控制type的类型从而实现不同的获取用户输入的标签样式
text 普通文本
password 密文
date 日历
radio 单选框
checkbox 多选框
file 获取文件
submit 触发提交数据的行为
button 普通的按钮
reset 重置form表单内容
select
选择框 默认是单选的 可以通过multiple参数将单选变为多选
一个option就是一个选项
textarea
获取用户大段文本值
form表单中几个重要的属性
action:用来控制数据到底提交给谁 写url来指定提交给谁
form表单默认是get请求 可以通过method属性修改提交方法
form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型
你可以将name属性当做字典的key 用户输入的当做字典的value 并且你可以手动设置value值
form表单发送文件 需要修改enctype属性的值
默认是urlencoded不支持传输文件
需要将其修改为multipart/form-data
GET请求与POST请求
get请求:获取想要的数据
post请求:提交数据
1、标签分类1
双标签：h1~h6、p、a
自闭和标签：img、br、hr
2、标签分类2
块儿级标签：div、 h1~h6、 p、 br、 hr
1.独占一行
2.块儿级标签：能够嵌套块儿级标签和行内标签
3.p标签虽然是块儿级标签，但是它不能嵌套任何的块儿级标签
4.块儿级标签能够设置长宽
行内标签：span、 img、a、i、 s 、b、 u
1.自身内容有多的就占多大
2.行内标签不能设置长宽
3、常用标签
所有的html标签都应该有一个id属性，用来唯一标识当前标签 为后续的DOM操作提供基础
也就意味着同一份html中标签的id不能重复，不写id属性也是可以的
a 标签：
可以通过href跳转到指定的网址
锚点功能:回到顶部
<a href="" id="a1">top</a>
<a href="#a1">bottom</a>
ps：target属性用来控制是否在当前页面跳转
默认是_self当前页
也可以指定成_blank新建页面跳转
img标签
src图片路径:即可以是网络上的图片地址也可以是本地的图片地址
alt当图片加载失败之后自动展示的提示信息
title鼠标悬停在图片上时显示的文本
图片调节长宽的时候只需要调节一个 另外一个参数自动等比例缩放
4、URL
统一资源定位符 Uniform Resource Locator，也称 网页地址，是因特网上标准的资源的地址
URL举例：
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成，各部分之间用“/”符号隔开。
第1部分：协议：http://、ftp://等
第2部分：站点地址：可以是域名或IP地址
第3部分：页面在站点中的目录：stu
第4部分：页面名称，例如 index.html