HTML网页列表标记学习教程
HTML网页列表标记学习教程.
在html页面中，列表可以起到提纲写领的作用。列表分为两种类型，一是有序列表，一是无序列表。前者用项目符号来标记无序的项目，而后者则使用编号来记录项目的顺序。
所谓有序，指的是按照数字或字母等顺序排列列表项目。
所谓无序，是指以●、○、□等开头的，没有顺序的列表项目。
关于列表的主要标记，如下表所示
标记 描述
<ul> 无序列表
<ol> 有序列表
<dir> 目录列表
<dl> 定义列表
<menu> 菜单列表
<dt>、<dd> 定义列表的标记
<li> 列表项目的标记
有序列表标记<OL>
有序列表使用编号，而不是项目符号来编排项目。列表中的项目采用数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用<ol>和<li>两个标记以及type和两个start属性。
基本语法
<ol>
<li>项目一
<li>项目二
<li>项目三
……
</ol>
语法解释
在有序列表中，使用<ol>作为有序的声明，使用<li>作为每一个项目的起始。
文件范例：7-1.htm
通过<ol>和<li>标记建立有序列表。
01 <!-- ------------------------------ -->
02 <!-- 文件范例：7-1.htm -->
03 <!-- 文件说明：建立有序列表 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立有序列表</title>
08 </head>
09 <body>
10 <h2>图像设计软件</h2>
11 <ol>
12 <li>Photoshop
13 <li>Illustrator
14 <li>Freehand
15 <li>CorelDraw
16 </ol>
17 </body>
18 </html>
本教程介绍FORM表单标记的各种属性在网页设计中的应用.
<FORM>标记的NAME属性
基本语法
| 代码如下 | 复制代码 |
| 01 <Form name="Form＿name"> 02 …… 03 </Form> |
|
语法解释
通过为表单命名可以控制表单与后台程序之间的关系。
文件范例：11-1.htm
在页面中插入表单。
| 代码如下 | 复制代码 |
|
01 <!-- ------------------------------ --> 11 <Form name=invest> 12 </Form> |
|
文件说明
第11行是表单标记，表单的名称为"invest"。
HTML网页超链接标记学习教程
链接标记的属性
链接是网页页面中最重要的元素之一，是一个网站的灵魂。一个网站是由多个页面组成的，页面之间依靠链接确定相互的导航关系。每一个网页都有独一无二的地址，在英文中被称作url(Uniform Resource Locator：通用资源标示符)。在地址栏输入然后回车，会打开网页教学网网站的主页面。可以看到，页面中有多个栏目，多条新闻等，最上方不同的栏目就是文字链接。
链接标记虽然在网站设计制作中占有不可替代的地位，但是其标记只有一个，那就是<a>标记。本站介绍的链接应用都是基于<a>标记基础上的。
链接标记的属性见下表
属性 描述
href 指定链接地址
name 给链接命名
title 给链接提示文字
target 指定链接的目标窗口
accesskey 链接热键
关于路径
每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。url—统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址之下，但是当创建网页时，不可能也不需要为每一个链接都输入完全的地址。我们只需要确定当前文档同站点根目录之间的相对路径关系。因此链接可以分为以下3种：
绝对路径
如http://111cn.net
相对路径
如news/default.htm
根路径
如/website/news/default.htm
在了解这三种地址形式前先要理解另外两个概念：内部链接和外部链接
内部和外部都是相对于站点文件夹而言，如果链接指向的是站点文件夹之内的文件，就是内部链接。如果链接指向站点文件夹之外的，就被称做外部链接。在添加外部链接的时候，将用到下面所讲的绝对地址；而添加内部链接的时候，将用到下面所讲的根目录相对地址和文件相对地址。
下面分别介绍这3种链接：
绝对路径
绝对路径为文件提供完全的路径，包括适应的协议，如http,Ftp,rtsp等。一般常见的有：
http://www.sohu.com
ftp://202.136.254.1
当链接到其它网站中的文件时，必须使用绝对链接。
相对路径
相对链接最适合网站的内部链接。只要是同一网站之下的，即使不在同一个目录下，相对链接也非常合适。文件相对地址是书写内部链接的理想形式。只要是处于站点文件夹之内，相对地址可以自由地在文件之间构建链接。这种地址形式利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响。因此这种书写形式省略了绝对地址中的相同部分。这样做的优点是：站点文件夹所在的服务器地址发生改变时，文件夹的所有内部链接(如果采用此种地址形式)都不会出问题。
相对链接的使用方法为：
如果链接到同一目录下，则只需输入要链接文档的名称。
要链接到下一级目录中的文件，只需先输入目录名，然后加" / "再输入文件名。
如链接到上一级目录中的文件，则先输入"…/ "，再输入目录名、文件名。
根路径
根目录相对地址同样适应于创建内部链接，但大多数情况下，不建议使用此种地址形式。它在下列情况下使用：
当站点的规模非常大，防置于几个服务器上时
当一个服务器上同时放置几个站点时
根目录相对地址的书写形式也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。根路径以" / "开始，然后是根目录下的目录名。
1、表单文本输入的移动选择：在文本输入栏中，如果加入了提示，来访者往往要用鼠标选取后删除，再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中，一切就会变得简单多了，如：
以下为引用的内容：
<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">请填入你的姓名</textarea>
类似的，可以加入代码到<input>。
2、表单输入单元点击删除：本列同上则作用类似，只是使用鼠标上略有变化，需要点击而不像上则的只要鼠标覆盖。如：
以下为引用的内容：
<input type=text name="address" size=19 value="请填入你的邮箱"onFocus="this.value=''">
点击输入单元后，提示信息会删除，是不是很方便。
3、表单输入单元的边框设置：更改传统的表单单元边框，会让你的主页生色不少。如：
以下为引用的内容：
<input type=radio name=action value=subscribe checked style="BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8">
其中"style=***"为左右上下和背景色设置，适用于其它单元。
4、表单输入单元的文字设置：表单中单元的字体是可以修改的，如：
以下为引用的内容：
<input type=text name="address" size=19 value="请填入你的姓名" style=font-family:"verdana";font-size:10px >
其中"style=***"为字体和字大小设置。
5、修改表单属性为弹出窗口：大多数表单激活后，会在当前页面中打开，影响正常浏览。不如修改一下，如：
以下为引用的内容：
<form method=POST action=url target=_blank>
其中"target=_blank"为控制在弹出窗口打开。
相关文章
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程，各位想知道具体绘制步骤的使用者，那么下面就快来跟着小编一起看一看教程...2016-09-14
iPhone6怎么激活？两种苹果iPhone6激活教程图文详解
iPhone6新机需要激活后才可以正常使用，那么对于小白用户来说，iPhone6如何激活使用呢？针对此问题，本文就为大家分别介绍Wifi无线网络激活以及iPhone6连接电脑激活这两种有效的方法，希望本文能够帮助到大家...2022-09-14- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下制作雨中野外孤独行走的一头牛海报的教程，各位想知道具体制作方法的使用者们，大家就快来看一看小编给...2016-09-14
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制帅气卡通魔法王子漫画的具体教程，各位想知道绘制步骤的使用者，那么下面就快来跟着小编一起看一看教程...2016-09-14
- 今天小编在这里就来给各位Illustrator的这一款软件的使用者们来说说鼠绘堆雪人的孩童矢量插画的教程，各位想知道具体绘制方法的使用者们，那么各位就快来跟着小编来看看...2016-09-14
- 支付宝支付在国内算是大家了，我们到处都可以使用支付宝了，下文整理介绍的是在安卓app应用中使用支付宝进行支付的开发例子。 之前讲了一篇博客关与支付宝集成获取...2016-09-20
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下究竟该怎么给照片天空加蓝天白云的教程，各位想知道具体制作步骤的，那么下面就来跟着小编一起看看吧。 ...2016-09-14
- 今天小编在这里就来给llustrator的这一款软件的使用者们来说一说绘制扁平化风格卡通警察护士空姐肖像的教程，各位想知道具体绘制步骤的使用者们，那么下面就快来跟着小编...2016-09-14
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说一下绘制一个方形的录音机图标的教程，各位想知道具体绘制方法的使用者们，那么下面就来看一下小编给大家分...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说一说简单制作一个搞笑的换脸表情包的教程，各位想知道具体制作方法的使用者们，那么大家就快来看一看教程吧。...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说说给手绘画调色变换场景的后期教程，各位想知道具体后期处理步骤的使用者们，那么大家就快来跟着小编来看...2016-10-02
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说一下让你胸丰满起来的处理教程，各位想知道具体处理步骤的，那么下面就快来跟着小编一起看一下教程吧。 给...2016-09-14
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制雷神传插画的教程，各位想知道具体绘制步骤的使用者，那么下面就快来跟着小编一起看看绘制方法吧。 ...2016-09-14
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下制作隔离区聊天背景的教程，各位想知道具体方法的，那么下面就快来跟着小编一起看一看吧。 给各位美图秀...2016-09-14
- 联合索引又叫复合索引。对于复合索引:Mysql从左到右的使用索引中的字段，一个查询可以只使用索引中的一部份，但只能是最左侧部分。例如索引是key index (a,b,c). 可以支持a | a,b| a,b,c 3种组合进行查找，但不支持 b,c进...2015-11-24
- 这篇文章主要给大家介绍的是关于Lua语言新手入门的简单教程，文中通过示例代码一步步介绍的非常详细，对各位新手们的入门提供了一个很方便的教程，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。...2020-06-30
- 一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说用素材合成古典园林场景教程，各位想知道到底该怎么制作的，那么就快来一起看一下吧。 给各位photoshop...2016-09-14
- php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
- 当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。 <?php $lan = substr( $HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08