• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5主要新增标签的使用代码分享

HTML5主要新增标签的使用代码分享

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,新增标签等相关知识,匿名希望在学习及工作中可以帮助到您

http:///code/6082.html" target="_blank">HTML5介绍

HTML5是继HTML4以后的下一代HTML标准规范,它提供了一些新的元素和属性。新型的标签有利于搜索引擎和语义分析,同时更好地帮助小屏幕装置和视障人士使用,除此之外,也提供了一些新的功能,总结而言,有如下几大特点:

1、取消了一些HTML4里过时的元素和属性标记

其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被CSS取代。HTML5吸取了XHTML2的一些建议,包括一些用来改善文档结构的功能,比如,新的HTML标签header,footer,dialog,aside,figure等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用p。

2、内容与展式分离

b和i标签依然保留,但它们意义和之前有不同,这些标签的意义是为了将一段文字标识出来,而不是为了设置粗体或斜体样式。u,font,center,strike这些标签则被完全去掉了。

3、新增加一些全新的表单输入对象

包括日期,URL,Email地址,其它的对象则增加了对非拉丁字符的支持。HTML5还引入了微数据,这一使用机器可以识别的标签标注内容的方法,使语义Web的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净、更容易管理的网页,这样的网页对搜索引擎、对读屏软件等更为友好。

4、全新的、更合理的标签

多媒体对象将不再全部绑定在object或embedTag中,而是视频有video标签,音频有audio标签。

5、本地存储

增加了localStorage/sessionStorage/indexedDB等浏览器端存储功能。

6、Canvas对象

将给浏览器带来直接绘制图形的能力,可以直接在浏览器中操作图形。

7、新的API扩展

为HTMLDocument和HTMLElement接口提供了新的API扩展。

8、新语法

(1)DOCTYPE

HTML5的HTML语法要求文档必须声明DOCTYPE以确保浏览器可以在标准模式下展示页面。声明方式是:

<!DOCTYPE html>

不区分大小写。

(2)Charset

HTML5的HTML语法里,有三种形式可以声明字符串的encoding类型:

  • 在传输级别(transport level)上,在HTTP实例的header里设置Content-Type。

  • 在文件的开头,设置一个Unicode的Bype Order Mark(BOM),该字符为文件的encoding方式提供了一个签名。

  • 在文档的前1024个byte之间的内容里,使用带有charset属性的meta元素来声明encoding方式。例如:<meta charset="utf-8">。

(3)MathML和SVG

HTML5的HTML语法允许在文档里使用MathML(数学标记语言)和SVG(可伸缩矢量图)元素。例如,一个非常简单的HTML页面包含一个svg元素画出的圆:

<!doctype html><title>SVG in text/html</title><p>
 A green circle: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg></p>

section

section 元素是对页面文档结构进行划分的最基本也是最主要的结构元素,主要用来对网站或应用程序中的页面上的内容进行层次结构上的划分。一个section元素通常由内容及其标题组成。

如果元素的内容集中到一起显示可以表达相应的意思的话,可以定义成article元素,而没必要使用section元素。

section元素不是一般的容器元素,所以如果一个元素需要定义相应的style或script脚本的话,推荐使用p元素,section的使用是确保这个元素的内容能够明确地展示在文档的大钢里。

如:

<!DOCTYPE Html><html><head>
    <title>Graduation Ceremony Summer 2022</title></head><body>
    <h1>Graduation</h1>
    <section>
        <h1>Ceremony</h1>
        <p>Opening Procession</p>
        <p>Speech by Validactorian</p>
        <p>Speech by Class President</p>
        <p>Presentation of Diplomas</p>
        <p>Closing Speech by Headmaster</p>
    </section>
    <section>
        <h1>Graduates</h1>
        <ul>
            <li>Molly Carpenter</li>
            <li>Anastasia Luccio</li>
            <li>Ebenezar McCoy</li>
            <li>Karrin Murphy</li>
            <li>Thomas Raith</li>
            <li>Susan Rodriguez</li>
        </ul>
    </section></body></html>

article

article 元素代表文档、页面或应用程序中的所有“正文”部分,它所描述的内容应该是独立的、完整的、可以独自被外部引用的,可以是一篇博客、一篇报刊中的文章、一篇论坛帖子、一段用户评论、一个独立的插件,或任何独立于上下文中其他部分的内容。

article是一个特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块。一般来说,article会有标题部分。

当article内嵌article时,原则上来说,内部的article的内容是和外层的article内容相关的。例如,一篇博客中,包含用户提交的评论的article应该嵌套在包含博客文章article中。

<article>
    <h1>Safari 5 released</h1>
    <p>7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC.</p>
    <p>Apple announced the release of Safari 5 for Windows and Mac......</p></article>

nav

nav 元素是一个可以作为页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。一个页面可以拥有多个nav元素,作为页面整体不同部分的导航。在nav元素中,一般以ul列表的形式来具体放置该组链接元素。

下面是w3c给出的一个示例代码:

<body>
    <h1>The Wiki Center Of Exampland</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/events">Current Events</a></li>
            ...more...        </ul>
    </nav>
    <article>
        <header>
            <h1> Demos in Exampland</h1>
            <p>Written by A. N. Other.</p>
        </header>
        <nav>
            <ul>
                <li><a href="#public">Public demonstrations</a></li>
                <li><a href="#destroy">Demolitions</a></li>
                ...more...            </ul>
        </nav>
        <p>
            <section id="public">
                <h1>Public demonstrations</h1>
                <p> ...more...</p>
            </section>
            <section id="destroy">
                <h1>Demolitions</h1>
                <p>...more...</p>
            </section>
            ...more...        </p>
        <footer>
            <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
        </footer>
    </article>
    <footer>
        <p><small>? copyright 1998 Exampland Emperor</small></p>
    </footer></body>

aside

aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他有别于主要内容的部分。

根据目前的规范,aside元素有两种使用方法:

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

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

下面的代码示例综合了以上两种方法:

<body>
    <header>
        <h1>My Blog</h1>
    </header>
    <article>
        <h1>My Blog Post</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
     
  


 

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03有关触屏版页面的制作方法
  • 2018-12-03用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果
  • 2018-12-03Canvas中beginPath()和closePath()的分析总结(附示例)
  • 2018-12-03用media screen做响应式布局,为何断点设为800px时chrome会在783px就变化?
  • 2018-12-03HTML5与Flash比较的详细介绍
  • 2018-12-03HTML5 MiranaVideo播放器 (代码开源) _html5教程技巧
  • 2018-12-03Vue.jS的ul-li标签仿select标签
  • 2018-12-03H5响应式网站效果怎么样?
  • 2017-08-06HTML5边玩边学(1)画布实现方法
  • 2018-12-03突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述_html5教程技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件
    • className和a href 的实例详解
    • 使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
    • [HTML5游戏开发]挑战横版ACT(二):秀身手勇猛如当年
    • HTML5-Web Storage APIs的简述
    • HTML5实现文件断点续传的方法
    • HTML5开发实例-3D全景(ThreeJs全景Demo) 详解(图)
    • HTML5移动开发图片压缩上传功能的代码实例
    • HTML5拖拽文件到浏览器并实现文件上传下载功能代码
    • html5中的Canvas 和 SVG分别是什么?它们的区别在何处?(实例)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有