pythonweb day02

程序员文章站 2022-06-13 12:33:40

...

pythonweb day02

1，超链接标签

2，表格

3，表单

1，超链接标签

什么是超链接标签
能够实现从当前文件跳转到其他文件的标签

语法
<a>超链接文本</a>
标签属性：

href：必填属性，指定链接地址，以路径形式给出

target：可选属性，设置目标文件的打开方式
属性值：

_self：默认值，表示在当前窗口打开

_blank：表示新建窗口打开

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<!-- 超链接标签 -->
	<!-- URL 网络路径必须带协议 -->
	<a href="www.baidu.com">百度</a>

	<!-- target 默认在当前窗口打开_self
		_blank表示新建窗口打开
	 -->
	<a href="http://www.baidu.com" target="_blank">百度-http</a>

	<!-- 跳转本地文本 -->
	<a href="C:/Users/Python/Desktop/day01/06-img.html">图片页</a>

	<!-- 使用相对路径跳转本地文件 -->
	<!-- C:\Users\Python\Desktop\day01/05-list.html
		 C:\Users\Python\Desktop\day02/01.html
	-->
	<a href="../day01/05-list.html" target="_blank">列表页</a>

	 <!-- C:\Users\Python\Desktop\day01/05-list.html
	 1. 先查看浏览器地址栏中的URL
	 2. 加上本地的文件协议
	 	file:/// 类似于文件管理器
	 	file:/// C:/Users/Python/Desktop/day01/05-list.html -->
	 <a href="file:///C:/Users/Python/Desktop/day01/05-list.html">列表页</a>

	 <!-- 超链接的嵌套 -->
	 <a href="#">
	 	<b>超链接文本</b>
	 </a>
	 <!-- 图片超链接 -->
	 <a href="#">
	 	<img src="../day01/img/cat.jpg" width="200px">
	 </a>
	  <a href="">
	 	<img src="../day01/img/cat.jpg" width="200px">
	 </a>




</body>
</html>

锚点链接
链接到当前文件的指定位置
语法：
1. 设置锚点
  <a name="anchor1"></a>
2. 设置跳转
  <a href="#anchor1">早年经历</a>
  示例：请点击

2，表格

语法
1. 标签介绍
  表格标签：<table></table>
  行标签：<tr></tr> ->table row
  单元格标签：<td></td> ->table data
2. 创建顺序
  1. 创建表格标签
  2. 在表格标签中嵌套行标签，每一个 tr 就代表一行
  3. 在行标签中创建单元格标签，用来存放数据
    et :
```
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
</table>
```
标签属性
1. table 属性
  1. border ：设置边框，取值以px为单位的数值（px可以省略）
  2. width ：设置宽度
  3. height ：设置高度
  4. align ：设置表格在其父元素中的水平对齐方式
  5. cellpadding : 设置单元格的内边距（内容与边框之间的距离），取值为px单位的数值
  6. cellspacing : 设置单元格的外边距（单元格与单元格之间的距离，或者单元格与表格边框之间的距离），取值像素为单位的数值
  7. bgcolor : 设置表格的背景颜色，取值可以是英文的颜色名称
2. tr 标签属性
  1. bgcolor : 设置当前行的背景颜色
  2. align ：设置当前行中内容的水平对齐方式
    取值： left / center / right
  3. valign :设置当前行内容的垂直对齐方式
    取值：top / middle / bottom,默认垂直居中
3. td 标签属性
  1. width 设置单元格的宽度
  2. height 设置单元格的高度
  3. align 单元格内容的水平对齐方式
  4. valign 单元格内容的垂直对齐方式
  5. bgcolor 单元格的背景颜色

单元格合并（重点）
是单元格独有的属性 colspan rowspan

单元格的跨列合并
从当前单元格的位置开始，横向向右合并几个单元格
colspan='3' ->跨3列进行合并（包含自身）
单元格的跨行合并
从当前的单元格开始，纵向向下合并单元格
rowspan='3' -> 向下跨3行合并单元格

注意：一旦发生单元格合并，
跨列合并，要删除当前行中多于的单元格
跨行合并，要删除其后行中多于的单元格
始终保持表格结构完整

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<!-- 创建 3行 * 3列的表格 
		table 中的align属性用来设置表格在其父元素body中的水平对其方式
	-->
	<table border="1px" width="300px" height="300px" align="center" cellpadding="5px" cellspacing="10px" bgcolor="orange">
		<tr bgcolor="pink" align="right" valign="top">
			<td>迪丽热巴</td>
			<td>古力娜扎</td>
			<td>马尔扎哈</td>
		</tr>
		<tr>
			<td bgcolor="yellow" width="70px" height="70px" align="center" valign="top">华晨宇</td>
			<td>张艺兴</td>
			<td>吴亦凡</td>
		</tr>
		<tr align="center" valign="bottom">
			<td>杨幂</td>
			<td>赵丽颖</td>
			<td>天宝</td>
		</tr>
	</table>

	<table border="1px">
		<tr>
			<td width="100px" height="100px" bgcolor="pink">西游记</td>
			<td bgcolor="orange">三国演义</td>
			<td>聊斋志异</td>
		</tr>
		<tr>
			<td>三国演义</td>
			<td>聊斋志异</td>
			<td>聊斋志异</td>
		</tr>
	</table>
</body>
</html>

行分组
表格结构

行分组
允许将表格中的一行或者若干行划分为一组，便于管理

语法

表头行分组

<thead>
    <tr>
        <td></tb>
    </tr>
</thead>

表尾行分组

<tfoot>
    <tr>
        <tb></tb>
    </tr>
</tfoot>

表主体信息

<tbody>
    <tr>
        <tb></tb>
    </tr>
</tbody>

注意：<thead> <tfoot> <tbody> 可以省略，默认情况下，所有的行都会被自动添加到tbody中
如果需要手动添加行分组，建议按照thead tfoot tbody的顺序书写

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<!-- 行分组标签 -->
	<table border="1">
		<thead>
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>班级</td>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan="2">总计</td>
				<td>人</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>张三</td>
				<td>20</td>
				<td>三年二班</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>20</td>
				<td>三年二班</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

3，表单

用于接收用户的数据并且提交给服务器
表单二要素
1. form 表单元素
  收集用户信息并发送给服务器
2. 表单控件（重点）
  提供了能够跟用户交互的可视化组件
form 元素
1. 注意：form元素本身是不可见的，却不能省略，因为数据的提交功能要由form元素完成
2. 语法：
```
<form>
    表单控件
</form>
```
3. form 标签属性
  1. action
    指定数据提交的目的地址
  2. method
    数据请求方式 get /post
    默认为get方式提交
    1. get（默认值）
      通常用于向服务器端获取数据
      特点：
      1. 提交的数据会以参数的形式拼接在URL后面
      2. 安全性较低
      3. 提交数据最大为2kb
    2. post
      将数据提交给服务器处理
      特点：
      1. 隐式提交，看不到提交数据
      2. 安全性较高
      3. 没有数据大小限制
表单控件（重点）
1. 作用
  提供与用户交互的可视化组件
  注意：只有放在表单元素中的表单控件才允许被提交
2. 分类
  1. 文本框和密码框
    语法：
    文本框<input type='text'>
    密码框<input type='password'>
    属性：
    1. name 属性定义当前控件的名称，缺少的话无法提交
      name = ‘uname’
      uname = zhangsan
    2. value 属性，要提交给服务器的值，同时也是默认显示在控件上的值
    3. maxlength 用来限制用户输入的最大字符数
    4. placeholder 用户输入之前显示在框中的提示文本
  2. 单选框和复选框
    单选按钮<input type='radio'>
    复选框 <input type='checkbox'>
    属性：
    1. name
      定义控件名称，还起到分组的作用，一组中的按钮名称必须保持一致
    2. value 属性，设置当前控件的值，最终提交给服务器
    3. checked 属性
      设置预选中状态可以省略属性值，也可以使用 ‘checked’作为值
  3. 隐藏域和文件选择框
    1. 隐藏域
      作用：需要提交给服务器但是却不需要呈现给用户的数据，都可以放在隐藏域中
      语法：<input type='hidden'>
      属性：
      1. name控件名称
      2. value控件的值
    2. 文件选择框
      作用：选择文件上传，发送给服务器
      语法：<input type='file'>
      属性：name 定义空间名称
  4. 下拉选择框
```
<select name='province'>
    <option value='hebei'>河北省</option>
    <option value='heilongjiang'>黑龙江省</option>
    <option value='hunan'>湖南省</option>
</select>
```
    假设用户选择河北省，在使用get方式提交数据时，URL后拼接的数据应为province=hebei
  5. 文本域
    支持用户输入多行文本
    语法：<textarea></textarea>
    属性：
    1. name 控件名称
    2. cols 指定文本域默认显示的列数，一行中能显示的英文字符量，中文减半
    3. rows 指定文本域能够显示的行数
      注意：文本域可以由用户调整大小
  6. 按钮
    1. 提交按钮
      <input type='submit'>
      将表单数据发送给服务器
    2. 重置按钮
      <input type='reset'>
      重置表单，将表单内容恢复到初始化状态
    3. 普通按钮
      <input type='button' value='点击'>
      可以绑定自定义事件
      按钮中的value属性值实际上是定义按钮的显示文本
    4. <button>按钮显示文本</button>
      注意：
      1. 按钮标签可以在任何地方使用，不局限在form 表单中使用
      2. 按钮标签使用在form中，默认具有提交功能，等同于input submit
      3. 可以添加属性type 取值submit / reset / button 进行分区（非必填）
      4. 在表单外作为普通按钮使用时，需要通过JS 动态绑定事件
  7. 特殊用法
    label for ID
    语法：
    <label for=' '>男</label>
    <input type='radio' name='gender' value='male' id='male'>
    使用label标签包裹表单控件要显示的文本信息，为label标签添加for属性，属性值与所要绑定的表单控件的ID属性值保持一致，实现文本与控件的绑定
    表单示例：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<!-- 表单 -->
	<form action="1.php" method="get">
		<!-- 表单控件 -->
		<!-- 1. 文本框和密码框 -->
		<p>
			用户名称 ：
			<input type="text" name="uname" maxlength="8" placeholder="请输入用户名">
			<span>最大输入长度为八位</span>
		</p>
		
		<p>
			用户密码 ：
			<input type="password" name="upwd">
		</p>
		<p>
			用户性别 ：
			<input type="radio" name="gender" value="male" checked> 男
			<input type="radio" name="gender" value="female"> 女
		</p>
		<p>
			用户爱好 ：
			<input type="checkbox" name="hobby" value="smoke"> 抽烟
			<input type="checkbox" name="hobby" value="drink"> 喝酒
			<input type="checkbox" name="hobby" value="hothair"> 烫头
		</p>
		<input type="hidden" name="uID" value="10010">
		<p>
			上传文件 ：
			<input type="file" name="ufile">
		</p>
		<p>
			选择省份 ：
			<select name="province">
				<option value="hebei">河北省</option>
				<option value="henan">河南省</option>
			</select>
		</p>
		<p>
			个性签名 ：
			<textarea name="uInfo" cols="50" rows="10">
				
			</textarea>
		</p>
		<p>
			<input type="submit" name="submit" value="注册">
			<input type="reset" name="reset" value="取消">
			<input type="button" name="click" value="点我">
			<button>登录（button-submit）</button>
		</p>

		<p>
			用户性别 ：
			<input type="radio" name="gender" value="male" id="male"> <label for="male">男</label>
			<input type="radio" name="gender" value="female" id="female"> <label for="female">女</label>
		</p>
	</form>
</body>
</html>

图例一：

pythonweb day02

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<!-- 单元格合并 -->
	<table border="1px" width="500px" height="300px" align="center">
		<tr>
			<td colspan="3">姓名 ：</td>

			<td colspan="3">班级 ：</td>

		</tr>
		<tr align="center">
			<td>星期</td>
			<td>一</td>
			<td>二</td>
			<td>三</td>
			<td>四</td>
			<td>五</td>
		</tr>
		<tr>
			<td rowspan="4">上午</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
		
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td colspan="6" align="center">午休</td>
		</tr>
		<tr>
			<td rowspan="3">下午</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</body>
</html>

作业：

pythonweb day02

答案：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<h1>增加管理员</h1>
	<form action="" method="">
		<table>
			<tr>
				<td>姓名 ：</td>
				<td>
					<input type="text" name="uname" maxlength="10">
				</td>
				<td>十个字符以内</td>
			</tr>
			<tr>
				<td>密码 ：</td>
				<td>
					<input type="password" name="upwd" maxlength="10">
				</td>
				<td>十个字符以内</td>
			</tr>
			<tr>
				<td>性别 ：</td>
				<td>
					<input type="radio" name="gender" value="male"> 男士
					<input type="radio" name="gender" value="female"> 女士
				</td>
				<td></td>
			</tr>
			<tr>
				<td>角色 ：</td>
				<td>
					<input type="checkbox" name="role" value="superAdmit"> 超级管理员
					<br>
					<input type="checkbox" name="role" value="admit"> 账单管理员
				</td>
				<td>至少选择一个角色</td>
			</tr>
			<tr>
				<td>头像 ：</td>
				<td>
					<input type="file" name="uImg">
				</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>
					<input type="submit" name="submit" value="保存">
					<input type="reset" name="reset" value="重置">
				</td>
				<td></td>
			</tr>

		</table>
	</form>
</body>
</html>

pythonweb day02

1，超链接标签

2，表格

3，表单

PythonWeb框架Django搭建过程

pythonWeb框架创建app模块以及虚拟环境管理工具

荐 14天数据分析与机器学习实践之Day02——数据分析处理库Pandas应用总结

PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上

day02、Requests模块

分布式学习day02

IOS开发控件视图day02：动态创建按钮、按钮状态、按钮动画

python_入门到熟练_day02

PythonWeb框架Django搭建过程

spring框架入门day02