一、HTML5简介
1、什么是HTML5
HTML5 是新一代的 HTML 标准,2014年10月由万维网联盟(W3C)完成标准制定。
官网地址:
W3C 提供: https://www.w3.org/TR/html/index.html
WHATWG 提供:https://whatwg-cn.github.io/html/multipage
HTML5在侠义上是指新一代的HTML标准,在广义上是指:整个前端
2、HTML5 优势
1、针对JavaScript,新增了很多可操作的接口。
2、新增了一些语义化标签、全局属性
3、新增了多媒体标签,可以很好的替代 flash。
4、更加侧重语义化,对于SEO 更友好。
5、可移植性好,可以大量应用在移动设备上。
3、HTML5兼容性
支持:Chrome、Safari、Opera、Firefox 等主流浏览器。
IE浏览器必须是9及以上版本才支持HTML5,IE9仅支持部分HTML5新特性。
二、新增语义化标签
1、新增布局标签
标签名 | 语义 | 单/双标签 |
header | 整个页面,或部分区域的头部 | 双 |
footer | 整个页面,或部分区域的底部 | 双 |
nav | 导航 | 双 |
article | 文章、帖子、杂志、新闻、博客、评论等。 | 双 |
section | 页面中的某段文字,或者文章中的某段文字(里面文字通常里面会包含标题) | 双 |
aside | 侧边栏 | 双 |
main | 文档的主要内容(WHATWG没有语义,IE不支持),几乎不用 | 双 |
hgroup | 包裹连续的标题,如文章主标题、如文章主标题、副标题的组合(W3C将其删除) | 双 |
上面的标签其实没有什么实际的效果,可以理解为有了语义的div。
关于 article 和 section :
1、artical 里面可以有多个section。
2、section 强调的是分段或分块,如果你想将一块内容分成几段的时候,可使用section元素。
3、article 比 section 更强调独立性,一块内容如果比较独立、比较完整,应该使用 article 元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<h1>尚品</h1>
</header>
<hr>
<!-- 主导航区 -->
<nav>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
</nav>
<!-- 主要内容 -->
<div class="page-content">
<!-- 侧边栏导航 -->
<aside style="float: right;">
<nav>
<ul>
<li><a href="#">秒杀专区</a></li>
<li><a href="#">会员专区</a></li>
<li><a href="#">领取优惠卷专区</a></li>
<li><a href="#">品牌专区</a></li>
</ul>
</nav>
</aside>
<!-- 文章 -->
<article>
<h2>《如何一夜暴富》</h2>
<section>
<h3>第一种方式:通过做梦</h3>
<p>你要这么做梦:XXXXXXXXXXXXX</p>
</section>
<section>
<h3>第二种方式:通过彩票</h3>
<p>你要这么买彩票:XXXXXXXXXXXXX</p>
</section>
</article>
<hr>
<!-- 页脚 -->
<footer>
<nav>
<a href="#">友情链接1</a>
<a href="#">友情链接2</a>
<a href="#">友情链接3</a>
</nav>
</footer>
</div>
</body>
</html>
2、新增状态标签
2.1 meter 标签
语义:定义已知范围内的标量测量。也被称为 gauge 尺度,双标签,例如:电量、磁盘用量等。
常用属性如下:
属性 | 值 | 描述 |
high | 数值 | 规定高值 |
low | 数值 | 规定低值 |
max | 数值 | 规定最大值 |
min | 数值 | 规定最小值 |
optimum | 数值 | 规定最优值 |
value | 数值 | 规定当前值 |
2.2 progress标签
语义:显示某个任务完成得进度的指示器,一般用于标识进度条,双标签,例如:工作完成进度等。
常用属性如下:
属性 | 值 | 描述 |
max | 数值 | 规定目标值 |
value | 数值 | 规定当前值 |
<span>手机电量</span>
<meter max="100" min="0" value="10" low="20" high="80" optimum="90"></meter><br>
<span>当前进度:</span>
<progress max="100" value="20"></progress>
3、新增列表标签
标签名 | 语义 | 单\双 标签 |
datalist | 用于搜索框的关键字提示 | 双 |
details | 用于展示问题和答案,或对专有名词进行解释 | 双 |
summary | 写在 details 的里面,用于指定问题或专有名词 | 双 |
<form action="#">
<input type="text" list="mydata">
<button>搜素</button>
</form>
<input type = "text" list = "mydata" >