HTML篇二（一开始自学乱敲代码玩的现在看真的丑）

输入一个单词：simple！

输入一个单词：simple！
输入一个单词：simple！

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}

公式：e=mc²

 1  <p>输入一个单词：simple！</p>
 2   <kbd>输入一个单词：simple！</kbd>  <br>
 3   <tt>输入一个单词：simple！</tt>
 4   
 5   <hr>
 6 <code>
 7 <pre>
 8 var person = {
 9     firstName:"Bill",
10     lastName:"Gates",
11     age:50,
12     eyeColor:"blue"
13 }
14 </pre>
15 </code>
16 <hr>
17 <p>公式：<var>e<var>=<var>m</var><var>c</var><sup>2</sup></p>
18 <hr>

Code -- 1

图片插入及替换文本：
这是百度的logo

图片对齐方式：

文字靠下文字靠下

文字居中文字居中

文字靠上文字靠上

图片可以浮动到文字左右：

文字靠下文字靠下

图片区域映射：

 1 <p><b>图片插入及替换文本：<b><br />
 2 这是百度的logo<a href="http://www.baidu.com"><img src="xxxxxxx" alt="logo"></a>
 3 <!--https://www.baidu.com/img/bd_logo1.png?where=super-->
 4 </p>
 5 <h2>图片对齐方式：
 6 </h3>
 7 <p>文字靠下<img src="0003.jpg" width="100" height="100" align="bottom">文字靠下</p>
 8 <p>文字居中<img src="0003.jpg" width="100" height="100" align="middle">文字居中</p>
 9 <p>文字靠上<img src="0003.jpg" width="100" height="100" align="top">文字靠上</p>
10 
11 <h2>图片可以浮动到文字左右：</h2>
12 <p>文字靠下<img src="0003.jpg" width="100" height="100" align="right">文字靠下</p>
13 <p>文字靠下<img src="0003.jpg" width="100" height="100" align="left">文字靠下</p>
14 
15 <h2>图片区域映射：</h2>
16 <img src="0004.jpg" border="0" width="200" height="200" usemap="#number" alt="number" />
17 <map name="number" id="number">
18 
19 <area 
20 shape="rect"
21 coords="0,0,100,100"
22 href="number/1.html"
23 target="_blank"
24 alt="number1"
25 />
26 
27 <area 
28 shape="rect"
29 coords="100,0,200,100"
30 href="number/2.html"
31 target="_blank"
32 alt="number2"
33 />
34 
35 <area 
36 shape="rect"
37 coords="0,100,100,200"
38 href="number/3.html"
39 target="_blank"
40 alt="number3"
41 />
42 
43 <area 
44 shape="rect"
45 coords="100,100,200,200"
46 href="number/4.html"
47 target="_blank"
48 alt="number4"
49 />

View Code

表格table行tr每个表格数据td:

100

200

300

100	200	300
400	500	600
700	800	900

标题
A	B	C
100	200	300
400	500	600
700	800	900

biaoti
name	number
jion	33340160	99965411

biaoti
name	jion
number	45612389
number	98745631

100	200	300
400	500	600
700	800	900

100	200	300
400	500	600
700	800	900

100	200	300
400	500	600
700	800	900

100	200
400	500

100	200
400	500

100	200
400	500

100	200
400	500

100	200
400	500

  1 <h2>表格table行tr每个表格数据td:</h2>
  2 
  3 <table border="1"> <!--1-->
  4 <tr>
  5  <td>100</td>
  6 </tr>
  7 </table><br>
  8 <table border="10" bgcolor="yellow"> <!--1*3-->
  9 <tr>
 10   <td>100</td>
 11   <td>200</td>
 12   <td>300</td>
 13 </tr>
 14 </table><br>
 15 <table border="20" background="0001.jpg"> <!--3*3-->
 16 <tr>
 17   <td>100</td>
 18   <td>200</td>
 19   <td>300</td>
 20 </tr>
 21 <tr>
 22   <td>400</td>
 23   <td>500</td>
 24   <td>600</td>
 25 </tr>
 26 <tr>
 27   <td>700</td>
 28   <td>800</td>
 29   <td>900</td>
 30 </tr>
 31 </table><br />
 32 
 33 <table border="30"> <!--3*3+biaotou-->
 34 <caption>标题</caption>
 35 <tr>
 36   <th>A</th>
 37   <th>B</th>
 38   <th>C</th>
 39 </tr>
 40 <tr>
 41   <td>100</td>
 42   <td>200</td>
 43   <td>300</td>
 44 </tr>
 45 <tr>
 46   <td>400</td>
 47   <td>500</td>
 48   <td>600</td>
 49 </tr>
 50 <tr>
 51   <td>700</td>
 52   <td>800</td>
 53   <td>900</td>
 54 </tr>
 55 </table><br />
 56 
 57 <table border="10">
 58 <caption>biaoti</caption>
 59 <tr>
 60   <th>name</th>
 61   <th colspan="2">number</th>
 62 </tr>
 63 <tr>
 64   <td>jion</td>
 65   <td>33340160</td>
 66   <td>99965411</td>
 67 </tr>
 68 </table><br />
 69 
 70 <table border="10">
 71 <caption>biaoti</caption>
 72 <tr>
 73   <th>name</th>
 74   <td>jion</td>
 75 </tr>
 76 <tr>
 77   <th rowspan="2">number</th>
 78   <td>45612389</td>
 79 </tr>
 80 <tr>
 81   <td>98745631</td>
 82 </tr>
 83 </table><br />
 84 
 85 <table border="10" cellpadding="100"> <!--字边距，可嵌套-->
 86 <tr>
 87   <td>100</td>
 88   <td>200</td>
 89   <td background="0002.jpg">300</td>
 90 </tr>
 91 <tr>
 92   <td>400</td>
 93   <td>500</td>
 94   <td>600</td>
 95 </tr>
 96 <tr>
 97   <td>700</td>
 98   <td>800</td>
 99   <td>900</td>
100 </tr>
101 </table><br />
102 
103 <table border="10" cellspacing="10"> <!--格间距-->
104 <tr>
105   <td bgcolor="yellow">100</td>
106   <td>200</td>
107   <td background="0002.jpg">300</td>
108 </tr>
109 <tr>
110   <td>400</td>
111   <td>500</td>
112   <td>600</td>
113 </tr>
114 <tr>
115   <td>700</td>
116   <td>800</td>
117   <td >900</td>
118 </tr>
119 </table><br />
120 
121 <table border="10" width="300" height="300"> <!--3*3-->
122 <tr>
123   <td align="left">100</td>
124   <td align="middle">200</td>
125   <td align="right">300</td>
126 </tr>
127 <tr>
128   <td>400</td>
129   <td>500</td>
130   <td>600</td>
131 </tr>
132 <tr>
133   <td>700</td>
134   <td>800</td>
135   <td>900</td>
136 </tr>
137 </table><br />
138 
139 <table frame="box">
140 <tr>
141   <td>100</td>
142   <td>200</td>
143 </tr>
144 <tr>
145   <td>400</td>
146   <td>500</td>  
147 </tr>
148 </table><br />
149 
150 <table frame="above">
151 <tr>
152   <td>100</td>
153   <td>200</td>
154 </tr>
155 <tr>
156   <td>400</td>
157   <td>500</td>  
158 </tr>
159 </table><br />
160 
161 <table frame="below">
162 <tr>
163   <td>100</td>
164   <td>200</td>
165 </tr>
166 <tr>
167   <td>400</td>
168   <td>500</td>  
169 </tr>
170 </table><br />
171 
172 <table frame="hsides">
173 <tr>
174   <td>100</td>
175   <td>200</td>
176 </tr>
177 <tr>
178   <td>400</td>
179   <td>500</td>  
180 </tr>
181 </table><br />
182 
183 <table frame="vsides">
184 <tr>
185   <td>100</td>
186   <td>200</td>
187 </tr>
188 <tr>
189   <td>400</td>
190   <td>500</td>  
191 </tr>
192 </table><br />

View Code

HTML列表

无序列表:

苹果
香蕉
梨

有序列表:

苹果
香蕉
梨

不同的项目符号：

苹果
香蕉
梨

苹果
香蕉
梨

苹果
香蕉
梨

有序不同的项目符号

苹果
香蕉
梨

苹果
香蕉
梨

苹果
香蕉
梨

苹果
香蕉
梨

自定义列表：

苹果: 甜的，好吃的

 1 <h2>HTML列表</h2>
 2     <h4>无序列表:</h4>
 3     <ul>
 4         <li>苹果</li>
 5         <li>香蕉</li>
 6         <li>梨</li>
 7     </ul>
 8     <h4>有序列表:</h4>
 9     <ol>
10         <li>苹果</li>
11         <li>香蕉</li>
12         <li>梨</li>
13     </ol>
14     <h4>不同的项目符号：</h4>
15     <ul type="disc">
16         <li>苹果</li>
17         <li>香蕉</li>
18         <li>梨</li>
19     </ul>
20     <ul type="circle">
21         <li>苹果</li>
22         <li>香蕉</li>
23         <li>梨</li>
24     </ul>
25     <ul type="square">
26         <li>苹果</li>
27         <li>香蕉</li>
28         <li>梨</li>
29     </ul>
30     <h4>有序不同的项目符号</h4>
31     <ol type="a">
32         <li>苹果</li>
33         <li>香蕉</li>
34         <li>梨</li>
35     </ol>
36     <ol type="A">
37         <li>苹果</li>
38         <li>香蕉</li>
39         <li>梨</li>
40     </ol>
41     <ol type="i">
42         <li>苹果</li>
43         <li>香蕉</li>
44         <li>梨</li>
45     </ol>
46     <ol type="I">
47         <li>苹果</li>
48         <li>香蕉</li>
49         <li>梨</li>
50     </ol>
51     <h4>自定义列表：</h4>
52     <dl>
53         <dt>苹果</dt>
54         <dd>甜的，好吃的<dd>
55     </dl>
56

View Code

组合表单fieldset：
下拉列表：

datalist:

html输入类型：input

type="text"单行文字输入
type="password"密码字段
type="submit"定义提交数据至表单处理程序
type="radio"单选按钮
type="checkbox"多选
type="button"定义按钮
html5其他type：color date datetime datetime-local email month number range search tel time url week

输入限制问题！

 1 <form>
 2             <h2>text文本输入：</h2>
 3             firsr name:<br />
 4             <input type="text" name="firstname" />
 5             <br />
 6             last name:<br />
 7             <input type="text" name="lastname" />
 8         </form>    <br />
 9             <br />
10         <form>    
11             <h2>radio按钮单选输入：</h2>
12             <input type="radio" name="eg" value="eg 1" checked />eg 1
13             <br />
14             <input type="radio" name="eg" value="eg 2" />eg 2
15         </form>
16         
17         <br />
18         
19         <form action="asdasd.php" method="get"><!--提交到这里处理-->
20             <h2>确认提交：</h2>
21             
22             <input type="submit" value="确认" />
23         </form>
24         
25         组合表单fieldset：
26         <form action="" method="get">
27             <fieldset>
28                 <legend>shuru:</legend>
29                 first:<br />
30                 <input type="text" name="first" value="one"><br />
31                 last:<br />
32                 <input type="text" name="last" value="two"><br />
33                 <input type="submit" value="submit">
34             </fieldset>
35         </form><br />
36         
37         下拉列表：
38         <form ation="" method="get">
39             <select name="cars">
40             <option value="one">one</option>
41             <option value="two">two</option>
42             <option value="shree" selected>shree</option>
43             <option value="four">four</option>
44             </select><br />
45             <input type="submit">
46         </form><br />
47         
48         <button type="button" onclick="alert('hello world!')">dianwo!</button><br />
49         
50         datalist:
51         <form action="">
52         <input list="browsers" name="browser">
53         <datalist id="browsers">
54             <option value="Internet Explorer">
55             <option value="Firefox">
56             <option value="Chrome">
57             <option value="Opera">
58             <option value="Safari">
59         </datalist>
60         <input type="submit">
61         </form>
62         
63         <p>
64         <h2>html输入类型：input</h2><br />
65         type="text"单行文字输入<br />
66         type="password"密码字段<br />
67         type="submit"定义<b>提交</b>数据至<b>表单处理程序</b><br />
68         type="radio"单选按钮<br />
69         type="checkbox"多选<br />
70         type="button"定义按钮<br />
71         html5其他type：color date datetime datetime-local email month number range search tel time url week
72         </p>
73         
74         <p>
75         输入限制问题！
76         </p>
77

View Code

HTML篇二 （一开始自学乱敲代码玩的现在看真的丑）

图片对齐方式：

图片可以浮动到文字左右：

图片区域映射：

表格table行tr每个表格数据td:

HTML列表

无序列表:

有序列表:

不同的项目符号：

有序不同的项目符号

自定义列表：

text文本输入：

radio按钮单选输入：

确认提交：

html输入类型：input

HTML篇二（一开始自学乱敲代码玩的现在看真的丑）