版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
任务3图像和超链接第二单元HTML5语言基础锚点标签图像标签绝对路径和相对路径超链接标签掌握学习目标网页中常用的图片格式了解:学习目标实战演练——制作网页技术介绍页面任务目标强化训练——制作“文章故事网”页面任务目标1.图像标签语法格式：<imgsrc="url"alt="some_text">图像标签的属性：属性描述属性描述src规定显示图像的URL。alt图像不能显示时的替换文本。align规定如何根据周围的文本来排列图像。（不推荐使用）border定义图像周围的边框。（不推荐使用）height定义图像的高度。width设置图像的宽度。hspace定义图像左侧和右侧的空白。（不推荐使用）vspace定义图像顶部和底部的空白。（不推荐使用）title光标停留在图像上时，显示提示文字。知识准备示例：在网页中插入图像<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>无标题文档</title></head><body><center><imgsrc="images/1.gif"alt="女孩"title="女孩"><imgsrc="images/2.gif"width="240"height="320"><imgsrc="images/3.gif"border="1"><imgsrc="images/4.gif"></center></body></html>知识准备2.绝对路径和相对路径绝对路径：指文件或目录在硬盘上真正的路径。比如，图像top.jpg存放在c盘的images文件夹下，那么该图像的绝对路径表示方法为c:\images\top.jpg。相对路径：相对于当前文件的路径。网页中的图片、超链接等一般都使用相对路径来表示。知识准备2.绝对路径和相对路径相对路径常见的表示方法Html文档的位置图像的位置相对路径情形说明c:\democ:\demo<imgsrc="top.jpg">图文均在同一目录c:\democ:\demo\images<imgsrc="images/top.jpg">图在网页下一层目录c:\democ:\<imgsrc="../top.jpg">图在网页上一层c:\democ:\images<imgsrc="../images/top.jpg">图文在同一层但不同目录提示：“../”指回到上一层目录，“images/”指进入下一层目录images，“../images/”指回到上一层目录，然后再进入目录images中。知识准备示例：绝对路径和相对路径<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>无标题文档</title></head><body><center><imgsrc="../images/1.gif"title="图片1"alt="图片1"><imgsrc="2.gif"title="图片2"alt="图片2"width="240"height="320"border="1"><imgsrc="../3.gif"title="图片3"alt="图片3"><imgsrc="images/4.gif"alt="图片4"title="图片4"></center></body></html>知识准备3.超链接标签语法格式：<ahref="url"target="目标窗口的弹出方式">链接文本</a>href属性：描述链接的地址target属性：描述链接页面的打开方式_self：默认值，表示在原网页窗口中打开链接_blank：在新窗口中打开链接知识准备示例：在网页中插入超链接<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>无标题文档</title></head><body><ahref=""target="_self">百度主页，原窗口打开</a><br><ahref=""target="_blank">新浪主页，新窗口打开</a><br><ahref=""title="百度"target="_blank"><imgsrc="images/baidu.png"width="270"height="129"></a></body></html>提示：href属性的内容可以是站点内网页文件的相对路径，也可以是网页的网址等。知识准备4.锚点标签锚点链接：可以帮助浏览者快速定位网页内的目标内容，实现网页内的链接跳转。创建方法：第一步：使用<aname="锚点名称"></a>创建目标位置的锚点名称第二步：使用<ahref="#锚点名称">链接文本</a>创建锚点链接这样，鼠标点击链接文本，网页窗口即可定位到目标位置。知识准备示例：在网页中插入锚点链接（因篇幅有限，仅列出部分代码和效果截图）…………<p><aname="menu"></a><ahref="#item1">节气谣谚诗歌</a><br><ahref="#item2">节气分类</a><br><ahref="#item3">节气的安排及含义</a><br><ahref="#item4">二十四番花信风</a><br><ahref="#item5">各地有关节气的谚语</a><br></p>…………<aname="item1">节气谣谚诗歌</a>…………<palign="right"><ahref="#menu">回到菜单</a></p>创建锚点链接创建目标位置的锚点名称创建目标位置的锚点名称创建锚点链接知识准备案例描述：设计并制作网页技术介绍页面，单击index.html页面中的图片时，跳转显示page1.html页面，网页效果如下。制作网页技术介绍页面index.htmlpage1.htmlpage2.html实战演练案例描述：设计并制作“文章故事网”页面，网页效果如下。制作“文章故事网”页面强化训练01图像标签02绝对路径和相对路径03超链接标签04锚点标签任务小结设计并制作旅游景点网页面，效果如图所示。课后实训任务4结构标签和分组标签第三单元HTML5新增标签及属性结构标签分组标签掌握学习目标HTML5网页结构的定义方法了解:学习目标任务目标实战演练——制作唐诗欣赏页面强化训练——制作“温州地标性建筑”网页知识准备1.结构标签<header>标签：定义文档或者文档一部分区域的页眉，它可以作为介绍内容或者导航链接栏的容器。在一个文档中，可以定义多个<header>标签，也可以为每一个独立内容块添加<header>标签。知识准备示例：<header>标签的使用<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title><header>标签的使用</title></head><body>
<header><h2align="center">我院通过教育部第二批国家现代学徒制试点单位评审认定</h2><palign="center">发表时间：2017-09-09 来源：信息工程系
编辑：党院办
浏览量：483次</p><hr/>
</header></body></html>知识准备1.结构标签<nav>标签：定义导航链接的部分。并不是所有的HTML文档都要使用到<nav>元素。<nav>元素只是作为标注一个导航链接的区域。在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。知识准备示例：<nav>标签的使用<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title><nav>标签的使用</title></head><body>
<nav><ul><li><ahref="#">学院首页</a></li><li><ahref="#">学院概况</a></li><li><ahref="#">新闻中心</a></li><li><ahref="#">招生就业</a></li></ul>
</nav></body></html>知识准备1.结构标签<article>标签：用于定义独立的内容，标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。其内可以用多个<section>进行内容划分。<article>标签的潜在来源：论坛帖子、博客文章、新闻故事、评论等。知识准备示例：<article>标签的使用<article></article><header></header><section></section><article></article><header></header><section></section><section></section><header></header><section></section><section></section><header></header><article></article><header></header><section></section>知识准备1.结构标签<aside>标签：定义<article>标签外的内容。aside的内容应该与附近的内容相关，用于定义页面或者文章的附属信息部分，如页面内容相关的引用、侧边栏、广告等有别于主要内容的部分。知识准备示例：<aside>标签的使用<article></article><header></header><section></section><aside></aside><article></article><header></header><section></section><section></section><aside></aside><article></article><header></header><section></section><aside></aside><aside></aside>知识准备1.结构标签<section>标签：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。如果article标签、aside标签、nav标签更符合使用条件，那不要使用section标签。没有标题的内容区块不要使用section定义。知识准备1.结构标签<footer>标签：定义文档或者文档的一部分区域的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个<footer>元素。知识准备示例：<footer>标签的使用<article></article><footer></footer><article></article><footer></footer>知识准备2.分组标签<figure>标签：规定独立的流内容（图像、图表、照片、代码等）。<figcaption>标签：定义figure元素的标题（caption）。<figcaption>标签应该被置于figure元素的第一个或最后一个子元素的位置。知识准备示例：<figure>标签和<figcaption>标签的使用<body><p>浙江安防职业技术学院是经教育部批准建立的公办全日制高等职业技术学院，由温州市人民政府联
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026中煤财务公司招聘2人笔试备考题库及答案解析
- 2026四川成都市武侯区望江路社区卫生服务中心招聘1人考试备考题库及答案解析
- 核电运行研究（上海）有限公司2026届春季校园招聘笔试模拟试题及答案解析
- 2026年安徽省阜阳市高职单招综合素质考试题库有答案详细解析
- 2026年山东省青岛市高职单招职业技能考试题库有答案详细解析
- 2026年衢州市衢江区国有企业急需紧缺型人才招聘2人笔试备考题库及答案解析
- 2026德州禹城德立德透析中心招聘笔试备考题库及答案解析
- 2026年永州职业技术学院单招综合素质考试题库有答案详细解析
- 2026四川雅安市宝兴县国有企业工作委员会选聘县属国有企业高级管理人员7人考试备考题库及答案解析
- 2026上海虹口区卫健系统招聘38人笔试模拟试题及答案解析
- 三国志11全人物能力数值表
- 脊髓灰质炎后遗症的康复
- 征信知识走进中学课堂
- 2023年03月浙江宁波市福利彩票发行中心公开招聘工作人员1人笔试参考题库答案解析
- 物业管理案例分析.课件
- GB/T 4025-2010人机界面标志标识的基本和安全规则指示器和操作器件的编码规则
- GB/T 24353-2009风险管理原则与实施指南
- GB/T 10665-2004碳化钙(电石)
- 工会经费使用管理常见问题解答
- FZ/T 73038-2010涂胶尼龙手套
- 制药工程导论课件
评论
0/150
提交评论