《中职 网页设计与制作案例教程第2章 .pptx》由会员分享，可在线阅读，更多相关《中职 网页设计与制作案例教程第2章 .pptx（44页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、中职 网页设计与制作案例教程第2章 工信版第2章 HTML语言基础WEB32.1基础项目1：制作“走向远方”网页2.2知识库：HTML语言的概念和基本结构2.3基础项目2：制作“我的空间”网页2.4知识库：HTML标签分类及常见HTML标签2.5提高项目：制作“深海骑兵”网页2.6拓展项目：制作“菜鸟加油”网页目录WEB2.1基础项目1：制作“走向远方”网页4WEB2.1基础项目1：制作“走向远方”网页5（1）了解HTML语言的基本概念。（2）掌握HTML语言的基本结构，能够使用HTML语言编写简单网页。（3）认识style属性，能够使用style属性设置行内样式。知识技能目标WEB2.2知识
2、库：HTML语言的概念和基本结构6一个网页对应于一个HTML文件HTML文件以.html为扩展名WEB72.2.1HTML语言的概念构成网页文档的主要语言英文全称：Hyper Text Markup Language中文全称：超文本标记语言!文档类型整个文档文档头部文档元信息文档标题文档主体无标题文档文档基本结构标签介绍文档基本结构2.2.2HTML文档的基本结构为页面上的所有链接规定默认地址或目标定义文档与外部资源的关系，如链接样式表定义客户端脚本，如JavaScript为文档定义样式信息其它可用在head部分的标签2.2.2HTML文档的基本结构WEB2.3基础项目2：制作“我的空间”网页
3、10WEB2.3基础项目2：制作“我的空间”网页11（1）熟练掌握HTML的基本结构和常见标签的用法。（2）能够熟练使用行内样式表。（3）能够使用HTML语言编写简单网页。知识技能目标WEB2.4知识库：HTML标签分类及常见HTML标签12HTML语言的核心是标签2.4.1HTML标签分类单标签和标签对标签是成对出现的格式：内容样例：段落内容双标签单独使用的标签格式：样例：单标签提示：标签不分大小写，和表示的意思相同，推荐使用小写。2.4.1HTML标签分类块级元素、行级元素和行级块元素不可设置宽度、高度和上、下内、外边距（左、右方向的内、外边距设置有效）其宽度和高度由其内容自动填充与其他行
4、内元素共处一行例：a、span、i、lable行内元素（inline）可以设置宽度、高度、内边距和外边距独占一行不设置宽度和高度，则宽度默认为父级元素的宽度例：div、p、h1、h2hn、ol、ul、dl、li、form、table块元素（block）可以设置宽度、高度和内外边距可以与其他行内元素、内联元素共处一行例：input、img行内块元素（inline-block）2.4.1HTML标签分类块级元素、行级元素和行级块元素可以在行内样式或CSS样式中改变元素的display属性将三种元素进行转换。display:block；(将元素变为块元素)display:inline；(将元素变为行
5、内元素)display:inline-block；（将元素变为行内块元素）元素之间的转化16DIV标签2.4.2常见HTML标签ThisisaheaderThisisaparagraph.标签对定义HTML文档中的分区或节（division/section）。它可以把文档分割为独立的、不同的部分。代码网页效果17DIV标签2.4.2常见HTML标签NEWSWEBSITEsometext.sometext.sometext.Newsheadline1sometext.sometext.sometext.Newsheadline2sometext.sometext.sometext.标签对定义HT
6、ML文档中的分区或节（division/section）。它可以把文档分割为独立的、不同的部分。代码网页效果18标题标签2.4.2常见HTML标签这是一号标题这是二号标题这是三号标题这是四号标题这是五号标题这是六号标题标签对定义了最大的一号标题，标签对则定义了最小的六号标题。代码网页效果19段落与换行标签2.4.2常见HTML标签爱好：我喜欢散步爱好：我喜欢旅游HTML段落是通过标签对定义的。代码网页效果20段落与换行标签2.4.2常见HTML标签爱好：我喜欢散步爱好：我喜欢旅游要在不产生一个新段落的情况下达到换行效果，需要使用标签。代码网页效果21水平线标签2.4.2常见HTML标签操作内容
7、操作技巧水平线标签是一个单标签，作用是在HTML页面中创建一条水平线来分隔网页中的内容。代码网页效果22图像标签2.4.2常见HTML标签插入图像作为HTML实体标签存在，而背景图像则是CSS的修饰内容。代码网页效果替换文本属性。alt属性是必需的属性，它规定在图像无法显示时的替代文本。用户无法查看图像的原因可能有以下几种：网速太慢src属性中的错误浏览器禁用图像用户使用的是屏幕阅读器等altsrc指图像的宽度和高度，常用单位为px（像素）width和height2.4.2常见HTML标签图像标签标签主要包含以下几个属性：指存储图像的位置，包括路径和图像名称。2.4.2常见HTML标签图像标签
8、图像路径：绝对路径和相对路径绝对路径路径含含义图像flower.png在D盘myweb文件夹下images子文件夹里图像flower.png在域名为的服务器中的images文件夹里2.4.2常见HTML标签图像标签图像路径：绝对路径和相对路径网网页位置位置图像位置和名称像位置和名称相相对路径路径含含义d:mywebd:mywebflower.png图像与网页在同一目录d:mywebd:mywebimagesflower.png图像在网页下一层目录d:mywebd:flower.png图像在网页上一层目录d:mywebd:imagesflower.png图像与网页在同一层但不在同一目录26超链接
9、标签2.4.2常见HTML标签搜狐超链接可以使一个HTML文档与另一个文档相连接，即从一个网页跳转到另一个网页，或从一个网页的某部分跳转到其它部分。代码网页效果搜狐搜狐2.4.2常见HTML标签图像标签图像路径：绝对路径和相对路径网网页位置位置图像位置和名称像位置和名称相相对路径路径含含义d:mywebd:mywebflower.png图像与网页在同一目录d:mywebd:mywebimagesflower.png图像在网页下一层目录d:mywebd:flower.png图像在网页上一层目录d:mywebd:imagesflower.png图像与网页在同一层但不在同一目录链接目标的打开方式。t
10、argethref2.4.2常见HTML标签标签主要包含以下几个属性：是必需的属性，属性值为超链接的目标文件的路径。超链接的相对路径写法与图像的相对路径写法相似。超链接标签2.4.2常见HTML标签图像标签超链接相对路径应用样例超链接相对路径应用样例超链接标签网网页位置位置链接目接目标位置和名称位置和名称相相对路径路径含含义d:mywebd:mywebtest.htmlhref=test.html目标与网页在同一目录d:mywebd:myweblinks test.html href=links/test.html目标在网页下一层目录d:mywebd:test.htmlhref=./test.
11、html目标在网页上一层目录d:mywebd:aaa test.htmlhref=./aaa/test.html目标与网页在同一层但不在同一目录2.4.2常见HTML标签图像标签target可能的属性值及含义可能的属性值及含义超链接标签相相对路径路径含含义target=_blank保留当前窗口，在新窗口中打开链接的目标文件。target=_self在当前窗口打开链接的目标文件。target=_parent在父窗口中打开链接的目标文件。（主要用于框架网页）target=_top以整个浏览器作为窗口打开链接的目标文件。（突破页面框架的限制）为图像添加的超链接，点击图像进入其它页面。格式：图像超链接
12、文字超链接2.4.2常见HTML标签超链接类型为文字添加的超链接，点击文字进入其它页面。格式：链接文字超链接标签在同一页面上跳转的链接锚点超链接创建锚点超链接分两步：1目标位置命名锚点格式：目标位置2标题位置添加超链接格式：标题名为文字或图像添加指向电子邮件的超链接。格式：联系我电子邮件超链接将文本设为斜体，不具备强调作用2.4.2常见HTML标签常见的常见的HTML文本格式化标签有以下几种：文本格式化标签有以下几种：表示强调，默认将文本斜体显示。超链接标签表示语义强调，默认将文本加粗显示。文本格式化标签将文本加粗，不具备强调作用。无序列表标签，其中的列表项由标签定义2.4.2常见HTML标签
13、HTML列表标签分为列表标签分为：有序列表标签，其中的列表项由标签定义。定义列表标签，由项目及项目的注释组成，其中的项目由标签定义，每个项目的具体注释由标签定义。列表标签34列表标签2.4.2常见HTML标签咖啡茶牛奶咖啡茶牛奶咖啡黑色饮料茶棕色饮料牛奶白色饮料三种列表的用法及效果：代码网页效果表格的行标签，标记表格中一行的开始和结束。trtable2.4.2常见HTML标签简单的简单的HTML表格由以下标签对组成：表格由以下标签对组成：表格标签，标记表格的开始和结束表头标签，一般用于表格行或列的标题，默认加粗显示。th表格标签表格的单元格标签，标记表格中一个单元格的开始和结束。td36列表标
14、签2.4.2常见HTML标签日期考试科目星期一语文星期二数学简单的HTML表格样例：代码网页效果表格主体（正文）标签。用于组合HTML表格的主体内容。tbody标题标签用来定义表格标题caption标签必须紧随table标签之后。caption2.4.2常见HTML标签复杂表格可能用到的复杂表格可能用到的HTML标签对标签对用于对HTML表格中的表头内容进行分组thead表格标签用于对HTML表格中的表注（页脚）内容进行分组tfootl应该与和元素结合起来使用。l如果使用、以及，就必须三个都用。l出现次序：、提示38列表标签2.4.2常见HTML标签MonthSavingsSum$180Jan
15、uary$100复杂的HTML表格样例：代码网页效果39HTML5常用结构标签定义文档的页眉（介绍信息）。定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等。定义独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分而仍然是完整的。的潜在来源：论坛帖子报纸文章博客条目用户评论定义其所处内容之外的内容。的内容应该与附近的内容相关。的内容可用作文章的侧栏。标签2.4.2常见HTML标签40HTML5常用结构标签规定独立的流内容（图像、图表、照片、代码等等）。的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。定义的标题（caption），应该被置于的第一个或最后一个子元素的位置。定义导航链接的部分。定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。标签2.4.2常见HTML标签41HTML5常用结构标签黄浦江上的卢浦大桥代码网页效果2.4.2常见HTML标签HomePreviousNext代码网页效果WEB2.5提高项目：制作“深海骑兵”网页42WEB2.6拓展项目：制作“菜鸟加油”网页43WEB