码迷,mamicode.com
首页 > 编程语言 > 详细

PythonNote02_HTML标签

时间:2017-01-11 12:53:48      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:rac   center   数学   自定义   idt   square   mit   hid   pass   

技术分享
  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">&nbsp;
122                 <input type="radio" name="gender">&nbsp;
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">篮球&nbsp;
129                 <input type="radio" name="badminton">羽毛球&nbsp;
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">信息论与编码&nbsp;
136                 <input type="checkbox" name="Python" checked="checked" value="123">Python&nbsp;
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">&lt;img src="123.jpg" &gt;</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                         &lt;ol&gt;<br />
 67                             &nbsp;&nbsp;&lt;li&gt;&lt;/li&gt;<br />
 68                         &lt;/ol&gt;</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                     &lt;ul&gt;<br />
 91                         &nbsp;&nbsp;&lt;li&gt;1&lt;/li&gt;<br />
 92                         &nbsp;&nbsp;&lt;li&gt;2&lt;/li&gt;<br/>
 93                         &nbsp;&nbsp;&lt;li&gt;3&lt;/li&gt;<br />
 94                     &lt;/ul&gt;</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                         &lt;dl&gt;<br />
115                             &nbsp;&nbsp;&lt;dt&gt;姓名:王杨*&lt;/dt&gt;<br />
116                             &nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;Python:98&lt;/dd&gt;<br />
117                             &nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;Java:99&lt;/dd&gt;<br />
118                             &nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;C:100&lt;/dd&gt;<br />
119                         &lt;/dl&gt;
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                         &lt;form action=""&gt;<br />
138                             &nbsp;&nbsp;&lt;input type="text" /&gt;<br />
139                         &lt;/form&gt;
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                     &nbsp;密码:<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

 

PythonNote02_HTML标签

标签:rac   center   数学   自定义   idt   square   mit   hid   pass   

原文地址:http://www.cnblogs.com/NeverCtrl-C/p/6273101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!