作者 | Yaser Adel Mehraban

译者 | 谭爽朗,责编 | 屠敏

出品 | CSDN(ID:CSDNnews)

html5ie无效源是时刻拯救我的 HTML 技巧了 Bootstrap

以下为译文:

有多少次,身为开拓者的你编写了一个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】