你可能不熟悉但有用的 HTML 小知识

74 阅读1分钟

1.元素类别

块级元素

  • 每个盒子都会换行
  • width、height 属性可以发挥作用
  • 内边距、外边距、边框会将其他元素从当前盒子周围“推开”
  • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间,在绝大数情况下意味着盒子会和父容器一样宽
<h1><hr><div><section><ul><ol><header><footer><p><form>
<address><article><aside><blockquote><pre>
<fieldset><figcaption><figure><hgroup><dd><dl>

内联元素

  • 盒子不会产生换行。
  • width、height 属性将不起作用。
  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline状态的盒子“推开”。
  • 水平方向的内边距、外边距以及边框会被应用且把其他处于 inline 状态的盒子“推开”。
 <a><button><br><img><span><label><input><textarea>
<b><i><q><big><small><tt><abbr><acronym><cite>
<code><dfn><em><kbd><strong><samp><var><bdo>
 <map><object><script><sub><sup><select>

2.特殊字符

在 HTML 中, < > " ' &这5个是特殊字符,它们是 HTML 语法自身的一部分,我们必须使用字符引用 (表示字符的特殊编码)来在页面上显示它们,如:&gt; 代表 >

3.HTML语义化

语义化的好处:

  1. 利于搜索引擎对网站内容查询优化
  2. 利于屏幕阅读器帮助阅读障碍者读取识别网站内容
  3. 利于开发人员维护 HTML 代码

例如:最好只对每个页面使用一次<h1> 顶级标题,所有其他标题位于层次结构的下方。<main> 存放每个页面独有的内容。每个页面上只能用一次 <main>,且直接位于 <body> 中。最好不要把它放进其它元素中。

4.table 标签小技巧

可以通过添加样式在 <col> 来指定表格每列的样式,<col> 元素被规定包含在 <colgroup> 容器中,而 <colgroup>就在 <table> 标签的下方。