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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Rabbitmq消息应答，持久化，权重分配(7)

Rabbitmq消息应答，持久化，权重分配(7)

消息应答 概览 消息应答机制是 RabbitMQ 中确保消息处理的可靠性和一致性的重要机制之一。当消费者从队列中接收到消息并处理完成后&#xff0c;通常需要向 RabbitMQ 发送一个明确的消息应答&#xff0c;以告知 RabbitMQ 消息已经被处理&#xff0c;并可以安全地从队列中移除…
阅读更多...
如何消除浏览器SmartScreen对网站“不安全”提示？

如何消除浏览器SmartScreen对网站“不安全”提示？

面对互联网时代用户对网站安全性和可信度的严苛要求&#xff0c;网站运营者时常遭遇Microsoft Defender SmartScreen&#xff08;SmartScreen&#xff09;提示网站不安全的困扰。本文将剖析SmartScreen判定网站不安全的原因&#xff0c;并为运营者提供应对策略&#xff0c;以恢…
阅读更多...
[最新]CentOS7设置开机自启动Hadoop集群

[最新]CentOS7设置开机自启动Hadoop集群

安装好Hadoop后我们可以使用开机自启动的方式&#xff0c;节约敲命令的时间。注意是centOS7版本!!!和centOS6版本区别非常大!!! 1、切换到系统目录 [rootmaster ~]# cd /etc/systemd [rootmaster systemd]# ll total 32 -rw-r--r-- 1 root root 720 Jun 30 23:11 bootcha…
阅读更多...
ip https证书360

ip https证书360

https证书主要作用是保障网络安全&#xff0c;在http协议的基础上通过SSL/TLS加密技术实现安全通信协议。对客户端以及服务器之间的传输数据进行加密&#xff0c;确保数据的完整性和机密性&#xff0c;维护用户隐私。通过HTTPS协议&#xff0c;我们可以安全地进行在线购物、网上…
阅读更多...
【threejs教程7】threejs聚光灯、摄影机灯和汽车运动效果

【threejs教程7】threejs聚光灯、摄影机灯和汽车运动效果

【图片完整效果代码位于文章末】 在上一篇文章中我们实现了汽车模型的加载&#xff0c;这篇文章主要讲如何让汽车看起来像在运动。同时列出聚光灯和摄像机灯光的加载方法。 查看上一篇&#x1f449;【threejs教程6】threejs加载glb模型文件&#xff08;小米su7&#xff09;&…
阅读更多...
Kubernetes学习-核心概念篇(一) 初识Kubernetes

Kubernetes学习-核心概念篇(一) 初识Kubernetes

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Kubernetes渐进式学习-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1. 前言 2. 什么是Kubernetes 3. 为什么需要Kubernetes 3.1. 应…
阅读更多...
【高校科研前沿】东北地理所在遥感领域顶刊RSE发布中国主要红树植物群落遥感分类成果

【高校科研前沿】东北地理所在遥感领域顶刊RSE发布中国主要红树植物群落遥感分类成果

目录 01 文章简介 02 研究内容 03 文章引用 01 文章简介 论文名称&#xff1a;Mangrove species mapping in coastal China using synthesized Sentinel-2 high-separability images&#xff08;基于Sentinel-2高分离度图像的中国沿海红树群落制图&#xff09; 第一作者及…
阅读更多...
口才培训需要多久才能看到成效？

口才培训需要多久才能看到成效？

口才培训需要多久才能看到成效&#xff1f; 口才培训需要多久才能看到成效&#xff0c;这个问题的答案因个体差异而异&#xff0c;受到多种因素的影响。以下是对此问题的详细分析&#xff1a; 首先&#xff0c;每个人的口才基础和学习能力不同。有些人可能天生具备良好的口才…
阅读更多...
面试C++（基础篇）- C++是如何工作的？

面试C++（基础篇）- C++是如何工作的？

1:C是如何工作的&#xff1f; 首先以一个最简单的Hello word程序入门来看&#xff1a; #include <iostream>int main() {std::cout << "Hello World!\n"<< std::endl;std::cin.get(); }1&#xff1a;#include是预编译命令&#xff0c;发生在编译…
阅读更多...
WoodMart主题下载：为您的电商网站带来自然而优雅的购物体验

WoodMart主题下载：为您的电商网站带来自然而优雅的购物体验

在电子商务的激烈竞争中&#xff0c;一个设计精良、用户友好的在线商店是吸引和保留客户的关键。WoodMart主题&#xff0c;作为一款专为Shopify平台设计的高级主题&#xff0c;以其自然美学和强大的功能&#xff0c;帮助您的商店在众多竞争对手中脱颖而出。 [WoodMart主题的核…
阅读更多...
开源框架-链路追踪（SkyWalking）

开源框架-链路追踪（SkyWalking）

SkyWalking 极简入门 | Apache SkyWalking 开发环境配置&#xff1a; -javaagent:D:\xxxxx\yyyy\skywalking-agent.jar -DSW_AGENT_NAMEspringboot-xxxx-demo -DSW_AGENT_COLLECTOR_BACKEND_SERVICES127.0.0.1:11800
阅读更多...
多行Textview 计算切分后的长度，并回退长度

多行Textview 计算切分后的长度，并回退长度

实现类似的效果&#xff0c;一个多行的 textview&#xff0c; 如果赋值一个超长的字符&#xff0c;尾部长度回退部分&#xff0c;并添加 ... 最后添加一个详情按钮。 如果不超长则不显示详情 效果如图&#xff1a; 获取截断之后的字符长度 fun getLimitedCharacterCount(textV…
阅读更多...
Docker与Linux容器：“探索容器化技术的奥秘”

Docker与Linux容器：“探索容器化技术的奥秘”

目录 一、Docker概述 二、容器技术的起源&#xff1a; 三、Linux容器 四、Docker的出现 五、Docker容器特点&#xff1a; 六、Docker三大概念&#xff1a; 容器&#xff1a; 镜像&#xff1a; 仓库&#xff1a; 七、Docker容器常用命令 一、Docker概述 在云原生时代&…
阅读更多...
每周题解：拯救大兵瑞恩

每周题解：拯救大兵瑞恩

题目描述 1944 年&#xff0c;特种兵麦克接到国防部的命令&#xff0c;要求立即赶赴太平洋上的一个孤岛&#xff0c;营救被敌军俘虏的大兵瑞恩。 瑞恩被关押在一个迷宫里&#xff0c;迷宫地形复杂&#xff0c;但幸好麦克得到了迷宫的地形图。 迷宫的外形是一个长方形&#x…
阅读更多...
架构师的六大生存法则与价值创造

架构师的六大生存法则与价值创造

目录 什么影响架构的成败 架构师的六大生存法则 一、所有的架构规划必须有且只有一个正确的目标 二、架构活动需要尊重和顺应人性 三、架构活动在有限的资源下最大化商业价值 四、架构师要考虑依赖的商业模块和技术生命周期 五、架构师为什么要关注技术体系的外部适应性…
阅读更多...
【DINO】环境配置

【DINO】环境配置

1. DINO简介 作为一款基于Transformer性能强劲的计算机视觉算法&#xff0c;一经发布即受追捧&#xff0c;本文记录下在DINO官方代码在集群上的环境配置及训练自己的数据集过程。 DINO原文&#xff1a;https://arxiv.org/abs/2203.03605 DINO源代码&#xff1a;https://github.…
阅读更多...
2021长城杯（部分复现）

2021长城杯（部分复现）

2021年4月25日&#xff0c;上午8点左右&#xff0c;警方接到被害人金某报案&#xff0c;声称自己被敲诈数万元&#xff1b;经询问&#xff0c;昨日金某被嫌疑人诱导裸聊&#xff0c;下载了某“裸聊”软件&#xff0c;导致自己的通讯录和裸聊视频被嫌疑人获取&#xff0c;对其进…
阅读更多...
Oracle数据库的AI能力分析，释放企业数据价值

Oracle数据库的AI能力分析，释放企业数据价值

解锁Oracle数据库的AI潜力 Oracle数据库提供了一系列的AI能力&#xff0c;旨在帮助企业和开发者更高效地利用人工智能技术。以下是Oracle数据库AI能力的一些关键点&#xff1a;1. AI向量相似性搜索&#xff1a;Oracle Database 23c引入了AI Vector Search功能&#xff0c;该功…
阅读更多...
看企业中很多老师傅都说没前途，该不该放弃嵌入式单片机行业？

看企业中很多老师傅都说没前途，该不该放弃嵌入式单片机行业？

在企业中&#xff0c;我们经常会听到很多老师傅感叹嵌入式单片机行业没有前途&#xff0c;这也让不少人陷入了迷茫&#xff0c;不知道该不该放弃这个行业。其实&#xff0c;我发现很多新手在嵌入式和单片机领域都存在一个误区&#xff0c;那就是他们过于专注于工作技能的提升&a…
阅读更多...
Win10装机（EasyU优启通制作优盘装机）

Win10装机（EasyU优启通制作优盘装机）

文章目录 EasyU优启通制作U盘WIndow 10 环境下载将Win10环境放在C盘之外的磁盘目录下&#xff0c;如D:/ 安装1. 进入BIOS2. 格式化C盘3. WinNTSetup4. 设置5.就绪&#xff1f;无需其他选项开始即可6. 重启&#xff0c;拔出U盘&#xff0c;就将自动安装6. 安装好后配置即可 参考…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023