HTML常用标签学习笔记（第一天）

最新推荐文章于 2024-08-23 10:53:05 发布

正在加载jjj

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量54

点赞数 2

文章标签： html 前端

原文链接：https://www.bilibili.com/video/BV14J4114768?p=19&spm_id_from=333.880.my_history.page.click&vd_source=720efe45336d5eabd781d1ed31bafef8

版权

段落和换行标签
段落和换行标签
体育新闻案例
文本格式化标签
<div>和<span>盒子标签
图像标签和路径（图像必须放在与html文件在一个文件夹里面）

段落和换行标签

<p>标签用于定义段落，将整个网页分成若干段落
形式：<p>我是一个段落</p>
段落之间保有缝隙
想要几个段落就使用几个<p></p>
换行标签（单个标签）
- 对某段文字进行强制换行
- 形式：<br />（中间有空格）
- 换行之后间隔没有段落之间大。
- 代码段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落和换行标签</title>
</head>
<body>
   <p>手机、平板、耳机</p>
    <p>都是不同的充电器<br />每次出门或是在家的时候</p>
</body>
</html>

运行效果如下图：

体育新闻案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育新闻</title>
</head>
<body>
    <h1>水花61分,伊戈达拉制胜抢断 西决勇士再胜开拓者,总分2-0</h1>
    <p>5月17日讯 2019年西部决赛第2场,勇士以114-111击败开拓者,完成17分大逆转,系列赛2-0取得领先。库里季后赛生涯助攻数超哈登。</p>
    <h4>兄弟对决升级:小库里没有给哥哥造成压力</h4>
    <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中,小库里没有给哥哥造成压力,他出场19分钟,7投1中只得到3分3篮板2助攻,在场期间输掉10分。</p>
    <p>但在西决第2场中,小库里攻防两端都打出杰出的表现,全场送出4次抢断,包括直接抢断自己的哥哥库里在防守端给库里造成了极大的困扰。</p>
        <p>作者xxx<br />
            时间xxx</p>
</body>
</html>

文本格式化标签

粗体、斜体、下划线等
加粗：<strong></strong>
倾斜：<em></em>
删除线：<del></del>
下划线：<ins></ins>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>
<body>
    我是<strong>加粗</strong>的文字
    我是<em>倾斜</em>的文字
    我是<del>删除线</del>的文字
    我是<ins>下划线</ins>的文字
</body>
</html>

运行结果：

<div>和<span>盒子标签

格式：<div>这是头部</div>
<span>今日价格</span>
div是分割分区，span是跨度，跨距。
区别：div 是一个大盒子一人独占一行，span是一个小盒子

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div和span标签</title>
</head>
<body>
    <div>我是一个div我单独占一行</div>
    <div>我是一个div我单独占一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>
</html>

运行结果：

图像标签和路径（图像必须放在与html文件在一个文件夹里面）

图像标签：<img>定义图像
格式：<img src="图像url"/>
src是图像标签的必须属性，用于指定图像文件的路径和文件名
alt:替换文本，表示图像不能显示时，出现的文字，属性值：文本。
title：提示文本，鼠标放在图像上显的文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>
<body>
    <h4>图像标签的使用：</h4>
    <img src="img.jpg"/>
    <h4>alt 替换文本 图像显示不出来的时候用文字替换：</h4>
    <img src="img1.jpg" alt="我是蛋蛋学生"/>
    <h4>title 提示文本 鼠标放在图像上提示的文字：</h4>
    <img src="img.jpg" alt="我是蛋蛋学生" title="我是蛋蛋学生"/>
</body>
</html>

运行结果：