过一遍HTML标签（二）

最新推荐文章于 2022-05-31 10:14:09 发布

gigi就是我

最新推荐文章于 2022-05-31 10:14:09 发布

阅读量641

点赞数 1

分类专栏： html 文章标签： html html5 标签

本文链接：https://blog.csdn.net/crystal6918/article/details/53409699

版权

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

章节

body

代表HTML文档的内容。在文档中只能有一个body元素。

body元素必须是html元素的直接子元素
对应的DOM接口是HTMLBodyElement
- 可以通过document.body直接访问body元素

属性：
有一系列在HTML5中添加的和事件有关的属性，其中比较常用的几个：

onblur：DOM失去焦点时的回调函数
onerror：DOM加载失败的回调函数
onfocus：DOM接收到焦点focus的回调函数
onload：DOM完成加载的回调函数
onunload：文档已经被关闭时的回调函数

section（HTML5、块级）

HTML Section 元素表示文档中的一个章节。
一般来说会包含一个标题。一般通过是否包含一个标题 (< h1>-< h6> ) 作为子节点来辨识每一个< section>。

如果元素内容可以分为几个部分的话，应该使用 < article> 而不是 < section>。
不要把 < section> 元素作为一个普通的容器来使用，这是本应该是< div>的用法。一般来说，一个 < section> 应该出现在文档大纲中。

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

nav（HTML5）

HTML导航栏 (< nav>) ，描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表.

并不是所有的链接都必须使用< nav>元素,它只用来将一些热门的链接放入导航栏,例如< footer>元素就常用来在页面底部包含一个不常用到,没必要加入< nav>的链接列表.
一个网页也可能含有多个< nav>元素,例如一个是网站内的导航列表,另一个是本页面内的导航列表.
对于屏幕阅读障碍的人,可以使用这个元素来确定是否忽略初始内容.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

article（HTML5、块级）

< article>元素表示文档、页面、网站中的独立结构，是可以独立于内容其余部分的完整独立内容块。

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
    </p>
  </footer>
</article>

aside（HTML5、块级）

< aside> 元素表示一个和其余页面内容几乎无关的部分，与周围的文本没有密切关系。
其通常表现为侧边栏、嵌入内容等，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接等等。

<article>
  <p>
    The Disney movie <em>The Little Mermaid</em> was
    first released to theatres in 1989.
  </p>
  <aside>
    The movie earned $87 million during its initial release.
  </aside>
  <p>
    More info about the movie...
  </p>
</article>

h1~h6（块级）

标题元素实现了六层文档标题，< h1> 是最大的标题，< h6> 是最小的标题。标题元素简要地描述章节的主题。

hgroup（HTML5）

代表一个标题组。

一般可以将主标题和副标题包装在一个标题组hgroup中，但是这里面除了h1~h6不要放其他元素。

<hgroup>
  <h1>Main title</h1>
  <h2>Secondary title</h2>
</hgroup>

hgroup一般只关注顶级标题，也就是这里的h1，其他标题也会显示在浏览器中，但不会被列入文档纲要。因此这里的h2只表示副标题，不表示小节的开始。

header（HTML5、块级）

定义页面或章节的头部。它经常包含 logo、页面标题等。

一般如果文章开头的内容很多，除了主标题之外，还有其他内容，如内容照耀、发表日期、作者署名、图片或小标题等，都应该把它们放在一个header元素中。

<header>
    <hgroup>
      <h1>Main title</h1>
      <h2>Secondary title</h2>
    </hgroup>
    <p>bu Ran N.</p>
</header>

footer（HTML5、块级）

定义页面或章节的尾部（页脚），它经常包含版权信息、法律信息链接和反馈建议用的地址。

注意< footer>元素必须不能是 < address>, < header> 或者另一个< footer> 元素的后代元素。

address（块级）

HTML 的< address>元素可以让作者为它最近的< article>或者< body>祖先元素提供联系信息。在后一种情况下，它应用于整个文档。

当表示一个和联系信息无关的任意的地址时，使用< p>元素而不是< address>元素。
这个元素不能包含除了联系信息之外的任何信息，比如出版日期（这应该包含在< time>元素中）。
通常，< address>元素可以放在当前section的< footer>元素中，如果存在的话。

不能包含的元素：
- 标题内容（hgroup,h1~h6）
- 章节内容（article、aside、section、nav）
- header或footer元素

<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>
    1981 Landings Drive<br>
    Building K<br>
    Mountain View, CA 94043-0801<br>
    USA
  </address>

这里写图片描述

像图中展示的那样，< address>元素使用< i>或者< em>元素的默认样式渲染文本。

main

HTML Main 元素呈现了文档< body>或应用的主体部分。
主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。

在一个文档只能出现一个 < main>标签
父元素不能是< article>, < aside>, < footer>, < header>, 或< nav>

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>

</main>

这里写图片描述

组织内容

p（块级）

HTML < p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。

hr（块级）

HTML < hr> 元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。
在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。

<p>This is the first paragraph of text. This is the first paragraph of text.
  This is the first paragraph of text. This is the first paragraph of text.</p>

<hr>

<p>This is second paragraph of text. This is second paragraph of text.
  This is second paragraph of text. This is second paragraph of text.</p>

这里写图片描述

pre（块级）

HTML < pre> 元素代表其内容已经预先排版过，格式应当保留。
在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

blockquote（块级）

HTML中的< blockquote>元素，代表其中的文字是引用内容。
通常在渲染时，这部分的内容会有一定的缩进。

属性：

cite：标注引用信息的来源文档或者相关信息的URL。

<blockquote cite="http://developer.mozilla.org">
  <p>This is a quotation taken from the Mozilla Developer Center.</p>
</blockquote>

可以使用margin属性来改变blockquote的缩进。
如果想使用行内引用，可以使用q标签

ol（块级）

定义一个有序列表
在网页的 HTML 描述中并没有定义编号的样式，但可以使用 list-style-type 属性来设置。

属性：

reversed（HTML5）：这个布尔属性规定了列表的条目采用倒序，即最不重要的条目放在列表第一个位置。
start（HTML5）：设定列表项开始的序号
type：定义了列表项序号的类型：
- a：小写字母
- A：大写字母
- i：小写罗马数字
- I：大写罗马数字
- 1：数字（默认值）

<ol start="7">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

这里写图片描述

<!--嵌套列表 -->
<ol>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ol>

这里写图片描述

<!--混合使用ol与ul -->
<ol>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ol>

这里写图片描述

ul（块级）

定义一个无序列表
无序列表项的头部可以是几种形式，如一个点，一个圆形或方形。头部的风格并不是在页面的HTML描述定义, 但在其相关的CSS 可以用 list-style-type 属性设置

<ul>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>

这里写图片描述

<ul>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem      <!-- Same for the second nested unordered list! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li>           <!-- Closing </li> tag for the li that contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
  </li>               <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>

这里写图片描述

li（块级）

表示列表里的条目。
必须被包含在一个父元素里：一个有顺序的列表(< ol>)，一个无顺序的列表(< ul>)，或者一个菜单 (< menu>)。在菜单或者无顺序的列表里，列表条目通常用点排列显示。在有顺序的列表里，列表条目通常是在左边有按升序排列计数的显示，例如数字或者字母。

属性：

value：只允许值为数字，表示当前列表项的序号。对于ul和menu来说不起作用。

<ol type="I">
    <li value="3">third item</li>
    <li>fourth item</li>
    <li>fifth item</li>
</ol>

这里写图片描述

type：和ol的type属性作用相同，会覆盖ol元素定义的type

dl（块级）

定义列表。
在HTML5中，描述其为一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。

dt（块级）

用于在一个定义列表中声明一个术语。
该元素仅能作为 < dl> 的子元素出现。
通常在该元素后面会跟着 < dd> 元素，然而，多个连续出现的 < dt> 元素都将由出现在它们后面的第一个 < dd> 元素定义。

dd（块级）

用来指明一个描述列表 (< dl>) 元素中一个术语的描述
这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 < dt> 元素。

下面看有关dl，dt，dd的几个例子

单条术语与描述

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>

  <!-- other terms and definitions -->
</dl>

这里写图片描述

多条术语，单条描述

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>

  <!-- other terms and definitions -->
</dl>这里写代码片

这里写图片描述

单条术语，多条描述

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
      is a mostly herbivorous mammal, slightly larger than a domestic cat
      (60 cm long).</dd>

  <!-- other terms and definitions -->
</dl>

这里写图片描述

元数据

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

小技巧：通过 CSS3 ，我们可以很容易的在术语后面添加一个与内容无关的分隔符号，比如：

dt:after {
  content: ": ";
}

这里写图片描述

figure（HTML5、块级）

代表一个和文档有关的插图。
这个标签经常是在主文中引用的图片，插图，表格，代码段等等

figcaption（HTML5、块级）

代表一个图例的图题。
< figcaption> 在< figure> 块里是第一个或最后一个。
如果没有该元素，这个父节点的图片会没有说明/标题。

<!-- Just a figure -->
<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
</figure>
<p></p>

<!-- Figure with figcaption -->
<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">  
  <figcaption>Fig1. MDN Logo</figcaption>
</figure>

这里写图片描述

<figure>
 <p>
  Depression is running through my head,<br>
  These thoughts make me think of death,<br>
  A darkness which blanks my mind,<br>
  A walk through the graveyard, what can I find?....
 </p>
 <figcaption><cite>Depression</cite>. By: Darren Harris</figcaption>
</figure>

这里写图片描述

div（块级）

代表一个通用的容器，没有特殊含义
它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)，它应该在没有任何其它语义元素可用是才使用

gigi就是我

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过一遍HTML标签（二）

章节body 代表HTML文档的内容。在文档中只能有一个body元素。body元素必须是html元素的直接子元素对应的DOM接口是HTMLBodyElement 可以通过document.body直接访问body元素属性：有一系列在HTML5中添加的和事件有关的属性，其中比较常用的几个：onblur：DOM失去焦点时的回调函数onerror：DOM加载失败的回调函数onfocus
复制链接

扫一扫

专栏目录