HTML1

合集 - 前端(2)
1.HTML1
2.PHP笔记
收起

什么是网站

  • 网站其实是由一个个的网页构成的
    • 网页就是放在服务器上面的一个文件
    • 网页文件的后缀有很多如我们现在的.html，还有.php，.jsp,.asp等等
      • 我们浏览网页的时候这个文件里的所有代码会被下载到我们本地的电脑，然后再由浏览器解析，渲染
  • 而网站就是一个绑定了域名的文件夹，该文件夹中可以包含子文件夹以及各种各样的文件，这些文件都可以通过域名来访问
    • 因此当我们在地址栏中输入一个URL时，它其实已经展示了服务器上的目录结构
    • 如果我们给顶级目录绑定一个域名如www.bilibili.com，那么用户就可以通过www.bilibili.com来访问文件夹中所有文件
  • 互联网上所有的服务器都是通过IP地址来定位的，域名只是IP地址的一种助记符，帮助用户记住网站的链接以及品牌
    • 使用域名访问网站时，浏览器会先找到域名对应的IP地址，然后再通过IP地址请求服务器上的文件
      • 这个过程叫做域名解析，是通过DNS服务器来完成的。

什么是服务器

  • 网站是放在服务器上面运行的，而服务器其实就是一台计算机，他和普通的笔记本、台式本并无区别
  • 不过，服务器一般是没有显示器的键盘，音响等外部设备的，当然也支持这些设备。
  • 因为服务器唯一的用途就是运行网站，并无其他的作用，所以也可以称为二十四小时运行的电脑。

什么是html

  • HTML是Hyper Text Markup Language的缩写，翻译为"超文本标记语言"，并不是用来设计网页而是用来定义网页的
  • 使用HTML编写的文件称为"HTML"文件，后缀是.html(也可以.htm)
  • HTML是一种纯文本文件，可以使用Windows记事本，Linux Vim，Notepad++，Sublime Text，VS Code等编辑器来打开或创建。
  • 每个网页都是一个HTML文档，使用浏览器访问一个链接(URL)，本质就是把文件从服务器上下载到电脑里面，然后由浏览器解析HTML这个文档。
  • HTML并不是编程语言，因为它没有处理逻辑的能力，没有计算的功能，不能动态的生成内容，只能静态的展示网页信息。
  • 保存HTML文件的时候必须把文件保存为.html或者.htm格式才可以在浏览器中打开。

超文本

  • 即超越文本，表示着HTML不仅可以包含文本(文字)。
    • 它与txt文本的区别在于他可以包含：图片，音频，表格，列表，链接，按钮，输入框等内容。
  • 超链接是互联网的纽带，是它将各种网页链接起来，没有超链接就没有互联网。
    • 这个东西可以是另外一个网页的地址，也可以当前网页中其他的位置，比如点击回到顶部，还可以是图片，文件，应用程序等
    • 链接的两端分别称为源锚点(当前锚点)和目标锚点(其他的网页)，通过点击源锚点就可以跳转到目标锚点。

标记语言

  • HTML是一种计算机语言，它不仅可以编程，还可以用来标记网页的中的内容，它通过不同的标签来标记不同的内容，格式，布局等
    示例：
<img>//该标签表示一张图片
<a>//该标签表示一个链接
<div>//该标签表示块级布局

总结

HTML是一种专门用来开发网页的计算机语言，它通过标签(标记式指令)将文本，音视频，图片，表格，按钮，输入框等内容显示出来，因此HTML是一种标记语言

HTML、CSS与JS

  • HTML：网页的骨架
  • CSS：网页的美化
  • JS：网页的动态

html标签

  • HTML标签由尖括号包围的关键字构成，如：<!DOCTYPE>.
  • 除了少数几个标签是是单个出现，其他的都是成双成对如<p>内容</p>.
  • 成对出现的标签中，第一个标签为开始标签，第二个标签为结束标签(闭合)
  • 物理标签：这类标签用来设置文本的外观
  • 逻辑标签：这类标签用来赋予文本一些逻辑或语义值
  • 语法格式：由开始的标签，属性，内容和结束的标签组成，标签的名字不区分大小写，但大多数属性的值需要区分大小写
  • 写标签名按tab键会自动补全，Ctrl+d会自动复制当行内容，单行注释Ctrl+?，多行注释Ctrl+shift+?
    • 示例：
<p class="change">此表示可以显示一段文本</p>

  • 注意：
    • 所有HTML都有<>如果没有就会被认为是文本
    • html中不同标签可以有不同的效果
    • 如果使用了某个标签，则必须使用对应的结束标签来结尾(自闭合标签除外，也称为单标签)

html属性

  • 属性就是对一个标签额外的设置
  • 属性需要添加在开始的标签里面，语法格式为:
    • class="chang"
      • 其中class为属性名，value是属性的值，属性值必须使用双引号""或者单引号' '包围。但是在大部分时候都是使用双引号。
  • 一个标签可以没有属性，也可有多个属性
  • 通用属性：可以在大部分或者所有的html标签里面使用
  • 专用属性：只能在一个或者几个特定的html标签里面使用

常见通用属性

  1. id
  • 赋予某个标签唯一的名称(标识符)，当我们使用CSS或者JavaScript操作这个标签时，就可以通过id属性来找到这个标签。
    • 当使用CSS或者JavaScript操作HTML标签时，如果标签中带有id属性作为唯一标识符，通过id属性可很方便的定位到该标签
    • 如果html文档中包含多个同名标签，利用id属性的唯一性，可以很方便的区分他们。
    • 示例：
<b id="url">https://www.bilibili.com/</b>
<a href="https://www.bilibili.com/" id="content">bilibili</a>
  1. `class·
  • HTML中的类属性，
  • 为标签定义名称(标识符)，不同的是class属性在整个html文档中不是唯一的，我可以为多个标签定义相同的class属性值，还可以为一个标签定义多个class属性值（他们之间需要使用空格隔开）
  • 当使用CSS或者JavaScript操作HTML标签时，同样可以使用class属性来找到对应的HTML标签
    • 由于class属性并不是唯一的，所以通过CSS或JavaScript对HTML标签的操作会作用于所有具有同名的class属性的标签上。
  • 示例：
<div class="Name1 Name2 Name3"></div>
<p class="cont"></p>
<div class="cont Name1"></div>
  • class="btn btn-success"：使用了Bootstrap框架的按钮样式。在Bootstrap中，btn 是按钮的基本类，而 btn-success 是表示按钮颜色的一个类，通常用于表示成功或积极的动作
    • 当这段代码在网页中渲染时，它将显示一个绿色的按钮，用户可以点击它执行某些操作。这个按钮的样式会根据Bootstrap框架的CSS样式表来确定。
  1. title
  • 用来对标签内容进行描述说明，当鼠标移动到该标签上面的时候会显示出title属性的值。
  • 示例：
  1. style
  • 为所有的标签定义CSS的样式，如设置颜色，字体
  • 示例：
<ul>
    <li style="color: aquamarine;">此文本的颜色为青色</li>
</ul>

标签属性

  • 通常为键值对形式出现，eg：color="red"
  • 属性只能出现在开始标签和自闭合标签内
  • 属性名字全部小写，属性值必须用单引或者双引包裹如属性名和属性值完全一样，直接写属性名即可

自闭合标签（单标签）

  • 没有单独的结束标签，而是在开始标签中添加/来进行闭合。
  • 自闭合标签不用包围内容，所以不需要单独的结束标签，只有少部分标签时自闭合标签。

html网页基本结构

在VSC中可以使用!（英文的）然后按 tab 键即可快速生成一个网页的基本结构

<!DOCTYPE html>
<html lang="en">
<!--

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

可以看到很多的<>包围起来的特殊标记，这就是HTML标签(Tag),浏览器识别这些标签来渲染出代码对应的效果，然后就构成了网页。
html代码要通过浏览器打开

基本标签

  1. <!DOCTYPE html>
  • 文件声明。声明此文档为html文档。
    • 该标签不区分大小写
  1. <html></html>
  • html网页的根标签，包含整个网页，所有代码都需要写在html中
  • lang为language缩写，en为english缩写，描述了当前页面是一个英语页面
    • 向搜索引擎表示该页面是html语言，并且语言为英文网站；你的页面如果是中文页面，可将其改为<html lang="zh">
    • 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这个就是让搜索引擎知道，你的站点是中文站还是英文站，对html页面本身不会产生影响
    • 有些浏览器打开该网页时，会根据系统语言（中文）和该网页语言（英语），提示用户是否把网页内容翻译成系统语言
  1. <head></head>
  • 表示头部信息，用于规定文档的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等
  1. <body></body>
  • 书写我们可以在网页的所看到的内容的代码，文档的主体部分，为可视化区域内容

头部标签

  • 在HTML中<head>标签是所有头部标签的容器，这些头部标签用来定义有关HTML文档的元数据(描述数据的数据)以及所需资源的引用（如CSS文件，JavaScript脚本），对文档能在浏览器中正确显示起到了非常重要的作用
  • 虽然头部标签是HTML文档的一部分，但是里面的内容并不会显示在浏览器中
  • 在<head>标签中可以使用的标签有
  1. <title>标签
    <title>标签是用来定义HTML中的标题的，只有包含<title>标签的文档才是一个有效的HTML文档。
    在HTML文档中只允许有一个<tilte>标签，并且<title>标签 必须放在<head>标签里。
    需要注意的是，<title>标签只能包含纯文本内容。<title>标签里面的内容不应该太长。
    示例
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这里存放了一个网页的标题</title>
</head>

作用:

  • 在浏览器标题栏或者任务栏中显示标题。
  • 当页面被添加到收藏夹(书签)时提供标题。
  • 在搜索结果中显示页面的标题。
  1. <base>标签
    用于为页面中所有相对链接指定一个基本链接，当设置了基本连接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀
    需要注意的是：<base>标签必须出现在任何引用外部资源标签之前，并且一个HTML文档只能存在一个<base>标签。
    示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>&lt;base&gt;标签演示</title>
    <base href="https://www.bilibili.com/">
</head>
<body>
    <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="html/index.html">HTML搜索</a></li>
    </ul>
</body>
</html>

如上述的示例中首页的<a>标签中的链接会变成"https://www.bilibili.com/index.html",HTML搜索的<a>中链接会变成"https://www.bilibili.com/html/index.html".
3. <link>标签
<link>标签大部分情况下都是用来引用外部CSS样式表，<link>主要包含两个属性:

  • rel：属性用来指示引用文件的类型。
  • href：属性用来设置外部文件的路径。
  • HTML文档<head>中可以有任意数量的<link>标签
    示例·
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../test1.css">
</head>
  1. <style>标签
    <style>标签可以在HTML文档中嵌入CSS样式，<style>标签定义的样式仅仅只对当前的HTML文档有效，代码如下:
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe {
            width: 550px;
            height: 500px;
        }
    </style>
</head>
  1. <meta>标签
  • <meta>标签可以提供关于HTML文档的元数据，如页面有效期，页面作者，关键字......，用于表示那些不能由其他HTML相关元素（<base>,<link>,<script>,<title>）之一表示的任何元数据信息
  • <meta>标签中定义的数据不会在页面显示，但是会被浏览器解析。属性说明如下：
    • charset：属性用来指定文档的编码，如<meta charset="UTF-8">
    • name：属性用来描述页面信息。
      • <meta name="viewport">
        • viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域。
    • <meta content="width=device-width, initial-scale=1.0">
      • 设置可视区和设备宽度等宽,，并设置初始缩放为不缩放。
  1. <script>标签
    在HTML文档可以在<script>标签中书写JavaScript脚本，示例如下:
<button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        let bts = document.querySelectorAll('botton')
        for (let i = 0; i < bts.length; i++) {
            bts[i].addEventListener('click', function () {
                document.querySelector('.pink').className = ''
                this.className = 'pink'
            })
        } 
 
    </script>
  1. <noscript>标签：
    如果浏览器不支持JavaScript脚本或者JavaScript被浏览器禁用时，在可以使用<noscript>标签来提供给用户提示，里面除了不可以包含<script>外，可以包含任何HTML元素
    示例
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <noscript>
        <h2>你的浏览器不支持JavaScript，或者禁用了javaScript</h2>
    </noscript>
</head>

HTML块级和内联标签

块级标签简介

块级元素的特点就是他们自己独占一行：有<div>,<p>,<h1>，<table>，<ol>，<ul>，<form>，<nav>，<aside>，<footer>，块级元素一般都具有特定的语义，可以使代码的可读性更强。

元素特点
  • 不用管换行，块级元素总是在新的一行上开始
  • 块级元素的宽度，高度以及外边距都可以，控制
  • 如果省略块级元素的宽度，那么他的宽度为浏览器窗口的默认宽度
  • 块级元素中可以包含其他内容和块级元素

内联（行内）标签简介

有<span>,<b>,<i>,<u>,<em>,<a>,<input/>,<img/>,<sub>,<sup>,内联元素往往带有特殊的显示效果，可以代替CSS样式

元素特点
  • 行内元素和其他元素在同一行上显示。
  • 行内元素的宽度，高度以及外边距和内边距都不可改变
    • 设置宽度width无效
    • 设置高度height无效，但可以通过line-height来设置行高
    • 设置margin外边距，只有左右margin有效，上下无效
    • 设置padding内边距，只有左右padding有效，上下则无效，注意元素范围是增大了，但是对元素周围的内容是没影响的
    • 可以通过display属性将元素在行内元素和块级元素之间切换。
  • 行内元素的宽度就是其中内容的宽度，且不可改变
  • 内联元素只能容纳文本或者其他内联元素
  • 一行放不下会自动放到下一行

块级标签

标题标签
  • <h1/~/6></h1/~/6>
  • <h1>标签的级别最高，<h6>标签的级别最低，通过这些标签可以定义网页的标签
  • 在网页上使用标签时，浏览器内置的样式会在每个标题上下添加一定的空白区域(外边距)，后续可以通过CSS中的margin来设置空白区域的大小。
  • 标签之间的内容会被视为标题
段落标签
  • <p></p>
  • 定义一个文本，将文档中的内容分割为若干个段落
  • 标签之间的内容会被视为段落
  • 浏览器内置样式会在段落上下自动添加一定的空白区域(外边距)，可以使用CSS中的margin属性来设置空白区域的大小
段落中的空格/换行
  • 默认情况下，段落标签会对文本中的空格符进行合并，将多个空格显示为一个空格的效果
    • 如果段落中出现多个连续的空格，浏览器会忽略这些空格只保留一个。
    • 如果段落中出现多个连续的行，浏览器会将这些换行转换成一个空格。
  • 在想要在段落标签中换行，需要专门的换行的标签<br>
列表标签
有序列表
  • <ol>+<li>标签
  • <ol>标签是用来表示有序列表，有序列表的每一项前面都会有一个数字表示这一项是这个列表的第几个。其中的<li>表示列表的每一项，前面默认使用阿拉伯数字
  • 一般都是<ol>和<li>一起出现，在有序列表中可以包含图片，文本，链接，另一个列表
  • 小技巧：ol>li*4+tab可以一次性生成标签
无序列表
  • <ul>+<li>标签
  • <ul>无序列表中没有顺序之分，每一项前面使用●表示，一般都是跟<li>标签配合使用的。其中<li>表示列表的每一项，前面使用●符号作为每一项的标记
排序属性
  • type="1/A/a/i(古罗马数字)/disc(实心圆)/circle(空心圆)/square(实心方块)"
  • start="x"
自定义列表
  • <dl>+<dt>+<dd>标签
  • 自定义列表标签用于一个术语名对应多重定义或者多个术语名同一个给出的定义
  • <dl>(总标签)<dt>(小标题) <dd>(围绕标题来说明)
  • 一般情况下，每个<dt>搭配一个<dd>,一个<dl>可以包含多对<dt>和<dd>
注意

<ul>/<ol>中只能放 <li>，不能放其他标签，而<dl> 中只能放 <dt> 和 <dd>，<li>中可以放其他标签。

div标签
  • <div>标签：含义为分割，实质上是大盒子，div 是独占一行的，用于网页布局（划分区域）

行内标签

span标签（文本标签）
  • <span>标签：含义为跨度，实质上是小盒子，span 是不独占一行的，用于网页布局
图片标签
  • <img>：单标签，用于定义一张图片
  • 专有属性：src;alt
    • src（必选属性）：source的简称，为<img>提供对应的图片路径
      • 可以使用相对路径、绝对路径、网页路径
      • 绝对路径：图片所在的完整磁盘路径。
      • 相对路径：以 html 所在位置为基准, 找到图片的所在路径。
      • 同级路径: 直接写文件名即可 或者 ./1.jpg
        • 下一级路径: image/1.jpg
        • 上一级路径: ../image/1.jpg
        • 同级路径：./image/1.jpg
      • 网络（网页）路径：通过http协议进行访问的图片路径。
    • alt（可选属性）：用来描述图像信息，当图像无法正常显示的时候就会显示alt里面的信息
  • 通用：
    • title: 提示文本，鼠标悬停放到图片上，就会有提示文字。
    • width/height: 控制宽度高度，高度和宽度一般改一个就行，另外一个会进行等比例缩放，否则就会图片失衡。
    • border: 边框，参数是宽度的像素。但是一般使用 CSS 来设定。
文本格式化标签
  • <b>：此标签用来加粗文本
  • <i>：此标签用来倾斜文本
  • <hr>：此标签用来设置分隔线
  • <strong></strong>：强调标签中的内容，并将字体加粗。
    • 默认情况下，<strong>和<b>标签都可以使文本以粗体展示其中的文本，但是<strong>标签是说明标签里内容具有很高的重要性，而<b>标签仅仅只是加粗并没有别的含义
  • <em></em>：强调标签中的内容，并使标签中的字体倾斜。
    • <em>标签具有强调的语义，用来表示内容的重要性，但是<i>标签仅仅只是用来定义斜体文本的。
  • <small></small>：定义标签中的字体为小号字体。
  • <sub></sub>：定义上下标文本。
  • <sup></sup>：定义上标文本。
  • <ins></ins>：定义文档的其余部分之外的插入文本。
  • <del></del>：在文本内容上添加删除线。
  • <code></code>：定义一段代码。
  • <kbd></kbd>：用来表示文本是通过键盘输入的。
  • <samp></samp>：定义程序的样本。
  • <var></var>：定义变量。
  • <pre></pre>：定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体。
  • <abbr></abbr>：用来表示标签中的内容为缩写形式。
  • <address></address>：用来定义文档作者的联系信息，被该标签包裹的文本通常会以斜体呈现，并在文本前面换行。
  • <bdo></bdo>：定义标签中的文字方向。
  • <blockquote></blockquote>：定义一段引用的文本，例如名人名言，文本会以换行输入，并在左右两边进行缩进。
  • <q></q>：定义一段短引用，浏览器会将引用的内容使用双引号包裹起来。
  • <cite>...</cite>：表示对某个文献的引用，例如书籍或杂志的名称，文本会以斜体显示
注释标签、
  • <!-- ... -->
  • ...中为注释内容
  • 快速注释法：在vscode里，使用ctrl + /即可快速注释代码
超链接标签
  • <a></a>：用于定义一个超链接
  • <a>和</a>之间的内容可以是图片，文本，内容被<a>标签覆盖后只要点击就可以跳到<a>标签href填写的网址处。
  • 默认样式：
    • 鼠标样式：鼠标移入链接区域时，变成一只小手；移出链接区域时，变回箭头形状。
    • 颜色及下划线:超链接被点击之前为蓝色，超链接被点击之后为紫色。超链接默认带有下划线，下划线颜色和文本颜色保持一致。
  • href属性：提供链接地址(URL)
    • href本质上就是指向一个文件，这个文件可以随便格式，只要是浏览器支持此文件，那么他就可以在浏览器上显示，如果浏览器不支持这个格式，那么就提示用户下载
    • 外部链接: href 引用其他网站的地址
    • 内部链接: 网站内部页面之间的链接(写相对路径即可)
    • 空链接: 使用 # 在 href 中进行占位
    • 下载链接: href 对应的路径是一个文件(可以使用 zip 文件)
    • 网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
      • <a href="http://www.sogou.com"><img src="1.jpg" alt=""></a>
    • 锚点链接: 可以快速定位到页面中的某个位置
      • <a href="#one">第一集</a><p id="one">第一集剧情 </p>
    • 禁止 a 标签跳转: <a href="javascript:void(0);">或<a href="javascript:;">
  • target（可选属性）：用来指定在浏览器中打开的方式
    • 没有设置target属性的话那么就是浏览器默认的打开方式，如果设置了的话那就是按照对应的方式打开
    • 属性值：
      • _self:默认，在点击链接的窗口处打开，原来的窗口被覆盖
      • _blank:新建一个窗口里面的内容就是点击链接的网页
      • _parent:在当前框架的上一层打开新的页面
      • _top:在顶层框架中打开新页面
文字标签

元素转换

  • 很多时候我们可以借助CSS改变元素，我们可以通过CSS中的display属性将块级元素改为内联元素，或者将内联元素修改成块级元素，或者两者优点都保存，将标签设置为行内快元素。
  • 虽然CSS可以改变标签显示的类型，但是不能改变标签的语义
    示例
    <title>Document</title>
    <style>
        div {
            background-color: rgb(116, 209, 40);
        }
 
        p {
            background-color: red;
        }
 
        span {
            background-color: aqua;
        }
    </style>
<body>
    <span>(第一个span)</span>
    <span>(第二个span)</span>
    <p>(第一个p)</p>
    <span>(第三个span)</span>
    <div>
        <span>(div里的span)</span>
        <p>div里的p</p>
    </div>
    <span>(最后一个span)</span>
</body>

HTML转义

字符 转义字符
" &quot;
& &amp;
< &lt;
> &gt;
空格 &nbsp;
全角空格（宽度刚好一个中文宽度） &emsp;
©版权 &copy;
￥ &yen;
®已注册 &reg;
± &plusmn;

其他常见双标签

  1. <picture></picture>
  • 按照比例来放大或缩小图片的尺寸以适应不同的设备
    设置宽度和高度
    width;hight与style属性
  • 默认情况下这些属性都是以像素为单位
  • width和height只是临时修改图片的尺寸，并不会改变图片原始文件的大小
  • 示例：
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w=195&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" 
alt="此图片加载成功了？？" title="此图片加载成功了" 
width="150" height="150">

<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.EpxMzbWHD39VZ-nmL0fs4AHaFj?w=195&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
alt="此图片加载成功了？？" title="此图片加载成功了" 
style="width: 150;height: 150;">
  • 一般建议为图片设置width和height属性，以便浏览器可以在加载图片之前为其分配足够了空间，否则图片加载过程可能会到最后网页布局失真或闪烁
  • 如果页面使用了响应式布局(自适应布局)，建议在上图图片之前裁剪好尺寸，不要设置width和height属性，，这样图片会跟着屏幕的宽度自动改变尺寸，从而不会变形，或者超出屏幕宽度
  • 可以包含<source>标签
  • 通过<soucre>标签的media属性可以==设定匹配条件=
  • 通过srcset属性可以定义图片的路径，另外，在<picture>标签的最后还需要定一个<img>标签
  • 示例
<picture>
    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="C语言中文网默认Logo">
</picture>
  • 浏览器将评估每个<source>标签，并选择最合适的<source>标签，如果没有找到匹配项，则使用<img>标签所定义的图片
  • 另外<img>必须是<picture>标签的最后一个元素

图片映射

图像映射允许在一个图片中定义超链接，其实就是在图像中划分一些区域，并在这些区域定义超链接

  • 示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./img/06EE610BCC0208A67AFC6C4FB2DF97A2.jpg" usemap="#objects" alt="bilibili">
    <map name="objects">
        <area shape="rect" coords="0,0,82,126" href="https://www.bilibili.com/" alt="首页">
        <area shape="circle" coords="90,58,3" href="https://www.bilibili.com/anime/?spm_id_from=333.1007.0.0" alt="动漫">
        <area shape="circle" coords="124,58,8" href="https://game.bilibili.com/platform/?spm_id_from=666.4.0.0" alt="游戏">
    </map>
</body>
</html>
  • <map>标签的name属性对应<img>标签的usemap属性，<area>标签用于定义图片可以点击的位置(区域)，不仅如此还可以再一张图片中定义多个可点击区域。
  • shape和coords属性：
    • 在<area>标签中可以通过shape属性来定义可点击区域的形状，并通过coords属性来定义==形状所对应的坐标=
    • 其中shape属性的可选值
      • rect(矩形)，circle(圆形)和poly(多边形)
    • coords属性中坐标的值取决于可点击区域的形状。
posted @   micryfotctf  阅读(5)  评论(0)  编辑  收藏  举报
相关博文：
· HTML2
· web知识点
· HTML基础
· 01【HTML基础】
· 初识HTML
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae