Html列表与图片的应用
1.Html文档中使用的特殊字符
2.列表的标记
1) 用途：列表标记可以创建一般的无序列表、编号列表、以及定义列表的三种方式，还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容
① 无序列表<ul>…</ul>
② 有序列表<ol>…</ol>
③ 定义列表<dl>…</dl>
*****注意***
可以直接输入标记，查看标记默认状态
2）无序列表
①语法：
<ul type=”项目符号类型”>
<li type=”项目符号类型”>内容</li>
<li>内容</li>
</ul>
其中：<li>…</li>表示一个项目
② 项目符号类型参数及显示
3）有序列表
①语法：
<ol start=”列表起点” type=”项目符号类型”>
<li>内容1</li>
<li>内容2</li>
</ol>
② 项目符号类型参数及显示说明
4)定义列表
①语法：
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
<dl></dl>定义列表
<dt></dt>表示一个项目
<dd></dd>.表示一个项目下更详细的内容的解释
3.网页支持的图片
① GIF 256种颜色，支持透明，动画
② JPEG（高度压缩）1670万种颜色，不支持透明，不支持动画
③ PNG（网络可移植格式）无损压缩，支持透明，不支持动画，颜色从几种到1670万种
4.插入图片标记
<img src=”图片路径”/>
5.路径
①绝对路径：提供目标文档的完整主机名称、路径信息及文档全称
②相对路径：从当前文档开始的路径
③使用:
（1）如果当前文档和目标文档的位置平行，则直接书写目标文档全称；
（2）如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目标文档全称
（3）如果当前所在文档所在文件夹和目标文档位置平行，则书写为../目标文档全称
（4）根相对路径：从站点根目录开始的路径，以“/”开始（PHP使用）
6.图片属性
7.表格基本结构
<table>
<tr>
<td></td>
</tr>
</table>
<table>...</table>-----定义表格
<tr>...</tr>----定义表行
<td>...</td>---定义表列（单元格）
<th>...</th>----文字标题栏（加粗）会默认自动居中
8.表格标题
<table>
<caption></caption>
</table>
9.表格结构化
作用：代码乱序时结构得到保持
(1)结构化格式（加了无效果，浏览器看）
<thead>...</thead>----表示表头区
<tbody>...</tbody>----表体区
<tfoot>....</tfoot>------表尾区
(2)直列化格式
<colgroup>...</colgroup> 用于统一控制某一列的格式，取代重复的工作
（例如：用于某一列标红，或者某一列居中）
10.特殊表格技巧
（1）制作凹凸表格：改变table的 bordercolorlight、bordercolordark属性(这是手册中没有的)
Bordercolorlight 设置边框亮时的颜色（boder=”1”时才有用）
Bordercolordark 设置边框暗时的颜色（boder=”1”时才有用）
（2）隐藏表格某部分边框线：改变table下的frame属性和rules属性
（3）细线表格效果公式
①表格自身的border==”0”
②给表格设置背景颜色==细线颜色
③给表格设置、单元格之间距离cellspacing==细线粗细
④设置表格内部背景色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table</title>
<style>
.table {
border: 1px solid #ccc;
border-collapse: collapse;
}
.table thead tr th,
.table tbody tr td {
padding: 10px 12px;
text-align: center;
color: #333;
border: 1px solid #ddd;
border-collapse: collapse;
background-color: #fff;
}
</style>
</head>
<body>
<h3>css制作table细线表格</h3>
<table cellspacing="0" cellpadding="0" class="table">
<thead>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>电话号码</th>
<th>生日</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>coco</td>
<td>男</td>
<td>12345678888</td>
<td>2020-06-12 10:00:00</td>
</tr>
<tr>
<td>2</td>
<td>cici</td>
<td>男</td>
<td>13688889999</td>
<td>2020-06-12 10:00:00</td>
</tr>
<tr>
<td>3</td>
<td>tom</td>
<td>女</td>
<td>13656565656</td>
<td>2020-06-12 10:00:00</td>
</tr>
</tbody>
</table>
</body>
</html>
- 点赞
- 收藏
- 关注作者
评论（0）