10-HTML技术概论 html入门.doc

HTML技术概论 html入门一、 HTML基本概述及其特点： （1）HTML的特点HTML是一种广泛其于标准通用标记语言（Standard Generalized Markup Language,SGML）发展而来的HTML(Hyper Text Markup Language):超文本标记语言优点:标注简单明了,功能强大.可以定义文件的显示格式、标题、字体、表格、窗口等，与WWW上任一资料进行超级连接，使用辅助应用程序，连入图象，视频，声频等多媒体资烊HTML局限：表现在：作者只能选用WEB资源的字体，排版功能不是很强，忽略空格及自然格式，段落须指明：在不同的解释环境（浏览器）的解释下有可能显示不同 HTML是一个纯文本文档，但是与普通的纯文本文档相比，HTML文档具有以下特点： A 结构化：使用各种标记来标注文档的不同逻辑单元，是一种结构化的文本文档 B超文本： C与平台无关： D简单，易维护：(2)发布网页具备的四个基本条件：1永久性的与Internet的连接 A获取一个永久性的Interne连接，建立自己的WEB服务器 B在专门对外提供WEB提供服务的公司租用一部分空间，把自己WEB页面长期存放在那里，供WEB上的用户仿问。2至少一个属于自己的IP和域名 比如：nlp网站的域名： 对应的IP就是：0 3服务器空间 用服务器或者服务器上划分的细小单元：虚拟主机。4服务器软件(3)服务空间ISP（Internet Service Provider,Internet服务提供商）是为用户提供Internet接入和Internet信息服务的公司或机构IAP(Internet Access Provider, Internet接入提供商)ICP(Internet Content Provider, Internet内容提供商)总结:如果说IAP主要是为用户提供接入Internet的服务,那么ICP则是为用户在Internet上发布信息并向用户收取一定费用的Internet增值服务商二、 这里放NLP网站的标题内容 真正的网页内容，这里是NLP网站的主体部份，可以放超链接内容如： NLP培训网站 Head 头元素主要包括该页面的一些基本描述语句。 标记 属性：description:网页的描述信息 Keywords:关键字，当搜索引擎查找时，按此关键字查找 Content-type:：用来设置该网页的编码。 Author:用来设置该网页的作者姓名 Refresh:用来设置网页的自动更新 Content:内容例： meta name=”keywords” content=”good,better,best” 注释：url可以为本页面三、 HTML标记语言：1、 标题字体：一对标记表明正文中的第一层标题。标题一共有六层（H1H6）,随着数字的增加，标题字体依次减小且自动显示为黑体字。1) 一级标题是HTML文档中最重要的标题，一般将其作用整个HTML文档的标题。2) 二级标题通常用来标注文档中的章。3) 三级标题通常用来标注每一章内部的节。4) 四级标题通常用来标注文档的小节。5) 五级标题和六级标题可以分别用来在内部划分更小的节。因为和通常使用很小的字体显示，因此这两个标记并不常用。 标题字体用到的属性是“ALIGN”，用来控制标题文字的水平对齐方式：Left（居左对齐）、Right（居右对齐）、 Center（居中对齐）。 语法为： 标题文字 说明：（1）其中“*”表示数字16 （2）“”之中为Left、Right或者Center三者之一。 默认为 align=left我的第一个NLP HTML文档用第一号标题字显示这行内容：/ 我的二号字标题我的三号字标题我的四号字标题我的五号字标题我的六号字标题2、 文章字体：标记用于在HTML文档中设置文本大小与颜色。文章字体用到的属性为SIZE与COLOR：1) SIZE 取值从1到7，代表字体尺寸从最小到最大，其中SIZE属性的缺省值为3，也可在所取数值前加控制符：“+”代表加大字体，“”则反之。2) COLOR有两种表示方法：A. 英文字母：black（黑色）、white（白色）、red（红色）、green（绿色）、blue（蓝色）、yellow（黄色）、aqua（浅绿色）、fuchsia（紫红色）、gray（灰色）、lime（橙色）、maroon（栗色）、purple（紫色）、olive（橄榄）、silver（银色）B. 用6个16进制的字母表示，也就是0F之间取值，称为RGB值：0代表的颜色最暗，F代表的颜色最亮，如“000000”是黑色，“ffffff”是白色。文章字体语法： 文章文字 说明：其中SIZE属性可以选择17；COLOR属性值可以选择RGB值或者预定义颜色名称（即英文字母）。 标记不空一行 段落标记 空一行 相当于 实例： 文章字体举例1号字体红色2号字体蓝色3号字体黄色4号字体绿色5号字体橙色6号字体紫色7号字体黑色1号字体红色2号字体蓝色3号字体黄色4号字体绿色5号字体橙色6号字体紫色7号字体黑色3、 物理字体：用来给文本赋以某种显示属性，而不必考虑文本的逻辑含义。1) 或者：用来指示以粗体字显示文本。（大多数WEB浏览器都认为是黑体）。2) 或者：用来指示以斜体字显示文本。3) ：用来指示为文本加下划线。没有颜色属性，文本颜色就是它的颜色4) ：指示以上标方式显示文本。5) ：指示以下标方式显示文本。6) ：用来指示在文本的正中央画一条删去线。没有颜色属性，文本颜色就是它的颜色例：我中黑体我是斜体我是下划线253a(3)兰色字4、 逻辑字体：是命令各种浏览器对控制符容器中的字符进行相对的修饰。1) ：一般强调文字，字体是意大利斜体。2) ：着重强调文字，以黑体（加粗）字显示。3) ：代表一个HTML元素示例的文字。4) ：输出示例中的文字。当浏览器遇到标记时，就根据系统默认设置格式化标记之间的文本。一般它以比标准字体较小的字体样式显示文字，而且文字宽度固定。5) ：代表一个键盘按键的文字。6) ：定义变量或者值的文字。斜体显示。7) ：定义文字。斜体显示。8) ：引用文字，意大利斜体显示。9) ：小号字体。10) ：大号字体。说明：标记与标记可产生同样的效果，但后者对字形的控制更加精确。版本可用于早期的浏览器版本，但早期版本不支持标记。 EM 一般强调文字，字体是意大利斜体 STRONG 着重强调 文字，以黑体（加粗）字显示 CODE 代表一个HTML元素示例的文字 SAMP 输出示例中的文字KBD 代表一个键盘按键文字VAR 定义变量或者值的文字DFB 字义文字CITE 引用文字，以意大利斜体显示SMALL 小号字体BIG 大号字体5、 字符实体：在往HTML文档中写入特殊字符，要使用特殊的代码，浏览器会用HTML命令对这些特殊代码进行翻译。下面就是以字母或数字表示的特殊符号的常用举例： 5 MOD 8 423>66、 文字对齐：可以设置文字与页面的左边，中间，右边对齐。可以设置文本在页面的中间对齐。也可以设置段落对齐。用法与大致相同。1) 语法：文字 说明：ALIGN属性可以用“LEFT”、“CENTER”、“RIGHT”，分别对应于将标记中间的字符块按照左、中、右对齐。2) 语法：文本 说明：这个标记没有属性，它的作用是将标记中间的字符居中对齐，它的作用和一样。3) 段落 说明：和中的ALIGN属性的属性值一样，也是取“LEFT”、“CENTER”、“RIGHT”三个值，分别对应将中间的字体左、中、右对齐。只能对一行文字起作用实例 静夜思 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 静夜思 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 静夜思 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 静夜思 床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。 ：7、 文字移动：用文字编排各种WEB页面时，难免会有一些需要强调的部分，设置动态效果会起到强调突出文本的作用。页面的移动，必须在浏览器中才能看到。文字移动所包含的主要内容有：A. 文字移动方向的设置B. 文字移动方式的设置C. 文字移动循环的设置（次数）D. 文字移动速度与延时的设置E. 文字移动底色的设置F. 文字移动面积的设置1) 语法：文字说明：DIRECTION属性的属性值是取“LEFT”、“RIGHT”两个值，分别对应将中间的字体向左、右移动。2) 语法：文字说明：BEHAVIOR属性的属性值是取“SCROLL”、“SLIDE”、“ALTERNATE”三个值，分别对应将中间的字体循环移动、只移动一次、在屏幕中间左右移动。3) 语法：文字说明：LOOP属性的属性值是取一个数值，表示将中间的字体循环移动的次数。4) 语法：文字说明：SCROLLAMOUNT属性的属性值是取数字值，对应将中间的字体循环移动的速度。数值越大，表示速度越快。5) 语法：文字说明：SCROLLDELAY属性的属性值是取数字值，对应将中间的字体循环移动的延时。设置这个参数也会影响到文字移动的速度。6) 语法： 说明：A. HEIGHT属性的属性值是取数字值，这个属性控制了文字移动面积的高度。B. WIDTH属性的属性值是取数字值，这个属性控制了文字移动面积的宽度。C. BGCOLOR属性的属性值可以取RGB值，或者用预定义值，它控制了移动文字的背景颜色。 !-direction right 我的右移动文字体 direction left 我的左移动文字体 behavior scoll 从左开始循环，不停behavior slide 只循环一次,文本显示behavior alternate 从左到右来回循环说明循环的次数，文本不显示数值越大移动的越快，从1开始/-缺省：direction: left behavior:scroll 我的第一个滚动文本这是我的上下文本这是我的上下文本8、 文字中行的控制：主要包括两个内容：A. 分段：在文本中另起一段。B. 换行：在文本中另起一行。1) 的语法：说明：ALIGN属性是可选的。它的属性的属性值可以取“LEFT”、“CENTER”、“RIGHT”三个值中的值，这个属性控制了段落中的文字在WEB页面中的对齐方式。注意：有些浏览器不支持右对齐方式。当我们单独定义一个空行时，我们习惯使用的双标记形式，所以是HTML中唯一一个不能明确定义是双标记还是单标记的一个标记。2) 语法：说明：这个标记是单标记。 实例： 换行举例 测试换行和分段，这个是分段的效果。 下面是换行的效果。       测试换行和分段，这个是换行的效果。 上面是分段的效果。 9、 列表：常用的有三种类型的列表，分别是无序列表、有序列表、定义列表。列表单元允许嵌套。 结构：A. 起始标记：定义了整个列表的开始，同时定义这个列表的属性。B. 定义每一个选项。C. 列表的结束。1) 无序列表：A. 语法：说明：l 用于定义无序列表，无序列表的起始标记和结束标记都是必须的。显示为一个实心黑色圆点。l TYPE属性可以分别取三个值“DISC”、“SQUARE”、“CIRCLE，它们是用来控制强调符风格的属性，三个值分别对应实心圆点，实心方块，空心圆圈。在FRONTPAGE里，除DISC外的其它两个属性必须使用小写时浏览器才可识别。l COMPACT属性是个无值属性（名称标记），用来使列表的表项用紧凑格式紧凑表示。B. 语法：说明：l TYPE属性是可选的，一般情况下是不需要的，因为在整体列表定义时应该已经定义完毕，只有在极少数情况下，需要使不同表项的强调符不同，才有必要在这里定义这个属性。属性值的选择和前面列表的属性选项一致。（在FRONTPAGE里，除DISC外的其它两个属性必须使用小写时浏览器才可识别。） 实例： 无序列表举例 第一项 第二项 第三项 第一项 第二项 第三项 第一项 第二项 第三项 第一项 第二项 第三项 2) 有序列表：语法：说明：l 标记用于定义有序列表，有序列表的起始标记和结束标记都是必须的。有序列表的列表项之前有序号，有序列表和无序列表的区别只在于用序号代替了强调符。l TYPE属性可以分别取五个值“1”、“a”、“A”、“i”、“I”，它是用来控制强调符风格的属性，五个值分别对应数字、小写字母、大写字母、小写罗马数字、大写罗马数字。l START属性是一个数字，表示从第几个数字（字母）开始计数值为数值。例：4l COMPACT属性是个无值属性（名称标记），用来使列表的表项用紧凑格式紧凑显示。实例： 有序列表举例 第一项 第二项 第三项 第一项 第二项 第三项 第一项 第二项 第三项 第一项 第二项 第三项 第一项 第二项 第三项 第一项 第二项 第三项 第一项 第二项 第三项 第一项 第二项 第三项 第一项 第二项 第三项 第一项 第二项 第三项 第一项 第二项 第三项 第四项 第五项 3) 定义列表：一般用来定义术语，有时也将定义列表称为词汇列表。定义列表的列表项分成两部分，一部分是需要定义的术语，另一部分是该术语的定义。A. 语法：说明：l 标记用于标注定义列表，起始标记和结束标记都是必须的。l COMPACT属性是个无值属性（名称标记），用来使列表的表项用紧凑格式紧凑显示。l 标记内不允许含有除和其他任何单元或普通文本。B. 语法：说明：l 标记用于标注需要定义的术语。C. 语法： 说明：l 单元也只允许出现在单元的内部，其结束标记通常可以省略。l 单元可以含有一些字块级单元，特别是可以嵌入其他列表。 实例： 定义列表 HTTP协议的四步事务 建立连接 发起请求 回复应答 断开连接 HTML编辑工具 NOTEPAD FRONTPAGE 2000 DREAMWEAVER 综合实例： 列表混排举例 网络技术基础 数据库技术 数据库原理 数据库管理 WEB应用开发 HTML JavaScript ASP 10 、预格式化：单元用来包含一段预先编排好格式的文本，WEB浏览器将把起始标记与结束标记之间的文本按照原代码中的格式原封不动的再现出来,单元的结束标记是必需的，不能省略（实践证明可以省略，不会影响什么？）。与一般段落有所不同，对于预格式文本来说，自动换行是被禁止的，以便保证预先编排的格式不被破坏。单元有一个可选属性“WIDTH”，它用来设置文本的宽度，单位是字符数。“WIDTH”属性可以使浏览器选择适当的字体，以使整个PRE单元的文本适应当前窗口的宽度。 单元还应该注意下述几个问题：l 语法规则中列举的文本级标记，例如等允许出现在单元，但是他们并没有全部得到所有浏览器的支持。l 段落标记不允许出现在单元内部，但如果强制如此，浏览器一般会将其看作两个换行。l 因为单元内部允许有其他HTML标记出现，故一般不可以不加改变地将一段ASCII文本添加上后直接插入到HTML文档之中。若文本中存在“”“”“&”等特殊字符，应事先将其转换为相应的字符实体。 实例： 预格式化文档举例 没有使用预格式化文档标识的例子 a b c d e 使用预格式化文档标识的例子 a b c d e 11、链接：是WWW的基础，也是核心。单击这些链接，读者就能从当前WEB页的当前位置跳转到Internet的任何一个部分。Anchor:锚 简写：A语法：东莞心智慧说明：l “HREF”是超文本引用的意思它是标记的属性，可以将需要链接页面的地址放在“HREF”之后的引号中进行链接。l URL（Uniform Resource Locator）：统一资源定位符，是WEB页的地址。l URL后面跟的“#NAME”部分是指定页面的指定部分的标识，它是通过在目的页面的定义的名称。l URL部分可以使用的协议和目的类型主要有以下几种： 内部链接 外部链接 文件下载地址 电子邮件地址 举例： 链接举例 链接类型： 中国NLP培训网 中国NLP商学院 中国NLP培训 下载download网站上的超级分区工具 给老师发信   弹出新窗口： 弹出新的浏览器窗口 12、加入图片：大多数浏览器都支持两种图形格式：GIF（图形互换格式）和JPEG（联合图像专家组）。 语法： 说明：l “SRC”表示图片的来源，与标记的“HREF”的属性一样，可以为标记的“SRC”属性指定完整的Internet地址。如果图像文件与HTML文件在同一个文件夹内，也可以仅指定文件名，即使用相关地址。l 属性“ALIGN”属性则标识了图片在页面中的对齐方式，分别取值为“LEFT”、“RIGHT”、“TOP”、“MIDDLE”、“BOTTOM”，对应于左、中、右对齐。（若标记中不包含ALIGN属性，图像将于靠近它的文字底部对齐。l “BORDER”属性标识了图片的边框线的宽度，数值越大，边框线越宽。l “ALT”属性是在图片显示后，对于图片的一段描述文字，这段文字是在当浏览者将鼠标放置到该图上，停止一段时间后，页面上自动会弹出一个黄色的文本框，里面的文字，就是我们写在引号中的内容。13、水平线：标记用来在WEB页面上画出一条水平标尺线。使用标尺线是为了将HTML文档在逻辑上分隔成不同主题的分区，从而使文档便于阅读。单元只有起始标记没有结束标记。 语法： 说明：l ALIGN属性用来设置水平标尺线的对齐方式，“LEFT”为水平线与页面的左边对齐，“CENTER”为水平线与页面的中间对齐，“RIGHT”为水平线与页面的右边对齐，缺省时标尺线居中。ALIGN属性只有在设置了比浏览器窗口宽度小的“WIDTH”属性时才有实际意义。l WIDTH属性用来设置水平标尺线在水平方向上的宽度，即水平标尺线的长度。l SIZE属性设置水平标尺的粗细，单位是像素数。SIZE属性只能取整数值，缺省值为2。l NOSHADE属性是一个名称记号，用于取消水平标尺线的阴影，即画出一条简单的实线，没有三维效果。 实例： 水平标尺举例 这个是缺省的水平标尺线   这个是修改了一些属性后的水平标尺线 14、表格：是指按照一定顺序将文本及图形按照一定方式进行排列。是组织数据的一种十分有效的方式。与列表相比，表格可以容纳更多的内容，而从表现效果来看，表格的形式也更加完美。表格中由行和列分隔成的格子称为表元（cell），是矩形区域，它可以包含文本，图像和HTML标记。可将其他HTML元素放入表格单元中，但一个单元中使用的标记不能持续作用到其他单元。也就是说，如果要在一个表元中间放一个双标记，那么一定要在表元结束之前，结束这个双标记。用以分隔表元的行列线则称为表格的边框线（border），表元的内容分成两类，一类是表头，一类是表数据。 实例1： 简单的表格例子 AABB CCDD 1) 语法：说明：l 标记定义了一个表格的开始，表格的所有内容，都在这一