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.hqwc.cn/news/651640.html

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

相关文章

从零入门区块链和比特币(第一期)

欢迎来到我的区块链与比特币入门指南&#xff01;如果你对区块链和比特币感兴趣&#xff0c;但不知道从何开始&#xff0c;那么你来对地方了。本博客将为你提供一个简明扼要的介绍&#xff0c;帮助你了解这个领域的基础知识&#xff0c;并引导你进一步探索这个激动人心的领域。…

绘唐科技AIGC怎么激活

绘唐科技AIGC怎么激活绘唐科技AIGC怎么激活绘唐科技AIGC怎么激活绘唐科技AIGC怎么激活 这里激活免费3天体验 Docshttps://qvfbz6lhqnd.feishu.cn/wiki/D3YLwmIzmivZ7BkDij6coVcbn7W

RabbitMQ(高级)笔记

一、生产者可靠性 &#xff08;1&#xff09;生产者重连&#xff08;不建议使用&#xff09; logging:pattern:dateformat: MM-dd HH:mm:ss:SSSspring:rabbitmq:virtual-host: /hamllport: 5672host: 192.168.92.136username: hmallpassword: 123listener:simple:prefetch: 1c…

新标准日本语初下 课后练习作业

新版标准日本语初下 第二十五課 これは明日会議で使う資料です 第二十五課 これは明日会議で使う資料です &#xff12;&#xff14;&#xff0d;&#xff10;&#xff14;&#xff0d;&#xff12;&#xff16; 練習&#xff12;&#xff15;&#xff0d;1&#xff0d;1 例…

浅谈大数据时代下的电商风控||电商数据API接口

抢抢抢&#xff01;最后1天&#xff0c;双十一直播活动来啦&#xff01;抢直播专属优惠…… 视频号 随着大数据时代的兴起&#xff0c;互联网电商风控已经从无风控、人工抽取规则为主的简易规则模型发展到当前基于大数据的风控。与金融风控不同&#xff0c;互联网电商风控呈现出…

汽车新智能图谱里:理解腾讯的AI TO B路径

将自身的C2B产品和产业理解充分AI化&#xff0c;在自身内部场景率先验证跑通后&#xff0c;进而释放给产业伙伴&#xff0c;对应到具体的需求痛点&#xff0c;一起打磨对应的行业AI模型。 这也恰是腾讯“实用”标签背后的AI产业路径。 作者|皮爷 出品|产业家 成本、性价…

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…

计算机网络大框架图形

如标题&#xff0c;精心画了一个计算机网络的框架性的图&#xff0c;包含了计算机网络的核心思想&#xff0c;在此分享和备份下。各层具体协议参考TCP/IP常用协议栈图解-CSDN博客

一分钟了解期权合约转仓交易的流程

期权合约转仓交易的流程 期权合约转仓交易是指在期权交易过程中&#xff0c;交易者平掉手中现有的仓位&#xff0c;并选择更高或更低的行权价格&#xff0c;进行买入或卖出开仓的交易方法。转仓交易具有多个优势&#xff0c;包括降低风险、锁定利润、提高资金使用效率以及增加…

BUUCTF--web(2)

1、[HCTF 2018]admin1 打开题目后发现有注册和登录两个页面&#xff0c;因为题目提示admin&#xff0c;尝试用admin进行爆破 爆破得到密码为123 登录得到flag 2、[护网杯 2018]easy_tornado1 打开题目后有三个文件&#xff0c;分别打开查看 在url地址栏中发现包含两个参数&a…

NEMU模拟器源码编译与使用

NEMU模拟器源码编译与使用 1 NEMU介绍2 NEMU编译3 NEMU使用3.1 下载MySBIBenOS3.2 使用riscv64-benos_defconfig编译NEMU3.3 编译MySBIBenOS3.4 运行MySBIBenOS 4 解决NEMU编译报错4.1 找不到readline/readline.h4.2 找不到path_manager.h 1 NEMU介绍 NEMU&#xff08;NJU Emu…

牛客NC143 矩阵乘法【中等 矩阵 C++/Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/bf358c3ac73e491585943bac94e309b0 思路 矩阵算法在图像处理、神经网络、模式识别等领域有着广泛的用途。在矩阵乘法中&#xff0c;A矩阵和B矩阵可以做乘法运算必须满足A矩阵的列的数量等于B矩阵的行的数量。运算…