亲子关系内容页

自闭合标签[自定义人群标签]

2021-10-30 23:20:23亲子关系123

和 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】

TAG标签: 青少年心理问题有哪些症状 基佬攻的心理 渣男威胁恐吓什么心理 心理早熟 
再来一篇
上一篇:恐怖性焦虑障碍[焦虑症惊恐障碍] 下一篇:我早恋了怎么办[我早恋了怎么办初中]
猜你喜欢