zoukankan      html  css  js  c++  java

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

    输入一个单词：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

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

    图片对齐方式：

    文字靠下文字靠下

    文字居中文字居中

    文字靠上文字靠上

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

    文字靠下文字靠下

    文字靠下文字靠下

    图片区域映射：

    number 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. 香蕉
    3. 梨

    不同的项目符号：

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

    有序不同的项目符号

    1. 苹果
    2. 香蕉
    3. 梨
    1. 苹果
    2. 香蕉
    3. 梨
    1. 苹果
    2. 香蕉
    3. 梨
    1. 苹果
    2. 香蕉
    3. 梨

    自定义列表：

    苹果
    甜的，好吃的
     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
  • 相关阅读:
    Python入门：局部变量与全局变量2
    Python入门：局部变量与全局变量1
    Python入门：函数参数1
    Python入门：文件操作1
    Python入门：集合操作
    Python入门：用字典实现三级菜单
    Python入门：购物车实例
    Python:循环
    git 提交指定提交时用户名
    mysql 判断null 和 空字符串
  • 原文地址：https://www.cnblogs.com/bacydm/p/9762488.html
Copyright © 2011-2022 走看看