HTML5新增页面元素

最新推荐文章于 2024-06-14 11:39:10 发布

诗霖雪

最新推荐文章于 2024-06-14 11:39:10 发布

阅读量214

点赞数

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_56713342/article/details/132410117

版权

HTML5 中新增了几个结构元素（ section 元素、 article 元素、 nav 元素、 aside 元素、 header 元素和 footer 元素），这些元素的作用与块元素非常相似，通过运用这些结构元素，可以让网页的整体结构更加直观和明确、更加具有语义化和更具有现代风格。

结构元素

1、header元素

header页面头标签：Header元素通常来放置整个页面或页面内的一个内容区块的标题，它可以包含页面标题、logo图片，搜索表单等

<header>
<h1>标题</h1> 
</header>

2、 nav元素

nav元素定义页面的导航链接部分区域，引用nav元素可以让页面元素的语义更加明确。在一个HTML页面中可以包含多个nav元素，但并不是所有的链接都需要包含在nav元素中。

<nav>
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">下一页</a>
<a href="#">尾页</a>
</nav>

3、section元素

section元素用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题。Section元素通常用于文章的章节、页眉、页脚或文档中的其他部分。

4、 aside元素

aside元素通常用来表示当前页面的附属信息部分，它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。它可以包含我们当前页面或者主题内容相关的一些引用，如侧边栏、广告、目录、索引、Web应用、链接、当前页内容简介等，有别与我们主要内容。

5、article元素

article标签用来定义页面独立区块的内容

6、footer元素

footer标签可以写页面尾部/底部信息

分组元素

1、 figure和figcaption

figure元素用来定义一块独立内容，该内容如果被删除也不会对周围的内容有影响。它可以用来表示图片、图表、音频、视频，代码等。 figcaption元素用于为figure元素组添加标题，figcaption只能作为figure元素的子元素，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。

2、 hgroup元素

hgroup 元素用于对网页或区段（section）的标题进行组合。它常与 h1~h6元素组合使用。通常，将 hgroup 元素放在 header 元素中。

<body>
   <section>
        <header>
            <hgroup>
                <h1>标题一</h1>
                <h2>标题二</h2>
                <h3>标题三</h3>
            </hgroup>
        </header>
        <p>我的文章内容</p>
    </section>
    <h1>标题一</h1>
    <h2>标题二</h2>
</body>

页面交互元素

1、details和summary元素

details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题。在默认情况下，标题可见，不显示details中的内容，当用户点击标题时，会显示或隐藏details中的其他内容

2、 progress元素

progress元素定义运行中的任务进度（进程）。如Windows系统中软件的安装、文件的复制等场景的进度。progress元素的常用属性有两个。

1）value：已经完成的工作量。

不设置此属性时，此进度条为“不确定”型，无具体进度信息，只是表示进度正在进行，但是不清楚还有多少工作量没有完成。

2）max：总共有多少工作量。

可以自行设置max值。value的默认取值范围为0.01~1，无max属性时，如果value值为0.5则表示当前进度为50%。value和max属性的值必须大于0。

3、 meter元素

meter元素用于表示指定范围内的数值。如磁盘使用情况、查询结果、或投票比例等，都可以使用meter元素。 value是实际的值 min是最小值 max是最大值 low偏低的值 high是偏高的值

<h2>学习成绩变化情况</h2>
    <p>
        第一学期数学成绩
        <!-- value是实际的值 min是最小值 max是最大值 low偏低的值  high是偏高的值 -->
        <meter value="58" min="0" max="100" low="60" high="90">58</meter> <span>100满分</span>
    </p>
    <p>
        第二学期数学成绩
        <meter value="70" min="0" max="100" low="60" high="90">70</meter> <span>100满分</span>
    </p>
    <p>
        第三学期数学成绩
        <meter value="95" min="0" max="100" low="60" high="90">95</meter> <span>100满分</span>
    </p>
    <p>
        第四学期数学成绩
        <meter value="100" min="0" max="100" low="60" high="90">100</meter> <span>100满分</span>
    </p>

文本语义元素

1、ime元素

time 元素有两个属性。

•datetime ：规定日期或时间。否则，由元素的内容给定日期或时间。

•pubdate ：指示 time 元素中的日期 / 时间是文档（或 article 元素）的发布

日期。常取值为“ pubdate ” 。

2、 mark元素

mark元素的主要功能是高亮显示文本或字符，以引起用户注意。其用法与strong类似，但是mark元素更随意灵活。

3、 cite元素

cite元素用来表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。被引用的文本将以斜体显示，以和其他内容区分。

<body>
    <!-- time元素 -->
    <p>某明星演唱会时间 <time datetime="2023-7-20">2023年7月20日</time></p>
    <!-- mark元素 文字高亮显示 -->
    <p>这里有一段文字，其中我希望 <mark> html</mark> 这几个字母高亮显示</p>
    <mark>放在mark标签里面的文字会高亮显示</mark>

    <!-- cite元素 文字倾斜演示 一般表示文字引用的输出 -->
    <p>我喜欢跑步 </p>
    <cite>----小明</cite>
</body>

ader素

诗霖雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML5新增页面元素

HTML5中新增了几个结构元素（和），这些元素的作用与块元素非常相似，通过运用这些结构元素，可以让网页的整体结构更加直观和明确、更加具有语义化和更具有现代风格。结构元素1、header元素header页面头标签：Header元素通常来放置整个页面或页面内的一个内容区块的标题，它可以包含页面标题、logo图片，搜索表单等he2、 nav元素nav元素定义页面的导航链接部分区域，引用nav元素可以让页面元素的语义更加明确。
复制链接

扫一扫