`
bird12010
  • 浏览: 8078 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5的结构

阅读更多

最近一直在看《html5与css3权威指南》这本书,后续会将看完本书的一些笔记详细的记录下来。

 

新增的主体结构元素

1.1 article元素代表文档、页面或应用程序中独立完整的,可以独自被外部引用的内容。

  •  有它自己的标题,有时还有自己的脚注。
  • 可以嵌套使用。内层内容原则上需要与外层内容想关联。

1.2 section元素对网站或应用程序中页面上的内容进行分块。

  • 通常由内容及其标题组成。
  • 当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div。

article元素可以看成是一种特殊种类的section,比section更强调独立性。即section元素强调分段或分块,article强调独立性。

具体来说,如果一块内容独立,完整使用article,将一块内容分为几段使用section。

section使用禁忌

  1. 不要将section用作设置样式的页面容器,那是div的工作。
  2. 如果article元素,aside或nav更符合条件,不要用section。
  3. 不要为没有标题的内容区块使用section元素。

1.3 nav元素 用作页面导航的链接组。一个页面可以有多个nav。

1.4 aside元素 当前页面或文字的附属信息部分。

它可以包含与当前页面或主要内容相关的引用,侧边栏,广告,导航条,以及其他类似的有别于主要内容的部分。

1.5 time元素与微格式

微格式是一种利用html的class属性来对网页添加附加信息的方法。

time元素表示24小时中的某个时刻或某个日期,表示时刻时允许带时差,它可以定义很多格式的日期和时间。eg:

<time datatime ="2013-08-15">2013年08月15日</time>
<time datatime ="2013-08-15T20:00">2013年08月15日晚上8点</time>
<time datatime ="2013-08-15T20:00+09:00">2013年08月15日晚上8点的美国时间</time>

 

1.6 pubdate属性 一个可选的,boolean值的属性,它可以用到article元素中的time元素上,表明哪个time元素代表了通知的发布日期。

 

新增的非主体结构元素

2.1 header元素 具有引导和导航作用的结构元素。通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,如数据表格,搜索表单或者相关的logo图片。

 

2.2hgroup元素 将标题及其子标题进行分组的元素。一个内容区块的标题及其子标题算一组。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>hgroup元素示例</title>
</head>
<article>
    <header>
        <hgroup>
            <h1>文章主标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
        <p><time datetime="2010-03-20">2010年10月29日</time></p>
    </header>
    <p>文章正文</p>
</article>

 2.3 footer元素可以作为其上层父级内容区块或一个根区块的脚注。

 2.4  address元素 呈现联系信息。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>address元素示例</title>
</head>
<address>  
    <a href=http://***>张三</a> 
    <a href=http://***>王二</a> 
    <a href=http://***>李四</a>  
</address>

 

分享到:
评论

相关推荐

    html5结构图canvas绘制组织结构图框架代码

    本框架代码就是利用HTML5的Canvas元素来绘制组织结构图。 组织结构图是一种展示公司或项目内部层次关系的图表,通常包含不同的职位、部门及其相互关系。在HTML5 Canvas上实现组织结构图,首先需要理解Canvas的基本...

    HTML5结构图图解

    HTML5结构图图解,用图片描述跟容易表达清楚详细的内容,意思也更加明白

    第4章---使用HTML5结构标签ppt课件(全).ppt

    第4章---使用HTML5结构标签ppt课件(全).ppt

    HTML5+CSS3 HTML5结构性标签体系.pdf

    HTML5 和 CSS3 的引入带来了显著的变革,特别是在提升用户体验和增强文档结构语义化方面。HTML5 的结构性标签体系是这场变革的核心,它使得网页的构建更加清晰,更利于人和机器理解。 首先,HTML5 的 DOCTYPE声明变...

    HTML5经典中文教程大全-从入门到精通-含html5案例代码

    HTML 5结构元素 这真是大快人心。目前,我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部,底部或者侧栏等。有了它们,代码编写者不再需要为id的命名...

    第01章【HTML5简介】-第04节:HTML结构标签

    在实际应用中,使用HTML5结构标签不仅有助于搜索引擎优化(SEO),还可以提高页面在不同设备上的兼容性和响应式设计。例如,当页面在移动设备上显示时,这些结构标签可以帮助浏览器更好地调整布局,提供更佳的用户...

    HTML5快速开发模板生成器

    4. **现代Web技术集成**:除了基本的HTML5结构,生成器还可能包含JavaScript库(如jQuery)和框架(如Bootstrap),以及Web组件(Web Components)、WebSocket、离线存储(Service Worker)等HTML5新特性。...

    纯html5折叠式导航菜单

    1. HTML文件:包含HTML5结构,使用标签定义导航区域,使用数据属性控制折叠状态。 2. CSS文件:定义样式,包括折叠菜单的外观和过渡效果。 3. JavaScript文件:处理菜单的折叠逻辑,可能使用事件监听器来响应用户的...

    HTML5期末大作业:网站——个人博客

    1. **HTML5结构元素**:HTML5引入了新的语义化标签,如、、、、和,这些元素有助于构建清晰的页面结构,提高可读性和搜索引擎优化。 2. **CSS3样式**:项目中的`css`文件夹可能包含样式表,用于定义网页的外观和...

    html5-demo

    1. **HTML5结构元素**:HTML5引入了新的语义化元素,如、、、、和等,这些元素帮助定义页面的结构,提高内容的可读性和可访问性。 2. **表单控件**:HTML5扩展了表单元素和属性,例如、、等,提供了更好的用户输入...

    HTML5&CSS3网页制作:结构元素.pptx

    HTML5结构元素简介 HTML5 中引入了多种结构元素,用于定义网页的不同区域,如头部、导航、文章、侧边栏、页脚等。这些结构元素可以帮助开发者更好地组织网页内容,提高网页的语义性和可读性。 header 元素 -------...

    html5知识结构图

    这个“HTML5知识结构图”很可能包含了一个全面的框架,概述了HTML5的主要组成部分、新特性、以及如何在实际开发中应用它们。 HTML5的核心特点包括: 1. **语义化标签**:HTML5引入了新的语义化标签,如, , , , 等...

    html5+ECharts企业内部组织结构图代码

    HTML5和ECharts是现代网页开发中常用的工具,它们结合在一起可以实现丰富的数据可视化效果,包括企业内部组织结构图的绘制。在这个项目中,我们利用HTML5的Canvas或SVG元素,以及ECharts库,来创建一个动态且交互式...

    html5和css笔记.docx

    * `html:5`:生成HTML5结构 * `css`:生成CSS基本结构 复合选择器 CSS的复合选择器包括: * `E F`:后代选择器 * `E &gt; F`:子选择器 * `E + F`:相邻选择器 * `E ~ F`:兄弟选择器 元素显示模式 CSS的元素显示...

    基于html5的web前端设计(旅游景点介绍)

    1. index.html:主页面文件,包含HTML5结构和链接到CSS及JavaScript文件的引用。 2. style.css:用于定义网页样式的CSS文件,包括字体、颜色、布局等。 3. script.js:包含JavaScript代码,实现网页的动态功能。 4. ...

    HTML5应用开发技术-初识HTML5.pptx

    并列关系则是同级元素,如HTML5结构中的`&lt;header&gt;`、`&lt;nav&gt;`等。 4. **HTML5的新特性** - **新增标签**:如`&lt;article&gt;`、`&lt;aside&gt;`、`&lt;section&gt;`等,这些标签增强了页面的结构性和语义性。 - **媒体元素**:`...

    超级简单的html5源码

    这个“超级简单的html5源码”可能是为了初学者提供一个基础的HTML5结构示例,以便他们理解和学习如何创建基本的网页。 在HTML5中,有一些显著的改进和新特性: 1. **语义化标签**:HTML5引入了许多新的语义元素,...

    html5趣味智力答题小测试源代码.zip

    总的来说,这个压缩包提供了一个完整的HTML5互动问答游戏框架,涵盖了前端开发的关键技术:HTML5结构化内容、CSS样式设计以及jQuery的交互处理。通过学习和修改这个源代码,开发者不仅可以了解这些技术的实际应用,...

    html5+div+css3网站样式模板

    H5模板通常包含预设的HTML5结构和CSS3样式,方便开发者快速构建网页。CSS3学习则涉及对CSS3新特性的理解和实践,如选择器、布局、动画等。 在“html5+div+css3网站样式模板”的文件名称列表中,我们可以看到模板的...

Global site tag (gtag.js) - Google Analytics