img、a标签、列表、表格(重要)、form表单(重要)
img标签
# 图片，在网页显示图片的
标签会有属性：
1. 自带的属性
2. 自定义的属性
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息"
width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
src:写图片的地址
1. 外链地址
2. 相对地址
alt：
当图片地址加载失败的时候，显示的描述性信息
width="800px" height="200px"
控制图片的大小，但是注意，二者是等比例缩放
a标签
# 超链接标签
什么是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
各部分之间用“/”符号隔开。
<a href="http://www.baidu.com" title="你看是什么" target="_blank">点我一下啊</a>
href：填写的是跳转的地址
# id值，锚点，我们用不到，是一种效果，一般是前端来写
● 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
● 相对URL - 指当前站点中确切的路径（href="index.htm"）
title="你看是什么"
当鼠标悬浮的时候展示的内容
target：
● _blank表示在新标签页中打开目标网页
● _self表示在当前标签页中打开目标网页
列表
1. 无序列表(掌握)
<ul >
<li type="disc">第一个</li>
<li type="circle">第一个</li>
<li type="square">第一个</li>
<li type="none">第一个</li>
</ul>
type属性：
● disc（实心圆点，默认值）
● circle（空心圆圈）
● square（实心方块）
● none（无样式）
以上例子：
2. 有序列表(了解)
<ol type="I" start="1">
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
</ol>
start表示要显示的数量、条数
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> <!--tr代表一行-->
<th>序号</th> <!-- th代表一列 加粗-->
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td> <!-- td代表一列 不加粗-->
<td>jason</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
table
thead
tr----->代表一行
td(th)------>代表的是一列
tbody
tr----->代表一行
td------>代表的是一列
属性:
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● width: 像素 百分比.（最好通过css来设置长宽）
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列（即合并单元格）
以上例子：
标签的两个重要属性
<div id="d1"></div>
id
# 一个html文档中，id只能有一个，并且不能重复，通过这个id可以唯一确定一个标签
class
# 一个html文档中，class值是可以有多个的，可以重复
自定义属性
<div id="d1" username='kevin' password='123'></div>
# 属性名可以自己来定，自定义属性一般用来存储数据的
form表单(重要)
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
form表单可以把用户输入的、选择的、上传的等都通过网络提交到后端
<form></form>
<label></label>
# 通过id值绑定
<label for="username">用户名</label>
<input type="text" id="username">
input:
练习：
<p>
单行输入文本: <input type="text">
</p>
<p>
密码输入框: <input type="password">
</p>
<p>
日期输入框 <input type="date">
</p>
<p>
冰激凌<input type="checkbox" checked="checked"> <!--checked默认选一个-->
奶茶 <input type="checkbox">
蛋糕 <input type="checkbox">
</p>
<p>
单选框 <input type="radio" checked="checked">
单选框 <input type="radio">
单选框 <input type="radio">
</p>
<from actiom="" data-method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option selected="selected" value="1">广州</option>
<option value="3">深圳</option>
</select>
</from>
<p>
文件选择框： <input type="file">
</p>
<P>
<textarea name="memo" id="memo" cols="30" rows="10">默认</textarea>
</P>
<p>
隐藏输入框： <input type="hidden">
</p>
<input type="submit">
<input type="button" value="普通按钮">
<input type="reset">
以上例子：
属性说明:
● name：表单提交时的“键”，注意和id的区别
● value：表单提交时对应项的值
○ type="button", "reset", "submit"时，为按钮上显示的文本年内容
○ type="text","password","hidden"时，为输入框的初始值
○ type="checkbox", "radio", "file"，为输入相关联的值
● checked：radio和checkbox默认被选中的项
● readonly：text和password设置只读
● disabled：所有input均适用
# 每一个单选框、复选框标签都应该有一个属性叫name
<input type="submit" value="登录"> # 把前端数据提交表单到后端
<input type="button" value="登录"> # 不能够提交表单，就是一个空白的按钮，事件
<button>登录</button> # 提交表单的功能，但是，必须写在form表单里
<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>
# 把前端数据提交表单到后端
# 不能够提交表单，就是一个空白的按钮，事件
# 提交表单的功能，但是，必须写在form表单里
属性说明：
● multiple：布尔属性，设置后为多选，否则默认单选
● disabled：禁用
● selected：默认选中该项
● value：定义提交时的选项值
验证form表单提交数据到后端
用的是flask框架做后端语言
# 代码不需要掌握，你只需要看下后端如何结合前端把数据提交到后端的
pip install flask # flask框架，Django框架
<form action="">
action:
1. 什么都不写，默认提交到当前地址
2. 全写，绝对地址：http://www.baidu.com/login/
3. 只写后缀
/index/
# 它会自动拼接当前计算机的ip+port
http://127.0.0.1:5000/index/
文件的提交：
'''必须满足两个条件'''
1. 请求方式必须是post
2. enctype必须是form-data
form表单提交数据的编码方式：
application/x-www-form-urlencoded
1. urlencode:普通文本框提交的都是这个格式的，只能提交普通文本数据，不能够提交文件数据
multipart/form-data
2. form-data：提交文件使用的必须是这个方式，可以提交普通文件数据，也可以提交文件数据
3. json # form表单不能提交json格式的数据
urlencode
staticpage=https%3A%2F%2Fwww.baidu.com%2Fcache%2Fuser%2Fhtml%2Fv3Jump.html&charset=UTF-8&token=20cc339caa83933ae3baa6dda5465d09&tpl=mn&useranme=123&password=123
from flask import Flask,request
app = Flask(__name__)
# 路由，网址的后缀 baidu.com/index/
@app.route('/index/', methods=['GET', 'POST']) # 默认使用的是GET请求
def index():
# 如何拿到前端提交过来的数据
# 前端以post请求方式提交的
print(request.form) # 只能拿到post请求的数据
# print(request.args) # 拿到get请求的数据
# 如何接收文件数据
print(request.files)
file_obj = request.files.get('myfile')
print(file_obj.filename) # 965_001_dq3_3600_5400.jpg
with open(file_obj.filename, 'wb') as f:
for line in file_obj:
f.write(line)
return 'OK'
app.run()
浙公网安备 33010602011771号