[HTML | 青训营笔记]

85 阅读2分钟

块状元素

块级元素占据其父元素(容器)的整个水平空间,垂直空间等于其内容高度,因此创建了一个“块”。

块级元素独占一行。(写常见到的标签,有些不常见的就没怎么写)

address article aside blockquote secition h1-h6

这里显示不了实体案例只有代码块

<address>
  You can contact author at <a href="http://www.somedomain.com/contact">
    www.somedomain.com</a>.<br>
  If you see any bugs, please <a href="mailto:webmaster@somedomain.com">
    contact webmaster</a>.<br>
  You may also want to visit us:<br>
  Mozilla Foundation<br>
  331 E Evelyn Ave<br>
  Mountain View, CA 94041<br>
  USA
</address>

address标签适用于联系方式里面嵌套a标签即可,这类标签都一样。用法大致相同。

<div>
  <p>这里可以是任何内容,比如 &lt;p&gt;,
  &lt;table&gt;,一切由你作主!</p>
</div>

dl dt dd 实例

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

ui li

<ul>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ul>

行内元素

大多数都是行内元素或块级元素。一个行内元素只占据它对应标签的边框所包含的空间。 下面就写一些经典的行内元素。

strong

<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>

a

<a href="#属性">
Description of Same-Page Links
</a>

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

br span 不要用br来增加文本之间的行间隔;应使用css属性或p元素。

span与 div是一个块元素 而span则是行内元素。 img

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>
src属性可有 alt随意(对于图片的描述)图片路径挂了就显示alt描述的内容。
loading eager 立即加载图像 lazy 延迟加载图像

button

<button name="button">Click me</button>

type: submit reset button menu input的type="button" 和 type="submit" 也是一样的

还是得好好的记住这个标签,这些标签都是尤为重要的。 参考了官网w3school里面的教程。