day 46 html 学习 列 表格,
列表
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
表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图表</title>
</head>
<body>
//////border 中文意思:边界,镶边包边 ///cellpadding 文字与边边框的距离 ///cellspacing 间距 单元格间距
<table border="8" cellpadding="12px" cellspacing="3px" >
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>egon</td>
<td>12</td>
<!--<td>男</td>--> <!--占两列-->
<td colspan="2">刚酿</td>
</tr>
<tr>
<td>alex</td>
<td >20 男</td>
<td >男 </td>
<!--占两行-->
<td rowspan="2">吹牛逼</td>
</tr>
<tr>
<td>alex</td>
<td >20</td>
<td >男 </td>
<!--<td>吹牛逼</td>-->
</tr>
</tbody> </table>
</body>
</html>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.(最好通过css来设置长宽)
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列(即合并单元格
form (表单)
功能:
表单用于向服务器传输数据,从而实现用户与Web服务器的 交互
表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
注意:input标签如果是要提交给后端的数据,一定一定一定要加name(埋下伏笔)
表单属性
| 属性 | 值 | 含义 |
|---|---|---|
| action | URL | 指定一个表单处理目标URL,表单数据将被提交到该URL地址的处理程序。如果该属性值为空,则提交到文档自身。 |
| method | get或post | 将表单数据提交到http服务器的方法,默认为get |
| enctype | application/x-www-form-urlencoded | 指定表单数据的编码类型,此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencode对所有字符进行编码。如果表单包含用于文件上传的控件(input type="file"),那么这个属性值必须设置为multipart/form-data,不对字符进行编码。 |
表单元素
基本概念:
HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理:
访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息
input系列
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏按钮 | <input type="hidden" value="隐藏按钮" /> |
| file | 文本选择框 | <input type="file" /> |
类型(type)说明:
- text: 文本输入框
- password:密码输入框
- email : 输入邮箱
- num: 输入数量(整数)
- radio: 单选框
- checkbox:多选框
- ===================
- submit: 提交按钮
- reset: 重置按钮
- button: 可点击的按钮,没有任何行为,一般配合JS使用
- hidden: 对用户不可见,通常用于修改某条数据时,记录数据的id值
- file: 提交文件 form表单需要加上enctype="multipart/form-data",method="post"
属性说明:
- name:表单提交时的“键”,注意和id的区别
- value:表单提交时对应项的值
- type="button", "reset", "submit"时,为按钮上显示的文本年内容
- type="text","password","hidden"时,为输入框的初始值
- type="checkbox", "radio", "file",为输入相关联的值
- checked:radio和checkbox默认被选中的项
- readonly:text和password设置只读
- disabled:所有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 元素定义标注(标记)。
说明:
- label 元素不会向用户呈现任何特殊效果。
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
- 和checkbox及radio联动(如 可以通过加table让他选字就可以选中)
<p>爱好 <input id="p1" type="checkbox" name="hobby" value="footbal" >
<!--在这里用label标签将爱好包起来,就可以直接点足球这两个字就可以选中 (不用单独点小○里边)-->
<label for="p1">足球</label></p>
label 和checkbox联动
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
例子
<!--reaonly是只读 value是在框里添了一默认值-->
<p><input id="name" type="text" name="username" readonly value="alex"></p>
<!--placeholder="请在这里输入用户名" 会在输入框中写出有默认提示与--> <p><input id="na" type="text" name="username" placeholder="请在这里输入第二用户名" ></p>
效果

自己的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>form 系列</title>
</head>
<body>
<form action="#https://www.sogou.com/web?" >
<!--创建一个输入框,输入后即被搜索--> <!--reaonly是只读 value是在框里添了一默认值-->
<p>用户名1<input id="name" type="text" name="username" readonly value="alex"></p>
<!--placeholder="请在这里输入用户名" 会在输入框中写出有默认提示与--> <p>用户名2<input id="na" type="text" name="username" placeholder="请在这里输入第二用户名" ></p>
<p><label for="name">密码</label>
<input type="password" name="password" readonly placeholder="请在这里输入密码" ></p>
<p>爱好 <input id="p1" type="checkbox" name="hobby" value="footbal" >
<!--在这里用label标签将爱好包起来,就可以直接点足球这两个字就可以选中 (不用单独点小○里边)-->
<label for="p1" >足球</label>
<input type="checkbox" name="hobby" value="basktball" >篮球
<input type="checkbox" name="hobby" value="shuangse" >双色球</p>
<p>性别<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女</p>
<p>邮箱<input type="email" name="email"></p>
<p>拥有房产数<input type="number" name="number"></p>
<p>个人照<input type="file" name="上传"></p>
<!--<input type="radio" name="query">-->
<!--提交框 value='填写框中的内容' 就是在浏览器中看到的提交框的上写的内容-->
<p><input type="button" value="点着玩儿"></p>
<p><input type="submit" value="确认提交"></p>
<p><input type="reset" value="重置"></p> </form> </body>
</html>
自己的代码
网页效果

textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
属性说明:
- name:名称
- rows:行数
- cols:列数
- disabled:禁用
创建一个基本django 程序
from django.urls import path
from django.shortcuts import HttpResponse def reg(request):
if request.method == 'POST':
print(request.POST)
return HttpResponse('OK') urlpatterns = [
path('reg/', reg),
run运行程序的时候报错
Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。
这种情况就是端口占用,通过命令找出来并将他终止
C:\>netstat -ano|findstr 8000
TCP 0.0.0.0:8000 0.0.0.0:0 LISTENING 8124
UDP 0.0.0.0:8000 *:* 8124 C:\>tasklist |findstr 8124
KGService.exe 8124 Console 3 14,480 K C:\Users\liyunzhi>taskkill /pid 8124
成功: 已终止 PID 为 8124 的进程。
day 46 html 学习 列 表格,的更多相关文章
- 【转】notepad++ 应用学习 -- 列模式,十六进制模式
Notepad++ 顾名思义,是一个比notepad(Windows下叫记事本)的功能更强的编辑器. 总以为notepad++小巧轻盈,而且开源,要比UE(UltraEdit)好用.因为她支持的视 ...
- ExtJS4.2学习(八)表格限制输入数据的类型(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/177.html --------------- ...
- ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-12/175.html --------------- ...
- ExtJS4.2学习(五)表格渲染与复选框
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...
- Android应用开发学习之表格视图
作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 本文我们来学习一个使用表格视图的程序,下图是该程序的运行效果: 该程序主Activity文件内容如下: packag ...
- JAVA GUI学习 - JTable表格组件学习_C ***
/** * JTable高级应用 * @author Wfei * */ public class JTableKnow_C extends JFrame { JTable jTable; MyJMe ...
- JAVA GUI学习 - JTable表格组件学习_A ***
public class JTableKnow_A extends JFrame { public JTableKnow_A() { this.setBounds(300, 100, 400, 300 ...
- Bootstrap基础学习(一)—表格与按钮
一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁 ...
- 浅谈js中如何动态添加表头/表列/表格内容
我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...
随机推荐
- C++类型转换的注意事项
1.如果两个类型可以相互转换,就说他们是关联的. 2.隐式转换是指,由编译器自行转换,而不需要程序员介入的转换. 3.以下情况,编译器会发生隐式转换: 1)在大多数表达式中,比int类型小的整型值会被 ...
- 使用DLL在进程间共享数据
0x01 DLL在进程间共享数据理论 1.可以在Dll中使用#pragma data_seg建立共享类型的数据段将需要共享的数据分离出来,放置在一个独立的数据段里,并把该段的属性设置为共享,从而实现不 ...
- 基于MicroBlaze 的嵌入式系统设计
reference: http://xilinx.eetrend.com/d6-xilinx/article/2013-03/3863.html 摘 要:当今时代,嵌入式系统已经无所不在,与人们 ...
- innerHTML和innerText的区别,以及select元素中怎么取出被选中的option。
一.innerHTML和innerText的区别. 元素.innerHTML = 字符串,是将一对或一个标签所标识的内容全部替换为所赋予的字符串,如果字符串中有标签,浏览器将自动识别其中的标签. 元素 ...
- vnode的挂载和更新流程 -- 简介.
来源 vnode原理 diff图解 <div id="app"> {{someVar}} </div> <script type="text ...
- python自学第5天,集合,文件读写
#!/usr/bin/env python #-*- coding:utf-8 -*- # Author:Hunter Yi s={1,1,1,2,3,4,5} print(s) #集合,去重 #关系 ...
- swift简单处理调用高清大图导致内存暴涨的情况
开发中,通常需要用到使用选取多张图片的功能,但是高清大图很吃内存,我想到的处理方案就是拿到高清大图的时候,重新绘制一张小的图片使用.至于清晰度尚可,至少我是分辨不出多大区别. 基本思路就是先固定宽,然 ...
- NAVICAT for 32位/64位 及破解工具PatchNavicat
Navicat提供多达 7 种语言供客户选择,被公认为全球最受欢迎的数据库前端用户介面工具. 它可以用来对本机或远程的 MySQL.SQL Server.SQLite.Oracle 及 Postgre ...
- FreeModbus LINUXTCP Compile ERROR
/********************************************************************************* * FreeModbus LINU ...
- Linux more命令详解
more功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会往回( ...