码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-10-09 20:38:17      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:table   tab   img   name   sea   一个   sel   aci   lis   

输入一个单词:simple!

输入一个单词:simple!
输入一个单词:simple!


 

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

公式:e=mc2


技术分享图片
 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技术分享图片

图片对齐方式:

文字靠下技术分享图片文字靠下

文字居中技术分享图片文字居中

文字靠上技术分享图片文字靠上

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

文字靠下技术分享图片文字靠下

文字靠下技术分享图片文字靠下

图片区域映射:

技术分享图片 number1 number2 number3 number4

 

 

技术分享图片
 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

100 200 300

100 200 300
400 500 600
700 800 900

标题
ABC
100 200 300
400 500 600
700 800 900

biaoti
namenumber
jion 33340160 99965411

biaoti
name jion
number 45612389
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. 苹果
  2. 香蕉

不同的项目符号:

  • 苹果
  • 香蕉
  • 苹果
  • 香蕉
  • 苹果
  • 香蕉

有序不同的项目符号

  1. 苹果
  2. 香蕉
  1. 苹果
  2. 香蕉
  1. 苹果
  2. 香蕉
  1. 苹果
  2. 香蕉

自定义列表:

苹果
甜的,好吃的

 

技术分享图片
 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:


下拉列表:



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   tab   img   name   sea   一个   sel   aci   lis   

原文地址:https://www.cnblogs.com/bacydm/p/9762488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!