HTML常用标签【元素】--续
<!DOCTYPE > <html> <head> <meta charset="utf-8"> <title>文本元素</title> </head> <body> <!-- 1.标题（h1~h6） --> <h1>苍老师</h1> <h2>李磊</h2> <h3>韩梅梅</h3> <!-- 2.段落 --> <p>李磊暗恋韩梅梅</p> <!-- 链接到锚点：#锚点名 --> <p><a href="#cang">苍老师</a>吃醋</p> <!-- 3.列表 --> <!-- 3.1有序列表 --> <ol> <li>浙江省</li> <li>福建省</li> <li>山东省</li> </ol> <!-- 3.2无序列表 --> <ul> <li>北京</li> <li>上海</li> <li>广州</li> </ul> <!-- 3.3列表嵌套 --> <!-- 将ul作为外层li的内容来对待 --> <ol> <li> 浙江省 <ul> <li>杭州</li> <li>宁波</li> <li>温州</li> </ul> </li> <li> 江苏省 <ul> <li>南京</li> <li>无锡</li> <li>苏州</li> </ul> </li> <li> 山东省 <ul> <li>济南</li> <li>德州</li> <li>青岛</li> <li>台儿庄</li> </ul> </li> </ol> <ul> <li> 鲜花 <ol> <li>荷花</li> <li>水仙</li> <li>玫瑰</li> </ol> </li> <li> 宠物 <ol> <li>泰迪</li> <li>哈士奇</li> </ol> </li> </ul> <!-- 4.行内元素 --> <p> 北京市<i>海淀</i>区<b>北三环</b>西路甲<u>19</u>号<span style="color:red">中鼎大厦</span>B7 </p> <!-- 5.空格折叠 --> <p> 那是一个 秋天，<br> 看着李磊 离去。<br> 奔着梅梅 而去，<br> 误入老苍 心间。<br> </p> <!-- 6.图片 --> <!-- 6.1 绝对路径： D:\Eclipse_neon2\TutorialWorkspace\JavaTutorial_Web\src\main\webapp\day01\1.png /home/soft01/day01/1.png 从根路径写到图片目录及名称； 项目上线时要将代码放到服务器上， 若放代码时改变了盘符则所以图片 的目录都需要加以修改。 --> <!-- 6.2相对路径： 写出要访问的图片和当前页面的相对位置， 将代码放在服务器上时，若盘符发生变化， 由于他们相对关系不变，代码不用修改。 --> <!-- 图片和页面平级 --> <img src="01.jpg"> <!-- 图片在页面下级 --> <img src="i/02.jpg"> <!-- 图片在页面上级 --> <img src="../03.jpg"> <!-- 通常的情况 --> <img src="../images/04.jpg"> <!-- 7.超链接 --> <!-- 7.1链接到外部网站 --> <p><a href="http://www.baidu.com" target="_blank">跳转百度</a></p> <!-- 7.2 链接到本页面的某个位置（锚）--> <p> <!-- 声明一个锚 使用id也可以--> <a name="cang">苍老师</a>是一个德艺双馨的好老师... </p> <p> <!-- 页面的顶部是默认的锚点，没有名字 --> <a href="#">回到顶部</a> </p> <!-- 8.表格 --> <!-- 8.1普通的表格 --> <table width="20%" border="1" cellspacing="0"> <tr> <td>苍老师</td> <td>范老师</td> </tr> <tr> <td>王老师</td> <td>程老师</td> </tr> </table> <!-- 8.2跨列 --> <table width="20%" border="1" cellspacing="0"> <tr> <!-- 2.用colspan设置跨几列 --> <td colspan="2">苍老师</td> <!-- 1.删除被占用的单元格 【列】--> <!-- <td>范老师</td> --> </tr> <tr> <td>王老师</td> <td>程老师</td> </tr> </table> <!-- 8.3跨行 --> <table width="20%" border="1" cellspacing="0"> <tr> <td rowspan="2">苍老师</td> <td>范老师</td> </tr> <tr> <!-- <td>王老师</td> --> <td>程老师</td> </tr> </table> <!-- 8.4行分组：便于给每一组统一设置样式 --> <table width="40%" border="1" cellspacing="0"> <thead> <tr> <td>编号</td> <td>名称</td> <td>金额</td> </tr> </thead> <tbody style="color:red"> <tr> <td>001</td> <td>鼠标</td> <td>100</td> </tr> <tr> <td>002</td> <td>键盘</td> <td>200</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">合计</td> <td>300</td> </tr> </tfoot> </table> </body> </html>