前端设计与开发 课件 模块2 HTML5语言基础_第1页
前端设计与开发 课件 模块2 HTML5语言基础_第2页
前端设计与开发 课件 模块2 HTML5语言基础_第3页
前端设计与开发 课件 模块2 HTML5语言基础_第4页
前端设计与开发 课件 模块2 HTML5语言基础_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

模块2

HTML5语言基础制作“校史馆参观需知”网页任务2.1任务描述校史馆是连接过去与未来的桥梁，是传承红色基因、弘扬爱国主义精神的圣地，是培育时代新人、造就社会主义建设者和接班人的摇篮。通过制作“校史馆参观需知”网页，引导青年学子树立正确的历史观、民族观、国家观、文化观，坚定理想信念，不忘初心，牢记使命，为实现中华民族伟大复兴的中国梦贡献青春力量。任务分析首先要对HTML5文档的格式有所了解，然后掌握基本标签和序列标签，最后根据相关知识制作“校史馆参观须知”网页。相关知识2.1.1HTML5文档格式HTML5文件包括标题、段落、列表、表格、图像以及各种嵌入对象，其基本文档格式1.<!DOCTYPEhtml><!DOCTYPEhtml>标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范。<!DOCTYPEhtml>是HTML5的文档声明。只有在开头使用<!DOCTYPE>声明，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。使用HTML5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面。2.<html></html>标签<html>标签位于<!DOCTYPE>标签之后，也被称为根标签，用于告知浏览器其自身是一个HTML文档，<html>标签标志着HTML文档的开始，</html>标签标志着HTML文档的结束，在<html></html>标签之间的是文档的头部和主体内容。3.<head></head>标签<head>标签用于定义HTML文档的头部信息，也被称为头部标签，紧跟在<html>标签之后，主要用来封装其他位于文档头部的标签，例如<title>，<meta>，<link>及<style>等，用来描述文档的标题、作者、以及与其他文档的关系等。一个HTML文档只能含有一对<head></head>标签，绝大多数文档头部包含的数据都不会真正作用为内容显示在页面中。主要用来帮助浏览器或搜索引擎来解析网页。4.<body></body>标签<body>标签用于定义HTML文档所要显示的内容，也被称为主体标签。浏览器中现实的所有文本、图像、音频和视频等信息都必须位于<body></body>标签内，<body>标签中的信息才是最终展示给用户看的。一个HTML文档只能含有一对<body>标签，且<body>标签必须在<html>标签内，位于<head>头部标签之后，与<head>是并列关系。1.标题标签HTML中的基本标签构成了网页的基础结构，并且每个标签都有其特定的用途。下面介绍一些常用的基本标签HTML标题是提升内容结构、可读性和SEO的关键HTML标题的重要性HTML标题标签<h1>至<h6>代表六级标题，字号逐级减小，可用CSS自定义样式HTML标题等级与样式使用标题标签示例代码如下。HTML标题标签示例代码使用浏览器预览，其效果如图2-2所示。浏览器预览效果描述2.1.2基本标签2.段落标签HTML5中的段落标签与对齐HTML5中，段落由<p></p>标签定义，通过align属性可设置段落的对齐方式使用段落标签示例使用段落标签示例代码如下.效果3.换行标签HTML中的换行标签使用在HTML中通过使用<br>标签来实现换行，该标签的作用与普通文档里插入回车符的作用相同，都表示强制性换行。空标签与换行示例空标签不会成对出现，如<br/>和<img/>，它们是不闭合的。换行在代码中用\n表示4.水平线标签01水平线作用区分文本内容，提升阅读体验，标示主题变化，美化页面布局02水平线应用文章、报告分隔，网页内容复杂时使用，调整属性美化设计5.字体样式标签使用<strong>加粗</strong>突出关键词，用<em>斜体</em>强调语义重点，确保文本层次清晰，视觉效果突出标题样式应用01正文样式规范02段落中融入<mark>高亮</mark>以显示关键信息，使用<code>代码块</code>展示技术术语或代码，增强可读性加粗显示加粗文字用于强调，HTML中用<b></b>或<strong></strong>标签实现斜体作用区别正常文本，用于引用或强调，西文常见于书籍、报纸，表达特殊语境如讽刺、幽默字体样式标签应用斜体强调文本，HTML中<em>和<i>标签实现，示例代码展示诗歌《春晓》斜体效果在编写文档、构建网页或进行数据分析时，列表提供了一种清晰且结构化的方式来展示一系列的项目。无论是有序列表（其中每一项都按照特定的顺序排列并通常由数字引导），还是无序列表（其中的内容不分先后，只通过符号或图标来分隔条目），都是使信息条理化的关键元素。HTML支持有序列表、无序列表和自定义列表。2.1.3序列标签在编写文档、构建网页或进行数据分析时，列表提供了一种清晰且结构化的方式来展示一系列的项目。无论是有序列表（其中每一项都按照特定的顺序排列并通常由数字引导），还是无序列表（其中的内容不分先后，只通过符号或图标来分隔条目），都是使信息条理化的关键元素。HTML支持有序列表、无序列表和自定义列表。1.无序列表01无序列表以<ul>...</ul>包裹，用<li>标签定义列表项，常用于展示无顺序的项目无序列表基本语法02HTML代码示例，展示了一个包含四句古诗的无序列表无序列表示例代码03效果2.有序列表有序列表与普通列表的不同之处在于有序列表存在序号，类似于Word中的编号列表。在HTML中，使用<ol>和</ol>标签来分别标记有序列表的开始和结束，其基本语法如下：<ol><li>列表项</li><li>列表项</li>…</ol>3.自定义列表01自定义列表结构使用<dl><dt><dd>标签，<dl>定义列表，<dt>顶层项目，<dd>子项目详情02自定义列表示例HTML、CSS、JavaScript为示例，展示自定义列表排版效果任务规划在校史馆的数字化建设过程中，为了方便访客了解并遵守校史馆的参观规则，需要设计并制作一个“校史馆参观需知”网页。任务实施（1）打开开发工具VSCode，在本地磁盘中新建项目文件夹，并命名为school。（2）在VSCode中打开项目文件夹school，在该项目文件夹上右击，在弹出的快捷菜单中选择“新建文件”命令，在出现的文本框中输入文件的名称“visitingNotice.html”（开发中文件命名一般要做到见名知意），然后按Tab键或Enter键完成HTML文件的创建。（3）在<title></title>标签对和<body></body>标签对中分别添加网页标题和段落。（4）在<body></body>标签对中继续添加<ol></ol>标签对和参观须知内容（5）在<body></body>标签对中添加<ul></ul>标签对和其他相关内容。制作“家乡美食及制作流程展示”网页任务2.2任务描述在新时代的背景下，我们要以家乡美食为载体，传承和弘扬中华优秀传统文化，传播正能量，培养家国情怀。让我们在品尝美食的过程中，不忘初心，牢记使命，为实现中华民族伟大复兴的中国梦贡献力量。任务分析首先了解图像类型和路径分类，然后掌握图像标签、超链接标签及链接的分类，最后利用相关知识制作“家乡美食及制作流程展示”网页。相关知识2.2.1图像类型及图像标签网页常用GIF、JPEG等6种格式，GIF、JPEG因文件小、支持广最常用1.图像类型JPEG（JointPhotographicExpertsGroup）是一种常用的图像格式。它通过有损压缩算法将彩色和灰度图像的文件大小减小，方便存储和传输。JPEG图片格式PNG是无损压缩的网络图像格式，支持透明度，但某些浏览器可能需要插件PNG图像格式01GIF是Web常用的图像格式，擅长存储线条、图标，支持动态、透明和交织图像，压缩后最多支持256色GIF图像格式01BMP格式，常见于多媒体演示和视频输出，能展现16M色彩的丰富图像BMP图像格式02TIFF格式适用于高色彩图像，支持24个通道及多于4个通道的数据，常用于印刷和高质量输出TIFF图像格式03TGA格式，与TIFF一样，用于处理高质量色彩通道图形；PDD、PSD格式常用于存储包含通道的RGB图像TGA（Targa）042.图像标签图像在网页设计中的作用图像在网页设计中扮演关键角色，通过直观展示内容、吸引用户注意、增强视觉效果和引发情感共鸣，提升用户体验0102HTML中的图像标签<img>标签用于插入图像，属性包括src、alt、height、width、title、ismap和usemap，常用于设置图像路径和提供额外信息2.2.2路径分类1.绝对路径：从根目录开始，完整写出文件位置，适用于所有网站链接HTML文件路径类型2.相对路径：基于当前文件位置，相对指明所需文件位置，简化内部链接路径1.相对文件路径父子关系路径引用：上一级使用../，下一级使用/。如网页1引入bg2.jpg，写成src=“../bg2.jpg”；网页2引入bg1.jpg，写成src="img/bg1.jpg"父子关系路径引用同一文件夹下的文件是兄弟关系，可直接引用，如网页2.html引用bg2.jpg，src="bg2.jpg"兄弟关系路径引用相对路径是描述文件与当前位置的关系，用于指向其他文件或文件夹的路径相对路径基础概念绝对路径是文件在硬盘上的完全路径，包括盘符和正斜杠或反斜杠分隔的目录名2.绝对文件路径2.2.3链接标签超链接是HTML中用于连接网页的元素，它使用户能从一个页面跳转至另一个页面，实现网页间的导航超链接概述与作用01HTML5的<a>标签用于创建超链接，基本格式：<ahref=URL>链接内容</a>，点击内容可跳转至新页面或当前页面的特定位置HTML5超链接结构特性02默认浏览器中，未访问链接是蓝色加下划线，已访问过的链接是紫色加下划线，点击时显示为红色加下划线链接在浏览器中的显示效果03<a>标签的属性包括：href用于指定链接的URL，target决定浏览器如何打开链接，title提供额外信息，rel定义与目标的关系<a>标签的属性详解042.2.4链接的分类1.文本链接文本链接使用<a>标签，如：<ahref="">访问示例网站</a>，有四种状态：普通、鼠标滑过、单击和已访问2.图像链接将图像设置为链接的代码示例：`<ahref="URL"><imgsrc="example.jpg"alt="描述"></a>`3.锚点链接创建内部链接以在页面内跳转，如：<ahref="#section2">跳转到第二部分</a>，目标位置使用<aname="section2"></a>定义标签5.新窗口链接在HTML中，使用<a>标签的target属性可控制链接在新窗口或当前窗口打开，例如"_blank"表示在新窗口打开4.下载链接使用download属性可使链接变为文件下载，例如：<ahref="document.pdf"download>下载文档</a>任务规划通过网页的形式全面、生动、详尽地展示你家乡的代表性美食，展现你家乡独特的饮食文化，让更多的人了解和认识你的家乡。详细介绍每一道美食的历史渊源、食材选择、制作步骤、口感特点等，通过高品质的内容输出，提升家乡美食的知名度和影响力，吸引游客前来品尝，助力本地餐饮业和旅游业的发展。任务实施（1）打开开发工具VSCode，在本地磁盘中新建项目文件夹，并命名为hometown。（2）在VSCode中打开项目文件夹hometown，在该项目文件夹上右击，在弹出的快捷菜单中选择“新建文件”命令，在出现的文本框中输入文件的名称“foodList.html”（开发中文件命名一般要做到见名知意），然后按Tab键或Enter键完成HTML文件的创建。（3）单击foodList.html文件，进入代码编辑窗口。在<title></title>标签对中设置网页的标题为“家乡美食列表”。（4）在<body></body>标签对中添加一级标题“家乡美食列表”。（5）在<body></body>标签对中插入第一道美食的图片、名称、描述、详细制作流程的超链接，并设置好相关属性，同时将美食图片的源文件放入项目文件夹hometown下的img文件夹。（6）继续在<body></body>标签中插入水平线，以及第二道美食的图片、名称、描述、详细制作流程的超链接，并设置

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论