网页设计与制作第2章-HTML基础知识课件.ppt

第第2 2章章 HTMLHTML基础知识基础知识HTMLHTML1文字版面的编辑文字版面的编辑 2建立超链接建立超链接3 表格表格4本章导读本章导读 学习网页的制作，首先要了解学习网页的制作，首先要了解学习网页的制作，首先要了解学习网页的制作，首先要了解HTMLHTMLHTMLHTML语法，它是制作网页必须掌语法，它是制作网页必须掌语法，它是制作网页必须掌语法，它是制作网页必须掌握的最基础的语言。握的最基础的语言。握的最基础的语言。握的最基础的语言。HTML简介简介文字版面的编辑文字版面的编辑建立超链接建立超链接表格表格能力目标能力目标任务任务1 HTML1 HTML简介简介HTMLHTML全称全称HyperTextHyperText Markup Language Markup Language，正式名称是超，正式名称是超文本标记语言，利用标记（文本标记语言，利用标记（tagtag）用来描述网页的字体、）用来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑大小、颜色及页面布局的语言，使用任何的文本编辑器都可以进行编辑。器都可以进行编辑。HTMLHTML的格式非常简单，由文字及的格式非常简单，由文字及标记组合而成。对于网页制作的初学者来说，理解标记组合而成。对于网页制作的初学者来说，理解 HTMLHTML的工作原理是必要的。的工作原理是必要的。阶段阶段2 HTML2 HTML基本结构基本结构1.认识认识HTML标签标签HTMLHTML的标签分单独出现和成对出现两种，大多数标的标签分单独出现和成对出现两种，大多数标签成对出现，是由首标签和尾标签组成的。首标签签成对出现，是由首标签和尾标签组成的。首标签的格式为的格式为 ，尾标签的格式为，尾标签的格式为/。完整语法如下：。完整语法如下：要控制的元素要控制的元素/在每个在每个HTMLHTML标签中，还包含了属性设置，控制标签中，还包含了属性设置，控制HTMLHTML标签所建立的元素。这些属性将位于所建标签所建立的元素。这些属性将位于所建立元素的首标签。其标签的基本语法如下：立元素的首标签。其标签的基本语法如下：2”尾标签的建立方式为尾标签的建立方式为/因此，在因此，在HTMLHTML文件中某个元素的完整定义语法文件中某个元素的完整定义语法如下：如下：2”元素内容元素内容/2.2.元素的概念元素的概念当用一组当用一组HTMLHTML标签将一段文字包含在中间时，标签将一段文字包含在中间时，这段文字与包含文字的这段文字与包含文字的HTMLHTML标签被称为一个元标签被称为一个元素。在素。在HTMLHTML语法中，每个由语法中，每个由HMTLHMTL标签与文字所标签与文字所形成的元素内，还可以包含另一个元素。因此形成的元素内，还可以包含另一个元素。因此整个整个HMTLHMTL文件就像一个大元素，包含了许多小文件就像一个大元素，包含了许多小元素。元素。4.HTML4.HTML文件结构文件结构打开记事本，在文档中输入以下代码打开记事本，在文档中输入以下代码页面页面这是一个页面。这是一个页面。输入完成后保存扩展名为输入完成后保存扩展名为“html”html”的文件，双击打开的文件，双击打开该文件。该文件。HTML示例示例任务任务2 2 文字版面的编辑文字版面的编辑有许多网页中文字布局需要错落有致，有许多网页中文字布局需要错落有致，这就需要掌握这就需要掌握HTML中文字标签的应中文字标签的应用。用。换换行行标标签示例签示例分段控制标签分段控制标签由由标签所标识的文字，代表同一个段落的文字。标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，也就不同段落间的间距等于连续加了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。它是要隔一行空白行，用以区别文字的不同段落。它可以单独使用，也可以成对使用。单独使用时，下可以单独使用，也可以成对使用。单独使用时，下一个一个的开始就意味着上一个的开始就意味着上一个的结束的结束。格式：格式：文字文字 文字文字 p align=文字文字分分段段控控制制标标签示例签示例原样显示文字标签原样显示文字标签原样显示文字标签原样显示文字标签春眠不觉晓，春眠不觉晓，处处闻啼鸟。处处闻啼鸟。夜来风雨声，夜来风雨声，花落知多少。花落知多少。原原样样显显示示文文字字标标签签示例示例居中对齐标签居中对齐标签居中对齐标签居中对齐标签春晓春晓春眠不觉晓，春眠不觉晓，处处闻啼鸟。处处闻啼鸟。夜来风雨声，夜来风雨声，花落知多少。花落知多少。居居中中对对齐齐标签示例标签示例引引文文标标签签示例示例阶段阶段2 2 字体属性字体属性标题文字标签标题文字标签标签用于设置网页中的标题文字，被设标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的格式显示在网页置的文字将以黑体或粗体的格式显示在网页中。中。标题文字标签的格式：标题文字标签的格式：hn align=hn align=参数参数标标题内容题内容。测试标题文字标签测试标题文字标签设定各级标题设定各级标题一级标题。一级标题。二级标题。二级标题。三级标题。三级标题。四级标题。四级标题。五级标题。五级标题。六级标题。六级标题。文字格式控制标签文字格式控制标签控制文字的格式控制文字的格式font face=size=6 color=green 我与父亲不相见已二年余了，我最不我与父亲不相见已二年余了，我最不能忘记的是他的背影。能忘记的是他的背影。font face=size=+3 color=red那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京我从北京到徐州，打算跟着父亲奔丧回家。到徐州，打算跟着父亲奔丧回家。font face=size=4 color=#ff00ff到徐州见着父亲，看见满院狼籍的东西，又想起祖母，不禁簌簌地流下眼泪。到徐州见着父亲，看见满院狼籍的东西，又想起祖母，不禁簌簌地流下眼泪。标标题题文文字字标签示例标签示例阶段阶段1 1 超链接的建立超链接的建立1.建立超链接建立超链接在在HTMLHTML文件中，建立超链接的标签为文件中，建立超链接的标签为和和。格式为：格式为：A HREF=超链接超链接名称名称。属性：属性：“herfherf”定义了这个链接所指的目标地址，目定义了这个链接所指的目标地址，目标地址是最重要的，一旦路径上出现差错，该标地址是最重要的，一旦路径上出现差错，该资源就无法访问。资源就无法访问。targertarger：该属性用于指定打开链接的目标窗口，：该属性用于指定打开链接的目标窗口，其默认方式是原窗口。只需要将该名字设为与其默认方式是原窗口。只需要将该名字设为与原窗口不同的名字，即可实现在新窗口中打开原窗口不同的名字，即可实现在新窗口中打开链接。其中的链接。其中的“窗口名称窗口名称”是给新窗口取的名是给新窗口取的名字。字。titletitle：该属性用于指定指向链接时所显示的：该属性用于指定指向链接时所显示的标题文字。标题文字。2.2.链接路径链接路径每一个文件都有自己的存放位置和路径，理解每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系一个文件到要链接的那个文件之间的路径关系是创建链接的根本。是创建链接的根本。链接可以分以下三种：链接可以分以下三种：（1 1）绝对路径如：）绝对路径如：（2 2）相对路径如：）相对路径如：web/web/index.htmlindex.html（3 3）同一页面中的链接，又称为书签。）同一页面中的链接，又称为书签。阶段阶段2 2 在同一个文件中建立链接在同一个文件中建立链接格式：格式：超级链接超级链接被链接到的地方：被链接到的地方：超链接名称超链接名称测试在同一个文件中建立链接测试在同一个文件中建立链接 唐诗欣赏唐诗欣赏唐诗欣赏唐诗欣赏王昌龄王昌龄出塞出塞闺怨闺怨长信怨长信怨 出塞出塞 秦时明月汉时关，秦时明月汉时关，万里长征人未还。万里长征人未还。但使龙城飞将在，但使龙城飞将在，不教胡马度阴山。不教胡马度阴山。在在 同同 一一 个个文文 件件 中中 建建立立 链链 接接 示示例例唐诗欣赏唐诗欣赏闺怨闺怨 闺中少妇不知愁，闺中少妇不知愁，春日凝妆上翠楼。春日凝妆上翠楼。忽见陌头杨柳色，忽见陌头杨柳色，悔教夫婿觅封侯。悔教夫婿觅封侯。唐诗欣赏唐诗欣赏长信怨长信怨 奉帚平明金殿开，奉帚平明金殿开，暂将团扇共徘徊。暂将团扇共徘徊。玉颜不及寒鸦色，玉颜不及寒鸦色，犹带昭阳日影来。犹带昭阳日影来。唐诗欣赏唐诗欣赏单单击击链链接接文文字字，即即链链接接到到相相应应的内容的内容阶段阶段3 3 建立不同文件的链接建立不同文件的链接当对不同的文件进行链接时，需要有现当对不同的文件进行链接时，需要有现个以上的个以上的HTMLHTML文件，并为它们命好名称，文件，并为它们命好名称，明确主链接文件和被链接文件。明确主链接文件和被链接文件。格式：格式：a 超链接名称超链接名称测试建立不同文件的链接（如图测试建立不同文件的链接（如图2-122-12、图、图2-132-13）：）：李白李白a 王昌龄王昌龄王昌龄：（约王昌龄：（约690 690 约约756756），字少伯，），字少伯，京兆长安（今陕西西安）人。早年贫贱，困于农耕，年近不惑，始中进京兆长安（今陕西西安）人。早年贫贱，困于农耕，年近不惑，始中进士。士。初任秘书省校书郎，又中博学宏辞，授汜水尉，因事贬岭南。开元末返初任秘书省校书郎，又中博学宏辞，授汜水尉，因事贬岭南。开元末返长安，长安，改授江宁丞。被谤谪龙标尉。安史乱起，为刺史闾丘所杀。其诗以七绝改授江宁丞。被谤谪龙标尉。安史乱起，为刺史闾丘所杀。其诗以七绝见长，见长，尤以登第之前赴西北边塞所作边塞诗最著，有尤以登第之前赴西北边塞所作边塞诗最著，有“诗家夫子王江宁诗家夫子王江宁”之誉。之誉。阶段阶段4 4 根路径根路径根路径目录地址同样可用于创建内部链接，但根路径目录地址同样可用于创建内部链接，但大多数情况下，不建议使用此种链接形式。大多数情况下，不建议使用此种链接形式。根路径目录地址的书写也很简单，首先以一个根路径目录地址的书写也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。最后书写文件名。如果根目录要写盘符，就在盘符后使用如果根目录要写盘符，就在盘符后使用,而不用而不用:这点与这点与DOSDOS的写法不同。的写法不同。如：如：/web/web/highight/shouey.htmlhighight/shouey.html d/web/highight/shouey.htmld/web/highight/shouey.html任务任务4 4 表格表格表格在网站应用中非常广泛表格在网站应用中非常广泛,可以方便可以方便灵活地排版灵活地排版,很多大型动态网站也都是很多大型动态网站也都是借助表格排版借助表格排版,表格可以把相互关联的表格可以把相互关联的信息元素集中定位信息元素集中定位,使浏览页面的人一使浏览页面的人一目了然。所以说要制作好网页目了然。所以说要制作好网页,就要学就要学好制作表格。好制作表格。阶段阶段1 1 定义表格的基本语法定义表格的基本语法在在htmlhtml文档中，表格是通过文档中，表格是通过,标签来完成的，如标签来完成的，如下表所示下表所示.标标 签签描描 述述.用于定用于定义义一个表格开始和一个表格开始和结结束束.定定义义表表头单头单元格。表格中的文字将以粗体元格。表格中的文字将以粗体显显示，在表格示，在表格中也可以不用此中也可以不用此标签标签，标签标签必必须须放在放在标签标签内内.定定义义一行一行标签标签，一，一组组行行标签标签内可以建立多内可以建立多组组由由或或标签标签所定所定义义的的单单元格元格.定定义单义单元格元格标签标签，一，一组组标签标签将将建立一个将将建立一个单单元格，元格，标签标签必必须须放在放在标签标签内内在一个最基本表格元素中，必须包含一组在一个最基本表格元素中，必须包含一组在一个最基本表格元素中，必须包含一组在一个最基本表格元素中，必须包含一组标签、标签、标签、标签、一组一组一组一组标签和一组标签和一组标签和一组标签和一组标签。测试定义表格如下：标签。测试定义表格如下：标签。测试定义表格如下：标签。测试定义表格如下：表格表格姓名姓名性别性别年龄年龄专业专业刘强刘强男男20计算机计算机定定 义义 表表格示例格示例阶段阶段2 2 表格标签的属性表格标签的属性属性描述属性描述widthwidth表格的宽度表格的宽度heightheight表格的高度表格的高度alignalign表格在页面的水平摆放位置表格在页面的水平摆放位置backgroundbackground表格的背景图片表格的背景图片bgcolorbgcolor表格的背景颜色表格的背景颜色borderborder表格边框的宽度（以像素为单位）表格边框的宽度（以像素为单位）bordercolorbordercolor表格边框颜色表格边框颜色bordercolorlightbordercolorlight表格边框明亮部分的颜色表格边框明亮部分的颜色bordercolordarkbordercolordark表格边框昏暗部分的颜色表格边框昏暗部分的颜色cellspacingcellspacing单元格之间的间距单元格之间的间距cellpaddingcellpadding单元格内容与单元格边界之间的空白距离单元格内容与单元格边界之间的空白距离的大小的大小1.1.设置表格边框的尺寸设置表格边框的尺寸borderbordertable border=”BorderBorder属性的参数是数字，表示表格边框宽度所占的像素点数。属性的参数是数字，表示表格边框宽度所占的像素点数。2.2.表格的边框显示状态表格的边框显示状态 frameframe表格的边框分别有上边框、下边框、左边框、右边框。这四个边表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态。框都可以设置为显示或隐藏状态。语法格式：语法格式：table frame=表表格格边边框框的的显显示示状状态态实实例例表格边框显示状态表格边框显示状态frame的值的设定的值的设定:boxbox显示整个表格边框显示整个表格边框voidvoid不显示表格边框不显示表格边框hsideshsides只显示表格的上下边框只显示表格的上下边框vsidesvsides只显示表格的左右边框只显示表格的左右边框aboveabove只显示表格的上边框只显示表格的上边框belowbelow只显示表格的下边框只显示表格的下边框lhslhs只显示表格的左边框只显示表格的左边框rhsrhs只显示表格的右边框只显示表格的右边框本章小结本章小结 本章主要向同学们介绍了本章主要向同学们介绍了HTML的基础的基础知识。在学习完本章内容后，同学们可知识。在学习完本章内容后，同学们可以进行简单的文字页面制作，同时可以以进行简单的文字页面制作，同时可以为为HTML文件建立超链接，并且可以利文件建立超链接，并且可以利用表格对网页进行排版。用表格对网页进行排版。