初始HTML04

HTML

列表标签

无序列表 默认用实心圆点标识列表项

 

1 <ul>
2 　　<li>list item 列表项</li>
3　　 <li>list item 列表项</li>
4 　　<li>list item 列表项</li>
5 </ul>

有序列表默认使用数字标识每条数据,start设置值,默认为1

1 <ol>
2     <li>list item 列表项</li>
3     <li>list item 列表项</li>
4     <li>list item 列表项</li>
5 </ol>

案例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>Document</title>
 9 </head>
10 
11 <body>
12     <!-- ul>li*3-->
13     <ul>
14         <li>item1</li>
15         <li>item2</li>
16         <li>item3</li>
17     </ul>
18     <!-- ctrl + shift + i 格式化-->>
19     <ol start='5'>
20         <li>item1</li>
21         <li>item2</li>
22         <li>item3</li>
23     </ol>
24 </body>
25 
26 </html>

列表嵌套

在已有列表中嵌套添加另一個列表,常见下拉菜單

 1 <ul>
 2         <li>
 3               西游记
 4             <ol>
 5                 <li>大師兄</li>
 6                 <li>沙師弟</li>
 7                 <li>白龍馬</li>
 8             </ol>
 9         </li>
10  </ul>

表格标签

表格由行和单元格组成,常用于直接的数据展示或辅助排版

基本结构如下:

 1     <table>
 2         <!-- 创建行标签  -->
 3         <tr>
 4             <!-- 行中创建单元格以显示数据-->>
 5             <td>姓名</td>
 6             <td>年龄</td>
 7             <td>班级</td>
 8         </tr>
 9         <tr>
10             <td>张三</td>
11             <td>20</td>
12             <td>一(1)班</td>
13         </tr>
14     </table>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>表格页面</title>
 9 </head>
10 
11 <body>
12     <!-- table>tr*行数>td*列数-->
13     <table border='1' cellspacing=“0”>
14         <tr>
15             <td>11</td>
16             <td>12</td>
17             <td>13</td>
18         </tr>
19         <tr>
20             <td>21</td>
21             <td>22</td>
22             <td>23</td>
23         </tr>
24         <tr>
25             <td>31</td>
26             <td>32</td>
27             <td>33</td>
28         </tr>
29         <tr>
30             <td>41</td>
31             <td>42</td>
32             <td>43</td>
33         </tr>
34     </table>
35 </body>
36 
37 </html>

 

table    表格

tr          行

td         列

border 边框

cellspacing 单元格距离

单元格合并

用于调整表结构,分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整

单元格属性　　 作用　　 取值
colspan 跨列合并单元格　 无单位数值
rowspan　　 跨行合并单元格　　 无单位数值 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>表格页面</title>
 9 </head>
10 
11 <body>
12     <!-- table>tr*行数>td*列数-->
13     <table border='1' cellspacing=“0”>
14         <tr>
15             <td colspan=‘3’>11</td>
16             <td>12</td>
17             <td>13</td>
18         </tr>
19         <tr>
20             <td rowspan=‘3’>21</td>
21             <td>22</td>
22             <td>23</td>
23         </tr>
24         <tr>
25             <td>31</td>
26             <td>32</td>
27             <td>33</td>
28         </tr>
29         <tr>
30             <td>41</td>
31             <td>42</td>
32             <td>43</td>
33         </tr>
34     </table>
35 </body>
36 
37 </html>

表单标签

表单用于采集用户的信息并提交给服务器,由表单标签和表单控件组成。表单标签form负责提交数据给服务器，表单控件负责收集数据，表单使用<form></form>元素

表单控件

名称

  
文本域 <input type="text" />
密码域 <input type="password" />
复选框 <input type="checkbox" />
单选按钮 <input type="radio" />
下拉列表 <select><option value="">文本</option></select>
多行文本域 <textarea cols="2" rows="3"></textarea>
提交按钮 <input type="submit" value="提交" />
重置按钮 <input type="reset" value="重置" />
普通按钮 <input type="button" value='按钮' /> 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title></title>
 8 </head>
 9 <body>
10     <form action="" method="GET">
11         <!--表单控件-->>
12         用户名:<input type='text'>
13         密码:<input type='password'>
14     </form>
15     
16 </body>
17 </html>

 

posted @ 2021-04-21 14:56  暄总-tester  阅读(84)  评论(0)    收藏  举报