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>
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" alt=""></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>