html初学（二）

原创

wx62f3795bb6b64 2022-08-10 17:52:03 ©著作权

文章标签 html 文本框 javascript 文章分类 OpenStack 云计算

©著作权归作者所有：来自51CTO博客作者wx62f3795bb6b64的原创作品，请联系作者获取转载授权，否则将追究法律责任

1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     
  6     <table border="1"><!--这里说表格带表框-->
  7     <tr style="text-align:center;"><!--这里是写第一行的东西-->
  8         <th>第一列的头</th>
  9         <th>第二列的头</th>
 10         <th>第三列的头</th>
 11         </tr>
 12         
 13         <tr style="text-align:center;"><!--这里是写第二行的东西-->
 14         <td>第一列</td>
 15         <td>第二列</td>
 16         <td>第三列</td>
 17         </tr>
 18         
 19         <tr style="text-align:center;"><!--这里是写第三行的东西-->
 20         <td>
 21             <ul>
 22                 <li>第一列</li>
 23                 <li>第一列</li>
 24                 <li>第一列</li>
 25             </ul>
 26         </td>
 27         <td>
 28             <table border="1">
 29             <tr>
 30                  <td>第二列</td>
 31                  <td>第二列</td>
 32             </tr>
 33             <tr>
 34                  <td>第二列</td>
 35                  <td>第二列</td>
 36             </tr>
 37             </table>
 38         </td>
 39         <td>第三列</td>
 40     </tr>
 41     
 42     <ol start="50">
 43         <li>这里是有序列表list1</li>
 44         <li>这里是有序列表list2</li>
 45     </ol>
 46     
 47     <ul>
 48         <li>这里是无序列表</li>
 49         <li>这里是无序列表</li>
 50     </ul>
 51     
 52     <ol type="A"><!--这里可以改成type="a"、type="I"、type="i"-->
 53         <li>这里是有序列表listA</li>
 54         <li>这里是有序列表listB</li>
 55     </ol>
 56     
 57     <div style = "color:#C6A300;">
 58         <h4>不管是标题还是正文</h4>
 59         <p>这一块都是这个颜色了</p>
 60         <p>这是一片是<span style = "color:blue;font-weight:bold">蓝色</span>
 61             这一片是<span style = "color:darkolivegreen;font-weight:bold">碧绿色</span>
 62     </div>
 63     
 64     <hr>
 65     <!--下面做一个大区域的东西-->
 66     <div id = "container" style = "width:500px">
 67         <div id = "header" style = "background-color:#FFA500;width:500px">
 68             <h1 style="margin-bottom:0;">
 69                 这里是标题
 70             </h1>
 71         </div>
 72         <div id = "menu" style = "background-color:#FFD700;height:300px;width:100px;float:left;">
 73             <b>Menu</b>
 74             <br/>
 75             html
 76             <br>
 77             css
 78             <br>
 79             JavaScript
 80         </div>
 81         <div id = "content" style="background-color:#EEEEEE;height:300px;width:400px;float:left;">
 82             1、这里是正文
 83             <br/>
 84             <form>
 85                 这里是文本框: <input type="text" name="textbox">
 86                 <br/>
 87                 密码: <input type="password" name="pwd">
 88                 <input type="submit" value="Submit">
 89             </form>
 90             <form>
 91                 <input type="radio" name="sex" value="male">Male
 92                 <br/>
 93                 <input type="radio" name="sex" value="female">Female
 94                 <br/>
 95                 <input type="checkbox" name="sex" value="notmale">not male
 96                 <br>
 97                 <input type="checkbox" name="sex" value="notfemale">not female
 98             </form>
 99             <br/>
100             <textarea rows="2" cols="20">
101                 我是一个文本框。
102             </textarea>
103             <br/>
104             <form action="">
105                 <input type="button" value="Hello world!">
106             </form>
107         </div>
108         <div id = "footer" style="background-color:#FFA500;clear:both;text-align:center;width:500px;">
109             Copyright © TTyb
110         </div>
111     </div>
112     <br/>
113     <hr>
114     <script>
115         document.write("<strong><big>Hello World!</big></strong>")
116     </script>
117     <br/>
118     <br/>
119     <p id="demo">
120     这里要发生奇迹
121     </p>
122     <script>
123     function myFunction()
124     {
125         demo = document.getElementById("demo")//找到demo
126         demo.innerHTML="Hello JavaScript!";//替换demo
127         demo.style.color="#ff0000";//变化格式
128     }
129     </script>
130     <br/>
131     <button 
132         type="button" onclick="myFunction()">Click Me!
133     </button>
134 </body>
135 </html>