HTML5 里 section article 什么区别header footer nav 该怎么理解_框架

h5新加的语义化标签。

怎么说呢，它们某种程度上都是块状元素，功能上没有任何不同，你可以统统视为div。

但是对于开发维护人员来说，它们更加容易阅读（这就是语义化标签的本质）。

例如以前我们是写div，只能通过class来说明标签的含义。

……

<div>

</div>

但是现在，可以直接使用header、main、section、article、footer等语义化的标签。

语义化可以让大家直观的认识标签的用途和作，另外就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

HTML5:<article></article>

HTML4:<div></div>

<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。

HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>

HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>

<audio> 标签定义声音，比如音乐或其他音频流。

HTML5:<audio src="someaudiowav">您的浏览器不支持 audio 标签。</audio>

HTML4:<object type="application/ogg" data="someaudiowav"><param name="src" value="someaudiowav"></object>

<canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>

HTML4:<object data="inc/hdrsvg" type="image/svg+xml" width="200" height="200"></object>

<command> 标签定义命令按钮，比如单选按钮、复选框或按钮。

HTML5: <command onclick=cut()" label="cut">

HTML4: none

<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

HTML5: <datalist></datalist>

HTML4: see combobox

<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。

HTML5: <details></details>

HTML4: <dl style="display:hidden"></dl>

HTML5: <embed src="horsewav" />

HTML4: <object data="flashswf" type="application/x-shockwave-flash"></object>

<figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

HTML5: <figure><figcaption>PRC</figcaption></figure>

HTML4: none

<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。

HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949</p></figure>

HTML4: <dl><h1>PRC</h1><p>The People's Republic of China was born in 1949</p></dl>

<footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。

HTML5: <footer></footer>

HTML4: <div></div>

<header> 标签定义 section 或 document 的页眉。

HTML5: <header></header>

HTML4: <div></div>

<hgroup> 标签用于对网页或区段（section）的标题进行组合。

HTML5: <hgroup></hgroup>

HTML4: <div></div>

<keygen> 标签定义生成密钥。

HTML5: <keygen>

HTML4: none

<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML5: <mark></mark>

HTML4: <span></span>

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。

HTML5: <meter></meter>

HTML4: none

<nav> 标签定义导航链接的部分。

HTML5: <nav></nav>

HTML4:<ul></ul>

<output> 标签定义不同类型的输出，比如脚本的输出。

HTML5: <output></output>

HTML4: <span></span>

<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。

HTML5: <progress></progress>

HTML4: none

<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

HTML5: <ruby>汉 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>

HTML4: none

<rt> 标签定义字符（中文注音或字符）的解释或发音。

HTML5: <ruby>汉 <rt> ㄏㄢˋ </rt></ruby>

HTML4: none

<ruby> 标签定义 ruby 注释（中文注音或字符）。

HTML5: <ruby>汉 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>

HTML4: none

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

HTML5: <section></section>

HTML4: <div></div>

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

HTML5: <source>

HTML4: <param>

<summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。

HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5</details>

HTML4: none

<time> 标签定义日期或时间，或者两者。

HTML5: <time></time>

HTML4: <span></span>

<video> 标签定义视频，比如**片段或其他视频流。

HTML5: <video src="movieogg" controls="controls">您的浏览器不支持 video 标签。</video>

HTML4:<object type="video/ogg" data="movieogv"><param name="src" value="movieogv"></object>

vue从后台获取的数据有html标签通过v-html渲染到页面给html添加样式的方法如下：

准备材料：Vuejs、HBuilder、浏览器

1、创建静态页面vhtmlhtml，并引入vuejs文件。

2、在<body></body>元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令。

3、绑定v-html指令数据，这里设置为字符串。

4、Vuejs库的v-html指令是插入html元素，修改datas为包含<p></p>标签。

5、预览该静态页面，这时会看到页面显示如下

6、将调试打开，这时发现<div></div>中有个<p></p>标签，完成添加。

html5的新增的标签都是带有语义的，不光要从字面来说，还要从举例中来说。

article 是独立的一块内容，比如一篇新闻，一篇文章，包含文章主旨，还可以包含辅助内容。

section 类似div，不过比div更有意义，他是对内容进行分块。

aside 字面就是侧边栏，跟内容相关的一些引用、内容。

这些元素表现形式都是行内，使用的时候要显示声明为block。

新增加的header、footer标签主要用于表现DOM的语义

没有特殊的样式

在HTML5之前，不论是header还是body或footer都需要用div来表达

而HTML5的新标签可以直接用header、article、footer这些清晰明了的标签来表达，使文档的结构更清晰，以前设计时还要div然后id="container"这一类的属性,现在可以用一个article等类似标签来表现，作用于DIV一样，只是更方便

<thead> 为 HTML 文件的表格元素 (tabulardata) ， DOM 接口为 HTMLTableSectionElement 。

取得 <thead> 的元素对象 (object) 后，可存取元素的全局属性 (global attribute) 。 HTMLTableSectionElement 另有定义属性与方法

rows

insertRow()

deleteRow()

rows 为表格的列数，

insertRow() 用来新增列，

deleteRow() 则用来删除列。举例如下

function run() {

var d = documentgetElementsByTagName("thead");

d[0]deleteRow(0);

}

档名：htmldemo122js

功能：示范 JavaScript 程序

时间：公元 2011 年 8 月 /

此例用 document 对象的 getElementsByTagName() 方法 (method) ，取得标签名称为 thead 的 HTMLCollection 对象，文件的第一个 <thead> 元素亦即该 HTMLCollection 索引值为 0 的对象

var d = documentgetElementsByTagName("thead");

d[0]deleteRow(0);

然后呼叫 deleteRow() 删除索引值为 0 的列，也就是第一列。

我们以下面的 HTML 文件加载

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<caption>Demo Table</caption>

<thead>

</thead>

<tbody>

</tbody>

</table>

</body>

</html>

<!--

档名：htmldemo122html

功能：示范 JavaScript 程序

时间：公元 2011 年 8 月 -->

浏览器 (broswer) 开启，按

RUN 后如下

中英文术语对照

表格元素 tabular data

对象 object

全局属性 global attribute

方法 method

属性 attribute

浏览器 broswer

您可以继续参考

HTML 5 范例

HTML 5 快速导览 – 表格元素 <thead>

HTML 元素对象

根元素

<html> (HTMLHtmlElement)

文件数据元素

<head> (HTMLHeadElement)

<title> (HTMLTitleElement)

<base> (HTMLBaseElement)

文件区域元素

<body> (HTMLBodyElement)

<section> (HTMLElement)

<nav> (HTMLElement)

<article> (HTMLElement)

<aside> (HTMLElement)

<h1> <h2> <h3> <h4> <h5> <h6> (HTMLHeadingElement)

<hgroup> (HTMLElement)

<header> (HTMLElement)

<footer> (HTMLElement)

<address> (HTMLElement)

群组元素

<p> (HTMLParagraphElement)

<hr> (HTMLHRElement)

<pre> (HTMLPreElement)

<blockquote> (HTMLQuoteElement)

<ol> (HTMLOListElement)

<ul> (HTMLUListElement)

<li> (HTMLLIElement)

<dl> (HTMLDListElement)

<dt> (HTMLElement)

<dd> (HTMLElement)

<figure> (HTMLElement)

<figcaption> (HTMLElement)

<div> (HTMLDivElement)

文字层级元素

<a> (HTMLAnchorElement)

<em> (HTMLElement)

<strong> (HTMLElement)

<small> (HTMLElement)

<s> (HTMLElement)

<cite> (HTMLElement)

<q> (HTMLQuoteElement)

<dfn> (HTMLElement)

<abbr> (HTMLElement)

<data> (HTMLDataElement)

<time> (HTMLTimeElement)

<code> (HTMLElement)

<var> (HTMLElement)

<samp> (HTMLElement)

<kbd> (HTMLElement)

<sub> (HTMLElement)

<sup> (HTMLElement)

<i> (HTMLElement)

<b> (HTMLElement)

<u> (HTMLElement)

<mark> (HTMLElement)

<ruby> (HTMLElement)

<rt> (HTMLElement)

<rp> (HTMLElement)

<bdi> (HTMLElement)

<bdo> (HTMLElement)

<span> (HTMLSpanElement)

<br / > (HTMLBRElement)

<wbr> (HTMLElement)

编修记录元素

<ins> (HTMLModElement)

<del> (HTMLModElement)

内嵌媒体元素

<img> (HTMLImageElement)

<param> (HTMLParamElement)

<video> (HTMLVideoElement)

<audio> (HTMLAudioElement)

<source> (HTMLSourceElement)

<track> (HTMLTrackElement)

<canvas> (HTMLCanvasElement)

CanvasRenderingContext2D

CanvasRenderingContext2Dcanvas

CanvasRenderingContext2Dsave()

CanvasRenderingContext2Drestore()

CanvasRenderingContext2Dscale()

CanvasRenderingContext2Drotate()

CanvasRenderingContext2Dtranslate()

CanvasRenderingContext2Dtransform()

CanvasRenderingContext2DsetTransform()

CanvasRenderingContext2DglobalAlpha

CanvasRenderingContext2DglobalCompositeOperation

CanvasRenderingContext2DstrokeStyle

CanvasRenderingContext2DfillStyle

CanvasRenderingContext2DcreateLinearGradient()

CanvasRenderingContext2DcreateRadialGradient()

CanvasGradient 对象

CanvasGradientaddColorStop()

CanvasRenderingContext2DcreatePattern()

CanvasRenderingContext2DlineWidth

CanvasRenderingContext2DlineCap

CanvasRenderingContext2DlineJoin

CanvasRenderingContext2DmiterLimit

CanvasRenderingContext2DshadowOffsetX

CanvasRenderingContext2DshadowOffsetY

CanvasRenderingContext2DshadowBlur

CanvasRenderingContext2DshadowColor

CanvasRenderingContext2DclearRect()

CanvasRenderingContext2DfillRect()

CanvasRenderingContext2DstrokeRect()

CanvasRenderingContext2DbeginPath()

CanvasRenderingContext2DclosePath()

CanvasRenderingContext2DmoveTo()

CanvasRenderingContext2DlineTo()

CanvasRenderingContext2DquadraticCurveTo()

CanvasRenderingContext2DbezierCurveTo()

CanvasRenderingContext2DarcTo()

CanvasRenderingContext2Drect()

CanvasRenderingContext2Darc()

CanvasRenderingContext2Dfill()

CanvasRenderingContext2Dstroke()

CanvasRenderingContext2DdrawSystemFocusRing()

CanvasRenderingContext2DdrawCustomFocusRing()

CanvasRenderingContext2DscrollPathIntoView()

CanvasRenderingContext2Dclip()

CanvasRenderingContext2DisPointInPath()

CanvasRenderingContext2Dfont

CanvasRenderingContext2DtextAlign

CanvasRenderingContext2DtextBaseline

CanvasRenderingContext2DfillText()

CanvasRenderingContext2DstrokeText()

CanvasRenderingContext2DmeasureText()

CanvasRenderingContext2DdrawImage()

CanvasRenderingContext2DcreateImageData()

CanvasRenderingContext2DgetImageData()

CanvasRenderingContext2DputImageData()

<map> (HTMLMapElement)

<area> (HTMLAreaElement)

<applet> (HTMLAppletElement)

表格元素

<table> (HTMLTableElement)

<caption> (HTMLTableCaptionElement)

<colgroup> (HTMLTableColElement)

<col> (HTMLTableColElement)

<tbody> (HTMLTableSectionElement)

<thead> (HTMLTableSectionElement)

<tfoot> (HTMLTableSectionElement)

<tr> (HTMLTableRowElement)

<td> (HTMLTableDataCellElement)

<th> (HTMLTableHeaderCellElement)

窗体元素

<form> (HTMLFormElement)

<fieldset> (HTMLFieldSetElement)

<legend> (HTMLLegendElement)

<label> (HTMLLabelElement)

<input> (HTMLInputElement)

<button> (HTMLButtonElement)

<select> (HTMLSelectElement)

<datalist> (HTMLDataListElement)

<optgroup> (HTMLOptGroupElement)

<option> (HTMLOptionElement)

<textarea> (HTMLTextAreaElement)

<keygen> (HTMLKeygenElement)

<output> (HTMLOutputElement)

<progress> (HTMLProgressElement)

<meter> (HTMLMeterElement)

交互式元素

<details> (HTMLDetailsElement)

<summary> (HTMLElement)

<command> (HTMLCommandElement)

<menu> (HTMLMenuElement)

以上就是关于HTML5 里 section article 什么区别header footer nav 该怎么理解全部的内容，包括:HTML5 里 section article 什么区别header footer nav 该怎么理解、html5关于布局和定位的标签有哪些、vue从后台获取的数据有html标签通过v-html渲染到页面，然后怎么给这里面的html添加样式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/10159490.html

HTML5 里 section article 什么区别header footer nav 该怎么理解

发表评论

评论列表（0条）