<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
abbr{text-decoration:none}
</style>
<title>图表排版部分</title>
</head>
<body>
<h1>HTML的图表排版部分</h1>
<hr/>
<h2 style="text-align:center">介绍</h2>
<span><strong>图表三兄弟</strong>主要由
<abbr title="行内元素"><mark><img>图片</mark></abbr>、
<abbr title="块级元素"><mark><table>表格</mark></abbr>、
<abbr title="块级元素"><mark><li>列表</mark></abbr>组成，同时也是HTML中第二重要的部分。同样和第一部分的文本四剑客一样要记住这些标签，在后期的实战中
都是会经常使用到的。该部分的用法大概都有.....
</span>
<br><br><h2 style="text-align:center">图片部分</h2>
<ol type="1">
<li>定义图片名称：<img alt="HTML学习笔记">图片名称</img></li>
<li>定义图像链接：<img src="C:\xxx.png"></li>
<li>定义图片边框：<img border="0">边框粗细为零</li>
<li>定义图片对齐方式和宽高：width和height以及align</li>
<li><dl>
<dt>定义图片映射：<map>和<area></dt>
<dd>(1)定义需要映射的坐标点：<area coords="0,0,2,3"></dd>
<dd>(2)定义图片链接和名称以及打开方式、映射出来的类型：alt和href以及target、type="html/png"</dd>
</dl></li>
<li><i style="color:red">映射指的是一个图片中的东西当点击那个东西时。会弹出一个指定的大图</i></li>
</ol>
<br><h2 style="text-align:center">表格部分</h2>
<ol type="1">
<li><dl>
<dt><tr>和<td>分别指的是行与列</dt>
<dd>(1)headers="name"表示td标签中的文本的表头是name那一行或那一列的</dd>
<dd>(2)其他的属性与th相似</dd>
</dl></li>
<li><dl>
<dt><th>指的是表格表头（该表头只占第一个单元格）</dt>
<dd>(1)axis属性可以区分分类不同的th表头</dd>
<dd>(2)scope表示定义该表头是一行的或一列的表头，属性值只有col和row</dd>
</dl></li>
<li><caption>指的是表格标题</li>
<li><colgroup>和<col>表示定义全局表格属性，格式：<col span="2" style="xxx"></li>
<li><table frame="void、above、below、hsides、lhs、rhs、vsides、box、border">表示显示外部哪个方向的边框</li>
<li><table rules="none、groups、roes、cols、all">表示显示内部哪个方向的间隔线条</li>
<li><table bgcolor="red">表示的是每个单元格的背景颜色；background是全局背景颜色</li>
<li><table bordercolor="red">表示的是边框的颜色</li>
<li>cellspacing表示表格单元格之间的空间距离；cellpadding表示表格边框与内容的距离</li>
<li>colspan表示合并多列单元格为一行单元格；rowspan表示合并多行单元格为一列单元格</li>
<li><thead><tbody<<tfoot>分别表示头部、主体、脚部</li>
</ol>
<br><h2 style="text-align:center">列表部分</h2>
<ol type="1">
<li><ul>和<ol>以及<dl>分别表示无序列表（没有数字）和有序列表（只有符号）以及自定义列表（父子列表）</li>
<li><dt>和<dd>分别表示父子列表（<dd>标签内，您能放置段落、换行、图片、链接、列表等等。）</li>
<li><i style="color:red">注意list-style-type是无序列表的类型选择，type是有序列表的</i></li>
</ol>
</body>
</html>
扫一扫
511
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
