Html学习笔记（2）列表/锚

来源：互联网发布：传智python视频百度云编辑：程序博客网时间：2024/05/29 15:45

参考文献：《HTML, CSS, JavaScript 整合详解》王津涛编著，机械工业出版社

1. HTML列表分无序列表和有序列表

① 无序列表中列表项的前导符号没有一定的次序，使用黑点（缺省方式）、圆圈、方框等一些特殊符号标识

a. <ul>标签标识一个无序列表的开始；<li>标签标识一个表项

<ul>

</ul>

b. <ul type=”circle”>标签的type属性可以设置前导字符，type属性也可以放在<li> 标签上单独设置（用以强调某一列表项）

属性值

前导字符

名称

type=”disc”

●

实心圆

type=”circle”

○

空心圆

type=”square”

□

方框

② 有序列表的列表项的前导符号是有序的符号标识，包括阿拉伯数字（缺省方式）、小写英文字母、大写英文字母、小写罗马数字和大写罗马数字

a. <ol>标签标识一个有序列表的开始；<li>标签标识一个列表项

b. 有序列表type

属性值

前导字符

名称

type=”1”

1，2，3，4，…

阿拉伯数字

type=”a”

a，b，c，d，…

小写英文字母

type=”A”

A，B，C，D，…

大写英文字母

type=”i”

i，ii，iii，iv，…

小写罗马数字

type=”I”

I，II，III，IV，…

大写罗马数字

c. 可以通过<ol start=””>属性和<li value=””>属性改变有序列表项的前导编号，后者的使用也将引起后面表项的序号改变

d. HTML4..01不推荐使用<ol>标签的compact、type、start、value属性，XHTML1.0严密型DTD不支持上述属性，使用样式表CSS代替

③ 嵌套列表：无序列表中嵌套无序列表、有序列表中嵌套有序列表、无序列表中嵌套有序列表、有序列表中嵌套无序列表；多级嵌套

④ 定义列表，又称为释义列表或字典列表，不带前导字符，是一列实体以及与其相关的解释

a. <dl>标签标识定义列表的开始；<dt>标签标识定义列表项；<dd>标签标识定义列表项的解释文字

<dl>

<dd>中国的政治中心</dd>

<dd>中国的经济中心

</dd>

</dl>

⑤HTML推荐使用<ul>代替定义目录列表<dir>、定义菜单列表<menu>，HTML4.01不推荐使用<dir>、<menu>，XHTML1.0不再支持<dir>、<menu>

2. HTML和XHTML既可以把图片作为文档的内在对象加入，又可以通过超链接的方式加入，同时还可以将图片作为背景加入到文档中

3. 在HTML中用<img>标签在网页中添加图片 <img src=”url”>，在XHTML中需要合理关闭

① alt属性，在浏览器不能查看图像时显示文本说明，鼠标经过图片时显示文本说明

② border属性为图像添加边框，以像素为单位，HTML4.01中不推荐使用，XHTML1.0严密型DTD不再支持

③ align属性可以实现图像悬浮效果（left，right，top，middle，bottom）

如果需要在图像的周围显示部分文本时，可以通过<br>标签的clear属性，用以表明图像在文本中混排的位置，clear值为left时，表示文本在图像的左侧环绕；clear值为right时，文本在图像的右侧环绕；clear为all时，文本在图像的两侧环绕

④ vspace（上下）和hspace（左右）属性为图像周围添加空白区域，HTML4.01中不推荐使用，XHTML1.0严密型DTD不再支持

4. 创建图像映射，即创建图像热点区域，单击图像不同部位将产生不同的链接，分客户端图像映射和服务器端图像映射两种（后者几乎不用）

创建图像映像所需标签及属性

img标签（定义图像）

ismap

定义图片为服务器端的图像热区

usemap

定义图片为客户端的图像热区

map标签（定义图像地图）

定义map标签的唯一标识

name

定义map标签的名字

area标签（定义图像地图的热点区域，可点击）

alt

在每个连接上提供可替换的文本描述

coords

为可单击区域指定坐标范围

href

指定区域的目标URL

nohref

从图片热点区中排除

shape

定义区域形状

target

如何打开链接

例：

</map>

注意：usemap=”#...”

5. 网页中常用的图片格式有GIF、JPEG、PNG等

① JPEG（Joint Photographic Experts Group 联合图像专家组），即JPG，JPEG是所有图像格式中压缩率最高的，效果也是最好的，采用有损压缩法，对图片的影响不大，但是对一些线条类的图像影响较大

② GIF（Graphics Interchange Format 图形交换格式），图像压缩率较高，传送较经济，支持透明性，支持渐进渲染，支持动画，支持无损压缩，但GIF支持的色彩只有256色（渐进渲染：又称隔行显示，浏览器下载图像时，先将图像上端的部分显示出来，再加载没有显示的部分，属于渐进式的显示，非隔行显示的图像只有整个图像完全下载后，用户才能看到整个图像）

③ PNG（Portable Network Graphics 可移植网络图像），主要用于网络传输，目前的浏览器均可以很好地支持PNG，PNG支持透明性、隔行显示、无损压缩，可以保存24位真彩色图像，目前PNG格式已成为网页设计中图形格式的首选格式

特性

JPEG

GIF

PNG

透明性

不支持

支持

真彩色

支持

不支持

支持

无损压缩

不支持

支持

照片适合性

适合

不适合

适合

线条适合性

不适合

适合

渐进式渲染

支持

当前浏览器支持

支持

6. 所有body元素的属性在HTML4.01中不推荐使用，XHTML1.0严密型DTD不再支持

① <body>标签中的background属性可以指明背景，颜色或图片

背景图片会增加网页在屏幕上的加载时间，所以最好选用较小的图片作为图片背景，背景图片会在可用的空间内将一张图片多个副本一个接一个的水平或垂直双向平铺在整个屏幕，背景图片要和文字颜色搭配合理，否则会导致阅读障碍

② <body>标签的bgcolor属性可以给HTML页面指定背景颜色，其值可以是十六进制数、RGB值或颜色名称

7. W3C HTML4.0标准所支持的16种颜色名称为：aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，yellow

8. HTML使用<a>标签建立链接，<a>标签又称为锚，一个锚可以指向任意一个web上的资源，基本的链接方式有绝对链接（链接到其他网站或网页上）和相对链接（站内页面）

9. 页内定位、网页置顶

通过<a>标签的name属性或id属性给目的区域命名，如<a id="S2">Section2</a>，创建域链接的方法：<a href="#S2">Section2</a>，其中“#”意味着S3指向当前文档内命名为S3的目的区域，name属性值可以使数字、单词，也可以是任意字母或数字的组合，需要注意的是所定义的目标区域名称必须与链接地址的名称相同

注：XHTML中name属性被id属性取代

<a href="#S2">Section2</a>

<a href="#S3">Section3</a>

<a href="#S4">Section4</a>

<h4>Section1</h4> <p> …</p>

<h4><a id="S2">Section2</a></h4> <p> …</p>

<h4><a id="S3">Section3</a></h4> <p> …</p>
<h4><a id="S4">Section4</a></h4> <p> …</p>

10. 创建电子邮件链接

XHTML标准中mailto协议不是推荐标准，却已被广大程序员认可

电子邮件协议mailto为邮件地址开头，“cc=”设定抄送地址，“bbc=”添加密件抄送地址（不知道为啥没有效果，可能是偶的电脑问题），“subject=”设定邮件主题，“&”将email地址分开，可以用“？”代替，但bbc前面的“&”不能用“？”代替，个人建议使用“&”，相对统一一些

11. <a>标签的target属性可以定义在什么位置打开链接

属性值

说明

_blank

链接内容在新窗口打开

_parent

在父级框架集中打开

_self

在当前窗口（frame）打开

_top

在当前窗口主体打开

12. 设置图片链接

13. 键盘快捷（个人感觉用起来不是那么方便，定义为鸡肋功能）

在页面按下<Alt>键和被定义的快捷键，然后按回车键访问被链接的网页，这里的accesskey值不能使用浏览器本身的快捷键，否则网页中的快捷键会把浏览器本身的快捷键屏蔽掉（试了一下，貌似反过来了~ 算了，反正应该用不上~）

14. <a>标签的tabindex属性可以改变Tab逻辑顺序

15.   该字符表示非换行的间隔，即网页上的空格，也可以使用中文字符的空格（不推荐使用，建议使用css）

16. <body>标签的link（当前链接颜色）、vlink（已访问链接颜色）、alink（激活链接颜色）属性可以改变网页中链接的颜色，HTML4.01中已不推荐使用<body>标签的属性，由样式表代替