认识html5

什么是html5?

html5 ≈ html5新增标签及规范 + CSS3 +javascript API(应用程序接口 通过javascript调用)
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式。

html5属性规范 自定义属性必须以"data-"开头:

<div id="" data-xxx=""></div>

img、input标签可以不用闭合

<img src="" alt="">
<input type="">

html5新增标签(1)

语义标签:
header、nav、main、aside、footer、section、article

<!-- header 头部 -->
<header>
    <!-- nav 导航 -->
    <nav></nav>
</header>
<!-- main 内容主体-->
<main>
    <!-- aside 侧边栏 -->
    <aside></aside>
</main>
<!-- footer 尾部 -->
<footer></footer>

<header>标签:<header>元素表示一组引导性的帮助,可能包含标题元素,也可以包含其他元素,像logo、分节头部、搜索表单等。

<footer>标签: <footer> 元素表示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

<nav>标签:HTML导航栏 <nav>)描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表。

<aside>标签:<aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条,例如来自词汇表的定义。也可能有其他类型的信息,例如相关的广告、笔者的传记、web 应用程序、个人资料信息,或在博客上的相关链接。

<main>标签:
(1)<main>标签不能是以下元素的继承<article>、<aside>、<header>、<footer>、<nav>。
(2)在一个文档中不能出现一个以上的<main>标签。
(3)<main>标签在PC端不支持IE浏览器,在手机端只支持Firefox火狐浏览器,所以不支持使用<main>标签。

可以使用article和section标签代替:

<header>
    <h1 class="logo">header</h1>
</header>
<section>
    <article>
        <section></section>
    </article>
    <aside class="aside"></aside>
</section>
<footer></footer>

<article>标签:<article>元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

<section>标签:HTML Section 元素 (<section>) 表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading)。一般通过是否包含一个标题 (<h1>—<h6>element)作为子节点 来 辨识每一个<section>。

让IE6、7、8支持html5.官方给出的解决方案 -html5shiv.js

<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 9,552评论 1 25
  • IE8以下不兼容HTML5使用以下代码,注释if判断当浏览器为IE9以下时解析 新增标签 标签定义图形,比...
    语目阅读 2,540评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,692评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,037评论 19 139
  • 《CSS揭秘》技巧三中提到, 等价于: 为什么bottom right和100% 100%等价呢?请看下面: ba...
    6659a0f02826阅读 5,403评论 0 0

友情链接更多精彩内容