2.1 HTML基础

SKKK 发布于 2024-11-11 801 次阅读


HTML标题

HTML中的标题通过<h1>-<h6>标签来定义<h1>为最大<h6>为最小

<h1>这是一个标题</h1>
<h2>这是壹个标题</h2>
<h3>这是1个标题</h3>

效果图

HTML段落

<p>这是一个段落?</p>

效果图

HTML 链接

<a>标签可以创建超链接

herf指定链接目标的URL,这是链接的最重要属性,可以是另一个网页的URL、文件的URL或者其他资源的URL

target指定连接如何在浏览器中打开,常见的值包括_black(在新标签页或窗口中打开链接)和_self(在当前标签或者窗口打开链接)。

示例

<!--超链接标签-->
<a href="https://www.bilibili.com/video/BV1ot4y1w7zW/?share_source=copy_web&vd_source=7c2fa6ef39f622cd069fc0798d717e7c"><img src="孟浩然.jpg"</a>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.bilibili.com">哔哩哔哩</a><BR>
    <a href="https://baidu.com">百度</a><br>
    <a href="https://www.sina.com.cn"target="black">新浪</a><!--target的使用方法-->
</body>
</html>

<a href="文件名/地址" download>

锚点链接

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

HTML 图像

<img>   单标签

img提供了一个src属性,将src属性的值设置为图像的访问地址,即可在网页中插入此图像

alt属性:用于提供图像的替代文本,当图像无法显示时,浏览器会显示这个文本  alt="访问地址/文件名"

width和height属性:用于定义图像的宽度和高度,可以使用像素(px)或百分比作为单位 width="800"height="800"

title属性:当鼠标悬停在图像上时,显示提示信息

align属性:用于控制图像的对齐方式

使用方法<img src="访问地址/文件名">

示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="C:\Users\SKKK\Pictures\Saved Pictures\波奇酱.jpg"alt="图片不见了"width="800"height="800"align="left">//此路径为示例,请自行更改""内的内容
</body>