前端—HTML
前端
1.什么是前端？
任何直接能够跟用户打交道的交互界面都可以称之为前端
2.为什么要学前端？
因为我们是Python全栈开发
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()
软件开发架构
c/s架构
b/s架构
本质上b/s也是c/s架构
浏览器输入网址发送了几件事？
1、输入网址
2、超服务器发送请求
3、服务器接收请求并查询浏览器想要的数据返回给浏览器
4、浏览器拿到数据展示页面
HTTP协议
1、超文本传输协议
2、客户端服务端在数据交互的时候都必须遵循这套协议
文件的后缀名到底是给谁看的？
1、文件的后缀名并不是给计算机看的，而仅仅是给人看的
HTML
1、超文本标记语言
HTML文档结构
<!DOCTYPE html> <html> <head> head存放的内容用户是看不到的，主要是给浏览器和搜索引擎看的 </head> <body> 用户能够看见的内容都在body里面 </body> </html>
注释
注释 <!--这是单行注释--> <!-- 这是多行注释 -->
html文件打开方式
1、找到该文件选择浏览器打开
2、pycharm内自动打开
搭建服务器
import socket server=socket.socket() server.bind(('127.0.0.1',8080)) server.listen(5) while True: conn,addr=server.accept() data = conn.recv(1024) conn.send(b'HTTP/1.1 200 OK\r\n\r\n') with open(r'G:\python\day48\day48练习\01 第一个html.html','rb') as f: for line in f: conn.send(line) conn.close()
几个重要的属性
1、id：定义标签的唯一的ID，HTML文档树中唯一 2、class：为html元素定义一个或多个类名（css样式类名） 3、style：规定元素的行内样式（css样式）
HTML常用标签
head内常用标签
<title></title> 定义网页标题 <style></style> 定义内部样式表 <script></script> 定义JS代码或引入外部JS文件 <link/> 引入外部样式表文件或网站图标 <meta/> 定义网页原信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--2秒后跳转到对应的网址，注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <title>这是我的第一个前端页面</title> <style> h1 { color: green; } </style> <script> alert('hello baby~') </script> <script src="04%20myjs.js"></script> <link rel="stylesheet" href="03%20mycss.css"> </head> <body> <h1>来啦 老弟！</h1> </body> </html>
Meta标签
body内常用标签
基本标签（块儿级标签和行内标签）
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--><hr>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 我是正常文本 <h1>我是h1</h1> <h2>我是h2</h2> <h3>我是h3</h3> <h4>我是h4</h4> <h5>我是h5</h5> <h6>我是h6</h6> <h1>咏鹅</h1> <p>鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，</p><p>鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，</p> 鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波，鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波， <s>199</s>现价99 <br> <u>下划线</u> <hr> <i>斜体</i> <b>加粗</b> </body> </html>
特殊符号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 1<a 2>3 ¥ © ® <p>苍茫的&天涯&是我的 爱绵绵的青山脚下一片海</p> </body> </html>
div标签和span标签
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，
不会对页面产生任何的影响。
标签分类1
块儿级标签 div h1~h6 p hr br
1、独占一行
2、块儿级标签能够嵌套块儿级标签和行内标签
3、p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签
4、块儿级标签能够设置长宽
标签分类2
行内标签 span a img i s b u
1、自身内容有多的就占多大
2、行内标签不能设置长宽
URL
什么是URL？
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
各部分之间用“/”符号隔开。
常用标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用标签</title> </head> <body> <div>div</div> <div>div</div> <span>21</span> <span>23</span> <a href="https://www.baidu.com"target="_self">点我去百度</a> <a href="https://www.sohu.com">点我去搜狐</a> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559051001860&di=3ebb37cbbf010f087fe44e91fa164493&imgtype=0&src=http%3A%2F%2Fcimg2.163.com%2Fcatchimg%2F20100324%2F7QTISHQ0_0.jpg" alt=" " title="慢死了！" width="200"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559051001860&di=933bae0e689c866adeb643c3aed48368&imgtype=0&src=http%3A%2F%2Fpic5.nipic.com%2F20100225%2F3279936_172528056232_2.jpg" alt=""> <a href="" id="a1">top</a> <div style="height: 1000px;background-color: antiquewhite"></div> <div style="height: 1000px;background-color: firebrick"></div> <div style="height: 1000px;background-color: darkblue"></div> <a href="#a1">点我去顶部</a> <img src="das.png" alt="这是我的老婆"> </body> </html>
a标签：链接标签
a标签:链接标签 1、可以通过href跳转到指定的网址 2、锚点功能:回到顶部 <a href="" id="a1">top</a> <a href="#a1">bottom</a>
ps：target属性用来控制是否在当前页面跳转 默认是_self当前页 也可以指定成_blank新建页面跳转
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
列表标签
1.无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
2.有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol> type属性： 1 数字列表，默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马
3.标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格标签
<table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td>Yuan</td> <td>日天</td> </tr> </tbody> </table>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
form标签（******）
功能：
1、表单用于向服务器传输数据，从而实现用户与Web服务器的交互
2、表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
3、表单还可以包含textarea、select、fieldset和 label标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form表单</title> </head> <body> <form action=""> <h3>用户注册</h3> <p><label for="i1">用户名：<input type="text" name="username" id="i1"></label></p> <p><label for="i2">密码：<input type="password" name="password" id="i2"></label></p> <p><label for="i3">确认密码：<input type="password" name="con_password" id="i3"></label></p> <p><label for="i4">出生年月：<input type="date" name="birthday" id="i4"></label></p> <p>性别： 男<input type="radio" name="gender" value="0"> 女<input type="radio" name="gender" value="1"> 保密<input type="radio" name="gender" value="2"> </p> <p>爱好： <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="run">跑步 </p> <p>省市： <select name="province" id=""> <option value="">北京</option> <option value="">上海</option> <option value="">深圳</option> </select> </p> <!--<p>省市多选：--> <!--<select name="province" id="" multiple>--> <!--<option value="">北京</option>--> <!--<option value="">上海</option>--> <!--<option value="">深圳</option>--> <!--</select>--> <!--</p>--> <p>市区： <select name="province" id=""> <optgroup label="北京"> <option value="">朝阳区</option> <option value="">海淀区</option> <option value="">昌平区</option> </optgroup> <optgroup label="上海"> <option value="">黄浦区</option> <option value="">静安区</option> <option value="">浦东新区</option> </optgroup> <optgroup label="深圳"> <option value="">南山区</option> <option value="">福田区</option> <option value="">罗湖区</option> </optgroup> </select> </p> <p><label for="i9">自我评价： <textarea name="info" id="i9" cols="30" rows="10" ></textarea> </label></p> <p><label for="i1">上传文件： <input type="file" name="file"> </label></p> <input type="submit" value="注册"> <input type="button" value="普通按钮"> <input type="reset" value="重置"> <button>button按钮</button> </form> </body> </html>
表单属性
input
select标签
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </form>
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
label标签
定义：<label> 标签为 input 元素定义标注（标记）。 说明： 1、label 元素不会向用户呈现任何特殊效果。 2、<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea> 属性说明： name：名称 rows：行数 cols：列数 disabled：禁用
form表单中几个重要的属性
1、action:用来控制数据到底提交给谁 写url来指定提交给谁
2、form表单默认是get请求 可以通过method属性修改提交方法
3、form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型，你可以将name属性当做字典的key 用户输入的当做字典的value 并且你可以手动设置value值
4、form表单发送文件 需要修改enctype属性的值，默认是urlencoded不支持传输文件，需要将其修改为multipart/form-data
GET请求与POST请求
1、get请求:获取想要的数据
2、post请求:提交数据
