html基础(2)

表格 table (会使用):

创建表格:

html基础(2)_第1张图片

 

 

html基础(2)_第2张图片

table 的几个属性:

html基础(2)_第3张图片

 

html基础(2)_第4张图片

 

 

 

 

html基础(2)_第5张图片

 

 

表中内容的居中对齐:

html基础(2)_第6张图片

 

 

表头标签:

html基础(2)_第7张图片

 

 

表格标题:

html基础(2)_第8张图片

 

html基础(2)_第9张图片

 

注:

 

 

表格小案例:

html基础(2)_第10张图片

 

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>title>
 6 
 7 head>
 8 <body>
 9     <table border="1" cellspacing="0">
10         <caption><h3>小说排行榜h3>caption>
11         <tr>
12             <th>排名th>
13             <th>关键词th>
14             <th>趋势th>
15             <th>今日搜索th>
16             <th>最近七日th>
17             <th>相关链接th>
18         tr>
19         <tr>
20             <td>1td>
21             <td>鬼吹灯td>
22             <td>
23                 <img src="./images/down.jpg"/>
24             td>
25             <td>345td>
26             <td>123td>
27             <td>
28                 <a href="#">贴吧a>
29                 <a href="#">百度a>
30                 <a href="#">谷歌a>
31             td>
32         tr>
33         <tr>
34             <td>2td>
35             <td>盗墓笔记td>
36             <td>td>
37             <td>124td>
38             <td>675432td>
39             <td>贴吧td>
40         tr>
41         <tr>
42             <td>3td>
43             <td>西游记td>
44             <td>td>
45             <td>212td>
46             <td>7654td>
47             <td>贴吧td>
48         tr>
49         <tr>
50             <td>4td>
51             <td>盗墓笔记td>
52             <td>td>
53             <td>124td>
54             <td>675432td>
55             <td>贴吧td>
56         tr>
57         <tr>
58             <td>5td>
59             <td>鬼吹灯td>
60             <td>td>
61             <td>345td>
62             <td>123td>
63             <td>贴吧td>
64         tr>
65     table>
66 
67 
68     <script>
69     script>
70 body>
71 html>
View Code

 

表格结构(了解):

html基础(2)_第11张图片

 

html基础(2)_第12张图片

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>title>
 6 
 7 head>
 8 <body>
 9     <table border="1" cellspacing="0">
10         <caption><h3>小说排行榜h3>caption>
11         <thead>
12             <tr>
13                 <th>排名th>
14                 <th>关键词th>
15                 <th>趋势th>
16                 <th>今日搜索th>
17                 <th>最近七日th>
18                 <th>相关链接th>
19             tr>
20         thead>
21         <tbody>
22             <tr>
23                 <td>1td>
24                 <td>鬼吹灯td>
25                 <td>
26                     <img src="./images/down.jpg"/>
27                 td>
28                 <td>345td>
29                 <td>123td>
30                 <td>
31                     <a href="#">贴吧a>
32                     <a href="#">百度a>
33                     <a href="#">谷歌a>
34                 td>
35             tr>
36             <tr>
37                 <td>2td>
38                 <td>盗墓笔记td>
39                 <td>td>
40                 <td>124td>
41                 <td>675432td>
42                 <td>贴吧td>
43             tr>
44             <tr>
45                 <td>3td>
46                 <td>西游记td>
47                 <td>td>
48                 <td>212td>
49                 <td>7654td>
50                 <td>贴吧td>
51             tr>
52             <tr>
53                 <td>4td>
54                 <td>盗墓笔记td>
55                 <td>td>
56                 <td>124td>
57                 <td>675432td>
58                 <td>贴吧td>
59             tr>
60             <tr>
61                 <td>5td>
62                 <td>鬼吹灯td>
63                 <td>td>
64                 <td>345td>
65                 <td>123td>
66                 <td>贴吧td>
67             tr>
68         tbody>
69 
70     table>
71     <script>
72     script>
73 body>
74 html>
View Code

 

合并单元格(难点):

html基础(2)_第13张图片

 

html基础(2)_第14张图片

上面代码的效果图:

 

 

 

 

总结:三步:

第一步:先确认是跨行还是跨列

第二步:从上到下 ,从左到右

第三步:删除的个数

 

表格总结:

html基础(2)_第15张图片

 

 

表单标签(掌握):

 

input控件(重点):

 

html基础(2)_第16张图片

 

html基础(2)_第17张图片

 

 

html基础(2)_第18张图片

 

html基础(2)_第19张图片

 

 

 

 

继续看单选框

radio

html基础(2)_第20张图片

html基础(2)_第21张图片

 

但是,如果仅仅只这样的话,它还是不行的,此时可以多选。

应该把它们放到一组中,才可以达到单选。

 

html基础(2)_第22张图片

 

这时就可以了。

 

 

下面看多选框

checkbox:

html基础(2)_第23张图片

 

 

 

按钮:

 

 

html基础(2)_第24张图片

 

还可以图片的形式作为 按钮:

html基础(2)_第25张图片

 

 

 

还可以上传文件:
html基础(2)_第26张图片

 

 

Label标签:

 

 html基础(2)_第27张图片

 

label 标签可以给input 标签提供服务的。

点击label 标签的时候,被绑定的表单就会获得输入焦点。

textarea控件 (文本域):

html基础(2)_第28张图片

 

注:

 

html基础(2)_第29张图片

 

 

下拉菜单:

html基础(2)_第30张图片

 

html基础(2)_第31张图片

 

如果需要默认选中其中的option 用的是 selected = " selected "  

注:单选多选中用的是checked = " checked"

 

表单域:

表单域就是一个大的框框。

html基础(2)_第32张图片

 

html基础(2)_第33张图片

 

转载于:https://www.cnblogs.com/zach0812/p/11592869.html

你可能感兴趣的:(html基础(2))