标签:读书 VID rip type cti webstorm book time 事件
HTML5新增标签HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义标签、交互性标签
1) 结构性标签
负责web上下文结构的定义,确保HTML文档完整性,包括:
http://book.sina.com.cn/news/whxw/2019-05-25/doc-ihvhiews4585024.shtml?pos=202061
上连接:是一个新闻连接
上图:头部有标题标签还有其他一些内容
上2图:中间内容可能会有多个标题 段落等内容组成。
上图:这是尾部内容
上图:webstorm文件;图片是新浪微博的图标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--标签页标题-->
<title>第十七届华语文学传媒盛典颁奖:六大奖项致敬时代书写者</title>
</head>
<body>
<!--新闻-->
<article>
<!--头部-->
<header>
<!--头部标题-->
<h2>第十七届华语文学传媒盛典颁奖:六大奖项致敬时代书写者</h2>
<!--头部子标题-->
<h3>2019年05月25日23:43 新浪读书</h3>
<!--图标-->
<img src="images/1.png" alt="微博">
</header>
<!--中间章节-->
<section>
<!--标题标签-->
<h3>李洱:从事写作30年,我还是个新手</h3>
<!--段落-->
<p>
继《花腔》、《石榴树上结樱桃》之后,李洱磨砺十三年的厚重之作《应物兄》一经出版即引来评论界高度赞誉。
这部八十万字的煌煌巨著,生动地刻画了当代学院知识分子的群像,话语交织、角色纷纭、引述广博,
被誉为一部百科全书式的小说创作。
</p>
</section>
<section>
<h3>陈继明:小说家永远是学徒</h3>
<p>陈继明以长篇小说《七步镇》斩获第17届华语文学传媒盛典“年度小说家”。授奖辞称“陈继明创造了自己的‘七步镇’,一个爱欲与救赎、记忆与遗忘、欢悦与酷烈交织的美学时空。穿过生命巨大的迷茫,经由自我内在的辩论,那个亦虚亦实、似前世又似今生的一段内心旅行,所从何来,又去往何方?出版于二〇一八年度的长篇小说《七步镇》,写出了这种现实的重影和灵魂的歧途。”</p>
</section>
<!--尾部-->
<footer>
<h3>应用中心</h3>
<p>尾部内容。。。。</p>
</footer>
</article>
</body>
</html>
上图:通过浏览器查看代码生成的效果
块级性标签:
完成Web页面区域的划分,确保内容的有效分隔,包括:
aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
figure 对多个元素组合并展示的元素,常与figcaption联合使用
code 表示一段代码块
dialog 人与人之间对话,包含dt和dd两个组合元素(dt用于表示说话者、dd用于表示说话者的内容)(不常用)
行内语义性标签:
完成Web页面具体内容的引用和表述,丰富展示内容,包括:
meter 特定范围内的数值,如工资、数量、百分比
time 时间值
progress 进度条,可用max、min、step进行控制,完成对进度的表示和监听
video 视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式
audio 音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<progress max="100" value="30"></progress>
</body>
</html>
代码:在body中设置了进度条效果; 百分比为100%,进度值为:30%; 后面学了JavaScript后可以动态的显示。
上图:进图条的效果
上图:新建一个source目录,然后考进来一个视频文件、一个音频文件。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<progress max="100" value="30"></progress>
<hr>
<!--播放音频-->
<audio src="source/music.m4a" controls="controls"></audio>
<hr>
<!--播放视频-->
<video src="source/BigBuck.m4v" controls="controls"></video>
</body>
</html>
上图:
音频可以调音量、进度;
视频可以调音量、进度、放大、下载等。
交互性标签:
功能性内容的表达,有一定的内容和数据的关联,是各种事件的基础,包括:
details 表示一段具体的内容,默认不显示,通过某种方式(单击)与legend交互才会显示
datagrid 控制客户端数据与显示,可用于动态脚本及时更新
menu 用于交互菜单
command 用来处理命令按钮
标签:读书 VID rip type cti webstorm book time 事件
原文地址:https://blog.51cto.com/daimalaobing/2445583