Html5 标签常用参考

lt;!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>H5标签常用参考</title>
</head>
<body style="display: grid">



<div class="header">Html4页眉</div>
<div class="main">Html4主体</div>
<div class="footer">Html4页脚</div>


<header>Html5页眉</header>
<main>这里是Html5主体</main>
<footer>这里是Html5页脚</footer>
<address>我代表的是地址</address>
<mark>我是高亮标签</mark>


<strong>大家好啊。</strong>
<em>大家好啊。</em>
<span style="color: red">大家好啊！！</span>
<p style="color: slategray">-----我是分切线-----</p>

<a href="https://www.toutiao.com">默认当前窗口打开</a>
<a href="https://www.toutiao.com" target="_self">当前窗口打开</a>
<a href="https://www.toutiao.com" target="_blank">新窗口打开</a>
<p style="color: slategray">-----我是分切线-----</p>

<a href="https://www.baidu.com" target="content"
>点我会在下方框架标签中打开</a
>
<a href="https://www.qq.com" target="content">点我会在下方框架标签中打开</a>
<iframe src="" frameborder="1" name="content"></iframe>
<p style="color: slategray">-----我是分切线-----</p>

<a href="mailto:qqqq@qq.com">点我会调出发邮箱</a>
<a href="tel:15777777777">点我会打电话</a>
<p style="color: slategray">-----我是分切线-----</p>


<ul type="circle">
<li><a href="">首页</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">产品中心</a></li>
<li><a href="">在线地址</a></li>
</ul>

<ol start="5">
<li><input type="checkbox" name="" id="" /><a href="">首页</a></li>
<li><input type="checkbox" name="" id="" /><a href="">关于我们</a></li>
<li><input type="checkbox" name="" id="" /><a href="">产品中心</a></li>
<li><input type="checkbox" name="" id="" /><a href="">在线地址</a></li>
</ol>

<dl>
<dt>联系方式</dt>
<dd><a href="mailto:qqqq@qq.com">点我会调出发邮箱</a></dd>
<dd><a href="tel:15777777777">点我会打电话</a></dd>
<dd>
<a href=""> <address>我代表的是地址</address></a>
</dd>
<dt>备案号</dt>
<dd>京IPC备：xxxxx</dd>
</dl>
</body>
</html>

效果参考

使用DIV+CSS布局时，我们需要通过为div命名的方式，来区分网页中不同的模块。在HTML5中布局方式有了新的变化，HTML5中增加了新的结构标签，如header标签、nav标签、article标签等，具体介绍如下。

1. header标签

HTML5中的header标签是一种具有引导和导航作用的结构标签，该标签可以包含所有通常放在页面头部的内容。header标签通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。其基本语法格式如下：

<header>

  <h1>网页主题</h1>

    ...
    
</header>

在上面的语法格式中，<header></header>的使用方法和<div class="header"></div>类似。

注意：

在HTML网页中，并不限制header标签的个数，一个网页中可以使用多个header标签，也可以为每一个内容块添加header标签。

2. nav标签

nav标签用于定义导航链接，是HTML5新增的标签，该标签可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。nav标签的使用方法和普通标签类似，例如下面这段示例代码：

<nav>

  <ul>

        <li><a href="#">首页</li>

        <li><a href="#">公司概况</li>

        <li><a href="#">产品展示</li>

        <li><a href="#">联系我们</li>

  </ul></nav>

在上面这段代码中，通过在nav标签内部嵌套无序列表ul来搭建导航结构。通常一个HTML页面中可以包含多个nav标签，作为页面整体或不同部分的导航。具体来说，nav标签可以用于以下几种场合。

● 传统导航条：目前主流网站上都有不同层级的导航条，其作用是跳转到网站的其他主页面。

● 侧边栏导航：目前主流博客网站及电商网站都有侧边栏导航，目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。

● 页内导航：它的作用是在本页面几个主要的组成部分之间进行跳转。

● 翻页操作：翻页操作切换的是网页的内容部分，可以通过点击“上一页”或“下一页”切换，也可以通过点击实际的页数跳转到某一页。

除了以上几点以外，nav标签也可以用于其他导航链接组中。需要注意的是，并不是所有的链接组都要被放进nav标签，只需要将主要的和基本的链接放进nav标签即可。

3. footer标签

footer标签用于定义一个页面或者区域的底部，它可以包含所有放在页面底部的内容。在HTML5出现之前，一般使用<div class="footer"></div>标签来定义页面底部，而现在通过HTML5的footer标签可以轻松实现。与header标签相同，一个页面中可以包含多个footer标签。

4. article标签

article标签代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。一个article标签通常有它自己的标题（可以放在header标签中）和脚注（可以放在footer标签中），例如下面的示例代码。

<article>

    <header>

    <h1>秋天的味道</h1>
     
            <p>你想不想知道秋天的味道？它是甜、是苦、是涩...</p>

  </header>

    <footer>
            
               <p>著作权归XXXXXX公司所有...</p>

  </footer></article>

需要注意的，在上面的示例代码中还缺少主体内容。主体内容通常会写在header和footer之间，通过多个section标签进行划分。一个页面中可以出现多个article标签，并且article标签可以嵌套使用。

5. section标签

section标签表示一段专题性的内容，一般会带有标题，主要应用在文章的章节中。例如，新闻的详情页有一篇文章，该文章有自己的标题和内容，因此可以使用article标签标注，如果该新闻内容太长，分好多段落，每段都有自己的小标题，这时候就可以使用section标签把段落标注起来。在使用section标签时，需要注意以下几点：

● section不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该使用div标签。

如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。

● 没有标题的内容模块不要使用section标签定义。

值得一提的是，在HTML5中，article标签可以看作是一种特殊的section标签，它比section标签更具有独立性，即section标签强调分段或分块，而article标签强调独立性。如果一块内容相对来说比较独立、完整时，应该使用article标签；但是如果想要将一块内容分成多段时，应该使用section标签。

6. aside标签

aside标签用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等有别于主要内容的部分。aside标签的用法主要分为两种：

● 被包含在article标签内作为主要内容的附属信息。

● 在article标签之外使用，作为页面或网站的附属信息部分。最常用的的使用形式是侧边栏。

.HTML5是什么

HTML是web开发中三大规范之一，可以参考：Web前端开发-HTML入门干货。

HTML产生于1990年，1997年的HTML4.0成为互联网标准并广泛应用，HTML5是在HTML4.01（1999年发布）的基础上发展而来，在2008年正式发布，在2012年形成了稳定版本。

其实在HTML4.01之后，W3C组织除了HTML5之外，为了严格html编写规范，发布了XHTML。经过了跌宕起伏的分歧、融合之路，本来预计要逐步被XHTML替代的HTML5，最终成了W3C组织确认的html规范。

在HTML5规范中添加了很多新元素及功能，比如：更好的页面结构（语义化标签）、图形的绘制（画布）、多媒体（音频、视频）内容、智能表单、地理位置、数据存储以及多线程等。

2.支持HTML5的浏览器版本

可以通过html5test.com网站，测试HTML5各标签在各类浏览器中支持程度。

html5test.com

PC浏览器各版本支持HTML5考量

移动浏览器各版本支持HTML5考量

对于IE6、7、8来讲，支持极少部分的HTML5新标签，IE9也是部分支持。

3.如何解决低版本浏览器兼容HTML5标签

在低版本浏览器中兼容使用HTML5标签，有两种方案，一：自定义标签；二：使用第三方js插件

（1）自定义标签

可以利用添加自定义标签的方式为IE 浏览器添加 HTML5 元素。

<script>
//可以使用自定义标签
document.createElement("header");
document.createElement("article");
document.createElement("aside");
document.createElement("section");
document.createElement("footer");
</script>

但是Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式，所以采用以下方式。

（2）利用第三方js插件

html5shiv.js是第三方插件，能够解决IE9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。

<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!-- 专门针对IE浏览器的语句，且只能被IE9识别，其他浏览器将以下if endif语句认为是注释 -->
 <!--[if lt IE 9]>
 <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
 <![endif]-->
</head>

除IE外都可识别

4.新增常用的HTML5标签

（1）语义化标签

相对于无具体含义的div和span标签，语义化标签的优点是方便搜索引擎能识别页面结构，有利于SEO。

header：该标签定义了页面的头部区域；

nav：该标签定义了页面的导航链接区域；

footer：该标签定义了页面或section的页脚；

section：该标签定义了页面区域；

article：该标签定义了页面的内容区域；

（2）多媒体标签

1）视频标签

video：用来定义视频内容，支持多种视频格式，包括.mp4、.ogg、.webm等，最常用的是.mp4。

 <body>
 <!-- src属性设置视频源，
width、height设置视频大小，单位是像素，
autoplay属性设置自动播放，
对于google浏览器需要添加muted属性,表示静音播放，
controls属性设置播放控件，包括播放、暂停等，
loop属性设置视频循环播放， 
poster属性设置视频封面，
-->
<video
src="media/xiaomitv.mp4"
width="300"
height="100"
autoplay="autoplay"
muted="muted"
controls="controls"
loop="loop"
poster="images/a.jpg"
></video>
</body>

还可以采用如下代码，兼容多种格式的视频文件

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

2）音频标签

audio：用来定义音频内容，支持多种音频格式，包括.mp3、.wav、.ogg等，最常用的是.mp3。

音频标签的用法和视频标签的基本一样，属性及属性值含义也基本一样。

Google的chrome浏览器将音频、视频自动播放给默认禁止了，视频可以通过添加静音播放折中解决，但是音频单独通过html标签和属性是不能解决的，需要js配合使用。

（3）智能表单标签

1）新增input类型

tel：限制输入电话号码，目前只有 Safari 8 支持 tel 类型；

email：在提交时验证输入内容是否符合邮箱格式；

date：限制输入的内容为日期，浏览器会弹出日期选择器；

time：限制输入的内容为时间，浏览器会弹出日期选择器；

number：限制输入的内容仅为数字；

url：在提交时验证输入内容是否符合url格式；

<form action="">
<ul>
<li>搜索：<input type="search" name="" id="" /></li>
 <li>电话：<input type="tel" /></li>
 <li>邮箱：<input type="email" /></li>
<li>日期：<input type="date" /></li>
<li>时间：<input type="time" /></li>
<li>数量：<input type="number" min="1" max="5"/></li>
<li>网址：<input type="url" /></li>
<li>附件：<input type="file" /></li>
<li><input type="submit" /></li>
</ul>
</form>

2）新增input的属性

min和max属性可以限制数字的最值，可以限制日期、时间类型的最值；其属性值为具体内容。

required属性表示必填项；其属性值为required。

placeholder属性表示提示信息，其属性值为提示信息。

multiple属性表示input类型为file时，可以文件多选；其属性值为multiple。

autocomplete属性表示是否显示之前提及过的文本信息；其属性值为on或者off。

在线咨询

上一篇：CSS 动画
下一篇：HTML5大显神通：8个3D视觉效果“让你好看”

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。