HTML5新增语义化标签练习

本文通过实例介绍了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>

练习的效果图:
效果图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值