HTML5新增语义化标签练习

最新推荐文章于 2025-06-05 09:52:00 发布

原创最新推荐文章于 2025-06-05 09:52:00 发布 · 700 阅读

0 ·

CC 4.0 BY-SA版权

新人练手专栏收录该内容

16 篇文章

订阅专栏

本文通过实例介绍了HTML5中新增的语义化标签，如<header>、<main>、<aside>、<footer>等，帮助开发者更好地组织页面结构，提升网页可读性和无障碍性。通过练习，读者将掌握如何使用这些标签来实现标准的页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经典的页面布局中，页面被分为 header、main、aside、footer 四个部分
传统都是用多个div盒子
新增的部分语义化：
<article>定义文章

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）

<figcaption> 定义 figure 的标题

<aside> 定义文章的侧边栏

<footer>定义页脚

<header>定义页眉

<nav>定义导航

<section> 定义文档中的区段

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<figure>
       <img src="img/居老师.jpg"  alt="居老师-image"  width="280px" height="200px"/>
       <figcaption>帅气的居老师◕‿◕</figcaption>
    </figure>
    
     <footer>
        <p>Posted by:十一啊</p>
       <a href="https://weibo.com/zhuyilong?is_all=1&profile_ftype=1">居老师的微博</a>
    </footer>
      <article>
        <header>
            <h1>让我们一起</h1>
            <p>认识居老师：</p>
        </header>
        <p>演员，作品《情定三生》《新边城浪子》《芈月传》《夏梦狂诗曲》</p>
    </article>
      <main>
        <h1>居老师的独家个人信息</h1>
        <p>1988年4月16日出生于湖北武汉，中国内地男演员，毕业于北京电影学院2006级表演系本科。 </p>

        <article>
            <h1>居老师的社会活动</h1>
            <p>2018年8月4日，朱一龙被授予芒果V基金公益大使，呼吁大家共同关注“乡村”音乐教育，助力公益，传递更多的社会正能量</p>
        </article>

        <article>
            <h1>居老师的演艺经历</h1>
            <p>2009年出演电影《再生缘》；
            	2010年主演亚洲首部IMAX3D电影《大明宫传奇》；
            	2012年主演电视剧《家宴》；
            	2013年主演民国情感剧《情定三生》；
            	2014年3月出演都市青春剧《我的爱对你说》；
            	9月出演古龙武侠巨制《萧十一郎》；
            	10月出演大型古装历史剧《芈月传》；
            	 2016年2月，在古装武侠剧《新萧十一郎》中饰演风采翩翩、文武兼备的无垢山庄少庄主连城璧 ；
            	 7月，在武侠小说《新边城浪子》中饰演黑衣黑刀傅红雪 ；
            	 2017年10月20日，其参演的《胡杨的夏天》在中国上映；
            	 11月3日，其参演的《密战》在中国内地上映；
            	 2018年6月13日，《镇魂》首播，朱一龙在剧中一人分饰三角，饰演龙城大学生物工程系教授沈巍、黑袍使和夜尊；
            	 6月17日，获得2018微博之夜微博人气演员奖；随后，参演都市剧《我的真朋友》，化身室内设计师为梦想执笔；
            	 12月25日，参演的电视剧《知否？知否？应是绿肥红瘦》播出，在剧中饰演齐衡；
            	 2019年1月1日，获2018国剧盛典青春演技魅力男演员奖。</p>
        </article>

        <article>
            <h1>居老师的社会活动</h1>
            <p>2018年8月4日，朱一龙被授予芒果V基金公益大使，呼吁大家共同关注“乡村”音乐教育，助力公益，传递更多的社会正能量</p>
        </article>
    </main>
    <aside>
        <h4>暂停一下</h4>
        <p><a href="img/狐狸.jpg">要不要点一下</a></p>
    </aside>
  <ul>
  	<p>你最喜欢居老师哪个角色？</p>
        <li><data value="21053">胡杨</data></li>
        <li><data value="21054">冯豆子</data></li>
        <li><data value="21055">沈巍</data></li>
    </ul>
    
     <details>
        <summary>居老师唱过的歌</summary>
        <p>地星撞海星</p>
        <p>时间飞行</p>
        <p>小幸运</p>
        <p>男孩</p>
    </details>

    <details open>
        <p>地星撞海星</p>
        <p>时间飞行</p>
    </details>

    <details>
        <p>小幸运</p>
        <p>男孩</p>
    </details>
    
	</body>
</html>

练习的效果图：