跟永哥学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%的人还看了以下文章

  • 第9课:在网页中添加图像

    假如能把自己喜欢的的图像放到网页上,那就太好了。 这貌似有点难度。。。 也许是有点难度,但其实也不难,一个元素就可以搞定: 例1: <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下: 你要做的只是:告诉浏览器你要插入一张图…

    2018年1月20日
    5.3K0
  • 第7课:元素的分类与标识(class和id)

    利用id标识元素 除了可以对元素进行分类以外,你还可以标识单个元素。这是通过HTML属性id实现的。 HTML属性id的特别之处在于,在同一HTML文档中不能有两个具有相同id值的元素。文档中的每个id值都必须是唯一的。在其他情况下,你应该使用class属性。下面,我们来看一个使用id属性的例子: <h1>第1章</h1> … &…

    2020年2月25日
    2.6K0
  • 第7课:HTML标签的属性

    许多元素都可以设置属性。 属性是什么? HTML通过标签告诉浏览器如何展示网页(比如告诉浏览器显示一个换行)。你可以为某些元素附加一些信息,这些附加信息被称为属性(attribute)。例1: <h2 style=”background-color: #ff0000;”>上125jz.com学网页制作</h2> 属性应写在元素的首标签…

    2018年1月20日
    2.4K0
  • Marquee标签实现跑马灯、滚动公告、通知效果

    marquee实例1:制作无缝滚动的公告栏(横向) marquee实例1:制作无缝滚动的公告栏(横向)|www.125jz.com125网页设计-权威的网页制作,网页设计教程基地  marquee实例2:制作无缝滚动的图片(横向) 扩展:Marquee标签同样适用于图片滚动 Marquee标签实现图片无缝滚动|www.125jz.com

    2019年2月26日
    7.8K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    2.7K0
  • 第15课:最后提示

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

    2018年1月18日
    2.1K0

发表回复

登录后才能评论

评论列表(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>