（中职）Web前端设计基础 项目一电子课件

1、YCF正版可修改PPT（中职）Web前端设计基础 项目一电子课件HTML文档结构项目一授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练一 项目描述本项目学习要点HTML 5文件的基本结构；HTML 5基本标签；Sublime编辑器的使用；HTML5语法的变化；Chrome浏览器中的开发者工具。二 知识准备网页文件是使用标记语言书写的，这种语言称为超文本标记语言（Hyper Text Markup Language，HTML），它是制作页面的标准语言。HTML是一种描述语言，而不是一种编程语言，主要用于描述超文本中的内容和结

2、构。标记语言从诞生至今，经历了20多年，发展过程中也有很多曲折，经历的版本从1.0到5.0有10个版本。内容标签符一般都是成对出现，有一个开始符号和一个结束符号，结束符号只是在开头符号的前面加一个斜杠“/”。“”和“/”必须在英文状态下输入。例如：、二 知识准备HTML 5文件的基本结构；HTML 5基本标签；Sublime编辑器的使用；HTML5语法的变化；Chrome浏览器中的开发者工具。HTML 5文件的基本结构HTML5基本语法完整的HTML文件包括标题、段落、列表、表格、回执的图形以及各种嵌入的对象，这些对象统称为HTML元素。一个HTML 5文档中，必须包含标签，并且放在一个HTM

3、L 5文档中的开始和结束位置。之间通常包含两个部分，分别为和，head标签包含html头部信息，例如文档标题、样式定义等。body包含文档主体部分，即网页内容。注意：html标签不区分大小写HTML 5文件的基本结构HTML5基本结构网页标题网页内容文档声明HTML文档的开始标签HTML的头部信息开始标签HTML的头部信息结束标签HTML的文档主体开始标签HTML的文档主体结束标签HTML文档的结束标签HTML 5文件的基本结构HTML5基本结构该声明告知浏览器文档所使用的HTML规范。此声明不属于HTML标签，它是一条指令，告诉浏览器编写页面所用的标签的版本。文档声明HTML文档的开始标签H

4、TML的头部信息开始标签HTML的头部信息结束标签HTML的文档主体开始标签HTML的文档主体结束标签HTML文档的结束标签说明本页面是用HTML语言编写的，让浏览器能够准确无误地解释和显示头部信息不显示在网页中，此标签内可以包含一些其他标签，用于说明文件标题和整个文件的一些公用属性。可以通过标签定义CSS样式表，通过标签定义Javascript脚本文件包含HTML页面的实际内容，显示在浏览器窗口的客户区中。例如，在页面中，文字、图像、动画、超链接以及其他HTML相关的内容都是定义在body标签里面的HTML 5基本标签1.文档类型说明HTML 5中Web页面的文档类型说明（DOCTYPE）被

5、极大地简化了，简单到15个字符就可以了，代码如下：HTML 5基本标签2.HTML标签HTML标签以开头，以结尾，文档的所有内容写在开头和结尾的中间部分。标签的作用相当于设计者在告诉浏览器，整个网页是从这里开始的，然后到结束。语法格式如下：HTML 5基本标签3.head标签head标签用于说明文档头部的相关信息，一般包括标题信息、元信息、定义CSS样式和脚本代码等。HTML的头部信息以开始，以结束。语法格式如下：元素的作用范围是整篇文档，定义在HTML语言头部的内容往往不会在网页上直接显示。HTML 5基本标签3.head标签在头标签与之间还可以插入标题标签title、元信息标签meta、l

6、ink标签、style标签、script标签、base标签。（1）标签中的标签HTML页面的标题一般是用来说明页面用途的，它显示在浏览器的标题栏中，在HTML文档中，标题信息设置在与之间。标题标签以开始，以结束。语法格式如下：HTML 5基本标签3.head标签（2）标签中的标签标签是标签内的一个辅助性标签。标签提供的信息不显示在页面中，一般用来定义页面的关键字、页面的描述等，以方便搜索引擎来搜索到页面的信息。字符集charset属性在HTML5中，有一个新的charset属性，它使字符集的定义更加容易。例如：HTML 5基本标签3.head标签（2）标签中的标签页面描述meta descri

7、ption元标签是一种HTML元标签，用来简略描述网页的主要内容，是通常被搜索引擎用在搜索结果页上展示给最终用户看的一段文字。页面描述在网页中并不显示出来，页面描述的使用格式如下：HTML 5基本标签3.head标签（2）标签中的标签页面跳转使用标签可以使网页在经过一定时间后自动刷新，这可通过将http-equiv属性值设置为refresh来实现。content属性值可以设置为更新时间。在浏览页面时经常会看到一些欢迎信息的页面，在经过一段时间后，这些页面会自动转到其他页面，这就是网页的跳转。页面定时跳转的语法格式如下：例如：HTML 5基本标签3.head标签（2）标签中的标签搜素引擎的关键词

8、Keywords关键词对搜素引擎的排名算法起到一定的作用，也是进行网页优化的基础。使用格式如下：不同的关键词之间使用英文输入状态下的逗号隔开。例如，定义针对搜素引擎的关键词，代码如下：HTML 5基本标签3.head标签（3）标签中的标签标签用于外部文件的链接，一般用于链接外部CSS样式表文件和JS文件。语法格式：其中，rel指定链接到样式表，其值为stylesheet；type表示样式表类型为CSS样式表；href指定CSS样式表所在的位置，此处表示当前路径下名称为theme.css的文件。这里使用的是相对路径，如果HTML文档与CSS样式表没有在同一路径下，则需要指定样式表的绝对路径或引用

9、位置。HTML 5基本标签3.head标签【例1-1】创建一个link链接外部CSS文件的实例，代码如下所示（示例文件1-1.html）链接外部CSS文件img标签在网页中插入一个图片（此图片文件在与1-1.html 文件同级的images文件夹中）imgwidth: 200px;height: 200px;border: 5px solid #f00;新建CSS文件夹（此文件夹与1-1.html文件在同一目录中），在CSS文件夹中创建style.css文件，代码如下：HTML 5基本标签3.head标签【例1-1】创建一个link链接外部CSS文件的实例，（示例文件1-1.html）链接外部

10、CSS文件在chrome浏览器中预览HTML 5基本标签3.head标签（4）标签中的标签 标签用于定义客户端页面脚本。常用的脚本有JavaScript ，常见的应用有时图像操作、表单验证以及动态内容更新。语法如下： alert(Web前端设计); HTML 5基本标签3.head标签（5）标签中的标签标签用于定义元素的CSS样式。在HTML中插入CSS样式表的另外一种方法是内嵌样式，内嵌样式就是将CSS代码添加到与之间的和标签之间。这种写法虽然没有完全实现页面内容和样式控制代码的完全分离，但可以设置一些比较简单的样式，并统一页面样式。其格式如下： HTML 5基本标签3.head标签【例1-

11、2】将例1-1用内嵌样式表示，代码如右（示例文件1-2.html）内嵌样式的CSS代码示例imgwidth: 200px;height: 200px;border: 5px solid #f00;HTML 5基本标签4.body标签网页所要显示的内容都要放在body标签内，他是HTML文件的重点，标签的作用就是定义了网页主题内容的开始和结束。然而它并不仅仅是一个形式上的标签，它本身也可以控制网页的背景颜色或背景图片。HTML 5基本标签5.页面注释标签注释是在HTML代码中插入描述性的文本，用来解释该代码或提示其他信息。注释也只出现在代码中，浏览器对注释代码不进行解释，在浏览器页面中不显示。在

12、编写HTML代码时，我们经常要在一些关键代码旁做一下注释，这样做方便理解、方便查找或方便其他程序员了解你的代码，而且可以方便以后编写者对自己的代码进行修改。语法格式如下：Sublime编辑器的使用1.Sublime Text编辑器的安装用户可以自己从网站（/）上下载Sublime Text 3的中文版安装程序。双击Sublime Text 3的安装程序，单击“立即安装”按钮，打开如图所示对话框。修改安装路径，然后单击“下一步”按钮Sublime编辑器的使用2.Sublime Text 3下Emmet的使用技巧（1）初始化文档HTML文档需要包含一些固定的标签，比如、等，在好多的编辑器中需要一个

13、个输入，而使用Emmet插件只需要1秒钟就可以输入这些标签。输入“!”或“html:5”，然后按Tab键或Ctrl+E快捷键，即可出现如图所示的代码。Sublime编辑器的使用2.Sublime Text 3下Emmet的使用技巧（2）添加ID在元素名称和ID之间输入“#”，Emmet会自动补全代码。如输入“p#ok”后按Tab键，结果如图所示。Sublime编辑器的使用2.Sublime Text 3下Emmet的使用技巧（3）添加类在输入时类名称之前加“.”，Emmet会自动补全代码。如输入“p.text#ok”后按Tab键，结果如图所示。Sublime编辑器的使用2.Sublime Te

14、xt 3下Emmet的使用技巧（4）添加文本和属性在输入HTML元素的内容时，将内容用“”括起来。如输入“h1北京理工大学出版社”后按Tab键，结果如图所示。Sublime编辑器的使用2.Sublime Text 3下Emmet的使用技巧（4）添加文本和属性对于HTML元素的属性则用“”括起来。如输入“ahref=#”后按Tab键，结果如图所示。Sublime编辑器的使用2.Sublime Text 3下Emmet的使用技巧（5）标签的嵌套+：同级标签符号，如输入“h1+h2”后按Tab键，结果如图所示。：子元素符号，表示嵌套的元素，如输入“pspan”后按Tab键，结果如图所示。Sublim

15、e编辑器的使用2.Sublime Text 3下Emmet的使用技巧（5）标签的嵌套：可以使该符号前的标签提升一行，如输入“pspanp”后按Tab键，结果如图所示。Sublime编辑器的使用2.Sublime Text 3下Emmet的使用技巧（6）代码组合Emmet使用标签的嵌套和括号可以快速生成代码组合。如输入“（.texth1）+（.maph2）”后按Tab键，结果如图所示。Sublime编辑器的使用2.Sublime Text 3下Emmet的使用技巧（7）隐式标签使用Emmet进行快速输入时，如只输入“.text”，Emmet会根据父标签进行判定从而得到不同的代码。下面是所有的隐式

16、标签名称。li：用于ul和ol中。tr：用于table、tbody、thead和tfoot中。td：用于tr中。option：用于select和optgroup中。如图所示，在不同的标签下，同样输入“.text”却得到不同的结果。Sublime编辑器的使用2.Sublime Text 3下Emmet的使用技巧（7）隐式标签Sublime编辑器的使用2.Sublime Text 3下Emmet的使用技巧（8）定义多个元素Emmet可以使用“*”符号来定义多个元素，如输入“ulli*3”后按Tab键，结果如图所示。Sublime编辑器的使用2.Sublime Text 3下Emmet的使用技巧（9

17、）定义多个带属性的元素Emmet使用“$”符号来指定编号，如输入“ulli.text$*3”后按Tab键，将会生成如图所示的代码。Sublime编辑器的使用2.Sublime Text 3下Emmet的使用技巧（9）定义多个带属性的元素Emmet可以使用“$-”符号来指定反向编号，如输入“ulli.text$-*3”后按Tab键，将会生成如图所示的代码。HTML 5语法的变化2.Sublime Text 3下Emmet的使用技巧为了兼容各个不统一的页面代码，HTML 5的设计在语法上做了以下变化。1.标签不再区分大小写。2.允许属性值不使用引号。3.允许部分属性值的属性省略。Chrome浏览器

18、的开发者工具1.如何打开开发者工具（1）直接在页面上点击右键，然后选择审查元素或者检查。（2）单击浏览器“自定义及控制”按钮，弹出下拉菜单，选择“更多工具”下的“开发者工具”。（3）直接按F12键。（4）使用快捷键（Ctrl+Shift+I）。Chrome浏览器的开发者工具2.开发者工具简介Chrome开发者工具中，调试时使用最多的三个功能页面是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有网络（Network）等，下面主要介绍元素功能页面。元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。Chrome浏览器的开

19、发者工具（1）查看元素的代码和属性点击左上角的箭头图标（或按Ctrl+Shift+C组合键）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。定位到元素的源代码之后，可以从左侧查看元素的HTML代码，从右侧查看元素的CSS属性，如图所示。2.开发者工具简介Chrome浏览器的开发者工具（2）修改元素的代码和属性单击元素并右击，可以看到chrome提供的可对元素进行的操作，包括编辑元素代码（Edit as HTML）、修改属性（Add attribute、Edit attribute）等，如图所示。选择“Edit a

20、s HTML”选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。当然，这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，所以这个功能是用来调试页面效果的。2.开发者工具简介Chrome浏览器的开发者工具（2）修改元素的代码和属性在元素的Styles页面，可以对元素的CSS属性进行修改，甚至删除原有、添加新属性。不过，这些修改仅对当前浏览器的页面展示生效，不会修改CSS源代码，如图所示，添加了图片的透明度（opacity）、改变图片边框的颜色。这个功能可以进行CSS属性的修改，来调整和完善元素的渲染效果。2.开发者工具简介三 项目实施标准的HTML 5网页；简单的HTML 5网页

21、。标准的HTML 5网页启动Sublime程序，执行“文件”菜单中的“新建”命令或使用Ctrl + N组合键新建一个文件，执行“文件”菜单中的“保存”命令或使用Ctrl + S组合键保存文件名称为1-3.html。第一步标准的HTML 5网页输入“!”，按【TAB】键就会按照HTML 5规范自动创建如下代码。第二步Document标准的HTML 5网页修改网页标题、元信息和注释内容，并在网页的主体中添加内容，代码如下：第三步Web前端设计Web前端设计特点Web前端设计，紧跟时代步伐Web前端设计，源自企业需求Web前端设计项目驱动教学，所需即所学，所学即所用。标准的HTML 5网页再次执行“

22、文件”菜单中的“保存”命令或使用快捷键Ctrl + S保存文件。第四步第五步在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。标准的HTML 5网页用Sublime编辑器创建一个文件，保存名称为1-4.html。第一步第二步输入“!”，按【TAB】键就会按照HTML 5规范自动创建代码，修改网页标题，输入主体内容，代码如下：标准的HTML 5网页第二步简单的HTML 5网页悯农二首唐代：李绅春种一粒粟，秋收万颗子。四海无闲田，农夫犹饿死。锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦？标准的HTML 5网页第三步保存网页，在chrome浏览器预览，效果如图所示。四 项目

23、拓展通过项目实施，能够制作出简单的HTML 5网页，但对于文字的大小、颜色和图片不能控制，此项目利用简单CSS代码对上例中文本和图片进行格式设置，制作如图所示的网页。四 项目拓展首先要对左边的文字进行大小、颜色的设置，右边图片大小的设置，然后让右边的图片和左边的文字并排显示在一行。第一步 分析需求第二步用Sublime编辑器创建一个文件，保存名称为1-5.html，输入“！”按Tab健，修改title标签内容为“简单的HTML 5+CSS网页”。四 项目拓展第二步简单的HTML 5+CSS网页四 项目拓展第三步简单的HTML 5+CSS网页h2color:red;h4font-size: 9p

24、x;color:gray;pfont-size: 14px;color:green;imgwidth:170px;div,imgfloat:left;在body中创建内容，在标签之中用标签添加内嵌样式的CSS代码。内嵌样式的CSS代码，其中的h2、h4、p、img和div都是CSS 3常用选择器的一种标签选择器。例如p选择器，就是声明页面中所有标签的样式风格。四 项目拓展第三步简单的HTML 5+CSS网页h2color:red;h4font-size: 9px;color:gray;pfont-size: 14px;color:green;imgwidth:170px;div,imgfloa

25、t:left;h2选择器声明第16行“悯农二首” 的字体颜色为红色h4选择器声明第17行“唐代：李绅” 的字体大小为9px（px是像素单位），颜色为灰色p选择器声明第18-21行和21-25行里的内容的字体大小为14px，颜色为绿色img选择器声明第27行中图片的宽度为170px声明了div和img选择器向左浮动四 项目拓展第三步悯农二首唐代：李绅春种一粒粟，秋收万颗子。四海无闲田，农夫犹饿死。锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦？五 项目小结本项目通过项目实施和项目拓展制作了符合W3C标准的HTML 5网页、简单的HTML 5网页和利用CSS代码对文本及图片进行格式设置三个案例，学习了HTML 5文件的基本结构、基本标签和Sublime编辑器的使用等内容，掌握了标签、标签、标签、标签、标签、编辑器快速输入以及Chrome浏览器开发者工具使用技巧。五 项目小结HTML 5基本结构如图所示。五 项目小结本项目主要知识点总结如表所示。标签内部标签说明整个网页是从这里开始，然后到结束head标签代表页面的“头”，定义一些特殊内容，这些内容都是在浏览器不可见的定义网页的标题定