HTML5+CSS3 新增页面标签.docxVIP

HTML5+CSS3 新增页面标签 在 HTML5 中，新增了 9 种常用的页面标签，详细介绍如下： figure 标签 figure 标签是 HTML5 中新增的标签之一，表示一段独立的流内容（文本、图像）。 在使用 figure 标签时，标签的内容应该与主内容相关；但如果被删除时，则不应对文档流产生影响。 示例：4-1 figure.html !DOCTYPE HTML !DOCTYPE HTML html head meta charset=utf-8 titlefigure 标签使用/title /head body p桂林，位于广西东北部，是世界著名的旅游胜地和历史文化名城。地处漓江西岸，以盛产桂 花、桂树成林而得名。/p figure p桂林山水甲天下/p img src=gl1.jpg width=300 height=155 / /figure /body /html figure 元素在上述代码中，向 figure 元素 figcaption 标签 figcaption 标签位于 figure 标签内，用于定义 figure 标签的标题（caption）。在 默认情况下，figcaption 标签应该被置于 figure 标签的第一个或最后一个子标签的位置。 !DOCTYPE HTMLhtmlhead !DOCTYPE HTML html head meta charset=utf-8 titlefigcaption 标签应用/title /head body p少林寺，位于中国河南省郑州市登封的嵩山，是少林武术的发源地。/p figure figcaption少林寺/figcaption img src=sl.jpg width=388 height=296 / /figure /body /html 从上述代码中可以看出，在 figure 标签中，使用 figcaption 标签为 figure 标签添加了一个“少林寺”标题。 figure figure 元素 details 标签 在 HTML5 中， details 标签主要用于描述文档或某个部分的细节。它常与“summary”标签配合使用，可以为 details 标签定义标题。在浏览器中运行时，该标题是可见的，当用户单击标题时，会显示出details 标签中的内容。 在目前，只有在浏览器 Chrome 中才识别 details 标签。下面通过一个在 Chrome 浏览器中运行的实例，来说明 details 标签的应用。 示例：4-3 details.html !DOCTYPE HTML !DOCTYPE HTML html head head meta charset=utf-8 titledetails 标签应用/title /head body details summary红旗渠/summary p红旗渠是 20 世纪 60 年代，林县人民在极其艰难的条件下，从太行山腰修建的引漳入林工程。是全国重点文物保护单位，被世人称之为“人工天河”，在国际上被誉为“世界第八大奇迹”。 /p /details /body /html 在 Chrome 浏览器中，可以看出 details 标签中的内容，默认是没有显示的，只显示 summary 标签中的标题。 Summary Summary 标题 单击 details 标签中的标题“红旗渠”，details 标签中的内容会自动显示。 单击标题 单击标题 mark 标签 mark 标签在 HTML 5 中，主要用于定义带有记号的文本。如果用户在编辑文本时，需要突出显示某文本，可以使用 mark 标签。 !DOCTYPE HTMLhtmlhead !DOCTYPE HTML html head meta charset=utf-8 titlemark titlemark 标签/title /head body p今天，天气不错， mark心情/mark 挺好的！/p /body /html 突出文本从上述代码中，使用 mark 标签设置“心情”文本为突出显示，默认背景颜色为黄色。 突出文本 progress 标签 !DOCTYPE HTMLhtmlheadmeta charset=utf-8titleprogress 标签应用/title/headbody项目的下载进度是：progress value=20 max=100 /progress/body/html在 HTML5 中，progress 标签的作用是定义运行中的进度（进程 !DOCTYPE HTML html head meta charset=utf-8 titleprogress 标签应用/title /head body 项目的下载进度是： p