HTML学习笔记（二）_在网页中插入图片是用〈article〉元素吗张老师-CSDN博客

本文链接：https://blog.csdn.net/weixin_51250927/article/details/123145409

HTML5基础语法与标签

多媒体与语义化标签

图片与超链接标签

图片标签

<img>标签
<img src="images/picture.jpg">

用来在网页中插入图片

图片必须要复制到项目文件夹中，一般保存在images文件夹中

<img标签的alt属性

<img src="..." alt="一张图片">
如果由于某种原因无法加载图像，浏览器会在页面上显示 alt 属性中的备用文本
网页朗读器也会朗读 alt 中的文本

alt 属性是 alternate “替代品”的缩写，是对图形的文本描述，不是强制性的

<img>标签的width、height属性

width、height属性分别设置宽度和高度，单位是像素（不需要写）
<img src="..." alt="..." width="300">
如果省略其中一个属性，则表示按原始比例缩放图片

网页上支持的图片格式

格式	说明
.bmp	windows画图软件默认保存的格式，位图
.gif	支持动画（比如表情包）
.jpeg(.jpg)	有损压缩图片，用于照片
.png	便携式网络图像，用于logo、背景图形等，支持透明和半透明
.svg	矢量图片
.webp	最新的压缩算法，非常优秀的图片格式

相对路径

随着网页和图片的位置关系不同，插入图片的代码随之改变
使用../回退层级

绝对路径

描述图片精准地址
不管网页在哪里，绝对路径不需要改变

超级链接

<a>标签
<a href="输入网址">网页名称</a>

<a>标签的title属性

用于设置鼠标的悬停文本
<a href="..." title="悬停文本">...</a>

在新窗口中打开网页

<a href="..." target="blank">...</a> （将target属性设置为blank即可）

给图片设置超级链接

用<a>标签包裹img标签即可

<a href="输入网址" target="blank">
	<img src="输入图片路径">
</a>

区块标签

div标签实现文档区块分隔

为了区分每个div的功能，程序员会借助div标签的class属性

<body>
    <!-- 头部 -->
    <div class="header">
        <!-- logo -->
        <div class="logo"></div>
        <!-- 导航条 -->
        <div class="nav"></div>
    </div>
    <!-- 横幅 -->
    <div class="banner"></div>
    <!-- 内容 -->
    <div class="content">
        <!-- 非必要先关内容，比如广告 -->
        <div class="aside"></div>
        <!-- 核心部分 -->
        <div class="main"></div>
    </div>
    <!-- 页脚 -->
    <div class="footer"></div>
</body>

HTML5区块标签

区块标签	说明
<section>	文档的区域，语义比div大
<article>	文档的核心文章内容，会被搜索引擎主要抓取
<aside>	文档的非必要相关内容，比如广告等
<nav>	导航条
<header>	页头
<main>	网页核心部分
<footer>	页脚

大纲与语义化标签

大纲标签

页面内锚点

较长的页面，可以适当的给h系列标签添加id属性，它将成为页面的“锚点”
<h1 id="页面内锚点">...</h1>
其他页面的超级链接，可以链接到指定锚点
<a href="...#页面内锚点"...</a>

语义化标签

<span>标签

标签是文本中的“区块”标签，本身没有任何特殊的显示效果，可以结合CSS来丰富样式

	<p>
        <span>北京</span>的区号是<span>010</span>
    </p>
    <p>
        <span>上海</span>的区号是<span>021</span>
    </p>

<b>、<u>、<i> 标签

标签	说明
<b>	被加粗的文字
<u>	加下划线的文字
<i>	倾斜的文字

<strong>、<em>、<mark> 标签

均表示强调语义

标签	说明
<strong>	代表特别重要文字
<em>	代表强调文字
<mark>	代表一段需要被高亮的文字

下载链接

指向exe、zip、rar等文件格式的链接，将自动成为下载链接
<a href="1.zip"> 下载</a>

音频和视频

音频

<audio>标签

<audio controls src="音频地址">
<!-- controls 显示播放控件 -->
	抱歉，您的浏览器不支持audio标签，请升级浏览器 <!-- 对不兼容audio标签的浏览器的显示文字 -->
</audio>

autoplay属性

声明autoplay属性，音频会自动播放

loop属性

声明loop属性，将循环播放音频

视频

<video>标签

<video controls src="视频地址">
<!-- controls 显示播放控件 -->
	抱歉，您的浏览器不支持video标签，请升级浏览器 <!-- 对不兼容audio标签的浏览器的显示文字 -->
</video>

HTML学习笔记（三）