这15个HTML/CSS错误我不信你没犯过(网站规范)

我经常看到的流行错误是使用占位符属性而不是标签元素。但屏幕阅读器的用户在这种情况下无法填充字段，因为屏幕读取器无法从占位符属性读取文本。

因此，我建议使用字段名称的标签元素和占位符属性作为用户需要填写的数据示例。

您可以使用此代替Enteryouremail2.使用img元素创建装饰图形如今，开发人员经常将装饰图形与内容图像混淆。例如，他们使用img元素标记社交图标。

但是社交图标是一个装饰图标，它可以帮助用户更快地理解元素的含义，而无需阅读文本。如果我们删除图标，我们不会失去元素的含义，因此我们可以使用背景图像属性。

如果您想要限制文本区域的大小，您可以使用最小宽度、最大宽度、最小高度和最大高度属性。但是，你应该拿起高度值，以便用户可以填补领域一个舒适的方式为自己。

textarea{width:100%;height:200px;resize:none;}您可以使用此代替textarea{min-width:100%;max-width:100%;min-height:200px;max-height:400px;}4.使用空元素在Web中，使用空HTML元素造型元素的做法很差。例如，汉堡包标记使用空div或跨度元素。

但这个问题应该用伪元素之前和之后来解决。在这种情况下，HTML看起来更干净。此外，最主要的是为屏幕阅读器添加文本，以便用户可以与此按钮进行交互。

第二，对齐主体是对齐容器内的元素。对齐属性会影响它们。

因此，当对齐主体的尺寸大于对齐容器的大小时，就会出现这种情况。在默认的对齐模式下，它会导致数据溢出和丢失。因此，用户将看到裁剪的元素。

我创建了一个具有模式元素的示例来显示此行为。起初，文本很短。但是，当我们使它更多，我们失去了标题和关闭按钮。

我们可以使用自动边距修复它，因为它使用额外的空间来对齐元素，不会导致溢出。看看元素是如何不再丢失的。

默认情况下，浏览器在加载字体时等待，因此它不显示任何内容。但是，我们可以更改浏览器使用回退显示文本。

有字体显示描述符，根据是否下载并准备使用字体表脸来确定字体脸的显示方式。

我们可以使用交换值指示浏览器使用回退显示文本，直到自定义字体完全下载。

此技巧可帮助用户更快地开始与界面交互并实现其目标。

当您在HTML文档中使用SVG图标时，请注意设置宽度和高度属性。如果你不这样做，你依靠你设置的宽度和高度属性在CSS你的界面将被打破。

您的CSS可能未加载，此时，图标将尝试填充所有可用空间。所以错误发生了。只需设置宽度和高度属性，即可轻松入睡。您的接口将是防弹的！

此解决方案称为图片元素，允许定义一组图像的源路径，以便浏览器可以加载设备最合适的图像。

例如，我们可以创建2个源元素并定义宽度介质功能以检测垫和桌面。此外，我们将使用手机的img元素。然后浏览器将选择最适合用户的图像。

注意，我使用移动第一的方法，所以如果图片没有浏览器支持或用户使用手机来显示小图像。

您可以使用此代替此外，您还可以使用显示密度描述符和scrset属性来建议哪个图像更适合特定设备，同时考虑像素密度。

例如，如果手机的像素密度为2倍或更多，浏览器将使用2x描述器加载法拉利-640x480-2x.jpg图像。但是，如果它有1倍像素密度法拉利-640x480-1x图像将被加载。此外，此规则将适用于垫和桌面设备。

您可以使用此代替9.缺少主要元素每个网页都有主要内容，但开发人员会以某种方式忘记它。他们不使用主要元素。因此，辅助技术认为网页没有主要内容。