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>:无序列表
内容前面默认为圆点，如下例所示：
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>
效果图如下：
可使用CSS控制其内容前面的提示，用法：
<style>
list-style-type:circle; (或者 square……等等，这两种效果分别如下所示 )
</style>
2) <ol>:有序列表
内容前面默认为1,2,3,4……，如下例所示：
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>
效果图如下：
可使用CSS控制其内容前面的提示，用法：
<style>
list-style-type:upper-roman; (……等等，效果分别如下所示 )
</style>
但是：一般情况下，为了避免不同浏览器的默认显示以及字体设置之间的差异，通常无论是有序还是无序，其list-style-type通常都设为none，也就是CS初始化时，会将其全都设为none，代替这种标志的方式，则是通过对<li>加背景图片来实现。
4.表格 table
<table>
<tr> / /行
<td> </td> //列
</tr>
</table>
表格默认为无边框的，如下：
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>
效果如下：
若要使其呈现好看的外观，则需要借助CSS的设置：
注意：加border设置时，若设置的是 table，则效果只呈现在最外圈的边框上；
若设置的是 tr, 则没有任何border效果；
若设置的是 td, 则每一个单元格都会加上边框；
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>
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>
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 下时，单元格之间还有空隙，为消除该空隙，做法是用CSS对其做改变，
需要注意的是：得在table下设置 border-collapse: collapse; (默认的border-collapse的值为separate，即单元格之间是“分裂”开的)
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>
效果如下：
练习表格之画一个效果如下图的课程表：
解法~
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>
效果如下：
虽然很简单，但是好有成就感！