Web前端一套全部清晰 ② day2 HTML 标签之文字排版，图片、链接、音视频链接

虽然辛苦，我还是会选择那种滚烫的人生

                                                —— 24.4.25

HTML初体验

1.HTML定义

HTML 超文本标记语言

超文本 —— 链接

标记 —— 标记也叫标签，带尖括号的文本

标签语法

        开始标签 需要加粗的文字 结束标签

标签成对出现，中间包裹内容

<>里面放英文字母（标签名）

结束标签比开始标签多/

拓展

        双标签：成对出现的标签

        单标签：只有开始标签，没有结束标签

                <br>：换行        <hr>:水平线

单标签是一行包围的

总结

①保存HTML标签的文件扩展名是？

        .html

②HTML标签名要放到什么括号里面？

        尖括号<>

③结束标签比开始标签多什么？

        /

④标签包裹的内容放在什么位置？

        开始标签和结束标签之间

2.HTML基本骨架

HTML基本骨架是网页模板

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页主体
    </body>
</html>

html：整个网页

head：网页头部，存放给浏览器看的代码，例如CSS

body：网页主体，存放给用户看的代码，例如 图片、文字

title：网页标题

VSCode快速生成骨架：

在HTML文件中，!(英文)配合Enter键

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<body>给用户看的内容</body>

<title>网页标题文字</title>

总结

VS Code如何快速生成HTML骨架？

!(英文)配合Enter或Tab

html：整个网页

head：网页头部，存放给浏览器看的代码，例如CSS

body：网页主体，存放给用户看的代码，例如 图片、文字

title：网页标题

3.标签的关系

作用：明确代码的书写位置

        父子关系（嵌套关系）

        兄弟关系（并列关系）

<html>
    <head>
        
    </head>
    <body>
        
    </body>
</html>

html和head是父子关系，head和body是兄弟关系

总结

标签之间有 2 种关系，分别是什么关系？

        父子关系（嵌套）

        兄弟关系（并列）

向后缩进：Tab

向前缩进：Shift+Tab

4.注释

学习和工作中，关键代码都要加注释

<!--…-->注释标签用来在源文档中插入注释，注释不会在浏览器中显示

在VS Code中，添加 / 删除注释的快捷键：ctrl+/

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是文字，能看见吗 -->
</body>
</html>

总结

VS Code中，添加/删除注释的快捷键是什么？

        ctrl + /

5.标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等

标签名：h1~h6（双标签）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

注意：

        ① h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo

        ② h2~h6 没有使用次数的限制

总结：

1.标题标签一共有几个级别？标签名分别是什么？

        6个，h1~h6

2.在浏览器中，各个标题标签的显示效果有什么特点？

        文字加粗

        字号逐渐变小

        独占一行

3.哪个标题标签有使用次数的限制？

        h1：一个网页只能用一次，用来放新闻标题或网页logo

6.段落标签

一般用在新闻段落、文章段落、产品描述信息等等

标签名：p(双标签)

显示特点：

        ① 独占一行        ② 段落之间存在间隙

示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>一切都会好的</p>
    <p>我一直相信</p>
</body>
</html>

总结

1.段落标签名是什么？

        p（双标签）

2.在浏览器中，段落标签的显示效果是什么？

        独占一行

        段落之间有间隙

7.换行与水平线标签

换行：<br>（单标签）

水平线：<hr>（单标签）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行与水平线标签</title>
</head>
<body>
    第一段第一行内容
    <br>
    <br>
    <br>
    第一段第二行内容
    <hr>
    第二段第一行内容
</body>
</html>

总结

1.代码中敲Enter换行，在浏览器中有换行的效果吗？

        没有换行效果

2.强制换行的标签是什么？

        <br>单标签

3.水平线标签是什么？

        <hr>单标签

8.文本格式化标签

作用：为文本添加特殊格式，以突出重点，常见的文本格式：加粗、倾斜、下划线、删除线等

文本格式化标签

strong、em、ins、del标签都自带强调含义（语义）

示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>
<body>
    <strong>strong 加粗效果</strong>
    <b>b 加粗效果 strong带有强调含义</b>
    <em>em的倾斜效果</em>
    <i>i的倾斜效果 i带有强调含义</i>
    <ins>ins 下划线效果</ins>
    <u>u 下划线 ins带有强调含义</u>
    <del>del 删除线效果</del>
    <s>s 删除线 del带有强调含义</s>
</body>
</html>
总结

1.两个文本格式化标签是换行还是在一行显示？

        在一行显示

2.下列标签的作用分别是什么

        strong：加粗效果

        em：倾斜效果

9.图像标签

图像标签-基本使用

作用：在网页中插入图片

<img src="图片的URL">

src用于指定图像的位置和名称，是<img>的必须属性

示例

./选择图片就可以直接传到网站里

多张图片不换行

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像基本使用</title>
</head>
<body>
    <img src="./我始终相信.jpg">
</body>
</html>

总结

1.在网页中，嵌入图片的标签是什么？                

        <img>单标签

2.图像标签的必须属性是什么？作用是什么？

        src，用来指定图像的位置和名称

        <img src="图片的URL">

图像标签-属性

<img src="./cat.jpg">
<img src="./dog.jpg">

属性                    作用                                说明
alt                    替换文本                图片无法显示的时候显示的文字
title                  提示文本                鼠标悬停在图片上面的时候显示的文字
width               图片的宽度             值为数字，没有单位
height              图片的高度             值为数字，没有单位

alt
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签-属性</title>
</head>
<body>
    <!-- 解决以前网速慢，图片加载不出来的问题，不想影响网页的内容，用alt替换文本 -->
    <img src="./我始终相信1.jpg" alt="我始终相信">
</body>
</html>

title
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签-属性</title>
</head>
<body>
    <!-- 解决以前网速慢，图片加载不出来的问题，不想影响网页的内容，用alt替换文本 -->
    <img src="./我始终相信.jpg" alt="我始终相信">

    <img src="./dog.jpg" title="这是一只狗">
</body>
</html>

鼠标悬停在图片上方会给出提示

width height
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签-属性</title>
</head>
<body>
    <!-- 解决以前网速慢，图片加载不出来的问题，不想影响网页的内容，用alt替换文本 -->
    <img src="./我始终相信.jpg" alt="我始终相信">

    <img src="./dog.jpg" title="这是一只狗">

    <img src="./我始终相信.jpg" width="1104">

    <img src="./dog.jpg" height="999">
</body>
</html>

属性名=”属性值“

属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

10.路径

路径指的是查找文件时，从起点到终点经历的路线

路径分类：

        相对路径：从当前文件位置出发查找目标文件(大多数情况下都从相对路径找目标)

        绝对路径：从盘符出发查找目标文件

                Windows电脑从盘符出发

                Mac电脑从根目录出发

        / 表示进入某个文件夹里面        / 文件夹名字

        . 表示当前文件所在文件夹        ./ 进入当前文件的文件夹

        .. 表示当前文件的上一级文件夹        ../ 进入上一级文件夹

相对路径：

示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对路径</title>
</head>
<body>
    <!-- 1. -->
    <img src="./夕阳.jpg">
    <!-- 2. -->
    <img src="../dog.jpg">
    <!-- 3. -->
    <img src="../我始终相信.jpg">
</body>
</html>

总结

1.在路径写法中，以下符号表示什么含义？

        .         当前文件所在文件夹

        ..        当前文件上一级文件夹

        /         进入某个文件夹里面

绝对路径

从盘符出发查找目标文件

        Windows电脑从盘符出发

        Mac电脑从根目录（/）出发

<img src="C:\images\mao.ipg">

Windows默认是\，其它系统是/，建议统一写为：/

文件的在线网志：

https://img-blog.csdnimg.cn/direct/0ee8b98aa0ec46e0bac2f34cac4e486e.png

绝对路径的应用场景：友情链接

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对路径</title>
</head>
<body>
    <!-- 从绝对路径出发寻找文件 -->
    <img src="D:\2LFE\Desktop\前端三剑客\html\html代码\HTML_day01\花束.jpg">
    <img src="https://img-blog.csdnimg.cn/direct/0ee8b98aa0ec46e0bac2f34cac4e486e.png">
</body>
</html>

绝对路径因为太过于绝对，所以更多的使用相对路径

11.超链接

作用：

        点击跳转到其他页面

<a href="https://www.baidu.com">跳转到百度</a>

href属性值是跳转地址，是超链接的必须属性

案例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://mp.csdn.net/mp_blog/creation/editor/138197217">跳转到我的CSDN</a>

    <!-- 跳转到本地文件：相对路径查找 -->
    <!--  _blank是返回上一个链接 新窗口跳转页面 -->
    <a href="./10.图像标签-属性.html" target="_blank">跳转到10.图像标签-属性</a>

    <!-- 开发初期，不知道超链接的跳转地址，href属性写#，表示空链接，不会跳转 -->
    <a href="#">空链接</a>
</body>
</html>

总结：

1.超链接标签的作用是什么？

        单击跳转到其他页面

2.开发初期，不确定跳转地址，如何书写href属性值？

        # 空链接

3.target="_blank"属性的作用是什么？

        在新窗口打开页面

12.音频链接

音频标签

<audio src="音频的 URL"></audio>

常见属性

        html5中，如果属性名和属性值完全一样，那么可以简写为一个单词

        src（必须属性）音频URL   controls 显示音频控制面板  loop 循环播放  autoplay 自动播放（但是浏览器会自动禁止） 可以直接写属性 一样的效果

示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频链接</title>
</head>
<body>
    <!-- html5中，如果属性名和属性值完全一样，那么可以简写为一个单词 -->
    <!-- src 音频URL controls 显示音频控制面板 loop 循环播放 autoplay 自动播放（但是浏览器会自动禁止） 可以直接写属性 一样的效果 -->
    <audio src="./我要的爱.mp3" controls="controls" loop="loop" autoplay="autoplay"></audio>
</body>
</html>

13.视频链接

视频标签

<video src="视频的URL"></video>

常见属性

        在浏览器中想要自动播放 必须有muted和autoplay两个标签

        src 视频URL  controls 显示视频控制面板  loop 循环播放  muted 静音播放 autoplay 自动播放

        muted j'yin'bo 必须和 autoplay一起使用才能自动播放

示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频链接</title>
</head>
<body>
    <!-- 在浏览器中想要自动播放 必须有muted和autoplay两个标签 -->
    <!-- src 视频URL controls 显示视频控制面板 loop 循环播放 muted 静音播放 autoplay 自动播放 muted必须和autoplay一起使用 -->
    <video src="./万事胜意.mp4"controls loop muted autoplay></video>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/576991.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Django连接数据库

Django连接数据库

数据库登录命令 mysql -u root -p show databases; Django连接数据库 在settings.py文件中进行配置和修改 DATABASES {default: {ENGINE: django.db.backends.mysql,HOST: 127.0.0.1, # 数据库主机PORT: 3306, # 数据库端口USER: root, # 数据库用户名PASSWORD: 12345…
阅读更多...
2024年钉钉直播回放怎么下载

2024年钉钉直播回放怎么下载

又到了2024年,最近钉钉迎来了一波更新,经过我的研究,总算研究出来了一个方法,并且做成了工具 首先&#xff0c;让我们了解一下钉钉直播回放的下载方法。 钉钉直播回放工具链接&#xff1a;https://pan.baidu.com/s/1oPWJOp8L2SBDlklt_t5WQQ?pwd1234 提取码&#xff1a;1234 -…
阅读更多...
[Algorithm][模拟][替换所有问号][提莫攻击][N字形变换][外观数列][数青蛙] + 模拟原理详细讲解

[Algorithm][模拟][替换所有问号][提莫攻击][N字形变换][外观数列][数青蛙] + 模拟原理详细讲解

目录 0.原理讲解1.替换所有的问号1.题目链接2.代码实现 2.提莫攻击1.题目链接2.算法原理详解3.代码实现 3.N 字形变换1.题目链接2.算法原理详解3.代码实现 4.外观数列1.题目链接2.算法原理详解3.代码实现 5.数青蛙1.题目链接2.算法原理详解3.代码实现 0.原理讲解 模拟&#xf…
阅读更多...
Unreal Engine动态添加Button实例

Unreal Engine动态添加Button实例

在控件蓝图中添加容器&#xff0c;注意命名不要有中文 C代码中找到容器实例 1 2 3 4 5 6 7 8 UVerticalBox* verticalBox Cast<UVerticalBox>(CurrentWidget->GetWidgetFromName(TEXT("VerticalBox_0"))); if (verticalBox ! nullptr) { UScrollBox* …
阅读更多...
【Linux】：文件查看 stat、cat、more、less、head、tail、uniq、wc

【Linux】：文件查看 stat、cat、more、less、head、tail、uniq、wc

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Linux深造日志 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一、stat&#xff08;查看文件详细属性信息&#xff09;1.1 内容解析&#xff1a;1.2…
阅读更多...
外贸自动化操作脚本的编写!

外贸自动化操作脚本的编写!

随着信息技术的飞速发展&#xff0c;外贸行业也迎来了自动化的浪潮&#xff0c;自动化操作脚本的编写&#xff0c;成为了外贸从业者提高工作效率、减少重复性劳动的重要手段。 本文将介绍外贸自动化操作脚本的编写基础&#xff0c;并通过4段源代码的实例&#xff0c;带领读者深…
阅读更多...
【工具】-根源上解决VScode打印输出乱码的问题

【工具】-根源上解决VScode打印输出乱码的问题

目录 1 第一步&#xff1a; 改编译命令&#xff0c;保持一致2 第二步&#xff1a; 更改VScode的编码格式-保持一致 1 第一步&#xff1a; 改编译命令&#xff0c;保持一致 看一下你的控制台的编译的命名后缀&#xff0c;有两个关键的参数&#xff0c;如下图&#xff1a; “-f…
阅读更多...
thinkphp5.0.23漏洞复现以及脚本编写

thinkphp5.0.23漏洞复现以及脚本编写

1 thinkphp5.0.23远程代码执行漏洞简介 ThinkPHP5.0.23漏洞主要涉及远程代码执行（RCE）的安全隐患。这一漏洞的存在是因为ThinkPHP框架在底层对控制器名的过滤不够严格，导致攻击者有可能通过特定的URL构造，调用到框架内部的敏感函数，进而执行任意命令。 2 thinphp5.0.23漏…
阅读更多...
普通屏幕已过时？裸眼3D屏幕显示效果更胜一筹！

普通屏幕已过时？裸眼3D屏幕显示效果更胜一筹！

随着多媒体技术的迅猛进步&#xff0c;我们日常生活中的内容展现方式&#xff0c;已经经历了前所未有的变革。在这其中&#xff0c;裸眼3D屏幕的应用&#xff0c;无疑是最为引人注目的亮点&#xff0c;它相较于传统屏幕&#xff0c;在显示效果上展现出了鲜明的优势&#xff0c;…
阅读更多...
[iOS]使用CocoaPods发布私有库

[iOS]使用CocoaPods发布私有库

1.创建私有 Spec 仓库 首先&#xff0c;需要一个私有的 Git 仓库来存放你的 Podspec 文件&#xff0c;这个仓库用于索引你所有的私有 Pods。 在 GitHub 或其他 Git 服务上创建一个新的私有仓库&#xff0c;例如&#xff0c;名为 PrivatePodSpecs。克隆这个仓库到本地&#xf…
阅读更多...
电商API数据采集接口||大数据的发展，带动电子商务产业链，促进了社会的进步

电商API数据采集接口||大数据的发展，带动电子商务产业链，促进了社会的进步

最近几年计算机技术在诸多领域得到了有效的应用&#xff0c;同时在多方面深刻影响着我国经济水平的发展。除此之外&#xff0c;人民群众的日常生活水平也受大数据技术的影响。 主流电商API数据采集接口||在这其中电子商务领域也在大数据技术的支持下&#xff0c;得到了明显的进…
阅读更多...
关于我在 uniapp 开发过程中遇到的问题（更新中...）

关于我在 uniapp 开发过程中遇到的问题（更新中...）

目录 uniapp 勾选自带的隐私政策 出现的问题 是否忽略版本兼容检查提示 勾选了uniapp的消息推送 打包后弹出 push module was not added when packaging, please refertohttps://ask.dcloud.net.cn /article/283 关于uniapp的真机调试 一直等待问题 或者 正在建立链接 在…
阅读更多...
机器人前馈控制MATLAB实现

机器人前馈控制MATLAB实现

在机器人控制中&#xff0c;前馈控制是一种常用的方法&#xff0c;用于补偿系统中的已知动态。前馈控制通常与反馈控制结合使用&#xff0c;以提高系统的跟踪性能和响应速度。在MATLAB中实现机器人前馈控制涉及几个步骤&#xff0c;包括系统建模、设计前馈控制器、实现控制算法…
阅读更多...
【前后端】django与vue的结合使用

【前后端】django与vue的结合使用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、前后端分离的简介二、django与vue的结合使用三、总结 前言 随着开发语言及人工智能工具的普及&#xff0c;使得越来越多的人会主动学习使用一些开发工具&a…
阅读更多...
一、Django 初识

一、Django 初识

简介 Django 是一个用于构建 Web 应用程序的高级 Python Web 框架。 版本对应 不同版本的django框架是基于特定的不同的python版本开发的&#xff0c;所以不同版本的django框架要正常执行功能只能安装特定的python版本 Django安装 安装 Django # 全局安装 pip install dj…
阅读更多...
金融案例：统一查询方案助力数据治理与分析应用更高效、更安全

金融案例：统一查询方案助力数据治理与分析应用更高效、更安全

随着企业数据规模的增长和业务多元化发展&#xff0c;海量数据实时、多维地灵活查询变成业务常见诉求。同时多套数据库系统成为常态&#xff0c;这既带来了数据管理的复杂性&#xff0c;又加大了数据使用的难度&#xff0c;面对日益复杂的数据环境和严格的数据安全要求&#xf…
阅读更多...
苹果发布开源模型；盘古大模型5.0将亮相；英伟达将收购 Run：ai

苹果发布开源模型；盘古大模型5.0将亮相；英伟达将收购 Run：ai

苹果首次发布开源语言模型 近期&#xff0c;苹果在 Hugging Face 发布了 OpenELM 系列模型。OpenELM 的关键创新是逐层扩展策略&#xff0c;该策略可在 transformer 模型的每一层中有效地分配参数&#xff0c;从而提高准确性。 与具有统一参数分配的传统语言模型不同&#xff…
阅读更多...
rabbitmq集群配置

rabbitmq集群配置

1&#xff0c;配置环境变量 MY_POD_NAME&#xff1a;当前Pod的名称 RABBITMQ_ERLANG_COOKIE&#xff1a;设置Erlang Cookie用于节点间通信安全验证&#xff0c;值来自/nfs/rabbitmq/lib/.erlang.cookie文件内容 RABBITMQ_NODENAME&#xff1a;根据Pod名称动态生成了RabbitMQ…
阅读更多...
前端到全栈进阶之“前端框架”

前端到全栈进阶之“前端框架”

从前端入门到全栈-系列介绍 你会学到什么&#xff1f; 可能学不到什么东西&#xff0c;该系列是作者本人工作和学习积累&#xff0c;用于复习 系列介绍 现在的 Web 前端已经离不开 Node.js&#xff0c;我们广泛使用的 Babel、Webpack、工程化都是基于 Node 的&#xff0c;各…
阅读更多...
k8s-身份认证与权限

k8s-身份认证与权限

认证概述 Kubernetes作为一个分布式集群的管理工具&#xff0c;保证集群的安全性是其一个重要的任务。所谓的安全性其实就是保证对Kubernetes的各种客户端进行认证和鉴权操作。 在Kubernetes集群中&#xff0c;客户端通常有两类&#xff1a; User Account&#xff1a;一般是独…
阅读更多...
最新文章

Copyright @ 2022~2023