你不知道的 HTML

掘金最后一个老实人
466 阅读4分钟

前言

前端三剑客中，HTML 最简单，也最容易被大家所忽视。这篇文章主要介绍 HTML 冷门知识，和一些不为人知的使用技巧，希望能对大家有所帮助。

什么是 HTML

HTML 是 HyperText Markup Language 的简写，中文翻译为：超文本标记语言，它是构成 Web 世界的一砖一瓦。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

语义化

语义化是指根据内容的结构选择合适的标签，通俗说就是用正确的标签做正确的事情。语义化的优点有：

  • 代码结构清晰，易于阅读，利于开发和维护

  • 提高用户体验，在样式加载失败时，保持页面结构清晰

  • 方便其它设备根据语义渲染页面

  • 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重 常见的语义化标签

<header>   头部
<nav>      导航栏
<main>     主要区域
<article>  文章内容
<section>  区块
<aside>    侧边栏
<footer>   底部

title 与 h1 的区别

title属性没有明确的意义，只表示是个标题。h1则表示层次分明的标题，对页面信息的抓取有很大的影响。

b 与 strong 的区别

两者都是加粗，b标签是纯物理的，而strong标签有语义，起到加重语气的效果。

i 与 em 的区别

两者都是斜体，em有语义，表示强调的文本。

DOCTYPE

DOCTYPE是 HTML5 中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器应该以什么样的文档类型定义（html、xhtml）来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚至 JS 脚本的解析。它必须声明在 HTML 文档的第一行。

meta

meta标签的属性用于定义页面的说明、关键字和其它的元数据，这些元数据将服务于浏览器（如何布局或重载页面）、搜索引擎和其它网络服务。

  • charset
// 定义网页文档的字符集
<meta charset="utf-8"/>
  • name + content

定义网页作者、网页地址、网页版权信息、网页关键字、网页描述、搜索引擎索引方式、移动端常用视口设置等。

// 网页作者
<meta name="author" content="xx团队"/>

// 网页地址
<meta name="website" content="url"/>

// 网页版权信息
<meta name="copyright" content=""/>

// 网页关键字，用于 SEO
<meta name="keywords" content="html"/>

// 网页描述
<meta name="description" content="关于html的文章"/>

// 搜索引擎索引方式
<meta name="robots" content="all"/>

// 移动端常用视口设置
<meta name="viewport" content="width=device-width,initial-scale=1.0 ..."/>
  • http-equiv

定义网页的过期时间 、计时刷新或跳转、禁止浏览器缓存、浏览器版本、隐藏状态栏/设置状态栏颜色等。

// 指定网页的过期时间
<meta http-equiv="expires" content="Fri, 12 Jan 2022 15:00:00 GMT"/>

// 等待一定时间刷新或跳转到其它 url
<meta http-equiv="refresh" content="3; url"/>

......

src 和 href 的区别

  • src：表示对资源的引用，它指向的内容会嵌入当前标签所在的位置，src 会将其指向的资源下载并应用到文档内。

  • href：表示超文本引用，它指向一些网络资源，建立和当前元素或文档的链接关系，常用在 a、link 等标签上。

图片懒加载

我们可以使用loading="lazy"属性来延迟图片的加载，直到用户滚动到它们为止，以达到性能优化的目的：

<img src="img.jpg" loading="lazy" alt=""/>

空格

在写 HTML 代码时，可能会碰到这样的问题：在代码里加入一连串空格，在浏览器上显示的时候，却只看到一个空格。这时，我们可以用&nbsp;代替空格，它是 Non-Breaking SPace 的简写。

自定义有序列表起点

使用start属性来更改有序列表的起点：

<ol start="11">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>Python</li>
   <li>Go</li>
</ol>

1.png

noopener noreferrer

用户点击超链接时，在新打开的页面中（target="_blank"），通过window.opener可以获取源页面的部分控制权。如果我们在a标签中加入 rel="noopener noreferrer"属性，window.opener会为null。这种特性可以防止钓鱼网站，让网站更安全：

<a href="" target="_blank" rel="noopener noreferrer">超链接跳转</a>

浏览器地址栏运行代码

在浏览器地址栏可以直接运行 HTML 代码：

data: text/html,<h1>Hello !</h1>

在地址栏输入以上代码然后回车，会出现相应的页面内容。

浏览器地址栏还可以运行 JS 代码：

javascript: alert('不点赞嫩死你！');

把上面这行代码输入到地址栏，弹框神现～

还有一个神操作，在浏览器地址栏输入这行代码，可以将浏览器变成一个简单的编辑器：

data:text/html, <html contenteditable>

动动你的小手试一试吧。

最后

如果文中有错误或者不足之处，欢迎大家在评论区指正。

你的点赞是对我莫大的鼓励！感谢阅读～

avatar
文章
阅读
粉丝