devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android之Web篇：Day01Html与Css基础入门_1024网址

作者：菜鸟追梦旅行 | 2024-05-12 14:54:20

赞

踩

1024网址

Day01 html与css基础入门

1.html的常见标签和实战

1.1 a标签

  1. <a href="https://www.baidu.com" target="_blank">点我送福利哦！</a>
  2. // target属性值_blank表示另取空白页打开网页，用new有同样的效果

1.2 img标签

  1. <img src="plmm.jpg" width="100px" height="200px" alt="图片信息丢失！"/>
  2. // alt属性的值表示当图片找不到时显示的文字信息

1.3 列表标签

  1. <ol type="I" start="1">
  2.     <li>我是天才1号</li>
  3.     <li>我是天才2号</li>
  4.     <li>我是天才3号</li>
  5.     <li>我是天才4号</li>
  6. </ol>
  7.  
  8. <ul type="circle">
  9.     <li>我是逗逼1号</li>
  10.     <li>我是逗逼1号</li>
  11.     <li>我是逗逼1号</li>
  12.     <li>我是逗逼1号</li>
  13. </ul>
  14.  
  15. <dl>
  16.     <dt>日记第一天</dt>
  17.         <dd>好兴奋啊要上课了</dd>
  18.     <dt>日记第二天</dt>
  19.         <dd>晚上要早点睡觉</dd>
  20.     <dt>日记第三天</dt>
  21.         <dd>真的心累啊热啊</dd>
  22. </dl>
  23.  
  24. /* ol(ordered list)：有序
  25.         li（list item）：列表项
  26.    ul（unordered list）：无序
  27.    dl（defined list）：自定义
  28.         dt（defined title）：自定义标题
  29.         dd（defined document）：自定义内容
  30. */

1.4 表格标签

  1. <table align="center" border="1" cellspacing="0" width="80%">
  2.     <h3 align="center">考试信息登记表</h3>
  3.     <tr>
  4.         <th>姓名</th>
  5.         <th>年龄</th>
  6.         <th>性别</th>
  7.         <th>成绩</th>
  8.     </tr>
  9.     <tr align="center">
  10.         <td>小二</td>
  11.         <td>17</td>
  12.         <td>男</td>
  13.         <td>99</td>
  14.     </tr>
  15.     <tr align="center">
  16.         <td>小三</td>
  17.         <td>19</td>
  18.         <td>女</td>
  19.         <td>86</td>
  20.     </tr><tr align="center">
  21.         <td>小四</td>
  22.         <td>17</td>
  23.         <td>男</td>
  24.         <td>100</td>
  25.     </tr><tr align="center">
  26.         <td>小五</td>
  27.         <td>20</td>
  28.         <td>男</td>
  29.         <td>59</td>
  30.     </tr>
  31. </table>
  32.  
  33. /* 
  34.     table属性：border表示边框，cellpadding表示表格内边距，spacepadding表示表格外边距
  35.     td属性：rowspan表示合并的行数，colspan表示合并的列数
  36. */

1.5 表单标签

  1. <form action="#" method="get">
  2.  
  3.     用户名：<input type="text" name="username"/><br/>
  4.     密码：<input type="password" name="password" /><br>
  5.  
  6.     <input type="submit" value="登录" />  
  7.  
  8.     <br/>
  9.     <input type="radio" name="gender" value="nan" />男   
  10.     <input type="radio" name="gender" value="nv" />女    
  11.  
  12.     <br>
  13.     <input type="checkbox" name="play" value="lanqiu" />篮球
  14.     <input type="checkbox" name="play" value="zuqiu" />足球
  15.     <input type="checkbox" name="play" value="paiqiu" />排球
  16.     <input type="checkbox" name="play" value="qiu" />乒乓球
  17.  
  18.     <br>
  19.     <select name="city">
  20.         <option>深圳</option>
  21.         <option>北京</option>
  22.         <option>上海</option>
  23.     </select>   
  24. </form>

实战1：1024网站入口

  • 先来看一下效果图


* 用到的图片如下


  • 代码如下

    1. <p align="center">
    2.     <img src="img/logo6.png" />
    3. </p>
    4.  
    5. <p align="center"><font color="red" size="5"><b>警告 / WRANNING</b></font></p>
    6.  
    7. <p align="center">
    8.     本物品內容可能看不明白；不可將本物品內容派發，傳閱，出售，出租，交給 或出借予年齡非程序猿的人士出示，播放或播映。
    9. </p>
    10. <p align="center">
    11.     This article contains material which may offernd and may not be distributed, circulated, sold, hired, given, lent, shown, played or projected to a person under the age of 18 years. All models are 18 or older.
    12.  
    13. <p align="center">
    14.     <a href="http://www.baidu.com" target="_blank"><img src="img/click.png" alt="图片已经丢失!" /></a>
    15. </p>

    实战2：世纪佳缘注册页面

  • 先来看一下效果图


* 用到的图片如下


* 代码如下

  1. <form action="http://www.itheima.com/register" method="GET">
  2.     <h4 align="center">世纪佳缘征婚注册表</h4>
  3.     <table align="center" background="img/plmm.jpg">
  4.         <tr>
  5.             <td>用户名：</td>
  6.             <td>
  7.                 <input type="text" name="username" />
  8.             </td>
  9.         </tr>
  10.         <tr>
  11.             <td>密码：</td>
  12.             <td>
  13.                 <input type="password" name="password" />
  14.             </td>
  15.         </tr>
  16.  
  17.         <tr>
  18.             <td>性别：</td>
  19.             <td>
  20.                 <input type="radio" name="gender" value="man" />男
  21.                 <input type="radio" name="gender" value="wuman" />女</td>
  22.         </tr>
  23.  
  24.         <tr>
  25.             <td>爱好：</td>
  26.             <td>
  27.                 <input type="checkbox" name="happy" value="lanqiu" />篮球
  28.                 <input type="checkbox" name="happy" value="zuqiu" />足球
  29.                 <input type="checkbox" name="happy" value="paiqiu" />排球
  30.                 <input type="checkbox" name="happy" value="wmx" />玩毛线</td>
  31.         </tr>
  32.  
  33.         <tr>
  34.             <td>城市：</td>
  35.             <td>
  36.                 <select name="city">
  37.                     <option>深圳</option>
  38.                     <option>江西</option>
  39.                     <option>贵州</option>
  40.                     <option>湖南</option>
  41.                     <option>吉林</option>
  42.                     <option>湖北</option>
  43.                 </select>
  44.             </td>
  45.         </tr>
  46.  
  47.         <tr>
  48.             <td>个人宣言：</td>
  49.             <td>
  50.                 <textarea>
  51.  
  52.                 </textarea>
  53.             </td>
  54.         </tr>
  55.         <th></th>
  56.         <tr>
  57.             <th colspan="2">
  58.                 <input type="submit" value="注册" />
  59.             </th>
  60.         </tr>
  61.  
  62.     </table>
  63. </form>

2.css的使用

2.1 盒子模型

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title></title>
  5.  
  6.         <style>
  7.             .div1{
  8.                 width:200px;
  9.                 height:200px;
  10.                 background-color: red;
  11.  
  12.                 padding: 50px;
  13.  
  14.                 border: 5px;
  15.  
  16.             }
  17.  
  18.             .div2{
  19.                 background-color: blue;
  20.                 width:100px;
  21.                 height:100px;
  22.                 padding: 20px;
  23.             }
  24.         </style>
  25.     </head>
  26.  
  27.     <body>
  28.  
  29.         <div class="div1">
  30.             我是个天才
  31.             <div class="div2">
  32.                 我是个小天才
  33.             </div>
  34.         </div>
  35.  
  36.     </body>
  37. </html>

2.2 css的三种选择器

  • css获取html中的div有三种方式：类选择器，元素选择器，名称选择器。第一种是在div属性中定义一个class属性，然后在css中通过#来引用定义的值，同理第二种是通过.来引用，第三种是通过div名称来引用。
  • 导入css样式到html中也有三种方式，如@import url(“css/style.css”);获取@import url(css/style.css);都可以

  • 代码如下

    1. <head>
    2.     <meta charset="utf-8" />
    3.     <title></title>
    4.     <style>
    5.         @import url("css/style.css");
    6.         div{
    7.             background-color: red;
    8.         }
    9.     </style>
    10. </head>
    11. <body>
    12.     <div class="div1">这是第一块DIV区域</div>
    13.     <div class="div2">这是第二块DIV区域</div>
    14.  
    15.     <span id="span1">这是第一块span区域</span>
    16.     <span id="span2">这是第二块span区域</span>
    17.  
    18.     <div>我是个天才</div>
    19. </body>

2.3 流式布局

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title></title>
  5.         <style>
  6.             #div1{
  7.                 width: 200px;
  8.                 height: 200px;
  9.                 background-color:aliceblue;
  10.  
  11.                 margin-top: 30px;  /*  外边距 */
  12.                 margin-left: 50px;
  13.  
  14.                 padding: 30px; /*  内边距 */
  15.  
  16.                 border-style: ridge;
  17.                 border-color: coral;
  18.                 border-width: 2px;
  19.  
  20.                 position: relative;
  21.                 float: left;
  22.             }
  23.  
  24.             #div2{
  25.                 width: 200px;
  26.                 height: 200px;
  27.                 background-color:aliceblue;
  28.  
  29.                 margin-top: 30px;  /*  外边距 */
  30.                 margin-left:10px;
  31.  
  32.                 padding: 30px; /*  内边距 */
  33.  
  34.                 border-style: ridge;
  35.                 border-color: coral;
  36.                 border-width: 2px;
  37.  
  38.                 position: relative;
  39.                 float: left;
  40.             }
  41.  
  42.  
  43.             #div3{
  44.                 width: 200px;
  45.                 height: 200px;
  46.                 background-color:aliceblue;
  47.  
  48.                 margin-top: 30px;  /*  外边距 */
  49.                 margin-left:10px;
  50.  
  51.                 padding: 30px; /*  内边距 */
  52.  
  53.                 border-style: ridge;
  54.                 border-color: coral;
  55.                 border-width: 2px;
  56.  
  57.                 position: relative;
  58.                 float: left;
  59.             }
  60.  
  61.         </style>
  62.     </head>
  63.     <body>
  64.         <div id="div1">div1中的内容</div>
  65.         <div id="div2">div2中的内容</div>
  66.         <div id="div3">div3中的内容</div>
  67.     </body>
  68. </html>
顶
0
踩
0
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/559440
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号