JayFate 的个人博客

# html 基础

# 1.html5 语义化标签

# 为什么需要语义化

  • 易修改、易维护。
  • 无障碍阅读支持。
  • 搜索引擎友好，利于 SEO。
  • 面向未来的 HTML，浏览器在未来可能提供更丰富的支持。

常见的语义化标签：

  • header：<header>有两种用法，第一是标注内容的标题，第二是标注网页的页眉
  • nav: 导航栏，侧边栏
  • aside：附注，侧栏
  • footer：页脚
  • main：页面主体区域
  • article：文章

# 结构语义化

语义元素均有一个共同特点——他们均不做任何事情。换句话说，语义元素仅仅是页面结构的规范化，并不会对内容有本质的影响。

下图展示了一个典型的页面结构。

典型的文档结构

<header>元素有两种用法，第一是标注内容的标题，第二是标注网页的页眉，如上图你看到的那样。除非必要（内容标题附带其它信息的情况下：发布时间、作者等），一般不在内容中使用<header>。因而，网页中可以包含多个<header>元素。按照 HTML5 的规定，<header>都应包含某个级别的标题，所以应隐式或显式地包含标题，通常将不希望显示的标题设置为display: none;，一方面遵守规范，另一方面则提供了无障碍阅读而不至于影响到页面设计。

导航栏使用<nav>看起来是理所当然的，进一步，它也用于一组文章的链接。一个页面可以包含多个<nav>元素，但通常仅仅在页面的主要导航部分使用它。《HTML5：The Missing Manual》中指出了在侧栏使用<nav>标签的两个案例：

<!-- 案例一 -->
<nav>
  <!-- 此处是链接 -->
  <aside></aside>
  <aside></aside>
</nav>

<!-- 案例二 -->
<aside>
  <nav>
    <!-- 此处是链接 -->
  </nav>
  <section></section>
  <div></div>
</aside>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如果侧栏中包含其它不同于链接的其它区块，那么，使用第二种方案显然更为合适。

导航通常包含一组链接，普遍认为，链接使用列表来组织。

<nav>
  <ul>
    <li><a href="#" title="链接">链接</a></li>
    <li><a href="#" title="链接">链接</a></li>
    <li><a href="#" title="链接">链接</a></li>
  </ul>
</nav>
1
2
3
4
5
6
7

# aside

<aside>元素并不仅仅是侧栏，它表示与它周围文本没有密切关系的内容。文章中同样可以使用<aside>元素，来说明文章的附加内容、解释说明某个观点、相关内容链接等等。

当<aside>用于侧栏时，其表示整个网页的附加内容。通常的广告区域、搜索、分享链接则位于侧栏。侧栏中的<section>元素规定了一个区域，通常是带有标题的内容。

<section>标签适合标记的内容区块：

  • 与页面主体并列显示的小内容块。
  • 独立性内容，清单、表单等。
  • 分组内容，如 CMS 系统中的文章分类区块。
  • 比较长文档的一部分，可能仅仅是为了正确规定页面大纲。

<div> 标签依然是可用的，当你觉得使用其它标签都不太合适的时候。新的语义元素出现之前，我们总是这么干的！

同可“包罗万象”的<header>元素不同，标准规定<footer>标签仅仅可以包含版权、来源信息、法律限制等等之类的文本或链接信息。如果想要在页脚中包含其它内容，可以使用熟悉的<div>来帮忙。

<div>
  <aside>
    <!-- 其它内容 -->
  </aside>

  <footer>
    <!-- 法律、版权、来源、联系信息等 -->
  </footer>
</div>
1
2
3
4
5
6
7
8
9

# main

在早先的 HTML5 版本中并没有规定页面主体的标签，相关的书中经常会说：除去头部、尾部、侧栏等其它部分，剩下的自然是主体部分。

然而，HTML5.1 中规定了一个<main>标签来标识主体内容。<main>标签不能包含在页面其它区块元素中，通常是<body>的子标签，或者是全局<div>的子标签。<main>标签可以帮助屏幕阅读工具识别页面的主体部分，从而让访问者迅速得到有用的信息。

# article

<article>表示一个完整的、自成一体的内容块。如文章或新闻报道。<article>应包含完整的标题、文章署名、发布时间、正文。当语义与表现发生冲突，例如有时需要将文章分多个页面显示，那么需要把每个页面的文章区域都用<article>标记。

文章中包含插图时，使用新的语义元素<figure>标签。

<article>
  <h1>标题</h1>
  <p>
    <!-- 内容 -->
  </p>
  <figure>
    <img src="#" alt="插图" />
    <figcaption>这是一个插图</figcaption>
  </figure>
</article>
1
2
3
4
5
6
7
8
9
10

上述情况下，<figcaption>包含了关于插图的详细解释，则<img>的alt属性可以略去。

# 2.meta viewport 的作用

# meta 标签

要回答这个问题，首先我们要知道什么是 meta 标签：

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

上面的文字摘自 w3cschool 中文版中对 meta 标签的描述。通过这句话可以知道，meta 标签主要用于描述页面的一些信息。

通过查阅文档，我们可以知道 meta 标签提供三个参数

  • name
  • http-equiv
  • content
  • scheme

其中 content 是对另外两者的描述，类似于 json 中键值对的形式，而 scheme 定义用于翻译 content 属性值的格式。

我们来看一个基本的 meta 标签。

<meta name="keywords" content="html,css,javascript,vue" />
1

这个标签描述了网页的关键字有 html，css，javascript 和 vue。

有兴趣详细了解的童靴可以看看这里 (opens new window)。

# viewport

知道了什么是 meta 标签，我们可以来看看 viewport 了：viewport 是 meta 标签的 name 属性中可选值中的一个，指 web 页面上用户可见的区域，用于移动端页面设计，代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
1

当然，很多小伙伴平时可能有使用过这段代码，却没有探究过它的原理：为什么使用了这段代码，就能进行响应式开发了？

要回答这个问题，我们先来看看曾经的前端移动开发面临的困境：

由于一开始的网页主要只是用于在 PC 上展示，所以开发者们并没有过多考虑关于移动端访问的问题，但随着移动端的兴起，越来越多的 Web 访问变成了通过移动端进行的。而由于 PC 端的 viewport 比移动端大，所以为了解决这个问题，浏览器只能的等比的缩小整个页面，导致页面的字体，图片等等都显得非常小，而由于 PC 端的 viewport 是横屏的（宽大大于高），而移动端是竖屏，所以用户放大网页之后还会出现横向的滚动条，这一系列都让用户体验相当不好。 所以为了解决上面的问题，最早由 Apple 在 Safari iOS 中引入了 viewport meta 标签，让 Web 开发人员控制视口的大小和比例。

让我们再来看看一开始的设置：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
1
key mean example
width 视口的宽度 width=device-width 指缩放为 100% 时以 CSS 像素计量的屏幕宽度
initial-scale 初始化缩放比例 initial-scale=1.0 初始化不进行缩放
maximum-scale 用户最大缩放比例 maximum-scale=1.0 不允许用户缩放

看到这，相信你已经明白，meta viewport 是用来做什么的，应该怎么写了。

# 3.<label>标签的用法

在 html 中，<label>标签通常和<input>标签一起使用，<label>标签为 input 元素定义标注（标记）。

<label>标签的作用是为鼠标用户改进了可用性，当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；

<label>标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击单选按钮或复选按钮的文本也是可以选中的。

# 4.a 标签禁止跳转

  • 方法一：标签属性 href，使其指向空或不返回任何内容
<a href="javascript:void(0);">点此无反应javascript:void(0)</a>
<a href="javascript:;">点此无反应javascript:</a>
1
2
  • 方法二：标签事件 onclick，阻止其默认行为
<a href="" onclick="return false;">return false;</a>
<a href="#" onclick="return false;">return false;</a>
1
2

注意：只有一个 href="#"是不可以的

a 标签作为锚点

<a href="#top">跳转到页面 id 为 top 的元素</a>
1

# 5.canvas 的宽高

canvas 在标签上设置宽高和在 style 中设置宽高的区别

在 canvas 中设置宽高，相当于使用鼠标拖动了画布的边框使画布变大，但是里面的内容不会变化。

在 style 中设置了宽高，相当于对整个 canvas 进行等比例缩放，使得里面的内容也会跟着变化。

初始状态

image

在标签上设置宽高

image

在 style 里设置宽高

image-20220224212702991

# 6.iframe 的优点与缺点

iframe 的优点与缺点 (opens new window)

# 7.HTML5 新特性

  1. 语义标签
  2. 增强型表单
  3. 视频和音频
  4. Canvas 绘图
  5. SVG 绘图
  6. 地理定位
  7. 拖放 API
  8. WebWorker
  9. WebStorage
  10. WebSocket

十个 HTML5 新特性 (opens new window)

# 8.浏览器如何管理和加载离线资源？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。

如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件。

如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。

# 9.<!DOCTYPE html>的作用

1、定义：

DOCTYPE 标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该按照什么样的文档类型定义（DTD）来解析文档。

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于<html>标签之前。

2、作用：

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

document.compatMode：

BackCompat：怪异模式，也称混杂模式，浏览器使用自己的怪异模式解析渲染页面。默认，不同的浏览器就会显示不同的样式。

CSS1Compat：标准模式，也称严格模式，浏览器使用 W3C 的标准解析渲染页面。所有的浏览器的显示相同。

区分：

浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

（1）严格 DTD ——严格模式

（2）有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式

（3）DTD 不存在或者格式不正确——混杂模式

HTML5 没有严格和混杂之分

3、使用方式：

HTML 5：

<!DOCTYPE html>

# 参考

在线客服