python 前端 HTML
Html
列表标签
1 #<ul>: 无序列表 unorder list [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
2
3 <ul type="circle">
4 <li>111</li>
5 <li>222</li>
6 <li>333</li>
7 </ul>
8
9 #<ol>: 有序列表 order list
10
11 <ol>
12 <li>111</li>
13 <li>222</li>
14 <li>333</li>
15 </ol>
16
17 #<dl> 定义列表
18
19 # <dt> 列表标题
20 # <dd> 列表项
21
22 <dl>
23 <dt>标题</dt>
24 <dd>item</dd>
25 <dd>item</dd>
26 </dl>
一.table
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6
7
8 </head>
9 <body>
10 <div class="left">
11 <table border="2px" cellpadding="10" cellspacing="0" style="border-color: hotpink">
12 <tr>
13 <td colspan="3" align="center">星期一菜谱</td>
14 </tr>
15 <tr>
16 <td rowspan="2">素菜</td>
17 <td>青草茄子</td>
18 <td>花椒扁豆</td>
19 </tr>
20 <tr>
21 <td>小葱豆腐</td>
22 <td>炒白菜</td>
23 </tr>
24 <tr>
25 <td rowspan="2">荤菜</td>
26 <td>油闷大虾</td>
27 <td>海参鱼翅</td>
28 </tr>
29 <tr>
30 <td width="320"> 红烧肉 <img src="aa.png" title="红烧肉" width="220" height="165">
31 </td>
32 <td>考全羊</td>
33 </tr>
34
35 </table>
36 </div>
37 <div >
38 <table border="2px" align="" cellpadding="10px" cellspacing="2px" style="border-color: cornflowerblue">
39 <tr>
40 <th>项目</th>
41 <th colspan="5">上课</th>
42 <th colspan="2">休息</th>
43 </tr>
44 <tr>
45 <th>星期</th>
46 <th>星期一</th>
47 <th>星期二</th>
48 <th>星期三</th>
49 <th>星期四</th>
50 <th>星期五</th>
51 <th>星期六</th>
52 <th>星期日</th>
53 </tr>
54 <tr>
55 <td rowspan="4">上午</td>
56 <td>语文</td>
57 <td>数学</td>
58 <td>游泳</td>
59 <td>跳舞</td>
60 <td>英语</td>
61 <td>美女</td>
62 <td rowspan="4">休息</td>
63 </tr>
64 <tr>
65 <td>语文</td>
66 <td>数学</td>
67 <td>游泳</td>
68 <td>跳舞</td>
69 <td>英语</td>
70 <td>美女</td>
71 </tr>
72 <tr>
73 <td>语文</td>
74 <td>数学</td>
75 <td>游泳</td>
76 <td>跳舞</td>
77 <td>英语</td>
78 <td>美女</td>
79 </tr>
80 <tr>
81 <td>语文</td>
82 <td>数学</td>
83 <td>游泳</td>
84 <td>跳舞</td>
85 <td>英语</td>
86 <td>美女</td>
87 </tr>
88 <tr>
89 <td rowspan="2">上午</td>
90 <td>语文</td>
91 <td>数学</td>
92 <td>游泳</td>
93 <td>跳舞</td>
94 <td>英语</td>
95 <td>美女</td>
96 <td rowspan="2">休息</td>
97 </tr>
98 <tr>
99 <td>语文</td>
100 <td>数学</td>
101 <td>游泳</td>
102 <td>跳舞</td>
103 <td>英语</td>
104 <td>美女</td>
105 </tr>
106 </table>
107
108 </div>
109 </body>
110 </html>
二.form
表单属性
action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method: 表单的提交方式 post/get默认取值就是get
<input>系列标签
1 '''
2 <1> 表单类型
3
4 type: text 文本输入框
5
6 password 密码输入框
7
8 radio 单选框
9
10 checkbox 多选框
11
12 submit 提交按钮
13
14 button 按钮(需要配合js使用.) button和submit的区别？
15
16 file 提交文件：form表单需要加上属性enctype="multipart/form-data"
17
18 上传文件注意两点：
19 请求方式必须是post
20 enctype="multipart/form-data"
21
22 <2> 表单属性
23
24 name: 表单提交项的键.
25
26 注意和id属性的区别：name属性是和服务器通信时使用的名称；
27 而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
28
29 value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
30
31 type="button", "reset", "submit" - 定义按钮上的显示的文本
32
33 type="text", "password", "hidden" - 定义输入字段的初始值
34
35 type="checkbox", "radio", "image" - 定义与输入相关联的值
36
37
38 checked: radio 和 checkbox 默认被选中
39
40 readonly: 只读. text 和 password
41
42 disabled: 对所用input都好使.
43
44 '''
45
46 input 系列标签
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <form action="" method="post">
10 <p>姓名:<input type="text" name="username"></p>
11 <p>密码:<input type="password" name="passwd"></p>
12
13 <p>爱好: 篮球<input type="checkbox" name="hobby" value="basketball">
14 足球<input type="checkbox" name="hobby" value="football">
15 乒乓球<input type="checkbox" name="hobby" value="pingpang"></p>
16
17 <p>性别: 男<input type="radio" name="sex" value="men">女<input type="radio" name="sex" value="men"></p>
18 <p><input type="submit" value="submit"></p>
19
20
21
22 </form>
23
24 </body>
25 </html>
26
27 input 代码 练习
select标签
1 <select> 下拉选标签属性
2
3
4 name:表单提交项的键.
5
6 size：选项个数
7
8 multiple：multiple
9 <optgroup>为每一项加上分组
10
11 <option> 下拉选中的每一项 属性：
12
13 value:表单提交项的值.
14 selected: selected下拉选默认被选中
1 #-------------------------下拉选择----------------
2
3
4 <select name="province" size="1" >
5 <option value="hebei">河北省</option>
6 <option value="shanxi" selected>山西省</option>
7 <option value="riben">日本省</option>
8 </select>
9
10 #-------------------------optgroup----------------
11
12 <select name="province" size="4" multiple>
13 <optgroup label="中国">
14 <option value="hebei">河北省</option>
15 <option value="shanxi" >山西省</option>
16 <option value="riben">日本省</option>
17 </optgroup>
18
19 </select>
textarea 多行文本框
1 <form id="form1" name="form1" method="post" action="">
2 <textarea cols=“宽度” rows=“高度” name=“名称”>
3 默认内容
4 </textarea>
5 </form>
6
7
8
9 <p>简介:</p>
10 <p>
11 <textarea name="jianjie" cols="30" rows="10"></textarea>
12 </p>
label 标签
1 定义：<label> 标签为 input 元素定义标注（标记）。
2 说明：
3 1 label 元素不会向用户呈现任何特殊效果。
4 2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
5
6
7 <form method="post" action="">
8
9 <label for=“username”>用户名</label>
10 <input type=“text” name=“username” id=“username” size=“20” />
11 </form>
fieldset 标签
1 <fieldset>
2 <legend>登录吧</legend>
3 <input type="text">
4 </fieldset>
浙公网安备 33010602011771号