H5新增语义化标签

一、根据页面的结构,由div派生的标签。

<header>

<footer>

<nav> 导航 在H4中导航栏一般用ul-li标签,H5中可以直接用<nav>标签

eg. <nav> <a href="#">导航标题1 </a> <a href="#">导航标题2 </a> </div>

<hgroup> 页面上得一个标题组合(一个标题和一个子标题)

eg, <hgroup>  <h1>博客园</h1>

<h2>博客园是一个开发者分享资源的好地方</h2>

</hgroup>

<section> 用来划分页面上的不同区域

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

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

二、媒体元素组合

<figure>和 <figcaption>:<figure>为父元素,用于图片的外层,其子元素<figcaption>用来对内容进行说明。

三、<time>标签,专门用来表示时间

四、<datalist> 标签,定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值。

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

五、<details> 标签,用于描述文档或文档某个部分的细节。

与<summary>标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。 

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

六、<address> 标签,定义文档或文章的作者/拥有者的联系信息。

<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

七、<mark> 标签,定义带有记号的文本。在需要突出显示文本时使用 该 标签,默认加黄色背景。

八、<keygen> 标签,规定用于表单的密钥对生成器字段。(用于给表单添加公钥)

当提交表单时,私钥存储在本地,公钥发送到服务器。

<form action="/example/html5/demo_form.asp" method="get">
用户名:<input type="text" name="usr_name" />
加密:<keygen name="security" />
        <input type="submit" />
</form>

 

九、<process>标签,定义进度条

<!DOCTYPE html>
<html>
<body>

下载进度:
<progress value="22" max="100">
</progress>

<p><b>注释:</b>Internet Explorer 9 以及更早的版本不支持 <progress> 标签。</p>

</body>
</html>

  

H5标签的兼容性

ie6/7不兼容h5标签,解决方法。

1.通过使用JS动态创建

<script>
          document.creatElement("header")
</script>

  注意:IE6是不识别header等标签的,所以认为是自定义标签。而自定义标签是内联元素,所以要显示一些效果,需要在选择器中加入display:block;

2.这样做比较麻烦,需要创建多个标签

因此我们可以引入一个h5的文件即可

<script src="js/html5shw.js">  </script>

  

时间: 2024-10-13 00:23:45

H5新增语义化标签的相关文章

浅谈html语义化标签,Html5新增语义化标签

Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签. 文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等. 2.为啥使用语义

html5新增语义化标签

注意:body.section.nav 需要h1-h6. div.header则不需要. 1):<article> 显示一个独立的文章内容. 例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等.artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系. 例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中. <article> <h1>文章标题</h1> 这是一篇文章

HTML5 部分新增语义化标签元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <header> <hgroup> <h1></h1> <h2></h2> </hgroup

H5新特性值语义化标签

H5新特性之语义化标签 下面是一些关于H5的语义化标签,来看一下: section         类似于div,section 更偏向划分区域 article          更偏向于 内容的展示 aside           (在一边的,在一旁的,侧边) header         表示内容的头部.网页的头部.头部区域 footer          表示网页的底部.内容的底部.底部区域 nav            导航连接.导航区域 figure          表示一块独立的内

我的启蒙--HTML5 第一章 语义化标签

HTML5 1.HTML5:万维网的核心语言,HTML规范的第五次重大修改.现在大部分网站的主流编译语言.学好HTML5是每一个前端的基础课,当然她也很简单 2.HTML5新增语义化标签(虽然很少用到,但是还是要说一下) (1)<laomaoshi>老猫师:恩,你没看错HTML5可以自己定义标签,而且属于行内标签</laomaoshi> (2)其他的我就不一一列举了比如 导航栏常用的nav  时间常用的time (3)但是新增的表单标签,我们还是要熟悉下 就是这样的新标签,还有很多

表单,音视频,语义化标签与属性选择器,结构伪类选择器,伪元素选择器(按钮禁止点击)

HTML5简介 万维网的核心语言,标准通用标记语言的写一个应用超文本标记语言(HTML)的第五次重大修改,作为新HTML语言,具有新的元素,属性和行为:广义的HTML是包含HTML5本身 + CSS3 + JavaScript,虽然不被所有浏览器所支持,但它是一种趋势: 新增语义化标签 <header></header> <!-- 头部标签 --> <nav></nav> <!-- 导航标签 --> <article>&l

Html5新增的语义化标签(部分)

2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习及使用: 1.<header></header> 页眉:主要用于页面的头部的信息介绍,也可用于板块头部: 2.<hgroup></hgroup> 页面上的一个标题组合:一个标题和一个子标题,或者标语的组合: 3.<nav></nav> 导

html5新增的语义化标签

1.什么是语义化标签? 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签. 文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等. 2.为啥使用语义化标签? 1. 更容易被搜索引擎收录. 2. 更容易让屏幕阅读器读出网页内容. 3. 能够更好的体现页面的主题 4.兼容性更好,支持更多的网络设备 3.html语义化标签 1):

HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理。

一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.time.mark.section.header.footer.hgroup.progress.figure.figcaption.nav.meter.output.details.summary.ruby和main   三.让IE5.5~9支持HTML5新标签 1. IE5.5~8下对于不支持的标签