03-HTML_列表和图片

矫情吗；* 2021-11-02 19:56 471阅读 0赞

IETester  
一款ie浏览器多版本测试工具，能很方便在ie5.5,ie6,ie7,ie8,ie9,ie10切换，只需安装一个软件，就可以解决N多ie浏览器的问题，满足大部分IE浏览器兼容性的测试，是测试网页在不同浏览中所出现BUG的工具，具有Office 2007 的可视化界面。支持 Windows 7, Vista and XP系统，并且有中文，英文等多国语言支持。

# 一, 特殊字符 #

参考w3cSchool HTML字符实体 
显示结果 描述 实体名称(转义码) 实体编号 
\----------------------------------------- 
空格&nbsp; &\#160; 
< 小于号 < &\#60; 
> 大于号 > &\#62; 
& 和号 & &\#38; 
" 引号 " &\#34; 
' 撇号 &apos; &\#39; 
￠ 分 &cent; &\#162; 
£ 镑 &pound; &\#163; 
¥ 日圆 &yen; &\#165; 
€ 欧元 &euro; &\#8364; 
§ 小节 &sect; &\#167; 
© 版权 &copy; &\#169; 
® 注册商标 &reg; &\#174; 
™ 商标 &trade; &\#8482; 
× 乘号 &times; &\#215; 
÷ 除号 &divide; &\#247;

## 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>
 在 城镇化过程中，农民市民化是一个不可能绕过去的问题。解决农民市民化问题，户籍制度改革又是一个不可能绕过去的问题。党的十八大报告提出“加快改革户籍制度，有序推进农业转移人口市民化”，强调了户籍制度改革对推进农民市民化的重要意义。 
 
     在城镇化过程中，农民市民化是一个不可能绕过去的问题。解决农民市民化问题，户籍制度改革又是一个不可能绕过去的问题。党的十八大报告提出“加快改革户籍制度，有序推进农业转移人口市民化”，强调了户籍制度改革对推进农民市民化的重要意义。 
 
 ? 版权 ©
 
 段落标记 
 </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>
 <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 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>
 
 <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>