黑马程序员_html与css的常用标签和手写html练习

最新推荐文章于 2024-05-01 14:25:55 发布

weixin_30897079

最新推荐文章于 2024-05-01 14:25:55 发布

阅读量108

点赞数

原文链接：http://www.cnblogs.com/dlwcg/p/3616610.html

版权

一、html与css的常用标签

html常用标签

css常用标签

二、手写html练习

 1 <html>
 2     <head>
 3         <title>练习01</title>
 4     </head>
 5     <body>
 6         <h1>促销信息</h1>
 7         <img src=".\notebook.jpg" border="1"alt="ACER上网本，特惠拍卖！"/><br/>
 8         拍卖ACER上网本<br/>
 9         奔腾双核，1G内存，200G硬盘<br/>
10         跳楼疯抢价<img src=".\1.png" width="20"height="30"/>元起<br/>
11     </body>
12 </html>

Demo01

 1 <html>
 2     <head>
 3         <title>练习02</title>
 4     </head>
 5     <body>
 6         <table border="1">
 7             <tr>
 8                 <td>百度</td>
 9                 <td>新浪</td>
10                 <td>天涯</td>
11             </tr>
12             <tr>
13                 <td>谷歌</td>
14                 <td>搜狐</td>
15                 <td>猫扑</td>
16             </tr>
17         </table>
18     </body>
19 </html>

Demo02

 1 <html>
 2     <head>
 3         <title>练习03</title>
 4     </head>
 5     <body>
 6         <table border="1" bordercolor="green">
 7             <tr>
 8                 <td>手机充值卡</td>
 9                 <td colspan="3">办公设备、文具、耗材</td>
10             </tr>
11             <tr>
12                 <td rowspan="3">各种卡的总汇</td>
13                 <td>铅笔</td>
14                 <td>彩笔</td>
15                 <td>粉笔</td>
16             </tr>
17             <tr>
18                 <td>打印机</td>
19                 <td>刻录机</td>
20                 <td>墨盒</td>
21             </tr>
22             <tr>
23                 <td>铅笔</td>
24                 <td>钢笔</td>
25                 <td>墨水</td>
26             </tr>
27         </table>
28     </body>
29 </html>

Demo03

 1 <html>
 2     <head>
 3         <title>练习04</title>
 4     </head>
 5     <body>
 6         <form>
 7             用户名：<input type="text" name="txtid" value=""/></br>
 8             密&nbsp&nbsp码：<input type="password" name="txtpwd" value=""/></br>
 9             <input type="reset" value="重填"/>&nbsp&nbsp<input type="submit" value="同意以下服务条款，提交注册信息"/><br/>
10             <input type="button" value="点播音乐"/>&nbsp&nbsp<input type="button" value="取消"/><br/>
11             爱好：<input type="checkbox" checked="checked"/>运动&nbsp&nbsp<input type="checkbox"/>聊天&nbsp&nbsp<input type="checkbox"/>玩游戏<br/>
12             性别：<input type="radio" name="gender"/><img src="man.png"/>男&nbsp&nbsp<input type="radio" name="gender"/><img src="woman.png"/>女<br/>
13         </form>
14     </body>
15 </html>

Demo04

 1 <html>
 2     <head>
 3         <title>练习05</title>
 4     </head>
 5     <body>
 6         <h3>贵美网站会员登录</h3>
 7         <form>
 8             <table border="0">
 9                 <tr>
10                     <td>贵美网站邮箱：</td><td><input type="text" name="mail" value=""/></td>
11                 </tr>
12                 <tr>
13                     <td>输&nbsp入&nbsp密&nbsp码：</td><td><input type="password" name="pwdfirst" value=""/></td>                    
14                 </tr>
15                 <tr>
16                     <td>再次输入密码：</td><td><input type="password" name="pwdsecond" value=""/></td>
17                 </tr>
18                 <tr>
19                     <td><input type="radio" name="verson"/>豪华版</td><td><input type="radio" name="verson"/>简洁版</td>
20                 </tr>
21                 <tr>
22                     <td><input type="checkbox" name="autologin"/>自动登录</td><td><input type="checkbox" name="safelogin"/>安全登录</td>
23                 </tr>
24                 <tr>
25                     <td><input type="reset" value="重置"/></td><td><input type="button" value="登录"/></td>
26                 </tr>
27                 <tr>
28                     <td colspan="2"><input type="image" src="start.png"/></td>
29                 </tr>
30             </table>
31         </form>
32     </body>
33 </html>

Demo05

 1 <html>
 2     <head>
 3         <title>练习06</title>
 4     </head>
 5     <body>
 6         <table border="1">
 7         <tr>
 8             <td colspan="3" >demo</td>
 9             <td colspan="2" >demo</td>
10         </tr>
11         <tr>
12             <td colspan="2" >demo</td>
13             <td colspan="2" rowspan="2" >demo</td>
14             <td rowspan="2" >demo</td>
15         </tr>
16         <tr>
17             <td colspan="2" >demo</td>
18         </tr>
19         <tr>
20             <td>demo</td>
21             <td colspan="2" >demo</td>
22             <td colspan="2" >demo</td>
23         </tr>
24         </table>
25     </body>
26 </html>