构建WEB项目的 25 个HTML建议

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

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标签放在页面底部

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

13.减少外部链接的数量

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

  • dns-prefetch : 用于预解析CDN的地址的DNS
  • prefetch: 利用浏览器空闲时间,预加载用户可能会用的资源(图片、视频、js、css)缓存到 disk ,如有页面需要就从disk中读取
  • preload:可以对当前页面所需的脚本、样式等资源进行预加载,将其放在内存中,而无需等到解析到 scriptlink 标签时才进行加载。这一机制使得资源可以更早的得到加载并可用,更不易阻塞页面的初步渲染。
  • 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规则,对于团队项目开发是有很大的意义。


相关文章
|
3天前
|
前端开发 Java 测试技术
Java一分钟之Spring MVC:构建Web应用
【5月更文挑战第15天】Spring MVC是Spring框架的Web应用模块,基于MVC模式实现业务、数据和UI解耦。常见问题包括:配置DispatcherServlet、Controller映射错误、视图解析未设置、Model数据传递遗漏、异常处理未配置、依赖注入缺失和忽视单元测试。解决这些问题可提升代码质量和应用性能。注意配置`web.xml`、`@RequestMapping`、`ViewResolver`、`Model`、`@ExceptionHandler`、`@Autowired`,并编写测试用例。
51 3
|
3天前
|
开发工具 git
【HTML】两个实战项目
【HTML】两个实战项目
10 2
|
17小时前
|
开发框架 中间件 数据库
Django 框架入门全攻略:轻松构建 Web 应用
【5月更文挑战第18天】本文是 Django 入门教程,介绍了如何使用 Django 构建 Web 应用。内容包括安装、项目与应用创建、模型定义、数据库迁移、视图编写、路由配置、模板系统、表单处理和中间件的使用。通过实例展示了 Django 基本流程,帮助初学者快速上手。Django 提供高效工具,便于开发者聚焦业务逻辑,轻松构建功能丰富的 Web 应用。
15 5
|
17小时前
|
数据库连接 Python
Flask 框架入门与实践:构建你的第一个 Web 应用
【5月更文挑战第18天】本文介绍了使用 Flask 框架构建第一个 Web 应用的步骤。首先通过 `pip install Flask` 安装框架,然后编写基本的 Python 代码创建应用,包括定义路由和响应。示例展示如何显示 &quot;Hello, World!&quot;,并扩展到显示用户信息的功能。利用模板(如 `index.html`)可使页面更丰富。随着学习深入,可以利用 Flask 的更多特性,如表单处理和数据库连接,来构建更复杂的 Web 应用。本文旨在激发读者对 Flask 和 Web 开发的兴趣,鼓励不断探索和实践。
14 7
|
1天前
|
缓存 监控 API
利用Python构建高性能的Web API后端服务
随着微服务架构的普及和RESTful API的广泛应用,构建高性能、可扩展的Web API后端服务变得尤为重要。本文将探讨如何利用Python这一强大且灵活的语言,结合现代Web框架和工具,构建高效、可靠的Web API后端服务。我们将分析Python在Web开发中的优势,介绍常用的Web框架,并通过实际案例展示如何设计并实现高性能的API服务。
|
1天前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
|
2天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术实践
本文将介绍如何通过前端和后端技术相结合,构建现代化Web应用的技术实践。我们将探讨前端开发、后端架构以及多种编程语言(如Java、Python、C、PHP、Go)在构建高效、可扩展的Web应用中的应用。
|
2天前
|
JavaScript 前端开发 API
Vue中的组件:构建现代Web应用的基石
Vue中的组件:构建现代Web应用的基石
|
2天前
|
前端开发 JavaScript 开发者
深入理解MVC和MVVM:构建现代Web应用的利器
深入理解MVC和MVVM:构建现代Web应用的利器
|
2天前
|
应用服务中间件 网络安全 Apache
构建高性能Web服务器:Nginx vs Apache
【5月更文挑战第16天】Nginx与Apache是两种主流Web服务器,各具优势。Nginx以其轻量级、高并发处理能力和反向代理功能见长,适合大型网站和高并发场景;而Apache以功能丰富、稳定性强闻名,适合企业网站和需要多种Web服务功能的场景。在性能上,Nginx处理高并发更优,Apache则可能在高负载时遭遇瓶颈。在选择时,应根据实际需求权衡。