html编码规范1

最新推荐文章于 2023-06-09 11:29:30 发布

weixin_38015898

最新推荐文章于 2023-06-09 11:29:30 发布

阅读量245

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_38015898/article/details/106675504

版权

本文详细阐述了HTML编码中常见的11条规范，包括img标签的alt属性使用、单标签的正确闭合、自定义属性的命名、元素的正确嵌套、section的标题要求等，旨在提升网页的可读性和SEO效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML编码规范

1. img标签要写alt属性

根据W3C标准，img标签要写alt属性，如果没有就写一个空的。但是一般要写一个有内容的，根据图片想要表达的意思，因为alt是在图片无法加载时显示的文字。如下不太好的写法：

<img src="company-logo.svg" alt="ABC Company Logo">

更好的写法：

<img src="chime-logo.svg" alt="ABC Company">

这里就不用告诉用户它是一个Logo了，直接告诉它是ABC Compay就好了。再如：

<img src="user-head.jpg" alt="User Portrait">

可改成：

<img src="user-head.jpg" alt="Bolynga Team">

如果图片显示不出来，就直接显示用户的名字。

有些人偷懒就直接写个空的alt那也可以，但是在一些重要的地方还是要写一下，毕竟它还是有利于SEO.

2. 单标签不要写闭合标签

为什么？因为写了也没用，还显得你不懂html规范，我们不是写XHTML。常见的单标签有img、link、input、hr、br，如下不好的写法：

<img src="test.jpg"></img><br/>
<input type="email" value=""/>

应改成：

<img src="test.jpg"><br>
<input type="email" value="">

如果你用React写jsx模板，它就要求每个标签都要闭合，但是它始终不是原生html.

3. 自定义属性要以data-开头

自己添加的非标准的属性要以data-开头，否则w3c validator会认为是不规范的，如下不好的写法：

<div count="5"></div>

应改成：

<div data-count="5"></div>

4. td要在tr里面，li要在ul/ol里面

如下不好的写法：

<div>
    <li></li>
    <li></li>
</div>

更常见的是td没有写在tr里面：

<table>
    <td></td>
    <td></td>
</table>

如果你写得不规范，有些浏览器会帮你矫正，但是有些可能就没有那么幸运。因为标准并没有说如果写得不规范应该怎么处理，各家浏览器可能有自己的处理方式。

5. ul/ol的直接子元素只能是li

有时候可能会直接在ul里面写一个div或者span，以为这样没关系：

<ol>
    <span>123</span>
    <li>a</li>
    <li>b</li>
</ol>

这样写也是不规范的，不能直接在ol里面写span，ol是一个列表，它的子元素应该都是display: list-item的，突然冒出来个span，你让浏览器如何自处。所以写得不规范就会导致在不同的浏览器会有不同的表现。

同样，tr的直接子元素都应该是td，你在td里面写tr那就乱了。

6. section里面要有标题标签

如果你用了section/aside/article/nav这种标签的话，需要在里面写一个h1/h2/h3之类的标题标签，因为这四个标签可以划分章节，它们都是独立的章节，需要有标题，如果UI里面根本就没有标题呢？那你可以写一个隐藏的标题标签，如果出于SEO的目的，你不能直接display: none，而要用一些特殊的处理方式，如下套一个hidden-text的类：

<style>.hidden-text{position: absolute; left: -9999px; right: -9999px}</style>
<section>
    <h1 class="hidden-text">Listing Detail</h1>
</section>

7. 使用section标签增强SEO

使用section的好处是可以划分章节，如下代码：

<body>
<h1>Listing Detail</h1>
<section>
    <h1>House Infomation</h1>
    <section>
       <h1>LOCATION</h1>
       <p></p>
    </section>
    <section>
        <h1>BUILDING</h1>
        <p></p>
    </section>
</section>
<section>
    <h1>Listing Picture</h1>
</section>
</body>

就会被outline成这样的大纲：
Listing Detail
1.House Infomation
1.LOCATION
2.BUILDING
2.Listing Picture

可以使用html5 outliner进行实验

8. 行内元素里面不可使用块级元素

例如下面的写法是不合法的：

<a href="/listing?id=123">
    <div></div>
</a>

a标签是一个行内元素，行内元素里面套了一个div的标签，这样可能会导致a标签无法正常点击。再或者是span里面套了div，这种情况下需要把inline元素显式地设置display为block，如下代码：

<a href="/listing?id=123" style="display: block">
    <div></div>
</a>

这样就正常了。

9. 每个页面要写<!DOCType html>

设置页面的渲染模式为标准模式，如果忘记写了会怎么样？忘记写了会变成怪异模式，怪异模式下很多东西渲染会有所不同，怪异模式下input/textarea的默认盒模型会变成border-box，文档高度会变成可视窗口的高度，获取window的高度时就不是期望的文档高度。还有一个区别，父容器行高在怪异模式下将不会影响子元素，如下代码：

<div><img src="test.jpg" style="height:100px"></div>

在标准模式下div下方会留点空白，而在怪异模式不会。这个就提醒我们在写邮件模板时需要在顶部加上<!DOCType html>，因为在本地开发邮件模板时是写html片段，没有这个的话就会变成怪异模式。

10. html要保持简洁，不要套太多层

需要套很多层的，一般有两种情况，一种是切图不太会，需要套很多层来维持排版，第二种是会切图，但是把UI拆解得太细。像以下布局：
在这里插入图片描述
我会这么写：

<ul>
    <li>
        <div class="img-container">
            <img>
        </div>
        <div class="text"></div>
    </li>
</ul>

因为它是一个列表，所以外面用ul/li作为容器，里面就两个div，一个图片的float: left，另外一个文字的容器，这样就可以了。不用套很多层，但是有一些是必要的，你写得太简单的话，扩展性不好，例如它是一个列表那你就应该使用ul/ol，如果你要清除浮动，那你可能需要套一个clearfix的容器。

如果有一块是整体，它整体向右排版，那么这一块也要套一个容器，有时候为了实现一些效果，可能也要多套一个容器，例如让外面的容器float，而里面的容器display: table-cell。但是你套这些容器应该都是有价值，如果你只是为了在功能上看起来整齐划一，区分明显好像没太大的意义。