HTML5 标签语法变化和使用概念

2019-03-11 00:13|来源: 领悟书生

HTML5标签与HTML4标签区别

1)概念的变化:

         HTML5专注内容与结构,而不专注的表现

<header>
<hgroup>导航相关数据</hgroup>
</header> 
 
<nav>菜单</nav> 
 
<article>
<h1>标题:HTML5专题视频教程</h1>

2)声明与标签:

HTML5在更多的声明和标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了部分元素


HTML5标签语法介绍及新增标记

1、语法标签:

(1) 不允许写的结束符的标签:area、basebr、col、command、Embed、hr、img、input、keygen、link、meta、param、source、Track、wbr

(2)可以省略结束符的标签:li、dt、dd、p、rt、optgroup、option、Colgroup、thread、tbody、tr、td、th

(3)可以完全省略的标签:html、head、body、colgroup、tbody

2、新增标签:

<article>  标记定义一篇文章
<aside>  标记定义页面内容部分的侧边栏
<audio>  标记定义音频内容
<canvas>   标记定义图片
<command>  标记定义一个命令按钮
<datalist>  标记定义一个下拉列表
<details>   标记定义一个元素的详细内容
<dialog>   标记定义一个对话框(会话框)
<embed>  
标记定义外部的可交互的内容或插件
<figure>   标记定义一组媒体内容以及它们的标题<footer> 标记定义一个页面或一个区域的底部
<header>   标记定义一个页面或一个区域的头部
<hgroup>   标记定义文件中一个区块的相关信息
<keygen>   标记定义表单里一个生成的键值
<mark>   标记定义有标记的文本
<meter>   标记定义 measurementwithin apredefinedrange
<
nav>   标记定义导航链接
<output>   标记定义一些输出类型
<progress>   标记定义任务的过程
<rp>   标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示
<rt>   标记定义对rubyannotations的解释
<ruby>   标记定义 rubyannotations.
<section>  
标记定义一个区域
<source>   标记定义媒体资源
<time>   标记定义一个日期/时间
<video>   标记定义一个视频


HTML5简单示例

<!DOCTYPE html> 
<head> 
<meta charset=utf-8> 
<title>页面结构</title>
<style type="text/css"> 
    header,nav,article,footer {border:solid 1px #666;padding:5px}  
    header{width:500px}  
    nav{float:left;width:60px;height:300px}  
    article{float:left;width:428px;height:300px}  
    footer{clear:both;width:500px}  
</style> 
<script type="text/javascript"> 
    document.createElement('article');  
    document.createElement('nav'); 
    document.createElement('header'); 
</script> 
</head> 
<body> 
    <header>
        <hgroup>导航相关数据</hgroup>
    </header> 
    <nav>菜单</nav> 
    <article>
        <h1>标题:HTML5专题视频教程</h1>
        发布日期:<time>19:00</time>
        <time datetime="2013-2-14">情人节</time>
        <p>测试相关内容</p>
    </article>
    <footer> 
        <address>地址:xx省xxx市xxx</address>
    </footer> 
</body> 
</html>


本文链接:HTML5 标签语法变化和使用概念,由领悟书生原创,转载请注明出处【http://www.656463.com/article/330】

相关问答

更多
  • html5主要在移动端开发中使用 html5跟html没有太大的区别,一般标签都能通用的
  • 我想我真正的问题是有没有从XHTML转换为HTML语法的理由? 我多年来一直在使用XHTML,并不确定是否有理由切换回来。 浏览器的兼容性(IE有时会与应用程序/ xhtml + xml mime类型配合使用)等等? 正如前面的回答所述, text/html被解析为HTML,而application/xhtml+xml被解析为XML。 因此,您应该使用与您使用的MIME类型相匹配的语法。 如果您现在正在使用text/html但使用XHTML语法,那么您应该修复您的内容以使用HTML5语法。 您可能已经很接近 ...
  • “严格的”XHTML5验证没有文档类型。 对于XHTML5,doctype甚至是可选的,因为doctype仅用于停止浏览器切换到quirksmode。 XHTML没有这样的怪癖模式。 如果您打算将它用作多边形文档,建议使用HTML5文档类型(带有大写的DOCTYPE)。 在这种情况下,您可以使用文档类型: 但是,如果要验证文档是否使用XHTML样式语法,则可以使用验证程序的高级选项来实现此目的。 转到http://validator.nu 切换到选择框中的“文本字段”(或将 ...
  • 在你的css中添加下面的代码: header,footer,article,section,aside,nav { display:block; } 我用jsfiddle更新了你的代码。 Add this code in your css: header,footer,article,section,aside,nav { display:block; } I updated your code in jsfiddle.
  • 听起来你应该在
    标签中的文章中的
    标签和条目中包装每个“部分”(你称之为)。 HTML5规范说(Section): section元素表示文档或应用程序的一般部分。 在这方面,一个部分是内容的主题分组,通常包含标题。 [...] 章节的示例将是章节,选项卡对话框中的各个选项卡页面或论文的编号部分。 网站的主页可以分为几个部分,用于介绍,新闻项目和联系信息。 注意 :如果合并元素的内容是有意义的,则鼓励作者使用article元素而不是section元素。 和 ...
  • PHP是一种服务器端语言,它不会在客户端级别进行任何检查,只能在服务器上进行。 HTML 5在语义上更正确,使用
    而不是使用带有ID标头的
    提供更好的SEO ,网页抓取工具更容易找到,并提供更好的可访问性(即屏幕阅读器或其他设备可以轻松关联什么headers , footers , sections代表)。 PHP is a server side language, it will not do any checking at the client level, only at th ...
  • 它不是指html5的元素id。 它与angular2严格相关,是一个模板引用变量 。 所以,正如官方文件中所述, “电话”的哈希(#)前缀表示我们正在定义一个电话变量。 在你的情况下不是“电话”,而是“heroName”。 It's not referring to the element id of html5. It's strictly related to angular2 and is a Template reference variable. So, as said in the offici ...
  • 有一个名为“ 我何时可以使用...”的站点,其中列出了各种HTML5,CSS3和其他现代Web标准,并指出了哪些浏览器版本支持它。 您是否可以使用功能取决于您的用户是谁。 如果您的目标是最先进的网络开发人员,那么您可能会依赖他们拥有更多版本的浏览器,而不是针对企业会计。 因此,您需要确定必须支持哪些浏览器版本,并执行适当的渐进增强或回退以支持旧浏览器,同时引入不支持的新功能。 一些HTML5,CSS3和其他功能可以在旧版浏览器中使用“polyfill”,这是使用JavaScript,Flash,专有功能等缺 ...
  • IE不会让你设置新标签的样式,除非你告诉它,尝试HTML5垫片 。 基本上,IE忽略了它不知道的标签的任何样式信息,但如果你只是通过JavaScript创建一个元素: document.createElement('section'); ...即使你然后抛弃那个元素,这使得IE意识到“哦, section是一种元素”,然后它将应用样式规则。 这就是垫片脚本的作用。 在将相关元素添加到DOM之前,您需要确保执行此操作(因此,填充脚本基本上必须进入head ,您不能进行经常看到的底部优化放置) 。 当然,这取 ...
  • 是的,有明确的行为; HTML5试图为任何可以在浏览器之间产生差异的情况提供定义的行为,以减少不兼容性,即使在处理无效文档时也是如此。 根据我对规范的阅读,看起来没有src属性或source元素是无效的: 内容模型: 如果元素具有src属性:transparent,但没有媒体元素后代。 如果元素没有src属性:一个或多个源元素,则透明,但没有媒体元素后代。 这似乎向我表明它必须具有src属性或source子元素。 但是Validator.nu和W3C Validator似乎都认为这是一个有效的文档: