HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)

时间:2023-01-29 23:18:43

1. h标签和p标签

  h标签只有6个,h1~h6, 表示1到6号标题,其中h1的字体最大。

  p标签表示段落,如果用在新闻里面,一般用于写正文部分。

2. img 标签

  <img>标签是一个空标签,没有闭合标签</img>;

  需要自闭合,基本用法:  <img src="url" />

                   延伸用法:  <img src="url"  alt="图片名或相关信息" title=“鼠标放在图片上去就会显示的内容”/>

          说明,src 的部分,指的是图片的位置,若在上一级,则 “../图片名”;

                    也可以是图片所在的网址;

             alt 的部分,若图片加载不出来,或者出错时,页面上可以有"图片名或相关信息"的一些提示;

  img是一个特殊的“内联元素”,也是一个“内联替换元素”,可设置图片的宽高,但无法去掉其自带的margin值,利用“内联转换成块状”,再设置其margin值为0;

<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素都没有实际的内容。

发现一位资深编程人,http://www.cnblogs.com/wkylin/archive/2011/05/12/2044328.html   嘻嘻嘻~果断关注

3.列表(无序列表、有序列表)

  1) <ul>:无序列表

      内容前面默认为圆点,如下例所示:

HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>四季</title>
 6 </head>
 7 <body>
 8     <div>
 9         <ul>
10             <li></li>
11             <li></li>
12             <li></li>
13             <li></li>
14         </ul>
15     </div>
16 </body>
17 </html>
View Code

效果图如下:

    HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)

      可使用CSS控制其内容前面的提示,用法:

        <style>  

           list-style-type:circle;    (或者 square……等等,这两种效果分别如下所示 )

        </style>

  HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)      HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)

  2) <ol>:有序列表

      内容前面默认为1,2,3,4……,如下例所示:

HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>四季</title>
 6 </head>
 7 <style type="text/css">
 8     
 9 </style>
10 <body>
11     <div>
12         <ol>
13             <li></li>
14             <li></li>
15             <li></li>
16             <li></li>
17         </ol>
18     </div>
19 </body>
20 </html>
View Code

效果图如下:

      HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)

     可使用CSS控制其内容前面的提示,用法:

        <style>  

           list-style-type:upper-roman;    (……等等,效果分别如下所示 )

        </style>

          HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)

但是:一般情况下,为了避免不同浏览器的默认显示以及字体设置之间的差异,通常无论是有序还是无序,其list-style-type通常都设为none,也就是CS初始化时,会将其全都设为none,代替这种标志的方式,则是通过对<li>加背景图片来实现。 

4.表格 table

  <table>

    <tr>                            / /行

      <td>      </td>      //列

    </tr>

  </table> 

表格默认为无边框的,如下:

HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>table</title>
 6 </head>
 7 <body>
 8     <table>
 9         <tr>
10             <td>一行一列</td>
11             <td>一行二列</td>
12             <td>一行三列</td>
13             <td>一行四列</td>
14         </tr>
15         <tr>
16             <td>二行一列</td>
17             <td>二行二列</td>
18             <td>二行三列</td>
19             <td>二行四列</td>
20         </tr>
21     </table>
22 </body>
23 </html>
View Code

效果如下:

    HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)

  若要使其呈现好看的外观,则需要借助CSS的设置:

    注意:加border设置时,若设置的是  table,则效果只呈现在最外圈的边框上;

                若设置的是  tr, 则没有任何border效果;

                若设置的是  td, 则每一个单元格都会加上边框;

HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>table的border 设置在table时</title>
 6 </head>
 7 <style type="text/css">
 8     table
 9         {
10             border: 1px solid green;
11         }
12 </style>
13 <body>
14     <table>
15         <tr>
16             <td>一行一列</td>
17             <td>一行二列</td>
18             <td>一行三列</td>
19             <td>一行四列</td>
20         </tr>
21         <tr>
22             <td>二行一列</td>
23             <td>二行二列</td>
24             <td>二行三列</td>
25             <td>二行四列</td>
26         </tr>
27     </table>
28 </body>
29 </html>
border 设置在table
HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>table的border 设置在tr时</title>
 6 </head>
 7 <style type="text/css">
 8     tr
 9         {
10             border: 1px solid green;
11         }
12 </style>
13 <body>
14     <table>
15         <tr>
16             <td>一行一列</td>
17             <td>一行二列</td>
18             <td>一行三列</td>
19             <td>一行四列</td>
20         </tr>
21         <tr>
22             <td>二行一列</td>
23             <td>二行二列</td>
24             <td>二行三列</td>
25             <td>二行四列</td>
26         </tr>
27     </table>
28 </body>
29 </html>
border设置在tr
HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>table的border 设置在td时</title>
 6 </head>
 7 <style type="text/css">
 8     td
 9         {
10             border: 1px solid green;
11         }
12 </style>
13 <body>
14     <table>
15         <tr>
16             <td>一行一列</td>
17             <td>一行二列</td>
18             <td>一行三列</td>
19             <td>一行四列</td>
20         </tr>
21         <tr>
22             <td>二行一列</td>
23             <td>二行二列</td>
24             <td>二行三列</td>
25             <td>二行四列</td>
26         </tr>
27     </table>
28 </body>
29 </html>
border设置在td

效果如下:

  HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)  HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)   HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)

 从上面效果来看,border设置在 td 下时,单元格之间还有空隙,为消除该空隙,做法是用CSS对其做改变,

 需要注意的是:得在table下设置      border-collapse: collapse;       (默认的border-collapse的值为separate,即单元格之间是“分裂”开的)

HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>table的border 设置在td时</title>
 6 </head>
 7 <style type="text/css">
 8     table
 9         {
10             border-collapse: collapse;
11         }
12     td
13         {
14             border: 1px solid green;
15         }
16 </style>
17 <body>
18     <table>
19         <tr>
20             <td>一行一列</td>
21             <td>一行二列</td>
22             <td>一行三列</td>
23             <td>一行四列</td>
24         </tr>
25         <tr>
26             <td>二行一列</td>
27             <td>二行二列</td>
28             <td>二行三列</td>
29             <td>二行四列</td>
30         </tr>
31     </table>
32 </body>
33 </html>
View Code

效果如下:

    HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)

练习表格之画一个效果如下图的课程表:

    HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)

解法~

HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>课程表</title>
  6 </head>
  7 <style type="text/css">
  8     table
  9         {
 10             border-collapse: collapse;
 11             border: 1px solid green;
 12         }
 13     td
 14         {
 15             border: 1px solid black;
 16             text-align: center;
 17         }
 18     #head
 19         {
 20             font-size: 25px;
 21         }
 22     #date
 23         {
 24             font-size: 20px;
 25         }
 26 </style>
 27 <body>
 28     <table>
 29         <caption id="head">课程表</caption>
 30         <th colspan="7"></th>
 31         <tr>
 32             <th></th>
 33         </tr>
 34         <tr id="date">
 35             <td colspan="2">时间</td>
 36             <td>星期一</td>
 37             <td>星期二</td>
 38             <td>星期三</td>
 39             <td>星期四</td>
 40             <td>星期五</td>
 41         </tr>
 42         <tr>
 43             <td rowspan="4">上午</td>
 44             <td>8:30~9:15</td>
 45             <td>语文</td>
 46             <td>数学</td>
 47             <td>英语</td>
 48             <td>政治</td>
 49             <td>语文</td>
 50         </tr>
 51         <tr>
 52             <td>9:25~10:10</td>
 53             <td>数学</td>
 54             <td>英语</td>
 55             <td>政治</td>
 56             <td>语文</td>
 57             <td>数学</td>
 58         </tr>
 59         <tr>
 60             <td>10:20~11:05</td>
 61             <td>英语</td>
 62             <td>政治</td>
 63             <td>语文</td>
 64             <td>数学</td>
 65             <td>英语</td>
 66         </tr>
 67         <tr>
 68             <td>11:15~12:00</td>
 69             <td>政治</td>
 70             <td>语文</td>
 71             <td>数学</td>
 72             <td>英语</td>
 73             <td>政治</td>
 74         </tr>
 75         <tr>
 76             <th></th>
 77         </tr>
 78         <tr>
 79             <td rowspan="4">下午</td>
 80             <td>13:30~14:15</td>
 81             <td>地理</td>
 82             <td>历史</td>
 83             <td>生物</td>
 84             <td>音乐</td>
 85             <td>体育</td>
 86         </tr>
 87         <tr>
 88             <td>14:25~15:10</td>
 89             <td>历史</td>
 90             <td>英语</td>
 91             <td>地理</td>
 92             <td>生物</td>
 93             <td>数学</td>
 94         </tr>
 95         <tr>
 96             <td>15:20~16:05</td>
 97             <td>英语</td>
 98             <td>政治</td>
 99             <td>语文</td>
100             <td>数学</td>
101             <td>英语</td>
102         </tr>
103         <tr>
104             <td>16:15~17:00</td>
105             <td>政治</td>
106             <td>语文</td>
107             <td>数学</td>
108             <td>英语</td>
109             <td>政治</td>
110         </tr>
111         <tr>
112             <th></th>
113         </tr>
114         <tr>
115             <td rowspan="2">晚上</td>
116             <td>18:30~19:15</td>
117             <td rowspan="2" colspan="5">晚自习</td>
118         </tr>
119         <tr>
120         <td>19:25~20:10</td>
121         </tr>
122     </table>
123 </body>
124 </html>
课程表

效果如下:      

         HTML学习笔记12——HTML 有语义的标签1(h,p标签,img标签,列表,表格_制作课程表)

虽然很简单,但是好有成就感!