江苏龙网

  1. 主页 > 生活百科 > >

是时候拯救我的 HTML 技术了

html

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

是时候拯救我的 HTML 技术了

文章插图
作者 | Yaser Adel Mehraban
译者 | 谭开朗 ， 责编 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下为译文：
有多少次 ， 身为开发者的你编写了一个HTML块而没有意识到可能编码得并不理想?
1.为什么
HTML一直处于无人问津的角落 ， 因为JavaScript和CSS总是吸引人们的注意力 。
请在脑海里先保留这种印象 ， 因为我要用一些简单的技巧来发挥作用 ， 让HTML再次回到人们视野的中心 。
以下是创建一目了然、可维护和可扩展的代码的一些方法 ， 其很好的应用了HTML5的语义标记元素 ， 并将在支持的浏览器中正确呈现 。
其缘由就不赘述了 ， 让我们来看看具体是什么吧 。
2.文档类型
在index.html的顶部位置 ， 请确保声明了DOCTYPE 。这将在所有浏览器中激活标准模式 ， 并告知浏览器该如何编译文档 。请记住DOCTYPE不是HTML元素 。
HTML5是这样的：
<!DOCTYPE html>注意:如果应用了框架 ， 这已预先写好 。如果没有 ， 我强烈建议使用像Emmet这样的代码片段 ， 它在VS代码中可用 。
是时候拯救我的 HTML 技术了

文章插图
想了解更多关于其他文档类型的信息吗?点击这里查看参考文件：https://html.com/tags/doctype/ 。
3.可选标签
有些标签在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>标签之外 ， 解析树发生了更改 。
4.结束标签
应始终记得结束标签 ， 否则某些浏览器在呈现页面时会出现问题 。出于可读性和其他原因 ， 建议保留这些内容 ， 稍后我会详细介绍 。
<div id="example"><img src=https://www.isolves.com/it/cxkf/yy/html5/2019-09-10/"example.jpg" alt="example" />example

example

以上都是有效的标签 ， 但也有一些特例 ， 如下 。
自闭合标签是有效的 ， 但不是必需的 。这些元素包括:
<br>, <hr>, <img>, <input>, <link>, <meta>,<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>注意:普通元素永远不能有自闭合标签 。
<title />上面显然是无效的 。
5.字符集
预先定义字符集 。最好是将它放在顶部元素中 。
<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>6.语言
不忽略可选标签的另一个原因是在使用属性时 。在这种情况下 ， 我们应该定义web页面的语言 ， 这对于可访问性和搜索非常重要 。
<html lang="fr-CA">...</html>7.标题
永远不要忽略标题标签 ， 否则可访问性太差了 。我个人就永远不会使用这样的网站,因为我刚打开它即刻在20多个页面后就找不到了(浏览器选项卡不会有任何显示) 。
8.base标签
这是一个非常有用的标签 ， 应该谨慎使用 。它将设置应用程序的基本URL 。一旦设置好 ， 所有链接都将相对于这个基本URL ， 这可能会导致一些不必要的行为:


推荐阅读


上一篇：微信小程序架构原理

下一篇：手机刚修好又坏了怎么办 刚修好的手机又坏了谁负责