HTML5 语义化 -- main

html-css08

HTML5 语义化 -- main,第1张

早在 2013 年, <main> 元素就被正式添加到 W3C HTML 规范中,到目前为止,关于该元素的定义已经很完善了,所以现在是时候深入了解什么时候适合使用 <main> 元素了。那么,下面就开始吧。

<main> 的主要目的是将 ARIA 的地标性作用 main 映射到 HTML 中的元素。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。 W3C 规范将 <main> 描述为 :

自从 <main> 元素包含在 HTML 规定里之后, <body> 元素就还原成了它在 HTML4 中的定义。

使用 <main> 元素值得注意的一点是,它在每个页面中只能使用一次。为什么要规定一个页面只能使用一次呢?虽然我对具体的细节并不感兴趣,但是有些观点看起来还是比较有意义的。

按照规格,如果你在一个文档中试图使用多个 <main> 标签,那么 W3C validator 会抛出错误。

<main> 元素的另外一个规定是,它不能作为 <article>, <header>, <aside>, <footer>, <nav> 的子元素节点。

就像其它的 HTML5 新元素一样,并不是所有的浏览器都能够识别出 <main> ,并且给它加上预设的样式,你可能需要在自己的 CSS 文件中将它设置为块级元素。

有的时候,为了支持一些较低版本的 IE 浏览器,你可能还需要使用 JavaScript 创建该元素。

当然了,你还可以使用 html5shiv .

使用 <main> 元素最简单的方式就是去替换那些 ID 或者 Class 值为 main 或者 content 之类的 <div> 元素。

所以,在实践中它应该是什么样子呢?下面是使用 <main> 元素之前的文档结构。

下面使用 <main> 元素改写文档。

好了,这是如此的简单,以至于一分钟不到我们就可以将文档改写成新潮的 HTML5 样式。

正如你所见的,使用 <main> 元素是超级简单的,只需要花费几分钟的时间,所以现在真的到了将 <main> 带入到网站开发的过程中了。

html5的使用,与第四代的html有点出入,如:第四代的HTML布局用的是div来布局,而第五代的HTML布局已经明确了 头部、侧边、栏目、中间区域(主体部分)、以及底部(footer);

如:以前定义一个栏目导航<div><ul><li><li><ul></div>差不多是这形式来定义的,而html5则明确规定了<nav></nav>标签来定义,头部用<header></header>底部用<footer></footer>这里需要记住的一点是:主体部分,也就是中间区域<main></main>一个网页只能有一个主体部分;

这一点需要你好好记住,还有如果不懂的话,你可以去网上查看一些视频教程,有详细的解说,如果还有疑问请继续追问我;

使用八种基本数据类型定义八个变量,然后在控制台输出各个变量的值

*

程序输出:

*

程序头部的注释结束

*/

public

class

Demo01

{

/**

*

@param

args

*/

public

static

void

main(String[]

args)

{

boolean

flag

=

true

char

yeschar

=

'y'

byte

finbyte

=

30

int

intvalue

=

-70000

long

longvalue

=

200

short

shortvalue

=

20000

float

floatvalue

=

9.997f

double

doublevalue

=

1.117

System.out.println("The

values

are:")

System.out.println("布尔类型变量

flag:"+flag)

System.out.println("字符类型变量

yeschar:"+yeschar)

System.out.println("字节类型变量

finbyte:"+finbyte)

System.out.println("整型变量

intvalue:"+intvalue)

System.out.println("长整型变量

longvalue:"+longvalue)

System.out.println("短整型变量

shortvalue:"+shortvalue)

System.out.println("浮点类型变量

floatvalue:"+floatvalue)

System.out.println("双精度浮点型变量

doublevalue:"+doublevalue)

}

}