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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
