首页 > Web开发 > 详细

HTML各种控件元素

时间:2022-05-27 22:19:50      阅读:13      评论:0      收藏:0      [点我收藏+]
  1 <!-- DOCYUPE:告诉浏览器使用的规范,这里是 HTML -->
  2 <!DOCTYPE html>
  3 
  4 <html lang="en">
  5 
  6 <!-- 网页头部 -->
  7 
  8 <head>
  9     <!-- meta:描述性标签,用来描述网址的信息 -->
 10     <meta charset="UTF-8">
 11     <meta name="keyWords" content="HTML测试" />
 12 
 13     <!-- 方式一:link 导入外部 css 文件 -->
 14     <link href="" rel="stylesheet" type="text/css">
 15 
 16     <!-- 方式二:import 导入外部 css 文件 -->
 17     <style>
 18         @import url();
 19     </style>
 20 
 21     <!-- 导入外部 js 文件 -->
 22     <script type="text/javascript" src=""></script>
 23 
 24 
 25     <!-- 网页标题 -->
 26     <title>HTML 测试</title>
 27 </head>
 28 
 29 <!-- 网页主体 -->
 30 
 31 <body>
 32     <!-- 显示时间控件 -->
 33     <div>
 34         当前时间:
 35         <p id="time" style="display: inline;"></p>
 36     </div>
 37 
 38     <!-- 锚链接,需要一个锚标记,跳转到标记 href="#跳转到的标签name",decoration:取消链接下划线 -->
 39     <hr/>
 40     <a name="top" href="#bottom" style="text-decoration: none;">跳转底部</a>
 41 
 42     <!-- <h> 标题标签 -->
 43     <h1>这是一个一级标题</h3>
 44         <h2>这是一个二级标题</h5>
 45             <h3>这是一个三级标题</h3>
 46             <h4>这是一个四级标题</h5>
 47                 <h5>这是一个五级标题</h3>
 48                     <h6>这是一个六级标题</h5>
 49 
 50                 <!-- 水平线标签 -->
 51                 <hr/>
 52 
 53                 <!-- 段落标签 -->
 54                 <p>凤兮凤兮归故乡 遨游四海求其凰</p>
 55                 <p>时未遇兮无所将 何吾今夕升斯堂</p>
 56 
 57                 <!-- 换行标签 -->
 58                 <br/>
 59 
 60                 <!-- 粗体 斜体 --><br/>
 61                 <hr/>
 62                 <strong>这是粗体标签</strong><br/>
 63                 <em>这是斜体标签</em><br/>
 64 
 65                 <!-- 特殊符号 --><br/>
 66                 <hr/>
 67                 <!-- 空格 &nbsp -->
 68&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
 69 
 70                 <!-- 小于、大于符号 -->
 71                 &lt;括号&gt;<br/>
 72 
 73                 <!-- 版权符号 -->
 74                 &copy版权所有<br/>
 75 
 76                 <!-- 图像标签 --><br/>
 77                 <hr/>
 78                 <!-- src:图像地址  alt:图像替代文字  title:鼠标悬停提示文字  weight:图像宽度  height:图像高度 -->
 79                 <img src="../img/img1.jpg" alt="头像" title="最新更新头像" width="200px" height="200px" />
 80 
 81                 <!-- 链接标签 --><br/>
 82                 <hr/>
 83                 <!-- href:链接路径  target:链接在哪个窗口打开(_self 本界面替换, _blank 新开界面标签)  <a>链接的文本或图片</a> -->
 84                 <a href="https://www.baidu.com" target="_blank">百度百科链接</a>
 85 
 86 
 87 
 88                 <!-- 功能性链接 --><br/>
 89                 <hr/>
 90                 <!-- 邮件链接:mailto -->
 91                 <a href="mailto:zq@163.com">点击联系我-邮箱</a>
 92 
 93 
 94                 <!-- 列表标签 --><br/>
 95                 <hr/>
 96                 <!-- 有序标签,应用试卷,问答 -->
 97                 <ol>
 98                     <li>Java</li>
 99                     <li>C++</li>
100                     <li>Python</li>
101                     <li>PHP</li>
102                 </ol>
103 
104                 <!-- 无序标签,应用于导航,测边栏 -->
105                 <hr/>
106                 <!-- 空心圆 -->
107                 <ul type="circle">
108                     <li>Java</li>
109                     <li>C++</li>
110                     <li>Python</li>
111                     <li>PHP</li>
112                 </ul>
113 
114                 <!-- 自定义标签  dl:标签  dt:列表名称  dd:列表内容,应用于公司网站底部 -->
115                 <hr/>
116                 <dl>
117                     <dt>学科</dt>
118                     <dd>Java</dd>
119                     <dd>C++</dd>
120                     <dd>Python</dd>
121                     <dd>PHP</dd>
122                     <dt>地点</dt>
123                     <dd>上海</dd>
124                     <dd>北京</dd>
125                     <dd>杭州</dd>
126                     <dd>福州</dd>
127                 </dl>
128 
129                 <!-- 表格标签 --><br/>
130                 <hr/>
131                 <!--
132             border: 边框厚度
133             cellspacing:内边框厚度
134             rowspan=x, 跨行,表示占几行,如学号,姓名等占两行,18占三行
135             colspan=x, 跨列,表示占几列,如成绩占三列
136   -->
137                 <table border="1" cellspacing="0" style="text-align: center;">
138                     <tr>
139                         <tr>
140                             <th rowspan="2">学号</th>
141                             <th rowspan="2">姓名</th>
142                             <th rowspan="2">年龄</th>
143                             <th colspan="3">成绩</th>
144                         </tr>
145                         <tr>
146                             <th>Java</th>
147                             <th>SQL</th>
148                             <th>HTML</th>
149                         </tr>
150                     </tr>
151                     <tr>
152                         <td>100001</td>
153                         <td>Tom</td>
154                         <td rowspan="3">18</td>
155                         <td>90</td>
156                         <td>85</td>
157                         <td>60</td>
158                     </tr>
159                     <tr>
160                         <td>100002</td>
161                         <td>Jerry</td>
162                         <td>85</td>
163                         <td>98</td>
164                         <td>95</td>
165                     </tr>
166                     <tr>
167                         <td>100003</td>
168                         <td>Mark</td>
169                         <td>80</td>
170                         <td>95</td>
171                         <td>80</td>
172                     </tr>
173                 </table>
174 
175                 <!-- 媒体元素 --><br/>
176                 <hr/>
177                 <!-- 视频标签,src:资源路径  controls:控制条  autoplay:自动播放 --><br/>
178                 <!-- <video src="" controls autoplay>视频标签</video> -->
179 
180                 <!-- 音频标签 src:资源路径  controls:控制条  autoplay:自动播放 --><br/>
181                 <!-- <audio src="" controls autoplay></audio> -->
182 
183 
184                 <!-- iframe 内联框架 -->
185                 <hr><br/>
186                 <!-- src:引用页面路径  name:框架标识名称 -->
187                 <iframe src="" name="myIframe" style="height: 180px; width: 60%;"></iframe>
188 
189                 <!-- 通过链接的 target 可设置到内联框架中打开 --><br/>
190                 <a href="https://www.bilibili.com/" target="myIframe">哔哩哔哩</a>
191 
192 
193                 <!-- 提交表单  action:提交地址  method:提交方式 --><br/>
194                 <hr/>
195                 <!--
196         placeholder:水印
197         disabled:禁止使用
198         readonly:只读不可改
199         required:必须非空
200         parttern:正则表达式
201         label for="email":点击该标签光标实际选择位置为 email
202      -->
203                 <form action="myIframe" method="post">
204                     文本框:<input type="text" name="user" placeholder="QQ号码/手机/邮箱" /><br/> 密码框:
205 
206                     <input type="password" name="pwd" placeholder="密码" /><br/> 单选按钮:
207 
208                     <input type="radio" name="sex" />209                     <input type="radio" name="sex" /><br /> 复选按钮:
210 
211                     <input type="checkbox" name="hobby" />唱歌
212                     <input type="checkbox" name="hobby" />游戏
213                     <input type="checkbox" name="hobby" />代码<br/> 下拉列表选择框:
214 
215                     <select name="select">
216             <option>---请输入所在的城市---</option>
217             <option>北京</option>
218             <option>上海</option>
219             <option>杭州</option>
220             <option>福州</option>
221             <option>厦门</option>
222         </select><br/> 普通按钮:
223 
224                     <input type="button" value="普通按钮" /><br /> 文件域:
225 
226                     <input type="file" name="file1" /><br/> 影像域:
227 
228                     <input type="image" src="" width="192" height="120" disabled/><br/> 隐藏域:
229 
230                     <input type="hidden" name="userId" /><br/> 文本域:
231 
232                     <textarea cols="60" rows="6" readonly>
233             请您输入观看《伴我同行2-大雄的婚礼》的感想 :)
234         </textarea><br/>
235 
236                     <label for="email">邮箱验证:</label>
237                     <input type="email" name="email" id="email" /><br/> URL验证:
238 
239                     <input type="url" name="url" /><br/> 数字验证:
240 
241                     <input type="number" max="100" min="0" step="5" /><br/> 滑块标签:
242 
243                     <input type="range" name="voice" max="100" min="0" step="10" /><br/> 搜索框:
244 
245                     <input type="search" /><br/> 自定义电话:
246 
247                     <input type="text" name="DiyEmail" pattern="\d{3}-\d{8}|\d{4}-\d{7}" /><br/> 重置按钮:
248 
249                     <input type="reset" value="清空" /><br /> 提交按钮:
250 
251                     <input type="submit" value="登陆" /><br />
252                 </form>
253 
254                 <!-- 锚链接,需要一个锚标记,跳转到标记 href="#跳转到的标签name" -->
255                 <hr/>
256                 <a name="bottom" href="#top" style="text-decoration: none;">回到顶部</a>
257 
258 </body>
259 
260 <script>
261     // 设置时间
262     function showTime() {
263         // 获取显示时间的控件
264         var time = document.getElementById("time");
265 
266         // 获取日期对象
267         var date = new Date();
268 
269         // 给 <p> 标签赋值内容
270         time.innerHTML = date;
271     }
272 
273     // 定时器,设置间隔 1000ms 刷新
274     setInterval(showTime, 1000);
275 </script>
276 
277 </html>

 

HTML各种控件元素

原文:https://www.cnblogs.com/zq-zq/p/15350309.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!