HTML02：图象和链接标签

图像标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>我的网页</title>

</head>

<body>

<h1>图像标签</h1>

<!--图像标签-->
<!--
src：图片路径
alt：图片不存在时显示的文字
title：悬停图片显示的文字
width：图片宽度
height：图片高度
-->
<img src="../万叶.jpg" alt="万叶" title="万叶" width="x" height="y"/>

</body>

</html>

链接标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>我的网页</title>

</head>

<body>

<!--使用name作为标记，方便在末尾进行跳跃-->
<a name="top"></a>

<h1>链接标签</h1>

<!--链接标签-->
<!--
href：链接路径
target：在哪个窗口打开，默认"_self"表示在当前页打开，"_blank"表示新建空白页打开
-->
<h2>文本超链接</h2>

<a href="https://www.cnblogs.com/taoyuann/" target="_self">我的博客</a> <br/>

<h2>图象超链接</h2>

<a href="https://www.cnblogs.com/taoyuann/"> <img src="../万叶.jpg" alt="万叶" title="万叶"></a>

<h2>锚链接</h2>

<!--锚链接-->
<!--
1、设置一个锚标记name
2、点击可以跳转到该位置（常用于章节目录跳转）
3、#name表示锚标记
4、如果要跳到其他页面，在页面链接后面直接加上#name
-->
<a href="#top">回到顶部</a>

<h2>功能性链接</h2>

<!--功能性链接-->
<!--
邮件链接：mailto
QQ链接：QQ推广生成
-->
<h3>邮件链接</h3>

<a href="mailto:2447168945@qq.com">点击联系我</a>

<h3>QQ链接</h3>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2447168945:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

</body>

</html>

行内元素和块元素

行内元素：由内容撑开宽度，左右都是行内元素时可以排在一行，如a、strong、em等

块元素：无论内容多少，都独占一行，如p、h1等

posted @ 2022-03-16 20:26  振袖秋枫问红叶  阅读(67)  评论(0)    收藏  举报