构建WEB项目的 25 个HTML建议

更新日期: 2021-06-21阅读: 2.6k标签: html

html 超文本标记语言是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与css、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。

HTML是WEB应用程序的骨架,尽管非常容易上手,但仍有很多需要注意的规则,可能因为没有遵循这些规则导致WEB应用程序的实践受到影响,现在对于项目开发,很多规则是可以通过程序来自动完成,对于初学者还是有必要了解一下。

1. 避免内联样式

虽然现代浏览器或其他辅助设备可能能够有效处理内联属性和标签,但一些较旧的设备不能,这可能会导致一些奇怪的网页显示。 额外的字符和文字会影响搜索引擎收录网页的内容,同时内联样式也会带来维护上的不方便。内联样式的使用的唯一场合就是动态更改样式,比如从 Javascript 端完成的一些样式操作,而不是作为一种设置 HTML 样式的方式。

2. 优先添加关键样式

如果将网站的所有样式都放在一个文件中,则可能需要很长时间来获取和解析,这会延迟网站呈现。最佳的实践方式是将站点的主要和基本样式包含在头部的样式标签中,或者首先加载一个较小的样式表,只加载第一次渲染所需的样式,然后次要样式文件增加 deferred 属性。

次要样式可以是用于用户交互的样式,例如弹出图层、下拉列表和通知组件等,或者是用户需要滚动到页面下方的内容。

3. 延迟加载图片

有些浏览器只会在视图中加载图片,如果有一个100张图片的页面,只会加载视图内的图片,当用户滚动时,其他的图片也会相应地加载。最佳的实践方式是用lazy值指定加载属性。如果想在所有浏览器中使用这个特性,可以使用 polyfill。

4. 避免过多的 HTML

过多的HTML并不好,采用允许加载足够的HTML进行初始呈现的策略,其余内容放在不同的页面上,或者稍后通过Javascript的滚动或点击按钮来获取。因为太多的HTML意味着更长的解析时间,而且通常是不必要的。

5. 停止支持低版本 IE

在WEB项目开发中,各种兼容性问题的支持,特别的低版本IE的支持简直是地狱级的体验,在这里倡议大家停止兼容低版本IE,除非是必须,否则就引导用户去升级浏览器,好消息是微软将在 2021 年年中停止对 IE11 的支持。

6. 为图片增加适配

图片标签允许为不同的窗口大小指定多个资源,这可以更快地加载适当的图像,并为适当的视图大小使用不同的图像。这可以更快地为移动设备加载较小尺寸的图像,为桌面加载更大的图像。

<picture>
    <source srcset="apple-360.jpg" media="(min-width: 800px)">
    <img src="apple.jpg" alt=""/>
</picture>

7. 为媒体指定多个备份源

对于视频和音频,总是设置多个 sources 。

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <p>你的浏览器不支持HTML5 audio 标签</p>
</audio>
<video controls width="360">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <p>你的浏览器不支持HTML5 video 标签</p>
</video>

8. 始终为视频指定预加载选项

可以使用 preload 属性在页面上延迟加载视频,最佳做法是始终包含此属性,因为不同的浏览器具有不同的默认值,preload="none" 将阻止浏览器立即加载视频并同时 poster 设置的图片。

<video controls preload="none" poster="movie.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
</video>

9. 始终指定按钮类型

简单的规则,始终指定按钮的类型。如果不指定按钮将使用默认为 submit 类型,这可能并不是你想要的行为。通常情况下,总是指定按钮类型,即使它是默认值。

<button type="button">我是开心按钮</button>
<input type="text"/>

10. 视频有时比 gif 更好

通常需要展示动画内容时候,首先想到的是 gif 而不是视频,认为 gif 可以更小视频更大。但根据视频不同的格式,视频并不一定比 gif 文件大,这时视频可能是更好的选择,因此,在做出决定之前,请先比较视频和 gif。

11. 避免书写 Javascript

很多SDK都会将其脚本代码加入到站点的 <head> 标签中,但其实可以把这些代码统一放在外部脚本文件中,通过外部加载,并控制它的加载方式。一般来说,应该避免 Javascript 代码与 HTML 混合

12. script标签放在页面底部

对于不支持某些优化属性(如defer 、 async )的浏览器,此规则就不可避免。一般来说,如果 HTML 和 CSS 不是异步或延迟的,最好将脚本标签放在最后,以保证浏览器在完成解析和呈现 HTML 和 CSS 时不会被阻塞。因为script标签会阻塞HTML的解析.

13.减少外部链接的数量

始终尝试将外部样式表和脚本文件合并到一个压缩的文件中, 并设置 dns-prefetch 、preload/prefetch、defer、async 属性,告诉浏览器如何处理它们。

dns-prefetch : 用于预解析CDN的地址的DNS

prefetch: 利用浏览器空闲时间,预加载用户可能会用的资源(图片、视频、js、css)缓存到 disk ,如有页面需要就从disk中读取

preload:可以对当前页面所需的脚本、样式等资源进行预加载,将其放在内存中,而无需等到解析到 script 和 link 标签时才进行加载。这一机制使得资源可以更早的得到加载并可用,更不易阻塞页面的初步渲染。

defer:所有元素解析完成后,domContentLoaded 事件触发之前。

async:当前Javascript脚本加载完成后(加载后立即执行,执行顺序不固定,适合独立无依赖的代码)

 <link rel="dns-prefetch" href="//www.devpoint.cn" />
 <link rel="preload" href="./app.css" as="style" />
<link rel="preload" href="./app.js" as="script" />
<link rel="prefetch" href="./app.js" />
<script async />
<script defer/>

14. 始终添加图片 alt

如果图像加载失败,alt 标签会显示替代文本,提供了图像的额外上下文,这对 seo 很友好。

15. 一个 h1 标签

建议一个 HTML 页面一个 h1 标签,如果是网站 logo ,可以将 logo 包含在 h1 标签中。当然如果使用多个 h1 标签也是没有问题的。

16. 字体预加载

如果页面存在字体文件,建议在 <head></head> 标签中使用 prefetch/preload 属性进行与加载。

17. 定义响应式meta

应该始终确保网站具有响应性属性,这样不管用户使用什么设备都可以流畅清晰的浏览网站内容。

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

18. 始终指定 DOCTYPE

在 DOCTYPE 中包含 HTML 属性将确保浏览器正确呈现内容。

<!DOCTYPE html>

19. 页面语言

通过指定网站的语言将有助于屏幕阅读器选择正确的语言来渲染,浏览器还可以使用它来确定是否应该自动翻译网站,lang 属性应该描述网站大部分内容使用的语言。

<html lang="zh">

20. 正确使用 data-*

标签 data 属性是大部份框架或者插件喜欢传递数据的方式,但是不要使用 data 属性来传递敏感数据,其他属性可能更适合。

21. 使用 time 标签

一个重要的时间使用 time 标签来展示,这样可以方便用户轻松点击以添加到日历中。

<time datetime="20:00">20:00</time>

22. 添加 favicon

浏览器会自动为获取网页图标,甚至不需要为 favicon 指定链接,只需将其放在网站的根目录中即可。无论您做什么,始终明确为网站包含各种大小和目标的网站图标,并为不同的设备、浏览器设置不同的图标,可以使用在线工具制作不同尺寸。

23. 有效的DOM标签

现代浏览器会尽力成对匹配标签,但它可能并不正确。因此建议所有 HTML 标签小写、关闭标签(可以借助开发工具自动完成)。

24. 正确使用title

为页面使用一个<title></title>标签,标题显示与浏览器选项卡中,并且当分享网址的时候能够清晰的获取标题。

25. 转义特殊字符

HTML 有一些特殊字符《HTML特殊符号对照表》,在使用的时候一定要进行转义,如果不这样做,可能会破坏页面的呈现。

总结

以上建议都是通用规则,制定大而全的HTML规则,对于团队项目开发是有很大的意义。


链接: https://fly63.com/article/detial/10464

css/html 空格,html空格符的显示、标示方式【html空格代码】

css/html 空格,html空格符的显示、标示方式。在html里面空格的话,你直接敲打出来的空格是不可以的,这篇文章将通过html和css中设置显示空格的实现总结

HTML/CSS代码风格指南(Google)

本文档定义了HTML/CSS的编写格式和风格规则,适用于HTML/CSS文件,包括GSS文件。如果你要编辑代码,先花几分钟看看它的代码风格,如果它这么做,那你也应该这么做。

html鼠标自定义右键菜单:css+js实现自定义html右键菜单

我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码。

基于 HTML5 Canvas 的交互式地铁线路图

地图稍微内容有点多,要全部展示,字显得有点小了,但是没关系,可以按照需求放大缩小,字体和绘制的内容并不会失真,毕竟都是用矢量绘制的~

如何用 Python 解析 HTML

用一些简单的脚本,可以很容易地清理文档和其它大量的 HTML 文件。但是首先你需要解析它们。我决定为自己创建一个项目来解决这个问题。 一种方法是搜索未使用的现有图像文件。

你可能从未听说过的15种HTML元素方法!

我们来讨论HTML和DOM之间的区别。显然,一个普通<table>元素就是HTML。您可以在.html的文件中使用它。它有一组属性影响它的外观和行为方式。这就是HTML,不过它与JavaScript无关。

KeyPress 和KeyDown 、KeUp之间的区别

input 框在输入查询内容之后,按回车键居然有两种不同的表现形式(input 框没有绑定键盘事件),谷歌和火狐功能正常,但IE在按了回车键以后居然自动调用方法。

在html中做嵌套页面_客户端实现html页面的嵌套

如何在客户端利用html、或js将一个html页面嵌套在另一个页面中,这篇文章主要讲解以下几种方式:IFrame引入 、<object>方式、Behavior的download方式 、使用JQuery的load方法

VSCode中快捷输入HTML代码

VSCode中有一些快捷编辑HTML的方法,能大大提高工作效率,在这记录一些。文是在VSCode下编写的,其他编辑器如Atom、Sublime Text都支持Emmet

HTML发展历程

HTML是超文本标记语言的缩写,不同于C或JAVA等编程语言,HTML由标签组成。通过标签可以在网页中插入文字、图片、链接、音频、视频等元素,进而描述网页。和Windows一样,随着技术的发展,HTML经历了多次版本更新

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!