HTML篇二（一开始自学乱敲代码玩的现在看真的丑）-优快云博客

本文深入探讨了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

text文本输入：

firsr name:

last name:

radio按钮单选输入：

eg 1
eg 2

确认提交：

组合表单fieldset：shuru: first:

last:

下拉列表：onetwoshreefour

dianwo!
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