经典的页面布局中,页面被分为 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>
练习的效果图: