记录下关于h5相关的一些认识

a

a（锚元素 用处很多啊，详细看看吧

默认样式

a元素默认样式添加了下划线并且颜色为蓝色以及添加了鼠标pointer样式，那么可以通过以下代码消除默认样式

1
2
3
4
5
a {
        text-decoration: none;
        color: xxx;
        /* 鼠标样式没必要消除，颜色随个人爱好而改变吧 */
}

href

href是最重要的属性，基本都是跳转页面

  • 使用文档片段链接到页面的某一段
  • 使用文本片段链接到某一段文字
  • 使用媒体片段链接到某个媒体文件
  • 使用 tel: URL 链接到一个电话号码
  • 使用 mailto: URL 链接到一个邮箱地址

页面锚点跳转

就此想到了这个用别人主题搭建的博客，通过md文件较好地对文章各属性进行了声明，很容易与html元素进行对应，然后就看了下页面锚点的跳转，果然是用a标签的，大致记录下对应的代码吧，感觉挺经典的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      h1,h2,h3 h4 {
        position: relative;
        width: fit-content;
      }
	  a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <article>
      <h1 id="h1">
        h1
        <a href="#h1"></a>
      </h1>
      <h2 id="h2">
        h2
        <a href="#h2"></a>
      </h2>
    </article>
  </body>
</html>

download

对href如果指定了相关资源，并添加了download属性，那么就会触发下载行为，可以设置download的值为下载文件的名字，如果没设置值，浏览器会从多个来源决定文件名和扩展名

referrerpolicy

毕竟是跳转，那么也有对应的跳转策略，来规定是否发送ref表头，对应的看mdn

target

默认当前页面加载，也可以使用 _blank 新打开页面，也就这两个用的最多

语义信息元素

感觉像header、main、footer以及article、section等这些标签更多的意义是在代码中明确其具体语义，表示这些元素的内容是什么，更方便阅读（不然写一堆div看起来确实不太舒服

  • 使用 表示强调或重读。
  • 使用 表示重要性。
  • 使用 表示相关性。
  • 使用 标记著作名，如一本书、剧本或是一首歌。
  • 使用 标记术语的定义实例。

audio

经典属性

  • autoplay
  • controls：声明会显示控制面板，不声明就不会显示音频，在界面上看不到
  • crossorigin：跨域的一些配置
  • loop
  • muted
  • src：视频源，也可以使用 元素来进行描述描述

事件

query到元素后的事件，那就是差不多配合按钮点击后播放暂停呗。

button

属性

  • disabled：是否禁用（不让输入
  • 表单相关
    name type value

canvas

画布，并通过使用HTMLCanvasElement.getContext()获得一个绘图上下文并开始绘制

文档元素

html中还包括了相当多的…呃…文档元素吧，像caption、cite等之类的元素，就很word？

detail

通过summary设置detail的标题
点击元素展开后会为元素新增open属性，可以通过 detail[open]选中展开后的detail元素

dialog

  • open：指示这个对话框是激活的和能互动的。推荐使用 .show() 或 .showModal() 方法来渲染对话框，而不是使用 open 属性。
  • 元素可关闭含有属性 method="dialog" 的对话框。当提交表单时，对话框的 returnValue 属性将会等于表单中被使用的提交按钮的 value。

em i

和 都对文字斜体化。区别：

  • 标签表示其内容的着重强调，而 标签表示从正常散文中区分出的文本

figure

可附标题内容元素，主要还是表示图像吧。再里面加img和figcaption表述更加清晰

form

内容较重要且多，mdn

iframe

能够将另一个 HTML 页面嵌入到当前页面中

img

  • src
  • alt：对图像的文本描述，对无障碍而言，它难以置信地有用

图像加载错误

如果在加载或渲染图像时发生错误，且设置了至少一个 onerror 事件处理器来处理 error 事件，那么设置的事件处理器就会被调用。

input

  • type： 的工作方式相当程度上取决于 type 属性的值，默认为text（好多类型啊
    内容较多且重要，详见mdn input

label

progress

进度条

  • max
  • value

track

元素 被当作媒体元素—