HTML5新增语义化标签练习

经典的页面布局中，页面被分为 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>

练习的效果图：

HTML5新增语义化标签练习相关推荐

HTML5新增语义化标签（HTML5）
HTML5新增语义化标签(HTML5) <!DOCTYPE html> <html lang="en"><head><meta chars ...
html语义化标签例子,0820作业：HTML5新增语义化标签及实战总结
作业1:HTML5 新增语义化布局标签实例 html> html5新增的语义化标签 initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
html5新语义化标签
HTML5的浏览器兼容支持Html5的浏览器包括Firefox (火狐浏览器) , IE9及其更高版本,Chrome (谷歌浏览器),Safari, Opera等; 国内的遨游浏览器(Maxthon ...
html5新增标签——新增语义化标签、新增表单控件、多媒体
1.html5 HTML5是一个新的网络标准,现在仍处于发展阶段.目标是取代现有的HTML 4.01和XHTML 1.0 标准.它希望能够减少互联网富应用(RIA)对Flash.Silverlight ...
HTML5概述 - 语义化标签
一.HTML5 简介 1.什么是 HTML5 HTML5 不是一门新的语言,而是我们之前学习的 HTML 的第五次重大修改版本. 2.HTML 的发展历史 •超文本标记语言(第一版,不叫 HTML 1 ...
结合HTML5的语义化标签，运用DIV＋CSS网页布局技术设计一个个人博客页面
** CSS+DIV页面布局 ** 结合HTML5的语义化标签,运用DIV+CSS网页布局技术设计一个个人博客页面.要求: (1)header标签定义页面头部区:nav标签定义导航区:div标签定义中 ...
（12）H5新增语义化标签布局案例
一.标签语义化以前制作网页布局,我们基本用div来做.div就是一个普通的块级标签,对于搜索引擎来说,是没有语义的. <!DOCTYPE html> <html lang=&quo ...
H5新增语义化标签以及属性
结构标签 (1)<section></section> 独立内容模块 ,可以h1-h6组成大纲 ,表示文档结构,有章节.页眉.页脚或其他部分.(2)article (文章) 文 ...

HTML5新增语义化标签练习

HTML5新增语义化标签练习相关推荐

最新文章

热门文章