HTML注意事项

矫情吗；* 2022-07-13 05:12 159阅读 0赞

重新简单翻看了一下`HTML 4.01`教程，记录一下几个知识、提示。

# HTML定义 #

HTML 指的是超文本标记语言，是`Hyper Text Markup Language`的缩写，HTML 不是一种编程语言，而是一种标记语言 (`markup language`)。

# 不要忘记结束标签 #

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 `HTML`：

<p>这是没有结束标签的段落
    <p>这是没有结束标签的段落

上面的例子在大多数浏览器中都没问题，但不要认为没问题就习惯使用这种做法。忘记使用结束标签会产生不可预料的结果或错误。养成良好的书写习惯，不但能提高代码可读性，还能增加代码向后的兼容。  
**注意：未来的 HTML 版本不允许省略结束标签。**

# 空的HTML元素 #

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。如`<br>`就是没有关闭标签的空元素（`<br>` 标签定义换行）。  
在**开始标签中添加斜杠是关闭空元素的正确方法**，比如 `<br />`，HTML、XHTML 和 XML 都接受这种方式。  
即使 `<br>` 在所有浏览器中都是有效的，但使用 `<br />` 其实是更长远的保障。  
**注意：在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。**

# HTML标签使用小写 #

HTML 标签对大小写并不敏感：`<P>` 等同于 `<p>`，不过还是建议全部使用小写。  
**注意：万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。**

# HTMl显示时会合并连续的空格或空行 #

对于 HTML，您无法通过在 HTML 代码中添加额外的**空格**或**换行**来改变输出的效果。  
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。  
所以，要显示多个空格需要手动添加空格转移符，如` `要换行需要使用`<br/>`标签。

# 废弃的标签和属性 #

在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。所以为了是代码具有一定的向后兼容性，请避免使用这些被废弃的标签和属性！

废弃的标签和属性：

<table> 
 <thead> 
  <tr> 
   <th align="left">标签</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>&lt;center&gt;</code></td> 
   <td align="left">定义居中的内容</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;font&gt;</code> 和 <code>&lt;basefont&gt;</code></td> 
   <td align="left">定义 HTML 字体。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;s&gt;</code> 和 <code>&lt;strike&gt;</code></td> 
   <td align="left">定义删除线文本</td> 
  </tr> 
  <tr> 
   <td align="left"><code>&lt;u&gt;</code></td> 
   <td align="left">定义下划线文本</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>align</code></td> 
   <td>定义文本的对齐方式</td> 
  </tr> 
  <tr> 
   <td><code>bgcolor</code></td> 
   <td>定义背景颜色</td> 
  </tr> 
  <tr> 
   <td><code>color</code></td> 
   <td>定义文本颜色</td> 
  </tr> 
 </tbody> 
</table>

对于以上这些标签和属性：**可以使用样式代替！**

# 表格中空的单元格边框问题 #

有些浏览器，显示表格时，如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。如下：

浏览器可能会这样显示：  
![这里写图片描述][SouthEast]  
如上图：左下角这个空的单元格的边框没有被显示出来。为了避免这种情况，**在空单元格中添加一个空格占位符**，就可以将边框显示出来。

# 页面内锚点标记 #

页面内的锚点标记就相当于书签，方便页面内快速的跳转，使用方式分为定义锚点和使用锚点两部分：

*  定义锚点  
    使用`<a>`标签，给标签增加name属性，name属性的值任意，供后面使用时调用。锚点不会以任何方式显示，它对用户是不可见的。也可以使用 id 属性来替代 name 属性。语法：

<a name="label">锚（显示在页面上的文本）</a>

比如：

<a name="bottom">这里是底部</a>

*  使用锚点  
    使用锚点，和超链接跳转到其他页面一样，只是href属性不是指向一个url，而是指向上面定义的锚点。如：

<a href="#bottom">跳转到底部</a>