03-HTML_列表和图片
IETester
一款ie浏览器多版本测试工具，能很方便在ie5.5,ie6,ie7,ie8,ie9,ie10切换，只需安装一个软件，就可以解决N多ie浏览器的问题，满足大部分IE浏览器兼容性的测试，是测试网页在不同浏览中所出现BUG的工具，具有Office 2007 的可视化界面。支持 Windows 7, Vista and XP系统，并且有中文，英文等多国语言支持。
显示结果 描述 实体名称(转义码) 实体编号
-----------------------------------------
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' '
￠ 分 ¢ ¢
£ 镑 £ £
¥ 日圆 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
(2) 一段文字中 两个文字
还可以嵌套列表, 便于概况一系列相关的内容.
<ul>...</ul>
语法:
<ul type="项目符号类型">
<li type="项目符号类型">内容</li>
<li>内容2</li>
</ul>
说明:
<li></li> 表示一个列表项
列表项目类型值 描述
disc 实圆 (默认)
circle 空圆
square 实方块
<ol>...</ol>
语法:
<ol start="列表起点" type="项目符号类型">
<li>内容1</li>
<li>内容2</li>
</ol>
说明:
项目符号类型值 描述
1 1, 2, 3, 4,...
a a, b, c, d,...
A A, B, C, D,...
i i, ii, iii,...
I I, II, III,...
<dl>...</dl>
语法:
<dl>
<dt>标题A</dt>
<dd>内容A1</dd>
<dd>内容A2</dd>
<dt>标题B</dt>
<dd>内容B1</dd>
<dd>内容B2</dd>
</dl>
说明:
<dl> 定义列表
<dt> 表示一个项目
动画 OK
颜色 256
动画 NO
颜色 1670万
动画 NO
颜色 1670万
<img src="图片路径" />
说明:
A. 路径
1)绝对路径
① 本地文件系统
从盘符开始
C:\dirA\dirB\1.png
② 网络
从主机名开始
http://ietester.cn/images/down02.png
2)相对路径
① . 同级
目录结构:
dirA
|-- 1.html
|-- 1.png
路径表示:
<img src="1.png" />
<img src="./png" />
② .. 上一级
目录结构:
dirA
|-- 1.png
|-- dirB
|-- 1.html
路径表示:
<img src="../1.png" />
3)根相对路径
类似于 绝对路径中的 网络绝对路径
"/" 代表 当前主机, 代表站点根目录开始的路径
B. 其他属性
src 路径
alt 当图片失效时显示的信息,当没有title时,作为悬停信息
title 鼠标悬停时显示的信息
border 数字, 边框
align 常用 left
hspace 像素/百分比
vspace
一款ie浏览器多版本测试工具，能很方便在ie5.5,ie6,ie7,ie8,ie9,ie10切换，只需安装一个软件，就可以解决N多ie浏览器的问题，满足大部分IE浏览器兼容性的测试，是测试网页在不同浏览中所出现BUG的工具，具有Office 2007 的可视化界面。支持 Windows 7, Vista and XP系统，并且有中文，英文等多国语言支持。
一, 特殊字符
参考w3cSchool HTML字符实体显示结果 描述 实体名称(转义码) 实体编号
-----------------------------------------
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' '
￠ 分 ¢ ¢
£ 镑 £ £
¥ 日圆 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
1, 空格
(1) 一段文字的 第一个文字之前的 空格会被忽略(2) 一段文字中 两个文字
2, 03-demo-特殊符号.html
<html>
<head>
<title>demo, 空格</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html;charset=GBK" />
</head>
<body>
<p> 在 城镇化过程中，农民市民化是一个不可能绕过去的问题。解决农民市民化问题，户籍制度改革又是一个不可能绕过去的问题。党的十八大报告提出“加快改革户籍制度，有序推进农业转移人口市民化”，强调了户籍制度改革对推进农民市民化的重要意义。 </p>
<p> 在城镇化过程中，农民市民化是一个不可能绕过去的问题。解决农民市民化问题，户籍制度改革又是一个不可能绕过去的问题。党的十八大报告提出“加快改革户籍制度，有序推进农业转移人口市民化”，强调了户籍制度改革对推进农民市民化的重要意义。 </p>
<p>? 版权 ©</p>
<p> <p> 段落标记 </p> </p>
</body>
</html>
二, 网页中信息的排序显示
1, 列表标记用途
列表标记可以创建一般的无序列表 编号列表 定义列表.还可以嵌套列表, 便于概况一系列相关的内容.
2, 列表分类
(1) 无序列表
格式:<ul>...</ul>
语法:
<ul type="项目符号类型">
<li type="项目符号类型">内容</li>
<li>内容2</li>
</ul>
说明:
<li></li> 表示一个列表项
列表项目类型值 描述
disc 实圆 (默认)
circle 空圆
square 实方块
(2) 有序列表
格式:<ol>...</ol>
语法:
<ol start="列表起点" type="项目符号类型">
<li>内容1</li>
<li>内容2</li>
</ol>
说明:
项目符号类型值 描述
1 1, 2, 3, 4,...
a a, b, c, d,...
A A, B, C, D,...
i i, ii, iii,...
I I, II, III,...
(3) 定义列表
格式:<dl>...</dl>
语法:
<dl>
<dt>标题A</dt>
<dd>内容A1</dd>
<dd>内容A2</dd>
<dt>标题B</dt>
<dd>内容B1</dd>
<dd>内容B2</dd>
</dl>
说明:
<dl> 定义列表
<dt> 表示一个项目
<dd> 一个项目下更详细的内容解释
<html>
<head>
<title>列表显示</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="content-type" content="text/html;charset=gbk" />
</head>
<body>
<!-- 无序列表 ul-->
<ul>
<li>豪华墓地堪比北京天…17591</li>
<li>13岁少女坠楼身亡87620</li>
<li>5人阿富汗遇袭3265</li>
<li>男篮38年最差16682</li>
</ul>
<ul type="circle">
<li>豪华墓地堪比北京天…17591</li>
<li>13岁少女坠楼身亡87620</li>
<li>5人阿富汗遇袭3265</li>
<li type="square">男篮38年最差16682</li>
</ul>
<hr/>
<!-- 有序列表 ol -->
<ol type="type">
<li>豪华墓地堪比北京天…17591</li>
<li>13岁少女坠楼身亡87620</li>
<li>5人阿富汗遇袭3265</li>
<li>男篮38年最差16682</li>
</ol>
<ol type="a">
<li>豪华墓地堪比北京天…17591</li>
<li>13岁少女坠楼身亡87620</li>
<li>5人阿富汗遇袭3265</li>
<li>男篮38年最差16682</li>
</ol>
<ol start="26" type="a">
<li>豪华墓地堪比北京天…17591</li>
<li>13岁少女坠楼身亡87620</li>
<li>5人阿富汗遇袭3265</li>
<li>男篮38年最差16682</li>
</ol>
<hr />
<!-- 自定义列表 -->
<dl>
<dt>电脑整机</dt>
<dd>笔记本</dd>
<dd>超极本</dd>
<dt>电脑配件</dt>
<dd>CPU</dd>
<dd>主板</dd>
</dl>
</body>
</html>
三, 图片
1, web上支持图片格式
(1)GIF 图形交换格式
透明色 OK动画 OK
颜色 256
(2)JPEG 联合图像专家组, 高度有损压缩
透明色 NO动画 NO
颜色 1670万
(3)PNG 网络可移植格式, 无损压缩
透明色 OK动画 NO
颜色 1670万
2, 图片标记
格式:<img src="图片路径" />
说明:
A. 路径
1)绝对路径
① 本地文件系统
从盘符开始
C:\dirA\dirB\1.png
② 网络
从主机名开始
http://ietester.cn/images/down02.png
2)相对路径
① . 同级
目录结构:
dirA
|-- 1.html
|-- 1.png
路径表示:
<img src="1.png" />
<img src="./png" />
② .. 上一级
目录结构:
dirA
|-- 1.png
|-- dirB
|-- 1.html
路径表示:
<img src="../1.png" />
3)根相对路径
类似于 绝对路径中的 网络绝对路径
"/" 代表 当前主机, 代表站点根目录开始的路径
B. 其他属性
src 路径
alt 当图片失效时显示的信息,当没有title时,作为悬停信息
title 鼠标悬停时显示的信息
border 数字, 边框
align 常用 left
hspace 像素/百分比
vspace
3, 03-demo-图片.html
<html>
<head>
<title>图片</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="content-type" content="text/html;charset=gbk" />
</head>
<body>
<!--
src 路径
alt 当图片失效时显示的信息,当没有title时,作为悬停信息
title 鼠标悬停时显示的信息
border 数字, 边框
align 常用 left
hspace 像素/百分比
vspace
-->
<img src="http://ietester.cn/images/down02.png"
alt="这是一张图片"
title="鼠标经过时显示的文字"
border="3"
align="left"
hspace="10"
vspace="10"
/>
IETester是一款ie浏览器多版本测试工具，能很方便在ie5.5,ie6,ie7,ie8,ie9,ie10切换，只需安装一个软件，就可以解决N多ie浏览器的问题，满足大部分IE浏览器兼容性的测试，是测试网页在不同浏览中所出现BUG的工具，具有Office 2007 的可视化界面。支持 Windows 7, Vista and XP系统，并且有中文，英文等多国语言支持。
IETester v0.5.2 (38.93M)
支持系统：XP/Vista/Win7/Win8
</body>
</html>