是时候拯救我的 HTML 技术了！

和 JavaScript、CSS 相比，HTML 经过三十多年的发展，似乎逐渐走进无人问津的角落，如何才能让 HTML 再次回到人们视野的中心。

作者 | Yaser Adel Mehraban

译者 | 谭开朗，责编 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下为译文：

有多少次，身为开发者的你编写了一个HTML块而没有意识到可能编码得并不理想?

为什么

HTML一直处于无人问津的角落，因为JavaScript和CSS总是吸引人们的注意力。

请在脑海里先保留这种印象，因为我要用一些简单的技巧来发挥作用，让HTML再次回到人们视野的中心。

以下是创建一目了然、可维护和可扩展的代码的一些方法，其很好的应用了HTML5的语义标记元素，并将在支持的浏览器中正确呈现。

其缘由就不赘述了，让我们来看看具体是什么吧。

文档类型

在index.html的顶部位置，请确保声明了DOCTYPE。这将在所有浏览器中激活标准模式，并告知浏览器该如何编译文档。请记住DOCTYPE不是HTML元素。

HTML5是这样的：

<!DOCTYPE html>

注意:如果应用了框架，这已预先写好。如果没有，我强烈建议使用像Emmet这样的代码片段，它在VS代码中可用。

想了解更多关于其他文档类型的信息吗?点击这里查看参考文件：https://html.com/tags/doctype/。

可选标签

有些标签在HTML5中是可选的，主要是因为元素是隐式呈现的。信不信由你，你可以省略<html>标签，而页面呈现得也很好。

<!DOCTYPE HTML><head><title>Hello</title></head><body><p>Welcome to this example.</p></body>
</html>

上面是一个有效的HTML，但在某些情况下就不能这样做了。例如标签后面跟着注释：

<!DOCTYPE HTML>
<!-- where is this comment in the DOM? --><head><title>Hello</title></head><body><p>Welcome to this example.</p></body>
</html>

上面是无效的，因为注释位于<thml>标签之外，解析树发生了更改。

结束标签

应始终记得结束标签，否则某些浏览器在呈现页面时会出现问题。出于可读性和其他原因，建议保留这些内容，稍后我会详细介绍。

<div id="example"><img src="example.jpg" alt="example" /><a href="#" title="test">example</a><p>example</p>
</div>

以上都是有效的标签，但也有一些特例，如下。

自闭合标签是有效的，但不是必需的。这些元素包括:

<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>

注意:普通元素永远不能有自闭合标签。

<title />

上面显然是无效的。

字符集

预先定义字符集。最好是将它放在顶部元素中。

<head><title>This is a super duper cool title, right ??</title><meta charset="utf-8">
</head>

上面是无效的，标题无法正确呈现。正确写法是将字符集移到顶部位置。

<head><meta charset="utf-8"><title>This is a super duper cool title, right ??</title>
</head>

语言

不忽略可选标签的另一个原因是在使用属性时。在这种情况下，我们应该定义web页面的语言，这对于可访问性和搜索非常重要。

<html lang="fr-CA">...
</html>

标题

永远不要忽略标题标签，否则可访问性太差了。我个人就永远不会使用这样的网站,因为我刚打开它即刻在20多个页面后就找不到了(浏览器选项卡不会有任何显示)。

base标签

这是一个非常有用的标签，应该谨慎使用。它将设置应用程序的基本URL。一旦设置好，所有链接都将相对于这个基本URL，这可能会导致一些不必要的行为:

<base href="http://www.example.com/" />

通过以上设置，href="#internal"将被编译为href=http://www.example.com/#internal。或者href="example.org"将被编译为href="http://www.example.com/example.org"。

描述

这个meta标签非常有用，尽管严格来说它不是最佳写法。但在搜索引擎时，这是超级有用的。

<meta name="description" content="HTML best practices">

这有一个帖子“搜索引擎优化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。

语义标签

虽然可以使用div创建UX工程师的线框，但这并不意味着必须这样做。语义HTML为页面提供了意义，而不单纯是内容显示。像p、section、h{1-6}、main、nav等标签都是语义标签。如果使用p标签，用户将知道这表示一段文本，浏览器也知道如何展示它们。

语义HTML超出了本文的范围。但是我们应该进行检查，就好比写作所用的笔，而我们有鼠标。

hr不应该用于格式化

<hr>不是格式化元素，所以不要用它来格式化内容。在HTML5中，这个标签代表了内容的主题分离。正确的用法是这样的:

<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head ?</p>

使用title属性时要小心

title属性是一个功能强大的工具，它可以帮助阐明页面上元素的操作或目的，比如工具提示。但是，它不能与图像上的alt等其他属性互换。

HTML 5 规范道:

目前不鼓励依赖title属性，因为很多用户代理不按照规范的访问方式来暴露该属性（例如，使用鼠标等设备来唤出提示框，而不包括只用键盘或触控键盘的用户，或者现代手机或平板电脑）。

请阅读有关如何正确使用此属性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。

单引号或双引号

我见过的许多代码库，他们的标记中混合了这两种形式。这并不好，特别是当你使用一个依赖于单引号的框架时，比如php，当你在一个句子中使用单引号时，就像我现在做的一样。另一个原因是保持一致，这总是好的。不要这样写:

<img alt="super funny meme" src='/img/meme.jpg'>

而写为：

<img alt="super funny meme" src="/img/meme.jpg">

省略布尔值

当涉及到属性的布尔值时，建议省略，因为它们不添加任何值，还会增加标记的权重。

public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3"><!-- instead ?? --><audio autoplay src="podcast.mp3">

省略类型属性

不需要向scriptand样式标签添加type属性。某些服务(如W3C的标记验证工具)还会出现验证错误。

验证标记

可以使用W3C的标记验证等服务以确保有效的标记。

拒绝内联样式

HTML中写的是内容，其如何展示取决于样式。将展示形式留给CSS吧，不要使用内联样式，这将有利于开发人员和浏览器理解你的标记。

总结

这些只是编写标签时要记住的冰山一角。还有很多很好的资源可以让你深入了解，强烈建议你重复阅读。

《GitHub HTML最佳实践》：https://github.com/hail2u/html-best-practices
《W3C School HTML样式指南》：https://www.w3schools.com/html/html5_syntax.asp

希望你喜欢本文，并能写出优雅的标签。

原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5

本文为 CSDN 翻译，转载请注明来源出处。

【END】

小白Python的学习规划，我只做了5件事！

https://edu.csdn.net/topic/python115?utm_source=csdn_bw

热文 推荐

☞华为 P40 或首发鸿蒙系统；新 iPhone Logo 移至中间；React 组件库 uiw 3.4.0 发布 | 极客头条

☞没有学历文凭，如何成为一名优秀的 Java 程序员？

真相：BAT、谷歌 AI 员工年薪曝光，网友服气了！

☞2亿日活，日均千万级视频上传，快手推荐系统如何应对技术挑战？

☞Docker容器化部署Python应用

☞给面试官讲明白：一致性Hash的原理和实践

☞预警，CSW的50万枚尘封BTC即将重返市场？

☞她说：行！没事别嫁程序员！

点击阅读原文，输入关键词，即可搜索您想要的 CSDN 文章。

你点的每个“在看”，我都认真当成了喜欢

是时候拯救我的 HTML 技术了！相关推荐

收集的计算机编程电子书目录，仅供日后查阅方便
本人有收集电子书的癖好.每日在网上收集经典的电子书籍,尤其喜欢原版的,看起来舒服.不过总是心血来潮,当时下载后瞅几眼,之后就束之高阁,再也不问津了.很为此苦恼,过后找某本书时也总是不知道在哪,为了查找 ...
Java实现lucene搜索功能
直接上代码: package com.sand.mpa.sousuo;//--------------------- Change Logs---------------------- //<p ...
[论文阅读] (04) 人工智能真的安全吗？浙大团队外滩大会分享AI对抗样本技术
外滩大会 AI安全-智能时代的攻守道 Deep Learning Security: From the NLP Perspective 浙江大学 <秀璋带你读论文>系列主要是督促自己阅读优 ...
联想服务器能够上固态硬盘吗,拯救我的台式机：Lenovo 联想固态硬盘入手记
拯救我的台式机:Lenovo 联想固态硬盘入手记 2018-05-13 13:40:53 6点赞 14收藏 19评论单位的惠普台式机是更换不久的,4G内存,处理器忘了啥型号,貌似也不落后,用起来 ...
技术信仰是如何毁掉程序员的
我对自己有了新的发现--上天给了我神奇的能力,让我总能做出正确的技术选择.有些夸张,但的确很神奇. 回首我的开发生涯,我认为我使用的任何一种编程语言都是在当时那种场景下最好的.同样的,我选择的框架,甚 ...
如何判断飞机的年限_技术流带你鉴定前风挡玻璃更换，不再使用日期判断！
这又是一篇关于前风挡玻璃鉴定的文章,我记得在二手车鉴定微信公众号里面已经发布好几篇这样的文章了,当然每篇文章的住重点不同,今天这一篇应该是完结篇,它们在一起能组成一套玻璃更换系列专题课程: 我们回 ...
【置顶】利用 NLP 技术做简单数据可视化分析教程（实战）
置顶本人决定将过去一段时间在公司以及日常生活中关于自然语言处理的相关技术积累,将在gitbook做一个简单分享,内容应该会很丰富,希望对你有所帮助,欢迎大家支持. 内容介绍如下你是否曾经在租房时因 ...
HTTP服务器端常用推送技术
服务器端推送技术描述不论是传统的HTTP请求-响应式的通信模式, 还是异步的AJAX式请求, 服务器端始终处于被动的应答状态, 只有在客户端发出请求的情况下, 服务器端才会返回响应. 这种通信模式被 ...
程序员如何讲清楚技术方案
最近在评审技术方案,和代码review的时候,遇到刚入行的同学们,很多都讲不清楚技术方案. 具体表现是: – 上来不说需求,直接说算法实现.台下一头雾水,根本不知道设计方案是否合理. – 描述完需求后 ...

是时候拯救我的 HTML 技术了！

是时候拯救我的 HTML 技术了！相关推荐

最新文章

热门文章