educoder—web：页面元素和属性_web页中表示引用的cite元素,在页面预览时和( ) 或( )元素的表现形式相同

作者：AllinToyou | 2024-02-16 21:42:17

踩

web页中表示引用的cite元素,在页面预览时和( ) 或( )元素的表现形式相同

文章目录

1.结构元素
2.页面节点元素
3.交互元素
4.文本层次语义元素
5.分组元素

html5目标：通过一些新标签、新功能为开发更加简单、独立、标准的通用web应用提供了标准

新的标准解决了三大问题：

浏览器兼容

文档结构不明确

web应用程序功能受限

1.结构元素

在Html5之前，我们只能通过div标签+不同的id名区分文档内容

在HTML5之后，增加了新的结构性的标签，让HTML文档更加清晰

1.1文档结构元素相关概念

在以下结构标签里，我们都可以以标题+内容的方式布局

header元素——头部
放置：
- 整个网页或页面内一个内容区块的标题
- 标题（<h1>~<h6>）
- 导航部分（<nav>）
- 普通内容（<p>和<span>）等部分。
article元素——大段内容
- 在网页中定义独立的、完整的内容
- 例如：文章、博客、帖子、评论等
aside元素
- 定义当前页面或当前文章的附属信息
- 包括当前页面或当前文章的相关引用、侧边栏、广告以及导航等有别于主体内容的部分
footer元素——脚注
- 在父级内容块中添加注释
- 在文章区中添加作者信息
- 在网页底部添加版权信息等
figure/ figcaption 元素
1. figure元素用于表示独立的流内容
  - 例如图像
  - 图表
  - 照片
  - 代码等
2. figcaption元素用于定义figure元素的标题
  - 要嵌套在<figure>中
  - 通常被置于 <figure> 中的第一个或最后一个子元素的位置。

答案：

1.2 header元素和article元素的应用

文章区由文章标题和文章内容组成。
HTML5中的语义化元素article可表示一个文章区，在其中可以嵌套header元素来表示文章的标题，文章的内容可用段落标签来设定。

<article?
  <header>文章标题</header>
  <p>文章的段落内容</p>
</article>
1
2
3
4

答案：

<!DOCTYPE html>
<html>
   <head>
       <title>页面结构</title>
       <style type="text/css">
          header{
    border-bottom:4px double #eee;
                text-align:center;
                font-size :20px
              }
       </style>
   </head>
   <body>
    <!-- ********* Begin ******* -->
       <article>
         <header><h3>茗茶推荐——祁门红茶</h3></header>
         <p>祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。</p>
       </article>
      <!-- ********* End ********* -->
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1.3 figure元素和 figcaption 元素的应用

文章区中要插入能被搜索引擎识别的图类对象，可用HTML5中的语义化元素figure来设置。在其中可以嵌套figcaption元素来表示图的名称，该元素通常被置于figure 元素的第一个或最后一个子元素的位置。

<figure>
  <img src=图的路径>
  <figcaption>图的名称</figcaption>
</figure>
1
2
3
4

答案：

<!DOCTYPE html>
<html>
   <head>
       <title>页面结构2</title>
       <style type="text/css">
          header{
    border-bottom:4px double #eee;
                       text-align:center;
                      font-size:20px
                      }
       </style>
   </head>
   <body>
       <article>
           <header>
               <h3>茗茶推荐——祁门红茶</h3>
           </header>
           <p>祁门红茶，茶叶原料选用当地的中叶,中生种茶树制作，是中国历史名茶，著名红茶精品。</p>
      <!-- ********* Begin ******* -->
         <figure>
             <img src="https://www.educoder.net/api/attachments/1223388">
             <figcaption>茶道欣赏</figcaption>
         </figure>
      <!-- ********* End ********* -->
      </article>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2.页面节点元素

2.1页面节点元素相关概念

section元素——定义文章的节**（区段）**

章节、页眉、页脚或文档中的其他部分
通常由内容及其标题组成

nav元素——作为页面导航的链接组
- 导航菜单
- 侧边栏导航
- 内页导航
- 翻页操作等区域
address元素

address元素用于一般被作者用来提供该文档的联系人信息，一般放在一个网页的开头或者结尾，最常用的是和其他内容包含在footer元素内。

address元素位于article元素内部——它表示article元素所包含文章内容的作者的联系信息
直接位于body元素内——表示该网页的作者的联系信息

答案：

2.2 section元素的使用——文章节

HTML5中的语义化元素section可表示一个文章的节，在其中可以嵌套节标题，文章节的内容可用段落标签或其他标签来设定。

<section>
  <header>文章的节标题</header>
  <p>文章的段落内容</p>
</section>
1
2
3
4

答案：

<!DOCTYPE html>
<html>
   <head>
       <title>页面结点元素</title>
       <style type="text/css">
          #Head{
    border-bottom:4px double #eee;
                text-align:center;
                font-size :20px
              }
       </style>
   </head>
   <body>
      <article>
        <header id=Head>
          <h3>茗茶推荐——祁门红茶</h3>
           </header>
      <!-- ********* Begin ******* -->
      <section>
        <header><h3>什么是红茶</h3></header>
        <p
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/96938