天天看點

html初學(二)

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>      
  • 這裡是有序清單list1
  • 這裡是有序清單list2
  • 這裡是無序清單
  • 這裡是無序清單
  • 這裡是有序清單listA
  • 這裡是有序清單listB
不管是标題還是正文

這一塊都是這個顔色了

這是一片是藍色 這一片是碧綠色

這裡是标題

Menu

html

css

JavaScript

1、這裡是正文

這裡是文本框:

密碼:

Male

Female

not male

not female

我是一個文本框。

Copyright © TTyb

這裡要發生奇迹

Click Me!

第一列的頭 第二列的頭 第三列的頭
第一列 第二列 第三列
  • 第一列
  • 第一列
  • 第一列
第三列
第二列

繼續閱讀