您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > HTML

HTML的10个最佳做法

时间:2020-08-04 11:11:41  来源:  作者:

| 来源:公众号《前端全栈开发者》(ID:by-zhangbing-dev)

在当今世界,JAVAScript框架每周都会出现,其他一切都会随之改变,这很容易让人陷入困境,并怀疑你的网站是否以最佳状态执行。哪些做法要保留,哪些要放弃。我读到过,使用 implementation x 可以帮助提升性能。但另一个帖子提到要不惜一切代价避免使用它——真相是什么?

HTML的10个最佳做法

 

使用html(最终构成我们的内容),我们可以轻松完成工作。它不会像JavaScript页面那样频繁地更改。但是,这里提到的某些方面——有时甚至是大多数——经常被忽略,这确实会损害你的网站。最终,它驱使最终用户离开。

在进入这些步骤之前,先做一个站点报告。不管是Lighthouse还是别的什么。然后,在应用此处提到的所有内容后再取一个。你会有一个很好的对比,它到底有什么不同。

因此,下一次编写HTML时,请牢记以下10个最佳实践。

1.编写有效且可读的DOM

第一个听起来有些明显。但我想在这里提一下我经常遇到的类似问题:

  • 全部小写:很多时候,我看到基础结构写的都是大写,例如 <HTML> 或 <BODY>,甚至更糟的是,整个HTML本身。每个标签都应该是小写的,所以请不要在HTML标签中使用任何大写。
  • 缩进是可读性的关键:使用它。否则,你的文档会显得很平淡,里面的一切都会显得很杂乱。增强可读性也意味着可以减少开发时间。
  • 自动关闭标签曾经是强制性的。但是使用HTML5,它是可选的,完全由开发人员决定。要么在所有标签上使用它,要么根本不使用它。这里的关键是保持一致。当然,不要忘记关闭常规标签。
  • 避免过度使用注释:除非你有一个构建系统,或者你使用的是模板引擎,否则这些真的会增加你的HTML文件的体积。反过来,这也会拖慢你的初始页面加载速度,会让你的用户等待。最终,让他们离开。
  • 组织DOM:始终考虑是否需要额外的div或额外的元素。尝试只创建绝对必要的元素,并使用语义HTML元素而不是div来划分页面的大部分。其他地方也一样,如果可以,请始终使用HTML5语义元素。它可以帮助搜索引擎知道页面上哪一部分很重要,哪一部分不重要。记住,要时刻问自己,你是否真的需要那里多出来的div。把多余的东西处理掉。

2.不要使用内联样式和脚本

否则你的文档很快就会变得杂乱无章,无法阅读。总是使用外部样式表。另外,尽量避免在css文件中使用 import 语句,它们会产生额外的服务器请求。

你还应该将它们捆绑在一起以减少请求数量。对于大型bundle,你可以利用域分片的优势,将它们分割为2-4个更小的块。

内联JavaScript也是如此。除了可读性问题,这将使你的文档变得更重、更难维护。

3.内联关键CSS

我们讨论了为什么不应该内联CSS。现在我们来讨论一下为什么你应该这样做。考虑将关键的CSS放在顶部,这样,用户可以更快地看到页面的第一部分。仅内联关键CSS,仅此而已!

关键CSS指的是渲染页面顶部所需的最小CSS集,即用户在登陆你的网站时首先看到的CSS。

此外,请记住,链接标签的顺序可能会重写规则,所以要小心放置它们。如果你有用于重置或第三方库的单独文件,请先放置这些文件,然后放置其余文件。

4.将脚本标签放在底部

将脚本标签放在文档的底部。从官方的角度来说,脚本标签是活在 head 里面的,但如果我们把它们放在文档底部,就在正文标签关闭之前,我们就可以延迟它们的下载。这样我们的文档就可以先加载到dom中,展示给用户,然后再请求脚本。

之所以这样,是因为浏览器会逐行从上到下解释你的文档。当它到达 head 并遇到 script 标签时,它将向服务器发出请求以获取文件。如果它是一个巨大的文件,它将继续加载,用户将只看到一个空白页面,因为它仍在加载头部。因此,将它们移到底部。这样,在加载脚本标签的内容之前,将加载正文的所有内容。作为回报,我们可以诱使用户相信我们的页面正在快速加载。你也可以在你的脚本标签中添加一个 defer 标签,以确保HTML被优先加载。

5. 照顾无障碍

你是否知道,根据世界卫生组织的说法,世界人口的15%患有某种残疾?超过10亿人可能会在使用你的网站时遇到问题。如今,我们网站上的互动非常频繁,可访问性很容易受到冲击。花一些时间用 aria 属性装饰复杂的UI元素。这带来了对辅助技术的支持,因此你可以覆盖更多的受众。

6.对图片使用alt标签

alt标签为图像指定替代文本。所以万一因为某种原因不能显示图片,就会显示这段文字。当你的图片缺少alt标签时,搜索引擎是不喜欢的,会因此降低你的页面排名。

 

7.每页一个h1

每页仅使用一个 h1。将最重要的文字放在此处,以描述页面的内容。比如你的博客文章或文章标题。每个页面使用多个 h1 标签不一定是个好主意,也不建议这样做,因为它可能会损害你的搜索引擎结果,这有助于搜索引擎正确地索引你的网站。另外,这是W3C规范中定义的,反正你的页面内容应该由一个标签来描述,所以每页只保留一个 h1

8.正确使用title和meta标签

为你的页面使用一个标题和适当的描述性元标签。这些由你的本地搜索引擎人员负责,并用于为你的网站建立索引,因此,通过为他提供有用的信息来帮助他。始终使用meta视口标签,以便根据设备的屏幕尺寸显示你的网站。此外,还可以考虑使用open graph 标签,将你的网站链接变成社交媒体平台上的丰富内容。

9.压缩

一旦你完成了一切,你准备让你的网站上线,压缩它。你可以使用第三方库,特殊程序或称为构建工具的工具,甚至可以使用在线应用程序。这将使你的文档更小,从而加快页面加载速度。要进一步执行此步骤,请在服务器端启用brotli或gzip压缩。它会对页面速度产生巨大影响。

10.验证你的HTML

最后但并非最不重要的一点是,始终验证你的HTML。验证器可以发现缺陷或错误的代码,从而消除它们。你可以使用w3c validator。在这里,你可以在上线前通过URL验证你的网站,通过上传,或者你也可以通过直接输入验证。

比这更好的是,如果你能在提交代码之前,设置一个自动检查此类问题的linter。

按照这10个简单的步骤,将帮助你加强你的HTML,让你的网站排名更高,带来更多流量,同时也从优化步骤中使其更快。也会导致更多的用户互动。最后,它不仅会授予你更多的访客,而且会有更多的快乐访客。而这才是最重要的。感谢你花时间阅读本文,祝你优化愉快!



Tags:HTML   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件&mdash;&mdash;MuiP...【详细内容】
2021-12-16  Tags: HTML  点击:(22)  评论:(0)  加入收藏
此文由掘金@天行天忌授权发布,前端晚间课对其内容进行微改。 HTML,超文本标记语言,是一种用于创建网页的标准标记语言。自从引入 HTML 以来,它就一直用于构建互联网。与 JavaScr...【详细内容】
2021-11-23  Tags: HTML  点击:(322)  评论:(0)  加入收藏
HTML是什么?超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。“...【详细内容】
2021-11-05  Tags: HTML  点击:(40)  评论:(0)  加入收藏
一、iframe标签 自己编写的页面中如果要引用外部的页面的话,可以使用iframe标签来实现。为了更好地理解举个例子,前面几篇中我们都是在index.hmtl中编写代码。如果有个需求是...【详细内容】
2021-11-03  Tags: HTML  点击:(26)  评论:(0)  加入收藏
Web项目开发中视频播放是一个非常常见的需求,需要播放器能够支持pc端和移动端的使用,并且支持常见的视频格式。我们从github上精选了5款优秀的Html5 播放器插件分享给大家。(排...【详细内容】
2021-09-17  Tags: HTML  点击:(99)  评论:(0)  加入收藏
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  Tags: HTML  点击:(343)  评论:(0)  加入收藏
我们倾向于使用HTML与CSS、JavaScript等,使我们的网站或博客看起来更有吸引力,但你知道仅HTML就有很多实用的秘密,可能会派上用场,帮助你设计一个华丽的网站?下面是一些很酷的HTM...【详细内容】
2021-08-13  Tags: HTML  点击:(89)  评论:(0)  加入收藏
meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。 1、声明文档使用的字符编码<meta charset=&#39;utf-8&#39;>以下设置更为详细:<meta http-equiv="Content-...【详细内容】
2021-08-12  Tags: HTML  点击:(91)  评论:(0)  加入收藏
本节我们讲HTML表单标签,当你在网页输入框提交一个数据,这条数据一般是提交给了服务器,然后服务器根据请求返回你想要的数据,这个你输入信息的输入框或者提交的按钮就是HTML表...【详细内容】
2021-06-25  Tags: HTML  点击:(141)  评论:(0)  加入收藏
同事跟我说他用jQuery取不到页面上隐藏元素input的值,他的html页面大概内容如下。<!DOCTYPE html><html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/...【详细内容】
2021-05-18  Tags: HTML  点击:(218)  评论:(0)  加入收藏
▌简易百科推荐
此文由掘金@天行天忌授权发布,前端晚间课对其内容进行微改。 HTML,超文本标记语言,是一种用于创建网页的标准标记语言。自从引入 HTML 以来,它就一直用于构建互联网。与 JavaScr...【详细内容】
2021-11-23  前端晚间课    Tags:HTML6   点击:(322)  评论:(0)  加入收藏
HTML是什么?超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。“...【详细内容】
2021-11-05  人生三部曲丶    Tags:HTML   点击:(40)  评论:(0)  加入收藏
一、iframe标签 自己编写的页面中如果要引用外部的页面的话,可以使用iframe标签来实现。为了更好地理解举个例子,前面几篇中我们都是在index.hmtl中编写代码。如果有个需求是...【详细内容】
2021-11-03  HillelDu    Tags:html   点击:(26)  评论:(0)  加入收藏
我们倾向于使用HTML与CSS、JavaScript等,使我们的网站或博客看起来更有吸引力,但你知道仅HTML就有很多实用的秘密,可能会派上用场,帮助你设计一个华丽的网站?下面是一些很酷的HTM...【详细内容】
2021-08-13  杭州程序员小张    Tags:HTML   点击:(89)  评论:(0)  加入收藏
meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。 1、声明文档使用的字符编码<meta charset=&#39;utf-8&#39;>以下设置更为详细:<meta http-equiv="Content-...【详细内容】
2021-08-12  简易编程    Tags:meta标签   点击:(91)  评论:(0)  加入收藏
本节我们讲HTML表单标签,当你在网页输入框提交一个数据,这条数据一般是提交给了服务器,然后服务器根据请求返回你想要的数据,这个你输入信息的输入框或者提交的按钮就是HTML表...【详细内容】
2021-06-25  科技现象    Tags:HTML   点击:(141)  评论:(0)  加入收藏
背景日常工作中,项目编程免不了需要使用配置文件,早期yaml出现之前,大部分配置文件采用xml形式,但是以xml格式储存的数据要比以其他格式(如json、yaml)储存占有的空间要大得多,因为...【详细内容】
2021-06-21  爱读书的程序员    Tags:yaml   点击:(265)  评论:(0)  加入收藏
XML; 是什么? Extensible Markup Languare 可扩展标记型语言 为什么要有XML? 1.HTML的标签是固定的,不可以改变,也不可以进行一个&middot;&middot;&middot;扩展 2.HTML语法松散...【详细内容】
2021-06-01  LeviT    Tags:XML   点击:(193)  评论:(0)  加入收藏
同事跟我说他用jQuery取不到页面上隐藏元素input的值,他的html页面大概内容如下。<!DOCTYPE html><html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/...【详细内容】
2021-05-18  IT洞察者    Tags:Html   点击:(218)  评论:(0)  加入收藏
HTML5语义化与新特性什么是HTML语义化?表示选择合适的标签(语义化标签)便于开发者阅读和写出更优雅的代码为什么要使用语义化标签?1). 在没有CSS样式的情况下,页面整体也会呈现...【详细内容】
2021-03-02      Tags:HTML   点击:(236)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条