网页设计第2讲 HTML1.pptVIP

HTML基础知识1 引导语：当我们在网上浏览网页时，基本工作过程如下：用户连接到Internet后，在浏览器地址栏中输入地址（实际是对应于一个网页）并回车，这个请求被浏览器通过通信介质传送到网页所在的Web服务器，服务器作出响应，再通过通信介质把网页传送到用户的计算机，由浏览器进行显示。当用户在网页中操作时，如单击超链接，这种请求又会传送到相应的服务器，由服务器作出响应。 提出问题：浏览器的作用是什么？没有浏览器能否上网浏览信息？ 什么是HTML HTML(HyperText Markup Language)即超文本标记语言，是网页制作的一种规范、一种标准。HTML使用一些规定的标记（也叫标签）对网页上的各种信息进行标记，告诉浏览器应该做什么。比如： b中国/b 告诉浏览器“中国”两字应以粗体显示。 这些被标记的信息发布在Web服务器上，当用户访问这些文件时，浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显示被标记的内容，而HTML的标记符号并不显示在屏幕上。 浏览器翻译 由此可以看出，浏览器的基本功能是对Web服务器上的网页进行显示。 静态网页和动态网页 网页按其表现形式有静态网页和动态网页之分： 静态网页：网页文件里没有程序代码，只有HTML标记，这种网页文件的后缀为.htm或.html。静态网页一经制成，内容就不会变化，不管何时何人访问显示的内容都是一样的，如果要修改就必须修改源代码。 动态网页 ：网页文件里不仅含有HTML标记，而且含有程序代码，网页的后缀一般根据不同的程序设计语言来定，如ASP文件的后缀为.asp，JSP文件的后缀为.jsp。动态网页可以根据不同的时间、不同的访问者而显示不同的内容。如常见的BBS、聊天室等就是用动态网页实现的。 教学目标 (1) 掌握HTML语言的语法规则； (2) 掌握HTML标记的使用 (3) 能使用HTML语言制作简单网页 案例 任务：使用HTML制作一个简单的网页“校园导游 ” 一、HTML的语法结构 标准HTML文件的基本结构： HTML文档结构分为文件头和文件体两部分。 HTML …/HTML标记 它是创建一个HTML文件最基本的标记，当浏览器遇到这个标记时，会按照HTML的标准解释后面的内容，直到遇到结束标记/HTML时为止。 页面中所有内容都包含在HTML和/HTML之间。 HEAD …/HEAD标记 网页头部标记。HEAD与/HEAD之间的内容为整个文件的头部信息，如网页的标题、预定义变量等。 TITLE …/TITLE标记 网页标题，TITLE之间的文字显示在浏览器标题栏上。TITLE标签应包含在HEAD之中。 BODY …/BODY标记 网页的主体内容写在BODY之中。 HTML的基本语法 HTML文件由标记、内容和注释组成。标记用来控制文字、图形等显示的方式，注释在网页中不显示。 标记的3种格式： 单标记：标记 双标记：标记 内容 /标记 标记属性：标记 属性1=值 属性2=值 …… 说明 “ ”表示这是HTML的标记而非普通文本。 大多数的HTML标记都具有起始标记和结束标记，放在它所描述的内容两边，结束标记前加“/”，要成对出现。 不同标记之间可以嵌套，但不能交叉。如下面用法错误： pfont color=#000000中国体育/p/font 标记名与尖括号之间不能加空格。 一部分标记要加上属性，另一些则不必，属性只能加于起始标记中。 如：font size=7 color=#0000FF中国/font HTML标记的大小写等效。 ! …标记 注释标记。其内容并不在浏览器中显示，仅为设计人员阅读方便。可以放在任何地方。 HTML文件一行可写多个标记，一个标记可以分多行书写。 HTML文件以纯文本形式存放，扩展名为.htm或.html。 HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的， 若需多个空格，使用nbsp。 二、HTML文字与段落标记 1、换行标记br 在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转至下一行，设计者对于自己需要换行的地方应加上换行标记br。 演示：去掉任务中br标记后的浏览效果。 2、段落标记P …/P 段落与段落之间显示一空行。 /P是可以省略的，下一个P的开始就是上一个P的结束。 align属性：指明段落的对齐方式，有三种值：center、left、right。 演示：在任务中为P标记加上属性后的浏览效果 3、保留格式标记pre…/pre 如果想直接依照HTML中原编排格式显示内容，可以用保留格式标记。 演示：去掉任务中pre标记后的浏览效果。 4、标题标记Pn…/Pn H