搜索
2.1HTML的基本结构2.2页面排版2.4表格2.3清单列表2.5图片与多媒体第2章HTML简介返回2.6超级链接2.7表单2.1HTML基本结构下一页万维网发展非常迅猛的原因之一就是所有的网页都是以同一格式编写的，这种格式或编写的语言就是HTML(HypertextMarkupLanguage)，即超文本标记语言。HTML所使用的规范是电子文档交换的国际标准的一部分。2.1HTML基本结构打开网页并查看源代码，会发现源代码都是由标签和内容组成，这些标签就是HTML标签。这些标签是一系列使用括号的代码，用于描述网页的格式和内容。比如：B这段文字将在浏览器中显示为黑体字/B2.1HTML基本结构说明一个文档是HTML文档的重要标志是：HTML/HTMLHTML标志有单边标记和双边标记:常见的单边标记有：换行BR、横线HR常见的双边标记有：文件主题TITLE/TITLE文头HEAD/HEAD文体BODY/BODY2号标题H2/H2超级链接A/A2.1HTML基本结构htmlheadTITLE就到这里了！/TITLE/headbodyH1fontcolor=red一修哥font/H1/body/html以下是一个很简单的HTML文档2.1HTML基本结构显然一个HTML文档的基本结构如下：htmlHTML文件开始head文件头开始文件头内容/head文件头结束body文件体开始文件体内容/body文件体结束/htmlHTML文件结束2.1HTML基本结构回目录页2.2页面排版2．2．1标题标记2．2．２标题字体标记2．２．３转行标记2．２．４预排版标记2．２．5居中标记2．２．6文字效果标记2．２．7特殊符号回目录页2.2.1标题标记Title标记的格式如下：title文件标题/title注意：•title要简洁•title要高度概括Web文档的内容回本节首页2.2.2标题字体标记标题字体标记用来说明标题字体的大小，其格式如下：hx[align＝＃]文件标题/hx注意：•x取值范围为1—6•x值越小标题的字形越大•align表示标题文字的对齐属性•＃分别取left、center、right表示标题居左居中、居右显示2.2.2标题字体标记htmlheadtitle标题设置/title/headbodyh1一修哥/h1h3align＝center一修哥/h3h5align＝right一修哥/h5/body/html给出一个设置标题字体的HTML文档的基本结构如下：2.2.2标题字体标记回本节首页2.2.3转行标记转行标记用来强迫文字转行(不受浏览器窗口影响），其格式如下：br关闭转行标记为：nobr/nobr，使得文字的显示依照浏览器的窗口大小显示，一屏显示不完系统自动添加滚动条。注意：Web浏览器是基于屏幕显示窗口显示的，用户可以使用分段来任意改变显示区的大小，Web文档将多个空格以及回车视为一个空格。段落标记为P[align＝＃]2.2.3转行标记给出一个不使用转行标记的HTML文档如下：htmlheadtitle文字转行/title/headbodynobr风住尘香花已尽，日晚倦梳头。物是人非事事休，欲语泪先流。闻说双溪春尚好，也拟泛轻舟。只恐双溪舴艋舟，载不动、许多愁。/nobr/body/html2.2.3转行标记对上面的Web文档使用转行标记如下：2.2.3转行标记htmlheadtitle文字转行/title/headbody风住尘香花已尽，br日晚倦梳头。br物是人非事事休，br欲语泪先流。br闻说双溪春尚好，br也拟泛轻舟。br只恐双溪舴艋舟，br载不动、br许多愁。br/body/html2.2.3转行标记回本节首页2.2.4预排版标记预排版标记使得浏览器将预排版标记之间的文本按照最初编辑的情况显示、不作任何格式的修改。其格式如下：pre原样输出的文本/pre使用预排版标记的Web文档如下：htmlheadtitle预排版标记/title/headbodypre风住尘香花已尽，日晚倦梳头。物是人非事事休，欲语泪先流。闻说双溪春尚好，也拟泛轻舟。只恐双溪舴艋舟，载不动、许多愁。/pre/body/html2.2.4预排版标记2.2.4预排版标记回本节首页2.2.5居中标记Web文档中很多标记具有居中对齐方式的属性，例如标题、段落、窗口等。格式为：center/center使用居中标记的Web文档如下：htmlheadtitle验证居中标记/title/headbodyh4align=center聪明的一修/h4centerp一修有一个漂亮的小妹妹。/pp一修的小妹妹叫小叶子。/p/center/body/html1.2.5居中标记回本节首页2.2.5居中标记2.2.6文字效果标记Web文档包含一些对文字效果进行设置的标记，它们分别是：粗体标记：strong/strong或b/b斜体标记：em/em或I/I或cite/cite底线标记：u/u删除线标记：strike/strike文字闪烁标记：blink/blink上标标记：sup/sup下标标记：sub/sub字体大小标记：fontsize=N/fontN=1/2/3/4/5/6/7字体颜色标记：fontcolor=#value/font背景色标记：bodybgcolor=#value/body背景图标记：bodybackground=“src”/body文字颜色标记：bodytext=#value/body给出使用文字效果的Web文档如下所示：htmlheadtitle文字标记使用验证/title/headbodybgcolor=yellowbh4聪明的一修/h4/bbrciteufontcolor=green聪明的一修/font/cite/ubrfontsize=7fontcolor=red聪明的一修/font/fontbrfontcolor=bluestrike一修有一个漂亮的小妹妹。/strike/fontbr一修智商=小叶子智商sup100/supbr/body/html1.2.6文字效果标记2.2.6文字效果标记1.2.6文字效果标记回本节首页2.2.6文字效果标记2.2.7特殊符号HTML中包含一些特殊符号的表示方法如下所示：表示为<；表示为>“表示为"&表示为&注意：表示这些特殊符号时，分号不能省略给出使用特殊符号效果的Web文档如下所示：htmlheadtitle验证特殊符号实例/title/headbodybgcolor=bluefontcolor=whitefontsize=4b"一修的智商>一般人的智商"&"一修的智商<101个小叶子的智商"是不容怀疑的br/font/font/b/body/html1.2.7特殊符号2.2.7特殊符号1.2.7特殊符号回本节首页2.2.7特殊符号2.3清单列表Web文档中的清单用来说明事项。清单可以分为符号清单、标号清单，符号式清单分为选项清单、说明式清单选项清单的格式有以下三种：MENUtype=#LHtype=#ULtype=#LILILI......LILILI/MENU/LH/UL选项清单前的符号由格式中的＃给出，具体而言＃可取值如下：DISC（实心圆点）CIRCLE（空心圆点）SQUARE（实心方块）说明式清单的格式如下：DLDT…DDDT…DD/DL2.3清单列表HTMLHEADTITLE无标题文档/TITLE/HEADBODYBGCOLOR=#0066CCULTYPE=DISCFONTCOLOR=#FFFF00B大学系科设置：/B/FONTLIFONTCOLOR=“#FFFF00”I计算机系/I/FONTLIIFONTCOLOR=#FFFF00中文系/FONT/ILIIFONTCOLOR=#FFFF00数学系/FONT/ILIIFONTCOLOR=#FFFF00外语系/FONT/ILIIFONTCOLOR=#FFFF00物理系/FONT/IBR/UL/BODY/HTML2.3清单列表2.3清单列表HTMLHEADTITLE无标题文档/TITLE/HEADBODYBGCOLOR=#0066CCDLFONTCOLOR=#FFFF00B大学系科设置：/B/FONTDTFONTCOLOR=#FFFF00I计算机系/I/FONT/DTDTIFONTCOLOR=#FFFF00中文系/FONT/I/DTDTIFONTCOLOR=#FFFF00数学系/FONT/I/DTDTIFONTCOLOR=#FFFF00外语系/FONT/I/DTDTIFONTCOLOR=#FFFF00物理系/FONT/IBR/DT/DL/BODY/HTML2.3清单列表2.3清单列表标号清单的特征是清单中各个项目左边加上了有序标号，如1、2或者a、b等，并可以设置序号的起始值。标记格式如下：OL[type=#]|[start=#]LI…LI…LI…/OL＃可以是：1、2、3等等，a、b、c等等，A、B、C等等，i、ii、iii等等，I、II、III等等2.3清单列表HTMLHEADTITLE无标题文档/TITLE/HEADBODYBGCOLOR=#0066CCOLSTART=5FONTCOLOR=#FFFF00B大学系科设置：/B/FONTLIFONTCOLOR=#FFFF00I计算机系/I/FONTLIIFONTCOLOR=#FFFF00中文系/FONT/ILIIFONTCOLOR=#FFFF00数学系/FONT/ILIIFONTCOLOR=#FFFF00外语系/FONT/ILIIFONTCOLOR=#FFFF00物理系/FONT/IBR/OL/BODY/HTML2.3清单列表2.3清单列表清单之间可以相互嵌套，但要注意清单标记的层次HTMLHEADTITLE清单嵌套实例/TITLE/HEADBODYBGCOLOR=#0066CCULLIFONTCOLOR=#FFFF00信息工程学院/FONTULLIIFONTCOLOR=#FFFF00计算机系/FONT/IOLLIIFONTCOLOR=#FFFF00计算机应用专业/FONT/ILIIFONTCOLOR=#FFFF00计算机网络专业/FONT