HTML5的结构
来源:互联网 发布:玛雅软件培训 编辑:程序博客网 时间:2024/05/21 17:27
HTML5的结构
1.主体结构元素
2.非主体结构元素
3.HTML5的结构
HTML5相对于HTML4的最大改进在于文档的结构。
通过添加一些结构元素,在结构上,HTML5比HTML4更加清晰明确。
学习内容:
①新增的主体结构元素的定义,使用方法,使用场合。article, section, nav, aside.
②新增的非主体结构元素的定义,使用方法,使用场合。header, hgroup, footer, address.
③综合应用这些结构元素来编排页面以及整体布局。
/*=================================article元素===============================================*/
article元素:代表可以独立被外部引用的内容。article有标题,正文和注脚。
示例:
/*=================================section元素=============================================*/
定义:对页面上的内容进行分区。通常由内容和标题构成。
如果需要对一个容器直接定义,推荐使用div而非section。
区分article和section:以一篇文章为例,整篇文章就是article而文章中的一个段落就是section。
显然,从article和section的字面意思就可以看出两者的关系。但是这这是表面上的区分。
示例1:
示例2:
疑惑:article中可以包含section,section中也可以包含article。如何区分?
section强调对内容进行分段或者分块,article强调独立性。具体来说,
一块内容相对独立完整应该使用article,如果你只想对一块内容可进行分段,应该使用section。
sectio元素的禁忌总结:
①不要将section元素用作设置样式的页面容器,那是div的工作。
②如果aside, nav, article元素更符合条件,不要使用section元素。
③不要为没有标题的内容区域使用section元素。
/*=================================nav元素===========================================*/
定义:是用作页面导航的链接组,导航的元素链接到其它页面或者当前页面的其它部分。
使用方法:
/*====================================aside元素============================================*/
定义:表示当前页面的附属信息部分。
用法:
①被包含在article内作为主要内容的附属信息。
②在article外使用,作为页面的附属信息部分。
/*=======================================header元素=============================================*/
定义:一种引导和导航作用的元素。用做标题。可以包含表格,表单和logo图片。
注意事项:一个header元素至少包含一个heading元素。
/*=======================================hgroup元素=============================================*/
定义:将主标题和子标题进行分组的元素。
用法:
/*=====================================footer元素===============================================*/
定义:区域的注脚信息。
/*=====================================address元素===============================================*/
定义:用来在文档中呈现联系信息。
/*=====================================HTML5大纲===============================================*/
显示编排:使用section创建文档结构的编排方式。
隐式编排:不使用section而使用h1-h6和hgroup编排文档结构。
推荐使用显示编排,因为结构更为清晰。
/*====================================页面编排示例=====================================*/
1.主体结构元素
2.非主体结构元素
3.HTML5的结构
HTML5相对于HTML4的最大改进在于文档的结构。
通过添加一些结构元素,在结构上,HTML5比HTML4更加清晰明确。
学习内容:
①新增的主体结构元素的定义,使用方法,使用场合。article, section, nav, aside.
②新增的非主体结构元素的定义,使用方法,使用场合。header, hgroup, footer, address.
③综合应用这些结构元素来编排页面以及整体布局。
/*=================================article元素===============================================*/
article元素:代表可以独立被外部引用的内容。article有标题,正文和注脚。
示例:
<article> <header> <h1>header</h1> </header> <p><b>苹果</b>,亚当的苹果,牛顿的苹果</p> <footer> <p><small>罪恶而甜蜜</small></p> </footer></article>
/*=================================section元素=============================================*/
定义:对页面上的内容进行分区。通常由内容和标题构成。
如果需要对一个容器直接定义,推荐使用div而非section。
区分article和section:以一篇文章为例,整篇文章就是article而文章中的一个段落就是section。
显然,从article和section的字面意思就可以看出两者的关系。但是这这是表面上的区分。
示例1:
<article> <h1>苹果</h1> <p><b>苹果</b>,植物类水果,多次花果。</p> <section> <h2>红富士</h2> <p>红富士不是绿富士</p> </section> <section> <h2>国光</h2> <p>万寿苹果</p> </section></article>
示例2:
<section> <header> <h1>苹果</h1> <p>发表日期:<time pubdate datetime = "2010-10-10T19:10-08:00">一小时前</time></p> </header> <p><b>苹果</b>,植物类水果,多次花果。</p> <section> <h2>评论</h2> <article> <header> <h3>发表者:绿林牛</h3> <p> <time pubdate datetime = "2010-10-10T19:10-08:00">一小时前</time> </p> </header> </article> <article> <header> <h3>发表者:张玉</h3> <p> <time pubdate datetime = "2010-10-10T19:10-08:00">一小时前</time> </p> </header> </article> </section></section>
疑惑:article中可以包含section,section中也可以包含article。如何区分?
section强调对内容进行分段或者分块,article强调独立性。具体来说,
一块内容相对独立完整应该使用article,如果你只想对一块内容可进行分段,应该使用section。
sectio元素的禁忌总结:
①不要将section元素用作设置样式的页面容器,那是div的工作。
②如果aside, nav, article元素更符合条件,不要使用section元素。
③不要为没有标题的内容区域使用section元素。
/*=================================nav元素===========================================*/
定义:是用作页面导航的链接组,导航的元素链接到其它页面或者当前页面的其它部分。
使用方法:
<body> <h1>技术资料</h1> <nav> <ul> <li><a href = "/">主页</a></li> <li><a href = "/events">开发文档</a></li> </ul> </nav> <article> <header> <h1>HTML5与CSS3的历史</h1> <nav> <ul> <li><a href = "#HTML5">HTML5的历史</a></li> <li><a href = "#CSS3">CSS3的历史</a></li> </ul> </nav> </header> <section id = "HTML5"> <h1>HTML5的历史</h1> <p>讲述HTML5的历史的正文</p> </section> <section id = "CSS3"> <h1>CSS3的历史</h1> <p>讲述CSS3的历史</p> </section> <footer> <p> <a href = "?edit">编辑</a> <a href = "?delete">删除</a> <a href = "?rename">重命名</a> </p> </footer> </article> <footer> <p><small>出版所有:绿林牛</small></p> </footer></body>
/*====================================aside元素============================================*/
定义:表示当前页面的附属信息部分。
用法:
①被包含在article内作为主要内容的附属信息。
<!DOCTYPE html> <head> <title>元素示例</title> </head> <body> <header> <h1>F#入门</h1> </header> <article> <h1>第四节 词法闭包</h1> <p>lambda表达式可以创建词法闭包(文章正文)</p> <aside> <h1>名词解释</h1> <dl> <dt>F#</dt> <dd>F#是.Net2010引入的新型函数式编程语言</dd> </dl> <dl> <dt>词法闭包</dt> <dd>词法闭包是指将创建lambda表达式时的环境保存起来。</dd> </dl> </aside> </article> </body>
②在article外使用,作为页面的附属信息部分。
<aside> <nav> <h2>评论</h2> <ul> <li> <a href = "http://blog.sina.com.cn/1683">erway</a> </li> <li> <a href = "http://blog.sina.com.cn/u/1345">太阳雨</a> 10-22 23:48<br/> <a href = "http://blog.sina.com.cn/s/blog_6a9kv8f.html#comment">拜读老牛的文章</a> </li> <li> <a href = "http://blog.sina.com.cn/u/1259295385">新浪官博</a> 08-12 08:50<br/> <a href = "#">恭喜,你已经开通了博客</a> </li> </ul> </nav></aside>
/*=======================================header元素=============================================*/
定义:一种引导和导航作用的元素。用做标题。可以包含表格,表单和logo图片。
用法:
<header> <hgroup> <h1>IT新技术</h1> <a href = "http://blog.sina.com.cn/itnewtech">http://blog.sina.com.cn/itnewtech</a> <a href = "#">[订阅]</a> <a href = "#">[手机订阅]</a> </hgroup> <nav> <ul> <li>首页</li> <li><a href = "#">博文目录</a></li> <li><a href = "#">图 片</a></li> <li><a href = "#">关 于 我</a></li> </ul> </nav> </header>
注意事项:一个header元素至少包含一个heading元素。
/*=======================================hgroup元素=============================================*/
定义:将主标题和子标题进行分组的元素。
用法:
<article> <header> <hgroup> <h1>文章主标题</h1> <h2>文章子标题</h2> </hgroup> </header> <p>文章正文</p> </article>
/*=====================================footer元素===============================================*/
定义:区域的注脚信息。
<footer> <ul> <li>版本信息</li> <li>站点信息</li> <li>联系方式</li> </ul></footer>
/*=====================================address元素===============================================*/
定义:用来在文档中呈现联系信息。
<footer> <div> <address> <a title = "文章作者:绿林牛" href = "http://blog.sina.com.cn/itnewtech">绿林牛</a> </address> 发表于<time datetime = "2017-10-25">2017/10/25</time> </div></footer>
/*=====================================HTML5大纲===============================================*/
显示编排:使用section创建文档结构的编排方式。
<body> <h1>网页级内容区块标题</h1> <p>网页级内容区块正文</p> <section> <h2>section级内容区块的标题</h2> <p>section级内容区块的内容</p> </section></body>
隐式编排:不使用section而使用h1-h6和hgroup编排文档结构。
<body><h1>网页级内容区块标题</h1><p>网页级内容区块正文</p><h2>section级内容区块的标题</h2><p>section级内容区块的内容</p></body>
推荐使用显示编排,因为结构更为清晰。
/*====================================页面编排示例=====================================*/
<!DOCTYPE><head> <title>页面编排示例</title> <meta charset = "UTF-8"></head><body><header> <h1>网页标题</h1> <!-- 网站导航链接 --> <nav> <ul> <li><a href = "index.html">首页</a></li> <li><a href = "help.html">帮助</a></li> </ul> </nav></header><article> <hgroup> <h1>文章主标题</h1> <h2>文章子标题</h2> </hgroup> <p>文章正文</p> <section> <article> <h1>评论标题</h1> <p>评论正文</p> </article> </section><article<footer> <small>版权所有:绿林牛</small></footer></body>
阅读全文
0 0
- html5的基本结构
- HTML5的文档结构
- HTML5的基本结构
- HTML5的结构
- html5的基本结构
- HTML5的结构化特性
- html5新增的结构元素
- (三)html5的结构
- HTML5的新结构标签
- HTML5文档的基本结构
- HTML5的主体结构元素
- HTML5结构
- HTML5学习笔记(一)—— HTML5的结构
- HTML5(李炎恢)学习笔记二 ------------- HTML5的结构
- 最佳的 HTML5 页面 DOM 结构
- 最佳的 HTML5 页面 DOM 结构
- 最佳的 HTML5 页面 DOM 结构
- 最佳的 HTML5 页面 DOM 结构
- RecyclerView多条目展示
- 经典购物车
- 数据结构--线性表
- 购物车
- python学习笔记 一
- HTML5的结构
- SpringMVC之@PathVariable和RequestParam
- 2.6、映射
- android byte转换工具类--笔记
- 安卓SpannableString详解
- HTML+CSS+JavaScript小例题
- TabLayout(核心代码)
- Spring boot logback自定义配置
- handler轮播网上请求的图片