《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 05.链接标签

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1认识超链接02链接标签03传统布局标签04结构语义化标签目录contents05锚点链接PART1认识超链接问题1：超链接的作用是什么？问题2：网页中超链接的应用场所，举例说明？超链接是指在一个网页或者文档中，通过可点击的文本、图片或其他对象，将用户引导到另一个网页或者文档的链接。它是互联网中最基本的连接方式之一。什么是超链接

用户可以在不同的网页之间进行跳转实现不同网页之间的互联互通PART2链接标签链接标签语法格式：<ahref=”跳转目标”

target=”目标窗口打开的方式”>

文本或图像</a>

href：指定链接目标的URL，即要跳转的页面URL。（必要属性）title：悬停文字，即鼠标放置上面的描述。target：告诉浏览器用什么方式打开目标页面，target属性如下：_self:在同一个页面中显示。（默认）_blank：在新的窗口中打开页面。链接标签的常用属性1.外部链接：如:<ahref=””>百度</a>2.内部链接:网站内部页面之间的相互链接，直接链接内部页面名称即可。如:<ahref=”index.html>首页</a>3.空链接：当没有确定链接目标时。如：<ahref=”#”>跳转</a>4.下载链接：如果herf里面地址是一个文件(.doc、.exe等）或者压缩包（.zip），会下载这个文件。如：<ahref=”helloWord.doc”>下载</a>5.网页中各网页元素（文本、图像、表格、音频、视频等）都可以添加超链接。如：<ahref=”><imgsrc=”kc.jpg”></a>6.锚点链接：点击链接，可以快速定位到页面中的某个位置链接的类型任务实践（1）输入文字：“友情链接：百度一下（外部链接）搜狐新浪（外部链接）”（2）输入文字“新闻：点击（内部链接，文件news.html）”（3）输入“空链接：空（插入空链接“#”）产品销售首页公司地址”（4）创建一个下载图片文件imgs.rar的链接（5）给百度图片（设置图片宽度为200px）,创建一个外部链接PART3传统布局标签div标签<div>标签用于定义HTML文档中的一个分隔区块或者一个区域部分，没有具体的含义，元素独占一行，经常与CSS一起使用，用来布局网页。span标签<span>标签用于对文档中的行内元素进行组合，也没有具体的含义，元素宽高是根据span内容的多少、大小来确定的。传统布局标签思考：P和div有什么区别？思考：P和div有什么区别？外观上p标签上下自带外边距，默认行距显示更高一些。运用中div是布局标签，里面可以放置任意标签；P则是段落标签，一般里面只放文字或者行内标签，用于文章分段。PART4结构语义化标签什么是结构语义化标签所谓语义化标签的意思就是使用含有具体意义的词语作为标签。

从网页的布局来说，一般会分成几个区域，如头部、地图、标题等等，在HTML5之前都是使用div、span添加不同的样式来区分。标签描述<header>定义一个文档的头部/网页头部<nav>定义导航链接<main>定义文档的主体部分/一个页面一个main<section>定义了文档的某个区域<article>定义了一个文章内容<aside>定义和主体相关的其他内容/侧边栏<figure>定义独立的网页内容，如：图像、表格、照片代码等<figcaption>用来为

<figure>元素定义标题<footer>定义了一个文档底部/网页底部结构语义化标签（1）丢失样式的情况下，也能让页面呈现清晰的结构（2）有利于搜索引擎的抓取，对SEO良好，爬虫可以根据不同的标签来分析关键字，提升权重。（3）开发体验良好，可读性更高，后期维护效率更高。（4）方便其他设备解析。结构语义化标签的优点--------小贴士--------良好的命名规范可以为团队合作开发网站提供帮助在网站开发和网站维护方面都起到至关重要的作用命名规范是一种约定，也是程序员之间进行良好沟通的桥梁职业素养任务实践

任务2中国传统节日介绍页面

（1）在VSCode中，创建站点文件夹，准备好素材资源文件夹，新建文件301.html

（2）参考图3.1.3效果分析图，先写出结构语义化标签，再进行排版页面

（3）写好一个页面后，多复制几个页面，对差异内容进行修改，实现各个节日页面之间的相互跳转PART5锚点链接问题1：锚点链接的应用场景有哪些？什么是锚点锚点是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置。锚点链接--------小贴士--------ID名字可以用英文或者拼音或者字母加数字组合，不要使用中文命名；如果锚点定位的位置需要跨页面，那么书写时，先写对应页面文件的URL再跟id名。如：<ahref=”../index.html#top”>返回</a>(定位到index页面id名为top的标签位置)任务实践

（1）在VSCode中，创建站点文件夹，准备好素材资源文件夹，新建文件302.html（2）语义格式化文本，图文排版（3）在文中创建锚点链接快速到达对应分集剧情（4）“另外一个页面的第6～10集”锚点定义到另一个html文件中的对应位置（5）点击文字“返回选集”可以回到主菜单