第01章_HTML网页制作

第一章HTML网页制作2北京万博天地网络技术股份有限公司版权所有本章目标了解HTML基本概念了解Web站点发布原理掌握HTML基本词法结构熟练HTML常用词法3北京万博天地网络技术股份有限公司版权所有本章内容1.2HTML标记1.1HTML基础4北京万博天地网络技术股份有限公司版权所有1.1HTML基础HTML基本概述及其特点HTML发布过程HTML词法类型HTML文档的基本结构HTML正文注释5北京万博天地网络技术股份有限公司版权所有1.1.1HTML基本概述及其特点超文本标记语言HTML（HyperTextMarkupLanguage）一个HTML文档包含两部分内容文档本身要描述的内容描述内容的HTML标记HTML文档具有以下特点结构化超文本与平台无关简单，易维护6北京万博天地网络技术股份有限公司版权所有1.1.2HTML发布过程Web服务器发布网页时使用的主要协议是HTTP协议一个完整的HTTP事务由四步组成客户与服务器建立TCP连接客户向服务器发送请求如果请求被接受，服务器就向客户发送响应信息，其中包括状态码和所要的文件客户与服务器关闭连接7北京万博天地网络技术股份有限公司版权所有1.1.3HTML词法类型HTML标记的语法是标记名称属性1名=属性1值属性2名=属性2值…………标记在表示HTML文档内容结构和含义的时候，通常有两种方式单标记双标记8北京万博天地网络技术股份有限公司版权所有1.1.4HTML文档的基本结构HTML结构如下所示9北京万博天地网络技术股份有限公司版权所有1.1.5HTML头内容head标签用于定义文档的头部元素属性参数/值描述title网页标题MetanameKeywords,Description,Copyright,Robots,author用于描述网页http-equivcontent-Type,Refresh,Window-target,Pragma,PICS－LabelPage-Enter,Page-Exit帮助浏览器正确和精确地显示网页内容LinkrelAlternate,appendix,bookmark,chapter,contents,copyright,glossary,help,home,index,next,prev,section,start,stylesheetsubsection指定当前文档与其他文档的关系hrefURL定义被链接文档的位置basehrefURL默认地址target_blank,_parent,_self,_top,framename在何处打开页面中所有的链接scripttypeMIME-type脚本的MIME类型,包括语言styletypetext/css定义样式信息10北京万博天地网络技术股份有限公司版权所有1.1.5HTML正文作为网页主体内容的BODY部分将直接显示在浏览器的窗口中，它里面的内容直接影响着整个网页的好坏，在网页设计中起着至关重要的作用背景颜色和背景图片bodybgcolor=#background=URLbgproperties=fixed页面文字颜色bodytext=#link=#alink=#vlink=#页面空白(Margin)bodyleftmargin=#rightmargin=#topmargin=#bottommargin=#11北京万博天地网络技术股份有限公司版权所有1.1.6注释像很多电脑语言一样，HTML文件亦提供注解功能浏览器会忽略此标记中的文字（可以是很多行）而不作显示为文中不同部分加上说明，方便日后修改!--由这处开始是产品订购表格--用做版权声明!--本文版权为2009,CreationofWebpage所拥有，未经许，请勿抄摘--12北京万博天地网络技术股份有限公司版权所有1.2HTML标记本节将要介绍HTML中常用的标识，虽然比较简单，但是还是需要反复练习，达到熟练的程度，为后面的学习打好基础13北京万博天地网络技术股份有限公司版权所有1.2.1字体（标题字体）语法:H*ALIGN=””/H*说明:其中*可以选择1－6；ALIGN属性值可以选择“left”、“center”、“right”三个中间的一个14北京万博天地网络技术股份有限公司版权所有1.2.1字体（文章字体）语法:FONTSIZE=””COLOR=””/FONT说明:其中SIZE属性可以选择1－7；COLOR属性值可以选择RGB值或者预定义颜色名称常用的颜色名称有：black（黑）,white（白）,red（红）,green（绿）,blue（蓝）,yellow（黄）,aqua（浅绿）,fuchsia（紫红）,gray（灰）,Lime（橙）,maroon（栗色）,purple（紫）,olive（橄榄）,silver（银色）15北京万博天地网络技术股份有限公司版权所有1.2.1字体（物理字体）语法:B/B说明:B标记用来指示以粗体字显示文本语法:I/I说明:I标记用来指示以斜体字显示文本语法:U/U说明:U标记用来指示为文本加上下划线16北京万博天地网络技术股份有限公司版权所有1.2.1字体（物理字体）语法:SUP/SUP说明:SUP标记指示以上标方式显示文本语法:SUB/SUB说明:SUB标记指示以下标方式显示文本语法:STRIKE/STRIKE说明:STRIKE标记用来指示在文本的正中央画一条删去线17北京万博天地网络技术股份有限公司版权所有1.2.1字体（逻辑字体）逻辑字体是由标记语言前身决定的，目前已经不再或者很少使用的字体，原来用于标记文字的一些逻辑含义18北京万博天地网络技术股份有限公司版权所有1.2.1字体（字符实体）在往HTML文档中写入特殊字符，如“〈”、“〉”、“&”、“”等要使用特殊的代码，浏览器会用HTML命令对这些特殊代码进行翻译往网页中输入特殊字符，需在HTML代码中加入以&开头的字母组合或以&#开头的数字  ：不换行空格>>：<<：19北京万博天地网络技术股份有限公司版权所有1.2.1字体（文字对齐）语法:DIVALIGN=””/DIV说明:ALIGN属性可以用“left”、“center”、“right”，分别对应于将标记中间的字符块按照左、中、右对齐语法:CENTER/CENTER说明:这个标记没有属性，它的作用是将标记中间的字符居中对齐，它的作用和DIVALIGN=“center”/DIV一样语法:PALIGN=“”/P说明:P和DIV中的ALIGN属性的属性值一样，也是取“left”、“center”、“right”三个值，分别对应将中间的字体左、中、右对齐20北京万博天地网络技术股份有限公司版权所有1.2.1字体（文字移动）文字移动方向的设置文字移动方式的设置文字移动循环的设置文字移动速度与延时的设置文字移动底色的设置文字移动面积的设置21北京万博天地网络技术股份有限公司版权所有1.2.1字体（文字移动）（续）DIRECTION属性决定了文字的移动方向语法:MARQUEEDIRECTION=“”/MARQUEE说明:其中的DIRECTION属性的属性值是取“left”、“right”两个值，分别对应将中间的字体向左、右移动22北京万博天地网络技术股份有限公司版权所有1.2.1字体（文字移动）（续）BEHAVIOR属性决定了文字的移动方式语法:MARQUEEBEHAVIOR=“”/MAEQUEE说明:其中的BEHAVIOR属性的属性值是取“scroll”、“slide”、“alternate”三个值，分别对应将中间的字体循环移动、只移动一次、在屏幕中间左右移动23北京万博天地网络技术股份有限公司版权所有1.2.1字体（文字移动）（续）LOOP属性决定了文字的移动次数语法:MARQUEELOOP=“”/MAEQUEE说明:其中的LOOP属性的属性值是取一个数值，表示将中间的字体循环移动的次数24北京万博天地网络技术股份有限公司版权所有1.2.1字体（文字移动）（续）SCROLLAMOUNT属性决定了文字的移动速度语法:MARQUEESCROLLAMOUNT=“”/MAEQUEE说明:其中的SCROLLAMOUNT属性的属性值是取数字值，对应将中间的字体循环移动的速度。数值越大，表示速度越快25北京万博天地网络技术股份有限公司版权所有1.2.1字体（文字移动）（续）SCROLLDELAY属性决定了将中间的字体循环移动的延时语法:MARQUEESCROLLDELAY=“”/MAEQUEE说明:SCROLLDELAY属性的属性值是取数字值，对应将中间的字体循环移动的延时。设置这个参数也会影响到文字移动的速度26北京万博天地网络技术股份有限公司版权所有1.2.1字体（文字移动）（续）HEIGHT、WIDTH和BGCOLOR属性分别控制了文字移动面积的高度、宽度和背景颜色语法:MARQUEEHEIGHT=“”WIDTH＝“”BGCOLOR＝“”/MAEQUEE说明:其中HEIGHT属性的属性值是取数字值，这个属性控制了文字移动面积的高度；WIDTH属性的属性值是取数字值，这个属性控制了文字移动面积的宽度；BGCOLOR属性的属性值可以取RGB值，或者用预定义值，它控制了移动文字的背景颜色27北京万博天地网络技术股份有限公司版权所有1.2.1字体（文字中行的控制）语法:PALIGN=“”/P说明:其中ALIGN属性的属性值可以取“left”、“center”、“right”三个值中的值，这个属性控制了段落中的文字在Web页面中的对齐方式。需要注意的是有些浏览器不支持右对齐方式语法:BR说明:这个标记是单标记28北京万博天地网络技术股份有限公司版权所有1.2.2列表HTML常用的有三种类型的列表（list）无序列表有序列表定义列表各种列表单元的HTML代码具有相同的结构起始标记定义每一个选项列表的结束标记29北京万博天地网络技术股份有限公司版权所有1.2.2列表（续）无序列表语法:ULTYPE=“”COMPACT/UL说明:TYPE属性可以分别取三个值“disc”、“square”、“circle”，（在某些浏览器中，TYPE属性的值必须使用小写浏览器才可以识别）它是用来控制强调符风格的属性，三个值分别对应实心圆点，实心方块，空心圆圈。需要说明的是有些浏览器不支持该属性。COMPACT属性是个无值属性（名称标记），用来使列表的表项用紧凑格式显示30北京万博天地网络技术股份有限公司版权所有1.2.2列表（续）语法:LITYPE=“”/LI说明:TYPE属性是可选的，一般情况下是不需要的，因为在整体列表定义时应该已经定义完毕，只有在极少数情况下，需要使不同表项的强调符不同，才有必要在这里定义这个属性。属性值的选择和前面列表的属性选项一致31北京万博天地网络技术股份有限公司版权所有1.2.2列表（续）有序列表语法:OLTYPE=“”START=“”COMPACT/OL说明:TYPE属性可以分别取五个值“1”、“a”、“A”、“i”、“I”，它是用来控制强调符风格的属性，五个值分别对应数字、小写字母、大写字母、小写罗马数字、大写罗马数字。START属性是一个数字，表示从第几个数字（字母）开始计数。COMPACT属性是个无值属性（名称标记），用来使列表的表项用紧凑格式显示32北京万博天地网络技术股份有限公司版权所有1.2.2列表（续）定义列表语法:DLCOMPACT/DL说明:COMPACT属性是个无值属性（名称标记），用来使列表的表项用紧凑格式显示语法:DT/DT说明:DT标记用于标注