跟永哥学HTML5(6)H5语义化标记使用示例

介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

— 解释
time 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码,这样, 举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

— 示列

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

mark

— 解释
mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

— 示列

<p>Do not forget to buy <mark>milk</mark> today.</p>

figure

— 解释
figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

— 示列

<p>黄浦江上的的卢浦大桥</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

figcaption

— 解释
figcaption 标签定义 figure 元素的标题(caption)。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

— 示列

<figure> 
   <figcaption>黄浦江上的的卢浦大桥</figcaption> 
   <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> 
</figure>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4893.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年2月11日 下午12:18
下一篇 2020年2月12日 上午9:04

99%的人还看了以下文章

  • 第15课:最后提示

    祝贺!你已经进入最后一课了! 我已经学到全部知识了? 如果你已经学完以上教程,恭喜你,你已经学到了很多关于HTML的知识,并且完全有能力创建自己的网站!不过,你所学到的只是基础知识,还有许多内容需要掌握。但是你已经为进一步学习打下了坚实的基础。 在最后这一课中,我们将给予一些最后提示: 首先,在HTML文档中,应保持正确的顺序与结构。令你的HTML文档具有良…

    2018年1月18日
    2.7K0
  • 第14课:元素的定位

    CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动(参见第13课),你将能够创建多种高级而精确的布局。本课我们将讨论以下内容: CSS定位的原理 绝对定位 相对定位 CSS定位的原理 把浏览器窗口想象成一个坐标系统: CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上。 假设我们要放置一个标题。通过使用盒状模…

    2020年2月25日
    2.8K0
  • css中id和class的优先级问题,与顺序无关

    id,class,style的优先级别顺序为style高于id高于class。

    2020年11月15日
    4.9K0
  • CSS制作简洁的栏目/标题样式

    CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…

    2019年1月5日
    8.0K0
  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    5.5K0
  • css布局基础:浮动和清除浮动练习2

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <header> <img …

    2020年4月4日
    2.3K0

发表回复

登录后才能评论