HTML学习、图像链接标签行内元素和块元素列表 2022-1-17

2023-11-20 12:30:10

图像标签

img
src:相对路径
绝对路径点击图片右键–copy path–就直接可以将绝对路径复制出来，填到src里面

我们通常会直接建一个文件夹resourse来存放其他资源，单独存放图片的建一个文件夹（image）,然后把图片复制在这个文件夹下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img
    src:相对路径（推荐使用）：相对于html文件其图片的位置     用../代表上一级目录
        绝对路径
    alt:当图片路径错误导致加载不出来要显示的文字（图片名字）
    title:表示鼠标悬停在图片上要显示的文字

-->
<img src="../resourse/image/1.jpg" alt="请重新加载图片" title="悬停文字">
</body>
</html>

链接标签（herf）

超链接

页面间链接–从一个页面链接到另一个页面（target="_blank"）
锚链接
功能性链接

文字超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--a 标签
    herf:必填，表示跳转到那个页面
-->
<a href="1.我的第一个网页.html">跳转到第一个页面</a>
<a href="https://www.baidu.com">跳转到百度页面</a>

</body>
</html>

图片超链接

<a href="1.我的第一个网页.html">
    <img src="../resourse/image/1.jpg" alt="请重新加载图片" title="悬停文字">

</a>

页面间链接：target:表示窗口在哪里打开 _blank在新标签中打开

<!--a 标签
    herf:必填，表示跳转到那个页面
    target:表示窗口在哪里打开   _blank在新标签中打开
-->
<a href="1.我的第一个网页.html" target="_blank">跳转到第一个页面</a>
<a href="https://www.baidu.com">跳转到百度页面</a>

_self在自己的网页中打开(默认)

!--a 标签
    herf:必填，表示跳转到那个页面
    target:表示窗口在哪里打开   _blank在新标签中打开
                             _self在自己的网页中打开（默认）
-->
<a href="1.我的第一个网页.html" target="_blank">跳转到第一个页面</a>
<a href="https://www.baidu.com" target="_self">跳转到百度页面</a>
<br>

锚链接
1.需要一个锚标记
2.跳转到标记

以下是页面内跳转

<!--使用name作为标记-->
<a name="top">顶部</a>

<a href="#top">回到顶部</a>

以下是页面之间的跳转

<a href="4、链接标签.html#down">跳转</a>

<a name="down">down</a>

结果

功能性链接
邮件链接：mailto：

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

QQ链接

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin24736743&siteqq@menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:24736743:53" alt="你好，加我领取小电影"
         title="你好，加我领取小电影">

行内元素和块元素

块元素

无论元素多少，该元素独占一行（p、h1、h2）

行内元素

内容撑开宽度，左右都是行内元素的可以再排在一行（a.strong.em…）

列表

列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的形式的样式显现出来，以便浏览者能更快捷的获得相应的信息

列表的分类

无序列表
有序列表
定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答...
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前段</li>
    <li>C++</li>
</ol>

<hr/>
<!--无序列表
应用范围：导航，侧边栏...
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前段</li>
    <li>C++</li>
</ul>


<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>

    <dd>北京</dd>
    <dd>天津</dd>
    <dd>上海</dd>
    <dd>重庆</dd>
</dl>
</body>
</html>

码农公寓