您当前的位置:首页 > 养生 > 内容

html是什么意思,HTML是什么意思(时最常犯的六大错误)

关于【html是什么意思】,HTML是什么意思,今天涌涌小编给您分享一下,如果对您有所帮助别忘了关注本站哦。

内容导航:1、HTML是什么意思2、开发人员在编写 HTML 和 CSS 时最常犯的六大错误

1、HTML是什么意思

html是超文本语言。下面,我们来详细看看html是什么吧。

操作方法

后缀名文本文档的后缀名是.txt,Word文档后缀名是.doc,而HTML网页的后缀名是.html,HTML是超文本标记的语言。

现在很多网站的网页大多是由一个个HTML页面组成的,比如随意打开某种网页,可以看到其后缀名是以.html结尾的,如下图所示:

HTML文件有头部、主体和结尾等部分组成,也是一个完整的结构,一般会直接在网页中显示。

HTML是网站的编译语言,即可以称为网页,可以把文字、图片或音乐等通过代码排列成一张画面

声明:本篇经验系酷知网「www.coozhi.com」原创,转载请注明出处。

2、开发人员在编写 HTML 和 CSS 时最常犯的六大错误

生活中犯错误是正常的,没有人不会犯错误,更何况是开发人员呢?今天我们就来卡看看开发人员在编写 HTML 和 CSS 时最常犯的六大错误有哪些。

html是什么意思,HTML是什么意思(时最常犯的六大错误)

作者 | Stas Melnikov

译者 | 弯月,责编 | 刘静

出品 | CSDN(ID:CSDNnews)

以下为译文:

html是什么意思,HTML是什么意思(时最常犯的六大错误)

用placeholder属性代替label元素

开发人员经常用placeholder属性代替label元素。但是,在这种写法下,使用屏幕阅读器的用户无法填写字段,因为屏幕阅读器无法从placeholder属性中读取文本。

<input type="email" placeholder="Enter your email">

因此,我建议用label元素显示字段名称,而placeholder应该作为例子显示在用户需要填充的数据中。

<label><span>Enter your email</span><input type="email" placeholder="e.g. example@gmail.com"></label>html是什么意思,HTML是什么意思(时最常犯的六大错误)

用img元素标记装饰用的图片

我经常看到开发人员混淆装饰图片和内容图片。例如,他们会使用img元素来显示社交图标。

<a href="https://twitter.com"><img src="twitter.svg" alt><span>Twitter</span></a>

然而,社交图标是装饰性图标,其目的是帮助用户迅速理解元素的含义,而无需阅读文本。即便我们删除这些图标,元素的含义也不会消失,所以我们应该使用background-image属性。

<a href="https://twitter.com"><span>Twitter</span></a>

.social::before {background-image: url("twitter.svg");}html是什么意思,HTML是什么意思(时最常犯的六大错误)

使用resize属性

如果利用resize属性来禁止textarea调整大小,那么你就破坏了可访问性。因为用户无法舒适地输入数据。

textarea {width: 100%;height: 200px;resize: none;}

你应该使用min-width、max-width、min-height以及max-height属性,这些属性可以限制元素的大小,而且用户也可以舒舒服服地输入数据。

textarea {min-width: 100%;max-width: 100%;min-height: 200px;max-height: 400px;}html是什么意思,HTML是什么意思(时最常犯的六大错误)

同时使用display: block和position: absolute(fixed)

我经常看见开发人员像下面这样使用display和position属性:

.button::before {content: "";display: block;position: absolute;top: 0;left: 0;}

但是,浏览器会默认设置block。因此,你无需为absolute或fixed的元素设置这个值。也就是说,以下代码的结果与上述代码完全相同。

.button::before {content: "";position: absolute;top: 0;left: 0;}html是什么意思,HTML是什么意思(时最常犯的六大错误)

Outline属性的none值

无法通过键盘访问网站;链接打不开;无法注册等等。出现这些情况是因为开发人员将outline属性设置成了none值,因此元素无法聚焦。

.button:focus {outline: none;}.button:focus {outline: 0;}

如果你需要禁用默认的聚焦,那么也别忘了指定取而代之的聚焦状态。

.button:focus {outline: none;box-shadow: 0 0 3px 0 blue;}html是什么意思,HTML是什么意思(时最常犯的六大错误)

空元素

开发人员经常使用HTML空元素来调整元素的样式。例如,利用空div或span元素来显示导航栏菜单。

<button><span></span><span></span><span></span></button>.hamburger {width: 60px;height: 45px;position: relative;}.hamburger span {width: 100%;height: 9px;background-color: #d3531a;border-radius: 9px;position: absolute;left: 0;}.hamburger span:nth-child(1) {top: 0;}.hamburger span:nth-child(2) {top: 18px;}.hamburger span:nth-child(3) {top: 36px;}

其实,你可以使用 ::before和 ::after伪元素达成同样的效果。

<button><span><spanchrome-extension-mutihighlight chrome-extension-mutihighlight-style-2">dden">Open menu</span></span></button>.hamburger {width: 60px;height: 45px;position: relative;}.hamburger::before,.hamburger::after,.hamburger__text::before {content: "";width: 100%;height: 9px;background-color: #d3531a;border-radius: 9px;position: absolute;left: 0;}.hamburger::before {top: 0;}.hamburger::after {top: 18px;}.hamburger__text::before {top: 36px;}.visually-hidden {position: absolute !important;clip: rect(1px, 1px, 1px, 1px);width: 1px !important;height: 1px !important;overflow: hidden;}

原文:https://dev.to/melnik909/the-6-most-common-mistakes-developers-when-writing-html-and-css-f92

这就是关于《html是什么意思,HTML是什么意思(时最常犯的六大错误)》的所有内容,希望对您能有所帮助!


声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,谢谢。

上一篇: 全国物流十强加盟,十大快递加盟排行榜(安能物流能否撑起“快运之王”)

下一篇: wps制作ppt,如何用wps制作ppt(我对WPS演示有以下几点使用心得)



猜你感兴趣

推荐阅读

网站内容来自网络,如有侵权请联系我们,立即删除! | 软文发布 | 粤ICP备2021106084号