1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset = "utf-8" /> 5 <meta name="Keywords" content="" /> 6 <mata name = "description" content = "" /> 7 <title>复习代码</title> 8 </head> 9 <body> 10 <center> <h1><font color="red">标签练习</font></h1></center> 11 <hr /> 12 13 <h2><font color="red"><u><em>复习主要内容：</em></u></font></h2> 14 <p> 15 <pre> <font size="5" color="blue">图片、无序列表、有序列表、自定义列表、表单元素之input</font></pre> 16 </p> 17 <hr /> 18 19 <p align="center"> 20 <font size="5" color="blue"><u><strong><i>Do not dwell in the past.</i></strong></u></font> 21 </p> 22 <hr /> 23 24 <center> 25 26 <!-- img标签的属性 --> 27 <!-- src:图片的路径 --> 28 <!-- 属性值：绝对路径、相对路径 --> 29 <!-- alt：描述图片内容 --> 30 <!-- width：设定图片的宽度 --> 31 <!-- height：设定图片的高度 --> 32 <!-- 注意：如果不给定图片的高度和宽度，那么浏览器会自动计算，但是厚花费时间 --> 33 <img src="123.jpg" title="哈哈哈" /> 34 <br /> 35 <a href="http://www.dzshike.com/" target="_blank">大足石刻官网链接</a> 36 </center> 37 <hr /> 38 39 <!-- 有序列表 --> 40 <!-- ol标签的属性 --> 41 <!-- type：列表提示标号，属性值有 --> 42 <!-- 1：数字列表排列 --> 43 <!-- A：大写字母排列 --> 44 <!-- a：小写字母排列 --> 45 <!-- i：小写罗马字母排列 --> 46 <!-- I：大写罗马字母排列 --> 47 <h2><font size="5" color="red">ol有序列表</font></h2> 48 <ol type="1"> 49 <li>请计算：3 + 5 = ( )</li> 50 <ol type="A"> 51 <li>12</li> 52 <li>13</li> 53 <li>32</li> 54 <li>8</li> 55 </ol> 56 <br> 57 <li>中国最年轻的直辖市是( )。</li> 58 <ol type="A"> 59 <li>北京</li> 60 <li>天津</li> 61 <li>上海</li> 62 <li>重庆</li> 63 </ol> 64 </ol> 65 <hr> 66 67 <!-- 无序列表 --> 68 <!-- ul标签的属性 --> 69 <!-- type：序列提示标号，属性值如下 --> 70 <!-- disc：小黑圆点(默认值) --> 71 <!-- square：实心的方块 --> 72 <!-- circle：空心圆 --> 73 <h2><font size="5" color="red">ul无序列表</font></h2> 74 <div>中国的直辖市有：</div> 75 <ul type="circle"> 76 <li>北京</li> 77 <li>天津</li> 78 <li>上海</li> 79 <li>重庆</li> 80 </ul> 81 <hr> 82 83 <!-- 自定义列表 --> 84 <h2><font size="5" color="red">dl自定义列表</font></h2> 85 <dl> 86 <dt>姓名：王杨*</dt> 87 <dd>Python：98</dd> 88 <dd>Java：99</dd> 89 <dd>C:100</dd> 90 <hr size="4" color="red" width="13%" align="left" /> 91 <dt>姓名：王杨*</dt> 92 <dd>数学：98</dd> 93 <dd>语文：99</dd> 94 <dd>英语：100</dd> 95 </dl> 96 <hr> 97 98 <h2><font size="5" color="red">form表单</font></h2> 99 <form> 100 101 <!-- input标签的属性 --> 102 <!-- type：设置表单的控键类型，属性值如下 --> 103 <!-- text:文本输入框 --> 104 <!-- password：密码输入框 --> 105 <!-- radio：不可后悔按钮、可实现排斥的按钮 --> 106 <!-- checkbox：可后悔按钮、多选按钮 --> 107 <!-- submit：提交按钮 --> 108 <!-- name:这个表单控件的名字,没有name属性是不能进行提交的 --> 109 <!-- checked：默认这个表单控件被选中 --> 110 <!-- value：保存这个表单控件的值，若果不写这个属性，那么当这个控件被选中后提交的结果只显示这个控件被选中啦，不会显示这个表单的值 --> 111 <!-- placeholder：输入提示语 --> 112 <!-- maxlength：允许输入的最大值 --> 113 账号：<input type="text" name="username" placeholder="请输入账号" maxlength="12" /> 114 <br /> 115 <br /> 116 密码：<input type="password" name="userpassword" placeholder="请输入密码" maxlength="16" /> 117 <hr> 118 119 <!-- 利用input标签实现不可后悔选择 --> 120 <font size="3" color="blue"><strong>性别：</strong></font> 121 <input type="radio" name="gender">男 122 <input type="radio" name="gender">女 123 <input type="radio" name="gender">你懂的 124 <br> 125 126 <!-- 利用input标签实现单项选择 --> 127 <font size="3" color="blue"><strong>爱好：</strong></font> 128 <input type="radio" name="basketball">篮球 129 <input type="radio" name="badminton">羽毛球 130 <input type="radio" name="table tennis">乒乓球 131 <br> 132 133 <!-- 利用input实现可后悔选择 --> 134 <font size="3" color="blue"><strong>考试科目：</strong></font> 135 <input type="checkbox" name="information">信息论与编码 136 <input type="checkbox" name="Python" checked="checked" value="123">Python 137 <input type="checkbox" name="Java" checked="checked">Java 138 <br> 139 140 <!-- 利用input标签实现提交功能 --> 141 <!-- value属性的默认属性值是 “提交” --> 142 <input type="submit" name="" value="提交"> 143 144 </form> 145 </body> 146 </html>
复习代码01
1 <!DOCTYPE>
2 <html>
3 <head>
4 <meta charset = "utf-8" />
5 <meta name="Keywords" content="" />
6 <mata name = "description" content = "" />
7 <title>第二节</title>
8 <style>
9
10 /*margin : 设置元素外边框的属性*/
11 *{margin: 0; padding: 2px;}
12 h1{color: red;text-align: center;}
13 p{text-align: center;color: blue;font-size: 30;text-decoration: underline;}
14 hr{margin: 5px 0px 5px 0px}
15
16 /*翻译：设置有序列表的外边框：上0右30下0左0*/
17 ol{margin:0px 0px 0px 60px} /*如果不设置外边框，那么序号就看不到啦，因为默认已经将外边框设置为0px*/
18
19 ul{margin: 0px 0px 0px 20px}
20 dl{margin: 0px 0px 0px 20px}
21
22 .zd{color: red;text-decoration:underline;font-size: 20}
23 </style>
24 </head>
25 <body>
26 <h1>第二节复习</h1>
27 <hr size="5" color="red"/>
28
29 <p>Do not dwell in the past.</p>
30 <hr>
31
32 <h2>主要内容</h2>
33 <ol style="1">
34 <li>img标签</li>
35 <li>有序列表</li>
36 <li>无序列表</li>
37 <li>自定义列表</li>
38 <li>form表单之input标签</li>
39 </ol>
40 <hr />
41
42 <h2>1.图片标签 --> img</h2>
43 <ol type="A">
44 <li>格式</li>
45 <ul>
46 <li class="zd"><img src="123.jpg" ></font></li>
47 </ul>
48 <li>属性</li>
49 <ul>
50 <li class="zd">src:图片的路径 --> 绝对路径、相对路径</li>
51 <li>width：设定图片的宽度 --> Xpx</li>
52 <li>height：设定图片的高度 --> Xpx</li>
53 <li>alt：描述图片内容</li>
54 <li>注意：如果不给定图片的高度和宽度，那么浏览器会自动计算，但是要花费时间</li>
55 </ul>
56 <li>效果展示</li>
57 <img src="123.jpg" alt="">
58 </ol>
59 <hr />
60
61 <h2>2.有序标签 --> ol</h2>
62 <ol type="A">
63 <li>格式</li>
64 <ul>
65 <li class="zd">
66 <ol><br />
67 <li></li><br />
68 </ol></li>
69 </ul>
70 <li>属性</li>
71 <ul>
72 <li>type:列表提示标号 --> 1、A、a、i、I</li>
73 </ul>
74 <li>效果展示/li>
75 <ol type="i">
76 <li>1</li>
77 <li>2</li>
78 <li>3</li>
79 <li>4</li>
80 </ol>
81
82 </ol>
83 <hr />
84
85 <h2>3.无序标签 --> ul标签</h2>
86 <ol type="A">
87 <li>格式</li>
88 <ul>
89 <li class="zd">
90 <ul><br />
91 <li>1</li><br />
92 <li>2</li><br/>
93 <li>3</li><br />
94 </ul></li>
95 </ul>
96 <li>属性</li>
97 <ul>
98 <li>type:序列提示标号 --> disc、square、circle</li>
99 </ul>
100 <li>效果展示</li>
101 <ul type="square">
102 <li>1</li>
103 <li>2</li>
104 <li>3</li>
105 </ul>
106 </ol>
107 <hr />
108
109 <h2>4.自定义列表 --> dl标签</h2>
110 <ol type="A">
111 <li>格式</li>
112 <ul>
113 <li class="zd">
114 <dl><br />
115 <dt>姓名：王杨*</dt><br />
116 <dd>Python：98</dd><br />
117 <dd>Java：99</dd><br />
118 <dd>C:100</dd><br />
119 </dl>
120 </li>
121 </ul>
122 <li>效果展示</li>
123 <dl>
124 <dt>姓名：王杨*</dt>
125 <dd>Python：98</dd>
126 <dd>Java：99</dd>
127 <dd>C:100</dd>
128 </dl>
129 </ol>
130 <hr />
131
132 <h2>5.form表单之input标签 --> input标签</h2>
133 <ol type="A">
134 <li>格式</li>
135 <ul>
136 <li class="zd">
137 <form action=""><br />
138 <input type="text" /><br />
139 </form>
140 </li>
141 </ul>
142 <li>属性</li>
143 <ul>
144 <li>type：设置表单的控键类型 --> text、password、radio、checkbox、submit</li>
145 <li>name：这个input元素的名字，没有name属性是不能够进行提交的</li>
146 <li>checked：默认这个表单控件被选中 --> checked</li>
147 <li>value：保存这个表单控件的值，若果不写这个属性，那么当这个控件被选中后提交的结果只显示这个控件被选中啦，不会显示这个表单的值</li>
148 <li>placeholder：输入提示语 --> 提示语</li>
149 <li>maxlength：允许输入的最大长度</li>
150 </ul>
151
152 <li>效果展示</li>
153 <form action="">
154 用户名：<input type="text" placeholder="请输入用户名" name="username" /><br /><br />
155 密码：<input type="password" placeholder="请输入密码" name="password" />
156 <br /><br />
157 爱好：
158 <input type="checkbox" name="basketball" value="篮球" />篮球
159 <input type="checkbox" name="rollerskating" checked="checked" value="轮滑" />轮滑
160 <br />
161 性别：
162 <input type="radio" name="gender" value="男" id="男" /><label for="男">男</label>
163 <input type="radio" name="gender" value="女" id="女" /><label for="女">女</label>
164 <br />
165 提交：
166 <input type="submit" name="submit" value="Yes" />
167 </form>
168
169 </ol>
170 <hr />
171 </body>
172 </html>
复习代码02
时间： 2024-10-19 17:23:58