HTML--ppt

HTML语言基础(一)1.1基本概念1.什么是HTML2.HTML的作用3.HTML的编辑环境4.专用的网页编辑器1.什么是HTMLHTML是HyperTextMarkupLanguage（超文本标记语言）的缩写，它是构成Web页面（Page）的主要工具，是用来表示网上信息的符号标记语言。HTML是一种用于网页制作的排版语言，是Web最基本的构成元素。HTML并非一种编程语言。特点：简易性，可扩展性，平台无关性。历史：1.019934.011999w3c标准5.02008思考：XHTML？补充资料查阅：HTML5常见浏览器IE-遨游、360、腾讯、世界之窗IE为内核Safari、Chrome、Firefox、Opera2.HTML的作用①格式化文本。如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。②建立超链接。通过超链接检索在线的信息，只需用鼠标单击，就可以到达任何一处。③创建列表。把信息用一种易读的方式表现出来。④插入图像。使网页图文并茂，还可以设置图像的各种属性，如大小、边框、布局等。⑤建立表格。表格为浏览者提供了快速找到需要信息的显示方式，还可以用表格来设定整个网页的布局。⑥加入多媒体。可以在网页中加入音频、视频、动画，还能设定播放的时间和次数。⑦交互式窗体、计数器等。为获取远程服务而设计窗体，可用于检索信息、定购产品等。3.HTML的编辑环境HTML要求的软件环境更为简单，任何文本编辑器都可以用来制作网页，包括记事本、写字板、Word、WPS等编辑程序。不过在保存时，一定要用纯文本方式存盘。HTML文件的设计制作与一般程序设计语言之间最大的不同在于，HTML具有跨平台的处理能力。4.专用的网页编辑器FrontPageDreamweaver2.HTML基本标记2.2.1HTML基础2.2.2HTML入门——简单标记的认识与使用2.2.3段落和文字标记2.2.4建立超级链接2.2.5加入图片2.2.1HTML基础1.HTML文件的组成2.标记3.标记的属性4.HTML文件的基本结构1.HTML文件的组成①标记：是HTML的基本元素，可以说一个HTML文件大部分都是由字符信息加上一些标记呈现出来的。基本的标记可分为两种：单一标记和成对标记②文字与图形资料③统一资源定位器URL（UniformResourceLocator）：2.标记标记受标记影响的内容/标记说明：①每个标记都用“”（小于号）和“”（大于号）围住，如P，Table，以表示这是HTML代码而非普通文本。注意，“”与标记名之间不能留有空格或其它字符。②在标记名前加上符号“/”便是其结束标记，表示这种标记内容的结束，如/FONT。标记也有不用/标记结尾的，称之为单标记。③标记字母大小写皆可，没有限制。对同一段要标记的内容，可以用多个标记来共同作用，产生一定的效果。此时，各个标记间的顺序也是任意的。3.标记的属性每个标记有一系列的属性。标记要通过属性来制作出各种效果。格式为：标记属性1=属性值属性2=属性值…受影响的内容/标记例如字体标记FONT，有属性size和color等。属性size表示文字的大小，属性color表示文字的颜色。表示为：FONTsize=3color=red属性示例/FONT需要注意的是：①并不是所有的标记都有属性，如换行标记就没有。②根据需要可以用该标记的所有属性，也可以只用需要的几个属性，在使用时，属性之间没有顺序。多个属性之间用空格隔开。4.HTML文件的基本结构HTML文件是一种纯文本格式的文件，HTML文件包括头部（head）和主体（body）。文件的基本结构为：HTMLHEADTITLE网页的标题/TITLE/HEADBODY网页的内容/BODY/HTML说明：①HTML文件以HTML开头，以/HTML结尾。②HEAD…/HEAD：表示这是网页的头部，用来说明文件命名和与文件本身的相关信息。可以包括网页的标题部分：TITLE…/TITLE。③BODY…/BODY：表示网页的主体即正文部分。④HTML语言并不要求在书写时缩进，但为了程序的易读性，建议网页设计制作者使标记的首尾对齐，内部的内容向右缩进几格。简单的HTML文件。HTMLHEADTITLE简单的HTML文件/TITLE/HEADBODY最简单的网页/BODY/HTML例2-1的显示效果2.2.2HTML入门1.HTML文档标记HTML…/HTML2.HTML文件头标记HEAD…/HEAD3.HTML文件标题标记TITLE…/TITLE4.HTML文件主体标记BODY…/BODY5.注释标记1.HTML文档标记HTML…/HTMLHTML文档标记的格式为：HTMLHTML文档的内容/HTMLHTML文档的标记。HTML处于文档的最前面，表示HTML文档的开始，即浏览器从HTML开始解释，直到遇到/HTML为止。每个HTML文件均以HTML开始，以/HTML结束。2.HTML文件头标记HEAD…/HEADHEAD是英文“头”的意思，习惯上将HTML文档分为文件头和文件主体两个部分。文件主体是在Web浏览器窗口的用户区显示的内容，而文件头则用来规定该文档的标题（浏览器标题栏中的内容）和文档的一些属性。HTML文件头标记的格式为：HEAD头部的内容/HEAD说明：HTML文件的头部在文件标记HTML之后，在开始标记HTML和结束标记/HTML间定义。其内容可以是标题名，文本文件地址、创作信息等网页信息说明。对应于相应的标记，有标题标记TITLE…/TITLE等。HEAD标记在HTML文件中不是必须的，如果没有，浏览器也会照常解读文件。3.HTML文件标题标记TITLE…/TITLEHTML文件标题标记的格式为：TITLE标题名/TITLE设定HTML文件标题的标记。在文件头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。尽管头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题。4.HTML文件主体标记BODY…/BODYHTML文件主体标记的格式为：BODY文件主体/BODY说明：①主体位于头部之后，以BODY为开始标记，/BODY为结束标记。它定义了网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在本标记中。②BODY有很多属性，这些属性用于设定网页的总体风格，可以定义页面的背景图像、背景颜色、文字颜色、超文本链接的颜色。其中常用的属性见表2-1。表2-1BODY标记的属性值说明background设置网页的背景图像。Bgcolor设置网页的背景色。Text设置文本的颜色。Link设置尚未被访问过的超文本链接的颜色，默认为蓝色。vlink设置已被访问过的超文本链接的颜色，默认为蓝色。alink设置超文本链接在被访问瞬间的颜色，默认为蓝色。表2-1中，涉及颜色的属性，取值可以是英文颜色名，也可以用“#”引导的一个十六进制数代码来表示，见表2-2。如果颜色值用十六进制数代码，则颜色数比表2-2列出的数目多得多。表2-2颜色代码表名称英文颜色名16进制代码黑色black#000000蓝色blue#0000FF棕色brown#A52A2A青色cyan#00FFFF灰色gray#808080绿色green#008000乳白色ivory#FFFFF0桔黄色orange#FFA500粉红色pink#FFC0CB红色red#FF0000白色white#FFFFFF黄色yellow#FFFF00深红色crimson#CD061F黄绿色greenyellow#0B6EFF水蓝色dodgerblue#0B6EFF淡紫色lavender#DBDBF8【例2-2】使用网页的背景色（bgcolor）属性，可以设定整个网页的背景颜色；使用网页的文本色（text）属性，可以设定整个网页文字的颜色。HTMLHEAD这是主体之外的文本TITLE试试BODY标记的属性/TITLE/HEADBODYbgcolor=greenyellowtext=blue设置网页的背景色属性为黄绿色,设置网页的文本色属性为蓝色/BODY/HTML显示效果如图2-2所示。图2-2使用网页的bgcolor属性5.注释标记html中使用“注释”为文中的不同部分加上说明，以方便日后阅读和修改。注释标记的格式为：!--注释内容--注释内容不局限于一行，长度也不受限制。即结束标识符不必与开始标识符在同一行上。2.2.3段落和文字标记1.标题文字标记2.文本文字标记3.设置字型4.强制换行、换段标记5.分区显示标记6.水平线7.特殊符号在多数网页中，文档是核心内容，所以要经常设置文档的格式。设置文档的标记包括标题和文字的字体、字号、字型、颜色、段落格式、文本的布局等。1.标题文字标记标题是指页面中文本的标题，而不是用TITLE…/TITLE定义的网页标题，标题格式显示在浏览器窗口内。标记的格式为：Hnalign=对齐方式标题文字/Hn说明：①属性n用来指定标题文字的大小。n可以取1～6的整数值，取1时文字最大，6时文字最小。②属性align用来设置标题在页面中的对齐方式，取值有：left（左对齐）、center（居中）或right（右对齐）。③H…/H标记缺省显示宋体字。H…/H标记会自动插入一个空行。在一个标题行中无法使用不同大小的字体。【例2-3】使用标题标记设置标题内容的大小与对齐方式。HTMLHEADTITLE设置标题/TITLE/HEADBODYH1第1级标题（H1）/H1H2第2级标题（H2）/H2H3第3级标题（H3）/H3H4align=left第4级标题（H4）（居左）/H4H5align=center第5级标题（H5）（居中）/H5H6align=right第6级标题（H6）（居右）/H6/BODY/HTML图2-3设置标题文字大小2.文本文字标记在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、颜色。文本文字标记FONT用来设定文字的字体、字号和颜色。其格式为：FONTsize=数字face=字体名color=颜色被设置的文字/FONT说明：FONT标记的属性包括：size、face、color。①size属性用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。②face属性用来设置字体。如黑体、宋体、楷体_GB2312、隶书、TimesNewRoman等。当文字为汉字时，格式中的“字体名”可以为：宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋_GB2312等。当文字为英文时，字体名可以为TimesNewRoman等约50种字体。其实，这里的字体名字就是在Word的“字体”工具栏中显示的字体名。③color属性用来设置文字颜色，其取值见表2-2。【例2-4】使用FONT标记的size属性设置文字的大小；face属性设置字体。color属性设置文字颜色。HTMLHEADTITLE使用FONT标记/TITLE/HEADBODYH1设置文字的属性/H1FONTsize=1color=cyan1号字青色/FONTFONTsize=2color=green2号字绿色/FONTFONTsize=3face=幼圆color=orange3号幼圆桔黄色/FONTFONTsize=4face=隶书color=crimson4号隶书深红色/FONTFONTsize=5face=黑体color=gree