HTML常用标签

TML常用标签有：a标签、table标签、img标签、form标签和input标签。

a标签

作用

跳转到外部网页
跳转到内部锚点
跳转到邮箱或电话等

属性

（一）href

href是hyper reference的缩写，超链接的意思。

用于指定链接目标的ur地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能；
href=“#”表示这是一个空链接；
如果href里面地址是—个文件或者压缩包,会下载这个文件。

<a href="https://google.com">超链接到google网站的主页</a>
 <a href="https://google.com">超链接到google的主页</a>
 <a href="//google.com">超链接到google的主页</a>

展现形式：

点击此链接，即可到达google的主页

a标签href的取值：

1、上述代码中的网址的取值(推荐使用第三行的代码)

<a href="//google.com">超链接到google的主页</a>

由于此方式能够自动补齐相关的网络地址，前面两种写错就会报错，所以推荐使用。

2、路径

/a/b/c 或者是a/b/c

当前路径下的a里面的b，b里面的c

index.html 以及./index.html

在当前目录下寻找index.html文件

3、伪协议

javascript：代码；（冒号与分号一定要写）

<a href="javascript：;">点击后无任何点击或刷新等动作的反应</a>

锚点链接

<a href="#要跳转的元素的id"></a>

点击链接的时候，会跳转到指定元素所在的位置。

mailto：邮箱

<a href="mailto:abcdefg@163.com ">发邮件给我</a>

tel：手机号

<a href="tel:12345678901">打电话给我</a>

（二）targe

用于指定链接页面的打开方式

a的target取值

1、内置名字

_blank 在空白页打开

_self 在当前页面打开

_parent 在父级窗口打开

_top 在最顶级的窗口打开

<a href="//google.com" target="_blank">超链接到google网站的主页在空白页打开</a>

2、程序员的命名

window：name（在xxx页面打开）

iframe的name（iframe现在已经很少使用了，是指内嵌窗口）

（三）download

下载页面，但目前很少用，有的浏览器不支持，尤其是手机浏览器可能不支持。

table标签

1、table标签的语法：

thead:表头

tbody:表的内容，用于定义

tfoot:表的脚部

tr:table row,表格里的行

th:表格的表头部分，其中的文本内容字体加粗居中显示

td:table data,表格数据，用于定义表格中的单元格

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小黄</th>
          <th>小蓝</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>90</td>
          <td>60</td>
          <td>80</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>88</td>
          <td>95</td>
          <td>97</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>88</td>
          <td>95</td>
          <td>97</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总分</th>
          <td>266</td>
          <td>250</td>
          <td>274</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

第一行的th标签为空

2、table的样式

table-layout：auto；自动计算每一行的宽高

table-layout：fixed；通过列表的宽度来决定平均宽度

border-collapse：collapse；合并边框(默认边框与边框之间不合并)

border-spacing：0；边框为0.(边框与边框之间的距离)。

img标签（图片）

作用：发出get请求，展示一张图片。

<img src="1.JPG" alt="头像" width="400" />

当前路径下的1.jpg，确定宽度为400，只写宽度高度会自适应

属性

alt：alternate的缩写，替换的意思。替换文本，图像不能显示的文字。

路径错误显示alt内容

title：提示文本。鼠标放到图像上，显示的文字。

响应

max-width：100% 所有的图片在手机上都自适应宽度，宽度最大为100%。

事件

onload/onerror 监听图片是否加载成功，加载成功时用onload，不成功是用onerror事件。确保在onerror事件能够补救。

<body>
 <img id="xxx" src="dog.jpg" alt="一只小狗">
<script>
xxx.onload = function () {
console.log("图片加载成功");
 };
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/404.jpg";
 };
</script>
</body>

监听成功时，打印出成功

监听失败时，先打印出监听失败并且开始执行加载失败是的挽救图片。404.jpg文件执行

感想：

a标签的默认样式可以设置清除，href属性可以有好多种取值，a标签的意义也不仅仅是跳转到一个网址，还可以发邮件打电话。
给img标签设置宽度和高度时，不能让图片变形
table标签必须按照thead,tbody,tfoot的结构去写，先划分好结构，再往里填充内容，即使tfoot写在前面，也会显示在页面的尾部

本文为作者本人的原创文章，著作权归作者本人和饥人谷所有，转载务必注明来源。

们先来看个例子：

在这个网页中，同时在一个页面中展示了三个网站：千锋教育官网、千锋教育HTML5大前端官网、千锋教育HTML5大前端好程序员官网。这是如何做到的呢？

其实也不难，使用 iframe 就可以实现了。 iframe的作用是，用来在一个网页中显示另一个网页。

iframe 是个双标签，基本语法为：尖角号iframe，尖角号 /iframe。

iframe 标签有五个基本属性：

src 属性，资源的意思，用以引入其他网站的页面，值是一个页面路径。

width 属性，宽度的意思，用以控制引入页面的宽度，值是一个数字。

height 属性，高度的意思，用以控制引入页面的高度，值是一个数字。

frameborder 属性，框架边框的意思，默认引入的框架带有边框，通常情况下将该属性值设置为0，来取消框架的边框。

scrolling[ˈskrəʊlɪŋ] 属性，滚动的意思，用来控制是否显示框架的滚动条，值有三个：

auto，在需要的情况下出现滚动条，也是默认值。

yes，始终显示滚动条。

no，从不显示滚动条。

我们来做个例子。

打开编辑器，新建一个 iframe-demo.html 文件，补全基础代码，在 body 里添加 iframe 标签，首先定义 src 属性，值为 http://www.qfedu.com，frameborder 属性的值设置为1，显示边框。保存页面。

在浏览器中打开页面。千锋教育的官网在 iframe 的默认大小的窗口里显示了。

返回编辑器，给 iframe 定义属性 width 等 800，height 等于 600，保存。

回到浏览器，刷新，iframe 的窗口变大了。可以通过滚动条查看网站内容。

返回编辑器，如果给iframe 定义一个scrolling 属性，值为 no 的话，滚动条就不见了。

回到浏览器，刷新。此时就不能查看窗口隐藏的内容了。

iframe 也可以作为一个链接的目标框架。链接的 target 属性必须设置为 iframe 的 name 属性。

比如给 iframe 定义 name 属性的值为 iframe_a，链接 a 的 target 属性值也设置为 iframe_a。这样，当点击链接时，千锋教育的官网就在这个 iframe 窗口里打开了。

我们再来看个例子，当点击三个链接，iframe 里显示了相应链接的网站。

我们来实现这个例子。

回到编辑器，创建一个 iframe-example.html 文件，补全基本代码，在 body 里添加一个 div 容器，在容器里添加一个 iframe，定义属性 src 等于 http://qfedu.com，width 等于 800，height 等于 600。保存。

在浏览器中打开页面，一个 iframe 框架做好了。

回到编辑器，在 body 里的第一行再添加一个 div 容器，在容器里书写 emmet 命令：a 中括号 href 空格 target 等于 iframe_a 大于号 b 乘以 3， a[href target=iframe_a]>b*3 按下 tab 键自动补全代码。很明显，这不是我们要的代码。

这怎么办呢？聪明的你一定想到了，在小学数学里，通过添加小括号来设置运算优先级的法则。

我们在 a 的前面，b 的后面填上一对括号， (a[href target=iframe_a]>b)*3 我们把这个 emmet 放到注释里保存一下。

将光标移至 emmet 语句的结尾，按下 tab。期望的代码生成了。

如果你是完美主义者，这个代码你也不满意，能不能换行显示三个 a 标签呢？大家跟我一起做：

点击 VSCode 左下角的齿轮图标，再点击设置，打开设置窗口。

点击扩展菜单，再点击 emmet，找到 Syntax(森太课思) Profiles，在 settings（赛ten 思）.json 中编辑。

在这里输入 html 冒号大括号，在大括号里写入 inline_break 冒号 2，表示标签数大于两组，就折行显示。

"html": {

"inline_break": 2

关闭设置。

把刚才保存的 emmet 命令再拷贝过来，按下 tab 键，完美的代码生成了！

给三个a 标签填好链接地址和文本内容。

这里需要注意，a 链接的地址可以是互联网的网站地址，也可以是你自己制作的本地页面地址，这些页面都可以在 iframe 中显示。

我们发现三个链接的target属性都指向了同一个iframe。保存一下页面。

回到浏览器，刷新。分别点击三个链接，iframe 里分别显示了三个网站的页面。

文章配套视频链接「链接」

s 双冒号(::)运算符：一场对静态方法和属性的探索

引言

在前端开发领域，JavaScript作为Web的核心语言之一，其重要性不言而喻。随着ES6及后续版本的推出，JavaScript引入了许多新特性，极大地丰富了语言的表达能力和功能。本文旨在探讨一个相对较少被提及的特性——双冒号(::)运算符，它用于访问类的静态成员。虽然这个特性尚未在所有环境中得到广泛支持，但了解它有助于我们更好地理解JavaScript的未来发展方向以及如何利用这些新特性优化我们的代码。

技术概述

双冒号运算符是ECMAScript提案的一部分，旨在为JavaScript类提供更直观的静态方法和属性访问方式。这个运算符允许我们在类的实例上调用静态方法或访问静态属性，这在其他面向对象的语言中是很常见的做法。

核心特性和优势

直观的静态成员访问：无需通过类名直接调用，而是可以通过实例引用，使得代码更加灵活和易读。
封装性增强：静态成员的访问更加自然，有助于封装和模块化代码。
减少全局污染：不需要将静态方法暴露为全局函数，降低了命名冲突的风险。

代码示例

class MyClass {
  static myStaticMethod() {
    return 'Called static method';
  }

  static myStaticProperty = 'Static property value';
}

const instance = new MyClass();
console.log(instance::MyClass.myStaticMethod()); // 'Called static method'
console.log(instance::MyClass.myStaticProperty); // 'Static property value'

技术细节

双冒号运算符的实现涉及到JavaScript引擎对类和原型链的理解。当使用::运算符时，JavaScript引擎会在类的构造函数上查找静态方法或属性，而不是在实例的原型链中查找。

特性分析

这个特性的一个关键点在于，即使是在类的实例上调用了静态方法或属性，JavaScript引擎仍然能够正确地找到这些静态成员。这对于那些习惯了在实例上调用静态方法的开发者来说是一个福音，因为它提供了与许多其他面向对象语言相似的行为。

难点

然而，这个特性也带来了一些挑战。例如，由于并非所有JavaScript环境都支持双冒号运算符，因此在生产环境中使用它可能会导致兼容性问题。此外，过度依赖此类特性可能会使代码难以维护，特别是对于那些不熟悉这一特性的开发者。

实战应用

在实际项目中，我们可以利用双冒号运算符来简化静态成员的调用，尤其是在处理复杂的类层次结构时。例如，在一个游戏引擎中，我们可能有一个Game类，其中包含多个静态方法用于初始化和配置游戏设置。

代码示例

class Game {
  static initialize(config) {
    // 初始化游戏配置
  }

  static start() {
    // 开始游戏
  }
}

const gameInstance = new Game();
gameInstance::Game.initialize({ width: 800, height: 600 });
gameInstance::Game.start();

优化与改进

虽然双冒号运算符为访问静态成员提供了便利，但在使用时仍需谨慎。考虑到浏览器和运行时环境的兼容性，我们应当在代码中添加适当的检测和回退机制，以确保在不支持该运算符的环境中也能正常运行。

代码示例

if ('myStaticMethod' in MyClass.prototype) {
  const result = instance.myStaticMethod();
} else if (instance::MyClass.myStaticMethod) {
  const result = instance::MyClass.myStaticMethod();
} else {
  throw new Error('Static method not supported');
}

常见问题

问题：在不支持双冒号运算符的环境中，如何访问静态成员？

解决方案：直接通过类名访问静态成员，或者使用polyfill来模拟双冒号运算符的行为。

// Polyfill 示例
if (!Object.prototype.__proto__) {
  Object.defineProperty(Object.prototype, '__proto__', {
    get: function () {
      return this.constructor.prototype;
    },
    configurable: true,
  });
}

if (!Object.prototype['::']) {
  Object.defineProperty(Object.prototype, '::', {
    value: function (target, prop) {
      return target[prop];
    },
    configurable: true,
  });
}

总结与展望

双冒号运算符为JavaScript带来了更接近传统面向对象编程语言的静态成员访问方式。尽管目前它的支持有限，但随着ECMAScript标准的演进，我们有理由期待这一特性的广泛采纳。掌握这一特性不仅能够帮助我们写出更优雅、更可读的代码，还能够让我们在未来的项目中更加自信地应对新的技术挑战。

总之，双冒号运算符是JavaScript向前迈出的又一步，它展示了语言设计者们致力于提升开发者体验的决心。随着更多现代浏览器和运行时的支持，我们期待看到这一特性在实际项目中的广泛应用，进一步推动前端开发领域的创新和发展。

在线咨询

上一篇：创建漂亮的 CSS 按钮的 10 个代码片段
下一篇：清新漂亮简约好看的个人博客网站模板

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML常用标签

a标签

table标签

img标签（图片）

感想：

s 双冒号(::)运算符：一场对静态方法和属性的探索

引言

技术概述

核心特性和优势

代码示例

技术细节

特性分析

难点

实战应用

代码示例

优化与改进

代码示例

常见问题

总结与展望

您的项目需求