项目2 HTML常见标签_第1页
项目2 HTML常见标签_第2页
项目2 HTML常见标签_第3页
项目2 HTML常见标签_第4页
项目2 HTML常见标签_第5页
已阅读5页，还剩34页未读， 继续免费阅读

下载本文档

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

文档简介

任务2HTML常见标签Web前端开发项目式教程HTML5+CSS3制作图文网页任务2-1任务描述中秋节是中国的传统节日，通过创建一个介绍中秋节的网页，我们可以熟悉HTML常见标签的使用。学习目标知识目标掌握HTML的文本控制标签和属性掌握HTML的图像标签和属性技能目标学会创建HTML网页学会图文混排素质目标树立标准意识，遵守项目开发流程规范树立团队内沟通、协调、讲诚信的合作意识知识点文本控制标签01

图像标签02制作图文网页任务2-1一、

文本控制标签编写网页代码的第一步就是使用HTML5标签搭建网页结构。下面我们将分类介绍HTML5的常用标签。<h1>至<h6>用来定义六个级别的章节标题。<h1>是一级标题，字体最大；<h6>是六级标题，字体最小。标题标签一、

文本控制标签段落标签主要有<p>、<br/>和<hr/>3种。<p>标签：表示文本的一个段落。在浏览器中显示时会自动在段落前后创建一些空白。<br/>标签：在文本中产生换行符（回车符），用于段落中的强制换行。<hr/>标签：被用来分隔HTML页面中的内容（或者定义一个变化），并显示为一条水平线段落标签一、

文本控制标签文本的格式化标签主要包括<b>、<i>、<em>、<strong>4种。<b>标签：显示加粗文本效果，表示相对于普通文本字体上的区别，不表示任何特殊的强调。<i>标签：显示斜体文本效果。<em>标签：把文本定义为强调的内容，通常显示为斜体。<strong>标签：把文本定义为语气更强的强调的内容。文本格式化标签一、

文本控制标签文本样式标签可以用于设置一些文字效果。例如字体、字号、颜色等，使网页中的样式更加丰富，语法格式如下。后面学完CSS样式后，此标签将会被替代。<font属性=”属性值”>文本内容</font>文本样式标签一、

文本控制标签二、

图像标签<img>标签用于向网页添加图片。网页中常见的图片格式有JPG、PNG和GIF。<img>标签常见属性有src和alt。二、

图像标签语法格式：<imgsrc="img/HTML5.jpg"alt="HTML5"width="300"height="200">1、src属性：指定图像的插入路径。路径可以是相对路径，也可以是绝对路径。一般以相对路径为主。2、alt属性：表示图像的替代文本。用于在图像无法显示或者用户禁用图像显示时代替图像显示在浏览器中的内容。3、相对路径和绝对路径二、

图像标签相对路径是指该文件所在路径与其他文件（或文件夹）所在路径的关系。相对路径使用“.”来表示上一级目录。如果链接到当前目录下，只需输入被链接对象的名称即可，如：HTML5.jpg。如果链接到下一级目录，只需输入该目录名，再输入对象名称即可，如：img/HTML5.jpg。网站内部的链接必须使用相对路径。任务

制作图文网页任务实现1、启动HBuilderX（1）打开HBuilder，默认Web项目HelloHBuilder中将index.html右键重命名为demo2-1.html。2、插入图片（2）将moon.png图片复制到HelloHBuilder项目中img文件夹下。右键默认项目，选择【打开文件所在目录】，就可以复制了。如图2.6所示。图2.6复制图片3、输入网页代码修改<title>和<body>中的内容，按下Ctrl+S快捷键，进行文件的保存。在浏览器中运行demo2-1.html（或者双击demo2-1.html文件）。4、

保存并浏览网页任务效果运行效果制作新闻列表任务2-2任务描述在门户网站中，新闻公告是不可或缺的组成部分，通过新闻列表可以使用户清晰地了解最新信息。通过创建新闻列表网页，让我们熟悉列表和超链接标签的使用。学习目标知识目标掌握HTML超链接标签的使用掌握HTML列表标签的使用技能目标能够根据需要设置各种超链接能够熟练创建列表网页素质目标树立标准意识，遵守项目开发流程规范知识点超链接标签01

列表标签02一、

超链接标签HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超级链接除了可链接文本外，也可链接各种媒体，如声音、图像、动画，通过它们我们可享受丰富多彩的多媒体世界。一、超链接标签＜a＞标签定义超链接，用于从一个页面跳转到另一个页面，有两个重要的属性：href和target。1、href属性用于指定超链接目标的URL，超链接的URL可能的值如下。·绝对URL：指向另一个站点（如href="")。·相对URL：指向站点内的某个文件（如href="index.htm")。·锚URL：指向页面中的锚（如href＝＂＃top＂）。·空链接URL：没有目标端点的链接（如href＝＂＃＂）。一、超链接标签2、target属性规定在何处打开链接文档。target的可能取值如表2-1所示。二、

列表标签列表分为有序列表、无序列表和定义列表有序列表是一种强调排列顺序的列表。使用<ol>标签定义，内部可以包括多个列表项。网页中常见的排行榜等都可以使用有序列表进行定义。有序列表二、

列表标签是一种部分排序的列表，各个列表之间没有顺序级别之分。列表项默认为黑色实心圆点。列表项用＜li＞定义。定义无序列表的基本语法如下。无序列表二、

列表标签当页面上每个列表项都需要标题和内容时，需要使用＜dl＞定义列表。它包含了3个标签，即dl、dt、dd。<dt>表示定义列表的标题，<dd>表示描述的列表项。具体语法格式如下。定义列表二、

列表标签任务

制作新闻列表任务实现1、启动HBuilderX（1）打开HBuilder，默认Web项目HelloHBuilder中将index.html右键重命名为demo2-2.html。2、输入网页代码修改<title>和<body>中的内容，按下Ctrl+S快捷键，进行文件的保存。在浏览器中运行demo2-2.html（或者双击demo2-

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

温馨提示

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

最新文档

评论

0/150

提交评论