前端
任何能够直接和用户打交道的交互界面 即为前端
1)软件开发架构
c/s 结构
b/s 架构: 本质上也是 c/s 架构
2)浏览器输入网址发送了几件事?
1. 输入网址
2. 朝服务端发送请求
3. 服务器接收请求并查询浏览器想要的数据返回给浏览器
4. 浏览器拿到数据展示页面
3)HTTP 协议
超文本传输协议
客户端服务端在数据交互的时候都必须遵循该协议
4)电子设备识别, 传输信息的特点: 二进制↓
1. 基于网络传输, 只有遵循 http 协议编写才便于通用解析
2. 文件后缀名到底给谁看呢? 仅仅是给人看的
web 服务的本质
- 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 介绍
超文本标记语言 Hypertext Markup Language, 用于创建网页
HTML 不是一种编程语言!!! 它使用标签来描述网页.
本质: 是浏览器可识别的规则, 按照规则编写网页, 浏览器根据规则渲染网页;
对于不同的浏览器, 对同一个标签可能会有不同的解释.(兼容性问题)
网页文件的扩展名:.HTML 或. htm
HTML 文件打开方式:
方式 1: 找到该文件选择浏览器打开
方式 2:pycharm 内自动打开
1)文档结构
- <!DOCTYPE HTML>
- <!-- 声明为 HTML5 文档, 必须是 HTML 文档的第一行 -->
- <HTML lang="en">
- <head>
- <!--head 存放的内容用户是看不到的, 主要是给浏览器和搜索引擎使用 -->
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <!-- 用户能够看见的内容都在 body 里面 -->
- </body>
- </HTML>
2)标签的语法:
- <标签名 属性 1="属性值 1" 属性 2="属性值 2"......>内容部分</ 标签名>
- <HTML>,</HTML > 是文档的开始标记和结束的标记. HTML 页面的根元素, 中间为文档的头部 (head) 和主体(body)
- <head>,</head > 定义了 HTML 文档的开头部分. 包含了文档的元 (meta) 数据.
- <title>,</title > 定义了网页标题, 在浏览器标题栏显示.
- <body>,</body > 之间的文本是可见的网页主体内容.
注意: 对于中文网页需要使用 <meta charset="utf-8"> 声明编码, 否则会出现乱码.
有些浏览器会设置 GBK 为默认编码, 则需要设置为 <meta charset="gbk">.
<!DOCTYPE> 声明不是 HTML 标签; 它是指示 Web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
3)几个很重要的属性:
id: 定义标签的唯一 ID,HTML 文档树中唯一
class: 为 HTML 元素定义一个或多个类名(classname)(CSS 样式类名)
style: 规定元素的行内样式(CSS 样式)
HTML 常用标签
- <head>
- </head>
- 内常用标签
- <title>
- </title>
- 页面标题
- <style>
- </style>
- 编写 CSS 代码
- <script>
- </script>
- 内部可以直接写 JS 代码, 也可以通过 src 属性引入外部 JS 代码文件
- <link/>
- 通过 href 引入外部 CSS 文件
- <meta/>
- 定义网页原信息
- <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
- <a href="" id="a1">
- top
- </a>
- <a href="#a1">
- bottom
- </a>
- http://www.sohu.com/stu/intro.html
- http://222.172.123.33/stu/intro.html
来源: http://www.bubuko.com/infodetail-3074786.html