HTML5之语义化标签

来源：互联网发布：js给div赋值编辑：程序博客网时间：2024/05/16 15:46

HTML5之语义化标签

1. 新的页面结构以及宽松的语法规范

<!doctype html>

2. 语义化标签

a) <header></header> 页眉

i. 主要用于页面的头部的信息介绍，也可用于板块头部

l <footer></footer>页脚页面的底部或者版块底部

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<header>用在页面的头部或者版块的头部</header>

<footer>用在页面的头部或者版块的底部</footer>

</body>

b) <hgroup></hgroup>页面上的一个标题组合

i. 一个标题和一个子标题，或者标语的组合

<h2>带您进入富有人情味的IT培训</h2>

</hgroup>

l <nav></nav>导航（包含链接的的一个列表）

• <nav><ahref=“#”>链接</a><a href=“#”>链接</a></nav>

• <nav>

</nav>

• <nav>

<h2>妙味精品课程</h2>

<ul>

<li><a href=“#”>javascript</a></li>

</ul>

l <section><section>页面上的版块

用于划分页面上的不同区域,或者划分文章里不同的节

<body>

<section>用来划分区域</section>

</body>

l <article></ article>用来在页面中表示一套结构完整且独立的内容部分

• 可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。

l <aside></ aside>元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

• aside的内容应该与 article的内容相关。

• 被包含在<article>中作为主要内容的附属信息部分，其中的内容以是与当前文章有关的引用、词汇列表等

• 在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

<body>

<aside>和主体相关的附属信息</aside>

</body>

l <figure> < figure>用于对元素进行组合。一般用于图片或视频

l <figcaption> <figcaption> figure的子元素用于对figure的内容进行说明

<img src=“miaov.png”/>(注意没有alt)

<figcaption> 妙味课堂 photo &copy 妙味趣学</figcaption>

</figure>

l <time></time>用来表现时间或日期

• <p>我们在每天早上 <time>9:00</time> 开始营业。 </p>参数

• <p>我在 <timedatetime="2008-02-14">情人节</time> 有个约会。 </p>

l <datalist></datalist>选项列表。与 input元素配合使用，来定义 input可能的值。

• <inputtype="text" list="valList"/>

<datalistid="valList">

<optionvalue="javascript">javascript</option>

<optionvalue="html">html</option>

<optionvalue="css">css</option>

</datalist>

l <details></details>用于描述文档或文档某个部分的细节

• 该元素用于摘录引用等应该与页面的主要内容区分开的其他内容

• Open属性默认展开

l <summary></summary> details元素的标题

<p>国内将知名的IT培训机构</p>

</details>

l <dialog></dialog>定义一段对话

</dialog>

l <address></address>定义文章或页面作者的详细联系信息

l <mark></mark>需要标记的词或句子

<style>

mark{ background:Red;}

</style>

</head>

<body>

</body>

默认黄色，可以修改

l <keygen>给表单添加一个公钥（后端比较实用）

<formaction="http://www.baidu.com" method="get">

用户: <input type="text"name="usr_name" />

公钥: <keygen name="security"/>

<inputtype="submit" />

</form>

l <progress><progress>定义进度条

• <progressmax="100" value="76">

<span>76</span>%//IE下不支持的显示方式

</progress>

IE下的兼容

l 标签

• 针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们方法如下：

在页面的头部加下：

document.createElement(“header”);

document.createElement(“nav”);

document.createElement(“footer”);

……

</script>

l 样式

• HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里要对这些标签定义一下它默认的display

注意：所有的标签都是行内元素，需要设置宽高，则display：block

document.createElement("leo");

document.createElement("header");

document.createElement("article");

document.createElement("aside");

document.createElement("section");

document.createElement("footer");

</script>

<style>

body{margin:0;}

header{height:100px;background:#9F3;display:block;}

article{padding:10px;background:#CF6; overflow:hidden;zoom:1; position:relative; display:block;}

aside{width:200px;height:300px;background:#F06;position:absolute;left:10px;top:10px; display:block;}

section{margin-left:210px;background:#F90;height:300px; display:block;}

footer{height:100px;background:#C6C; display:block;}

leo{background:#F03;height:100px; display:block;}

</style>

</head>

<body>

</article>

<leo>刘伟是个胖子</leo>

</body>

第二种还可以引用<script src="html5shiv.js"></script>

针对IE浏览器比较好的解决方案是html5shiv。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

<style>

body{margin:0;}

header{height:100px;background:#9F3;}

article{padding:10px;background:#CF6; overflow:hidden;zoom:1; position:relative;}

aside{width:200px;height:300px;background:#F06;position:absolute;left:10px;top:10px;}

section{margin-left:210px;background:#F90;height:300px;}

footer{height:100px;background:#C6C;}

</style>

</head>

<body>

</article>

</body>

0 0