跟永哥学HTML5(3):HTML5新增语义化元素的使用

5.<aside>元素

用来表示非正文类的内容(当前页面或文章的附属信息)。如相关的引用、侧边栏、广告、侧边栏等信息。 【例5】应用<aside>元素定义页面侧栏。

<aside> 
<h2>侧栏</h2>
<ul>
    <li><a href="http://www.min.com">明日图书</a> </li>
    <li><a href="http://www.%20risoft.com">明日软件</a></li>
  ……
</ul>
</aside>

6.<nav>元素

来表示页面中导航链接区域。不是链接的每一个集合都是一个nav,只需要将主要的、基本的链接组放进nav元素即可 例如,在页脚中通常会有一组链接,包括服务条款、版权声明、联系方式等。对于这些footer元素就足够放置了。一个页面中可以拥有多个nav元素,作为页面整体或不同部分的导航。 【例6】应用<nav>元素定义页面的主导航栏。

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新品上市</a></li>
    <li><a href="#">特价商品</a></li>
    ……
  </ul>
</nav>

7.hgroup :用于对网页或区段的标题元素(h1-h6)进行组合。

如在一个区段中你有连续的h标签元素,则可以用hgroup将他们括起来。 

示列 :

<hgroup>
   <h1>125建站网</h1>
   <h2>提供丰富的网页设计、网页制作教程</h2>
 </hgroup>

8.figure:规定独立的流内容(图像、图表、照片、代码等等)。

figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。 

示列 :

<p>网页设计问答社区</p>
<figure> <img src="125jz.png" width="350" height="234" /> </figure>

童鞋们,今天的课程就这么多了,好好理解。下节课我们通过实际案例讲解HTML5页面的制作。

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

(0)
江山如画的头像江山如画管理团队
上一篇 2018年1月24日 下午1:32
下一篇 2018年1月27日 下午9:18

99%的人还看了以下文章

  • 实现表格单线边框的两种方法

    实现表格单线边框方法一 border-collapse: collapse; 代码如下: See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二 给table上边和左边设上边框线,给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…

    2019年10月31日
    5.0K0
  • 手把手,永哥教你学会css sprite(雪碧图)技术

    css sprite(雪碧图)实例二 拼完后的图片: 下面代码是模仿生成一个菜单~~~ HTML代码: <div id=”content”> <ul class=”content”> <li class=”cat-1″> <i></i> <h3>女装/男装/内衣</h3> &…

    2018年2月20日
    6.9K0
  • 手把手教你做响应式网页,响应式布局实例入门(精)

    刚接触响应式布局的童鞋会感觉响应式布局很高大上,很难,但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例,手把手教你如何制作响应式网页。 响应式布局(Responsive Layout) 响应式布局分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…

    2018年7月28日
    4.8K0
  • HTML5的视频播放控制技术

    介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。

    2019年10月15日
    5.4K0
  • vue学习-我的第一个vue代码

    创建一个 .html 文件,然后通过如下方式引入 Vue: <!– 开发环境版本,包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者: <!– 生产环境版本,优化了尺寸和速度 –>…

    2020年6月14日
    5.2K0
  • 第9课:盒状模型

    CSS中的盒状模型(box model)用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距(margin)、边框(border)、内边距(padding)和内容的具体操作。下图显示了盒状模型的结构: CSS中的盒状模型 上面的图示看上去可能感觉有点理论化,好吧,让我们试着用一个实例来解释盒状模型。在我们的例子中,有一个标题和一些文本…

    2020年2月25日
    4.4K0

发表回复

登录后才能评论

评论列表(1条)

  • 江山如画的头像
    江山如画 2018年2月3日 上午9:56

    在HTML5中,script和style元素不再需要type属性。
    <link type="text/css" rel="stylesheet" href="css/styles.css" />
    <script type="text/javascript" src="js/scripts" /></script>

    只需要这样写:
    <link rel="stylesheet" href="css/styles.css" />
    <script src="js/scripts" /></script>