HTML元素及路径2

用户1869955981204
114 阅读4分钟

路径的写法

站外资源和站内资源

站内资源：当前网站里的资源。

站外资源：非当前网站里的资源。

绝对路径和相对路径

  1. 绝对路径书写格式：
协议名://主机名:端口/路径

schema://host:port/path

协议名：http，https，file（一般通过资源管理器打开的本地文件）

主机名：域名，IP地址

端口号：如何协议是http，端口号默认是80。如果协议是https，端口号默认是443。

当跳转目标和当前页面的协议相同时，可以省略协议，主机名相同，主机名也可以省略，端口相同，端口也可以省略。

  1. 相对路径的书写方式

以 ./ 开头， ./ 表示当前资源所在的目录。

可以书写 ../ 表示返回上一级目录。

相对路径中：./ 可以省略。

图片元素

img 元素

image 缩写，是一个空标签。

src属性：source

alt属性：当图片资源失效时，会显示alt文字代替图片。

和a元素连用

<!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>
    <a href="https://baidu.com">
        <img src="./img//99201b26f2834a6c9d98cbda3ab9bd4a.webp" alt="">
    </a>
</body>

</html>

需要点击图片中的某一个地址跳转

需要使用map元素，通过map元素的name属性，和img元素的usemap属性，将img元素和map元素联系起来。

划分地图区域：使用map的子元素。area

<!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>
    <a href="https://baidu.com">
        <img usemap="#imgMap" src="./img//99201b26f2834a6c9d98cbda3ab9bd4a.webp" alt="">
    </a>

    <map name="imgMap">
        <!-- shape:矩形、圆形、多边形  coords:坐标  href:链接地址  alt:提示文字  target:打开链接的方式 -->
        <!-- coords: x,y,圆的半径  坐标(以图片为参考，原点再图片的左上角，想右x增加，向下y增加，可以使用截图工具去量) 
            rect 如果时矩形的话，要告诉呀左上角和右下角的坐标
            poly 如果时多边形， 需要一次去描述每一个点的坐标
         -->
        <area shape="circle" coords="399,223," href="" alt="" target="_blank">
    </map>
</body>

</html>

figure元素

通常用于把图片，标题，描述等元素包裹起来。这样浏览器或者搜索引擎就知道这些描述，标题是和这个图片相关的。

figcaption元素：是figure的子元素，用来包裹标题。

多媒体元素

video:视频

audio:音频

video

属性：

  • src：视频地址，可以是站内资源，也可以是站外资源。

  • contols：控制控件的显示。取值只能是controls。

    某些属性只有两种状态：1.不写 2.取值为属性名，这种属性叫做布尔属性。布尔属性在html5中可以不用书写属性名。

  • autoplay：布尔属性，表示自动播放。（有些浏览器默认设置了不会自动播放，需要加上muted属性才可以）

  • muted：布尔属性，表示静音播放。

  • loop：布尔属性，表示循环播放。

audio

跟视频是一样的，只有标签名不同。

兼容性

  1. 旧版本浏览器不支持这两个元素。
  2. 不同浏览器支持的音视频格式可能不一致

视频格式：mp4 webm 为了做兼容性，一般需要做两个视频出来。


    <!-- 做兼容处理 -->
    <video style="width: 500px;">
        <source src=" " type="video/mp4">
        <source src=" " type="video/ogg">
        <source src=" " type="video/webm">
        您的浏览器不支持 video 标签。
    </video>

音频格式：mp3

列表元素

有序列表

ol：ordered list

li：list item

属性：

type：1|i(罗马数字)|a(使用字母)|A(使用大写的字母) type属性除非是非常重要的东西，比如说法律文献等，否则推荐使用css的 list-style-type 属性来控制。

reversed：反序

<body>
    把大象装冰箱总共要几步？

    <ol>
        <li>打开冰箱</li>
        <li>大象进去</li>
        <li>关闭冰箱</li>
    </ol>
</body>

无序列表

把ol改成ul

ul:unoedered list

无序列表常用于制作菜单 或 新闻列表。

<body>
    美女的择偶标准？
    <ul>
        <li>长得帅</li>
        <li>个子高</li>
        <li>有钱</li>
    </ul>
</body>

定义列表

通常用于一些术语的定义。

dl：definition list

dt：definition title

dd：definition description

<body>
    html中的术语：

    <dl>
        <dt>html</dt>
        <dd>超文本标记语言</dd>
        <dt>css</dt>
        <dd>层叠样式表</dd>
        <dt>js</dt>
        <dd>javascript</dd>
    </dl>
    </dl>
</body>

容器元素

容器元素：该元素代表一个块区域，内部用于放置其他元素。

div

没有语义。

语义化容器元素

header:通常用于表示页头，也可用于表示文章的头部。

footer：通常用于表示页脚，也可用于表示文章的尾部。

nav：导航菜单

article：通常用于表示整篇文章。

section：通常用于表示文章的章节。

aside：通常用于表示侧边栏。

元素的包含关系

以前说法：块级元素可以包含行级元素，行级元素不能包含块级元素， a元素除外（行级元素）

现在的元素包含关系，由元素的内容类别决定。

如何查看是否可以包含？

以h1元素为例，搜索 h1 mdn

image.png

总结：

  1. 容器元素可以包含任何元素。
  2. a元素几乎可以包含任何元素。
  3. 某些元素有固定的子元素（ul，ol，dl）。
  4. 标题元素和段落元素不能互相包含，并且不能包含容器元素。
avatar
文章
阅读
粉丝