HTML学习笔记（二）
2011-07-10 18:27
127 查看
15，忽略HTML标记<xmp>
在HTML文件中利用成对的<xmp></xmp>标记可以忽略HTML标记的作用，让标记之间的包括标记的所有内容直接显示在页面上
基本语法：
<body>
<xmp>
</xmp>
</body>
实例代码：
<html>
<head>
<title>忽略HTML标记</title>
</head>
<body>
哈哈<br>哈哈
<xmp>
哈哈<br>哈哈
</xmp>
</body>
</html>
16，插入并设置水平线<hr>
在浏览网页时，经常会看到网页中有一条水平的直线，这条直线在网页中被称为水平线，根据需要还可以对网页中的水平线进行一系列的设置
属性width设置水平线宽度，可以使像素，也可以是百分比size设置水平线的高度noshade设置水平线无阴影color设置水平线颜色align设置水平线居中对齐
基本语法：
<body>
<hr>
</body>
实例代码：
<html>
<head>
<title>设置水平线</title>
</head>
<body>
<center>添加水平线后的效果</center>
<hr width="100%" size="1" color="blue">
神马都是浮云<br>
<hr width="400" size="3" color="red" align="center">
</body>
</html>
五 建立和使用列表
1，插入定义列表<dl>
在HTML文件中，只要在需要使用列表的地方插入成对的标记<dl></dl>就可以很简单的完成定义列表的插入
基本语法：
<dl>
<dt>名称<dd>说明
<dt>名称<dd>说明
<dt>名称<dd>说明
</dl>
<dt>标记定义了组成列表项名称部分，同时此标记只在<dl>标记中使用
<dd>用于解释说明<dt>标记定的项目的名称，此标记也只能再<dl>标记中使用
实例代码：
<html>
<head>
<title>插入定义列表</title>
</head>
<body>
<dl>
<dt>联系人<dd>XXX
<dt>联系地址<dd>XXX
<dt>邮政编码<dd>XXX
</dl>
</body>
</html>
2，插入无序列表<dl>
在HTML文件中，只要在需要使用列表的地方插入成对的标记<ul></ul>，就可以完成无序列表的插入
基本语法：
<ul>
<li>项目名称</li>
<li>项目名称</li>
<li>项目名称</li>
...
</ul>
在<ul></ul>之间必须使用<li></li>标记添加列表项值
实例代码：
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<li>联系人：</li>XXX
<li>联系地址：</li>XXX
<li>邮政编码：</li>XXX
</ul>
</body>
</html>
3，插入目录列表<dir>
基本语法：
<dir>
<li>项目名称</li>...
<li>项目名称</li>...
<li>项目名称</li>...
</dir>
在成对的<dir></dir>中间使用成对的<li></li>标记添加列表项值
实例代码：
<html>
<head>
<title>目录列表</title>
</head>
<body>
<dir>
<li>联系人：</li>XXX
<li>联系地址：</li>XXX
<li>邮政编码：</li>XXX
</dir>
</body>
</html>
4，插入菜单列表<menu>
基本语法：
<menu>
<li>项目名称
<li>项目名称
<li>项目名称
</menu>
<menu>与</menu>中间只需要单个<li>标记添加列表项值
实例代码：
<html>
<head>
<title>菜单列表</title>
</head>
<body>
<menu>
<li>联系人
<li>联系地址
<li>邮政编码
<menu>
</body>
</html>
5，插入有序列表<ol>
基本语法：
<ol>
<li>项目名称</li>...
<li>项目名称</li>...
<li>项目名称</li>...
</ol>
实例代码：
<html>
<head>
<title>有序列表</title>
</head>
<body>
<ol>
<li>联系人：XXX</li>
<li>联系地址：XXX</li>
<li>邮政编码：XXX</li>
</ol>
</body>
</html>
注意：当我们需要改变列表符号时，需要在<ol>中输入TYPE属性，进行属性值的设置。
属性值 说明
1 数字1,2...
a 小写字母a,b...
A 大写字母A,B...
i 小写罗马数字i,ii...
I 大写罗马数字I,II...
6，嵌套定义列表
在HTML文件中，只要在需要使用嵌套定义列表的地方，插入成对的定义列表标记<dl></dl>，在一堆<dl></dl>标记之间使用对个<dt>和<dd>标记
基本语法：
<dl>
<dt>名称
<dd>说明
<dd>说明
<dd>说明
<dt>名称
<dd>说明
<dd>说明
<dd>说明
...
</dl>
<dl>标记表示插入定义列表
<dt>标记插入项目名称
<dd>标记表示多项目名称的说明
多个<dt>与<dd>的交替使用，构成了定义列表的嵌套
实例代码：
<html>
<head>
<title>嵌套定义列表</title>
</head>
<body>
<dl>
<dt>网页三剑客
<dd>Dreamweaver
<dd>Flash
<dd>Fireworks
</dl>
</body>
</html>
7，嵌套有序与无序列表
在无序列表<ul></ul>标记之间插入有序列表<ol>，就可以完成嵌套有序与无序列表的插入
基本语法：
<ul>
<li>项目名称</li>
<ol>
<li>项目名称</li>
<li>项目名称</li>
</ol>
<ol>
<li>项目名称</li>
<li>项目名称</li>
</ol>
</ul>
实例代码：
<html>
<head>
<title>嵌套有序与无序列表</title>
</head>
<body>
<ul>
<li>体育三大球类</li>
<ol type="i">
<li>篮球</li>
<li>足球</li>
<li>排球</li>
</ol>
</ul>
</body>
</html>
六 超链接
在HTML文件提供了三种路径：绝对路径，相对路径，根路径
在HTML文件中，超链接可以分为内部链接，和外部链接，所谓内部链接：指网站内部文件之间的链接；所谓外部链接：是指网站内的文件链接到站点内容外的文件。
1，设置绝对路径
绝对路径是指文件的完整路径，包括文件传输协议http，ftp等，一般用于网站的外部链接。例如：http://www.bing.com/
2，设置相对路径
相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径。同时，只要是处于站点文件夹之内，即使不属于同一个文件目录之下，相对路径
建立的链接也合适。采用相对路径是建立两个文件之间的相互联系，可以不受站点和所处服务器的影响。
相对路径的使用方法相对位置 如何输入
同一目录 输入要链接的文档
链接上一目录 先输入“../”，再输入目录名
链接下一目录 先输入目录名，后加“/”
3，设置根路径
根路径的设置也适合内部链接的建立，一般情况下不使用根路径，根路径的使用简单，以“/”开头，后面紧跟文件路径，例如/download/index.html
4，超级链接的建立
在网页文件中，超链接通常使用标记<a>属性href属性建立，在这种情况下，当前文档便是链接源，href设置的属性值便是目标文件
例如：<a href="http://www.bing.com/">链接内容</a>
5，插入内部链接
基本语法：<a href="URL">链接内容</a>
在HTML文件中需要使用内部链接时，插入成对的标记将href属性的URL值设置为相对路径
6，插入外部链接
基本语法：<a href="URL">链接内容</a>
在HTML文件中，需要使用外部链接时，插入成对的标记并将href属性的URL值设置为绝对路径
实例代码：
<html>
<head>
<title>插入外部链接</title>
</head>
<body>
<a href="http://www.bing.com/">必应搜索</a>
</body>
</html>
7，设置图像映射
浏览网页时，单击网页中的某个图片也可以跳到相应的网页页面，这就是在网页制作过程中设置的图像映射，在网页文件中可以同时对多个图片设置图像映射。
基本语法：
<img src="URL" usemap=""></img>
<map name="">
<area shape="" cords=", , ," href="URL">
</map>
<img>标记表示插入图像文件，src表示插入图像的路径
<map>表示插入图像映射
<area>表示图像映射区域
shape属性表示映射区域形状rect表示矩形区域circle表示椭圆形区域poly表示多边形区域
coords表示感应区域的坐标
在HTML文件中利用成对的<xmp></xmp>标记可以忽略HTML标记的作用，让标记之间的包括标记的所有内容直接显示在页面上
基本语法：
<body>
<xmp>
</xmp>
</body>
实例代码：
<html>
<head>
<title>忽略HTML标记</title>
</head>
<body>
哈哈<br>哈哈
<xmp>
哈哈<br>哈哈
</xmp>
</body>
</html>
16，插入并设置水平线<hr>
在浏览网页时，经常会看到网页中有一条水平的直线，这条直线在网页中被称为水平线，根据需要还可以对网页中的水平线进行一系列的设置
属性width设置水平线宽度，可以使像素，也可以是百分比size设置水平线的高度noshade设置水平线无阴影color设置水平线颜色align设置水平线居中对齐
基本语法：
<body>
<hr>
</body>
实例代码：
<html>
<head>
<title>设置水平线</title>
</head>
<body>
<center>添加水平线后的效果</center>
<hr width="100%" size="1" color="blue">
神马都是浮云<br>
<hr width="400" size="3" color="red" align="center">
</body>
</html>
五 建立和使用列表
1，插入定义列表<dl>
在HTML文件中，只要在需要使用列表的地方插入成对的标记<dl></dl>就可以很简单的完成定义列表的插入
基本语法：
<dl>
<dt>名称<dd>说明
<dt>名称<dd>说明
<dt>名称<dd>说明
</dl>
<dt>标记定义了组成列表项名称部分，同时此标记只在<dl>标记中使用
<dd>用于解释说明<dt>标记定的项目的名称，此标记也只能再<dl>标记中使用
实例代码：
<html>
<head>
<title>插入定义列表</title>
</head>
<body>
<dl>
<dt>联系人<dd>XXX
<dt>联系地址<dd>XXX
<dt>邮政编码<dd>XXX
</dl>
</body>
</html>
2，插入无序列表<dl>
在HTML文件中，只要在需要使用列表的地方插入成对的标记<ul></ul>，就可以完成无序列表的插入
基本语法：
<ul>
<li>项目名称</li>
<li>项目名称</li>
<li>项目名称</li>
...
</ul>
在<ul></ul>之间必须使用<li></li>标记添加列表项值
实例代码：
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<li>联系人：</li>XXX
<li>联系地址：</li>XXX
<li>邮政编码：</li>XXX
</ul>
</body>
</html>
3，插入目录列表<dir>
基本语法：
<dir>
<li>项目名称</li>...
<li>项目名称</li>...
<li>项目名称</li>...
</dir>
在成对的<dir></dir>中间使用成对的<li></li>标记添加列表项值
实例代码：
<html>
<head>
<title>目录列表</title>
</head>
<body>
<dir>
<li>联系人：</li>XXX
<li>联系地址：</li>XXX
<li>邮政编码：</li>XXX
</dir>
</body>
</html>
4，插入菜单列表<menu>
基本语法：
<menu>
<li>项目名称
<li>项目名称
<li>项目名称
</menu>
<menu>与</menu>中间只需要单个<li>标记添加列表项值
实例代码：
<html>
<head>
<title>菜单列表</title>
</head>
<body>
<menu>
<li>联系人
<li>联系地址
<li>邮政编码
<menu>
</body>
</html>
5，插入有序列表<ol>
基本语法：
<ol>
<li>项目名称</li>...
<li>项目名称</li>...
<li>项目名称</li>...
</ol>
实例代码：
<html>
<head>
<title>有序列表</title>
</head>
<body>
<ol>
<li>联系人：XXX</li>
<li>联系地址：XXX</li>
<li>邮政编码：XXX</li>
</ol>
</body>
</html>
注意：当我们需要改变列表符号时，需要在<ol>中输入TYPE属性，进行属性值的设置。
属性值 说明
1 数字1,2...
a 小写字母a,b...
A 大写字母A,B...
i 小写罗马数字i,ii...
I 大写罗马数字I,II...
6，嵌套定义列表
在HTML文件中，只要在需要使用嵌套定义列表的地方，插入成对的定义列表标记<dl></dl>，在一堆<dl></dl>标记之间使用对个<dt>和<dd>标记
基本语法：
<dl>
<dt>名称
<dd>说明
<dd>说明
<dd>说明
<dt>名称
<dd>说明
<dd>说明
<dd>说明
...
</dl>
<dl>标记表示插入定义列表
<dt>标记插入项目名称
<dd>标记表示多项目名称的说明
多个<dt>与<dd>的交替使用，构成了定义列表的嵌套
实例代码：
<html>
<head>
<title>嵌套定义列表</title>
</head>
<body>
<dl>
<dt>网页三剑客
<dd>Dreamweaver
<dd>Flash
<dd>Fireworks
</dl>
</body>
</html>
7，嵌套有序与无序列表
在无序列表<ul></ul>标记之间插入有序列表<ol>，就可以完成嵌套有序与无序列表的插入
基本语法：
<ul>
<li>项目名称</li>
<ol>
<li>项目名称</li>
<li>项目名称</li>
</ol>
<ol>
<li>项目名称</li>
<li>项目名称</li>
</ol>
</ul>
实例代码：
<html>
<head>
<title>嵌套有序与无序列表</title>
</head>
<body>
<ul>
<li>体育三大球类</li>
<ol type="i">
<li>篮球</li>
<li>足球</li>
<li>排球</li>
</ol>
</ul>
</body>
</html>
六 超链接
在HTML文件提供了三种路径：绝对路径，相对路径，根路径
在HTML文件中，超链接可以分为内部链接，和外部链接，所谓内部链接：指网站内部文件之间的链接；所谓外部链接：是指网站内的文件链接到站点内容外的文件。
1，设置绝对路径
绝对路径是指文件的完整路径，包括文件传输协议http，ftp等，一般用于网站的外部链接。例如：http://www.bing.com/
2，设置相对路径
相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径。同时，只要是处于站点文件夹之内，即使不属于同一个文件目录之下，相对路径
建立的链接也合适。采用相对路径是建立两个文件之间的相互联系，可以不受站点和所处服务器的影响。
相对路径的使用方法相对位置 如何输入
同一目录 输入要链接的文档
链接上一目录 先输入“../”，再输入目录名
链接下一目录 先输入目录名，后加“/”
3，设置根路径
根路径的设置也适合内部链接的建立，一般情况下不使用根路径，根路径的使用简单，以“/”开头，后面紧跟文件路径，例如/download/index.html
4，超级链接的建立
在网页文件中，超链接通常使用标记<a>属性href属性建立，在这种情况下，当前文档便是链接源，href设置的属性值便是目标文件
例如：<a href="http://www.bing.com/">链接内容</a>
5，插入内部链接
基本语法：<a href="URL">链接内容</a>
在HTML文件中需要使用内部链接时，插入成对的标记将href属性的URL值设置为相对路径
6，插入外部链接
基本语法：<a href="URL">链接内容</a>
在HTML文件中，需要使用外部链接时，插入成对的标记并将href属性的URL值设置为绝对路径
实例代码：
<html>
<head>
<title>插入外部链接</title>
</head>
<body>
<a href="http://www.bing.com/">必应搜索</a>
</body>
</html>
7，设置图像映射
浏览网页时，单击网页中的某个图片也可以跳到相应的网页页面，这就是在网页制作过程中设置的图像映射，在网页文件中可以同时对多个图片设置图像映射。
基本语法：
<img src="URL" usemap=""></img>
<map name="">
<area shape="" cords=", , ," href="URL">
</map>
<img>标记表示插入图像文件，src表示插入图像的路径
<map>表示插入图像映射
<area>表示图像映射区域
shape属性表示映射区域形状rect表示矩形区域circle表示椭圆形区域poly表示多边形区域
coords表示感应区域的坐标
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5+Bootstrap 学习笔记 4
- HTML学习笔记
- HTML学习笔记-v1.4
- HTML学习笔记(一)
- HTML学习笔记：表单标记
- HTML 学习笔记
- 黑马程序员_学习笔记4——html标签和表单标签
- html,XPath 学习笔记
- HTML学习笔记
- Dreamweaver学习笔记1：html表格属性练习
- [HeadFirst-HTMLCSS学习笔记][第六章严格的HTML]
- web前端-html学习笔记
- Html学习笔记总结
- HTML学习笔记
- HTML学习笔记
- html学习笔记二（W3CSchool）
- HTML5+CSS3+JS学习笔记-8-使用JS及函数来制作表格
- HTML 学习笔记
- HTML学习笔记(四)——分组元素
- ASP.NET MVC3 学习笔记----HTML.Action()和HTML.RenderAction()