第2章 HTML5 标签
后面满满都是干货,想学习前端技术的小伙伴强烈建议收藏!
一、HTML5介绍
介绍HTML5发展历程
- HTML5组成
-
HTML 5 ≈ HTML+CSS 3+Javascript+API
-
目前支持HTML5的浏览器有:
-
天降大任必先苦其心志:HTML5十年磨一剑
-
互联网行业为什么需要标准?
-
WHATWG:
Web Hypertext Application Technology Working Group
网页超文本应用技术工作小组
-
HTML5历史大事件时间轴
-
HTML5优势:
替代插件;
画布;
本地存储;
数据提取;
位置服务;
多媒体;
二、结构标签
2.1、(块状元素) 有意义的div
- 新的结构标签带来网页布局的改变及提升搜索引擎的友好度:
2.2、页面布局
页面布局(案例03-01-01-buju.html)
<body>
<header><p>这是一个header标签</p>
<nav><ul><li>首页</li><li>内页一</li></ul>
</header>
<div>
<section><p>这是一个section标签</p>
<article>
<header><ul><li>导航1</li><li>导航2</li></ul></header>
<p>内页内容...</p>
<footer >这是一个footer标签</footer>
</article>
</section>
<aside>这是一aside标签</aside>
</div>
<footer>尾部标签</footer>
</body>
2.3、标题组h标签hgroup(案例03-01-02-hgroup.html)
- hgroup元素,语义就是组合网页或区段的标题,修改hgroup样式后,被他包围的h1、h4之类的标题元素就会同时继承他设置的样式。
<!DOCTYPE html>
<html>
<head>
<style>
hgroup{ background:yellow;}
</style>
<meta charset="utf-8" />
<title>hgroup</title>
</head>
<body>
<hgroup>
<h1>欢迎学习HTML5 教程</h1>
<h2>第二章表单的hgroup</h2>
</hgroup>
</body>
</html>
2.4、figure
-
标签规定独立的流内容(图像、图表、照片、代码等等)。 -
figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
-
html中常常用到一种图片列表,图片+标题或者图片+标题+简单描述。以前的常规写法:
-
在html5中有了新标签更能语义化的定义出这中图片列表,那就是figure标签。figure用来代替原来li标签,P标签由figcaption标签代替。
-
注意:一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置。
<li>
<p>title</p><img src="" />
</li>
详细请参见案例03-01-03-figure.html。
<figure>
<h1>咖啡</h1>
<p>一种由咖啡豆磨制粉后,冲调的微苦饮料,功用提神。</p>
</figure>
<figure>
<p>北京风景</p>
<img src="images/img_1.jpg">
<img src="images/img_2.jpg">
<img src="images/img_3.jpg">
<img src="images/img_4.jpg">
</figuer>
2.5、figcaption
-
标签定义figure元素的标题。 - ”figcaption” 元素应该被置于“figure” 元素的第一个或最后一个子元素的位置。
-
标签用于对元素进行组合。使用 元素为元素组添加标题。
代码请见案例03-01-04-figcaption.html
<figure>
<figcaption>北京风景</figcaption>
<img src="images/img_1.jpg">
<img src="images/img_2.jpg">
<img src="images/img_3.jpg">
<img src="images/img_4.jpg">
</figure>
三、新的全局属性标签
全部代码参见:案例03-01-05-global.html
- contenteditable
<table contenteditable="true">
<tr>
<td width="92">名字:</td>
<td width="55">麦克</td>
<td width="111">生日:</td>
<td width="72">1999.01.01</td> </tr>
<tr>
<td>性别:</td>
<td>男</td>
<td>职业:</td>
<td>教师</td></tr>
<tr>
<td>国籍:</td>
<td>中国</td>
<td>公司:</td>
<td>NEUSOFT</td>
</tr>
</table>
- hidden
hidden 属性规定对元素进行隐藏,隐藏的元素不会被显示。
hidden属性在html5中,只要存在,就是隐藏效果,而不论值为多少要显示元素,要删除hidden属性,而不是设置为false。 - spellcheck
spellcheck 属性可对一下文本进行拼写检查:
1.类型为 text 的 input 元素中的值(非密码)
2.textarea 元素中的值
3.可编辑元素中的值
代码存放在:03-01-06-spellcheck.html
<h5>这是可编辑的段落,请检查文字是否有错误。<h/5>
<p contenteditable="true" spellcheck="true">This paragraph is editable ,
Please check whether there is an error te xt.
</p>
四、其他标签
4.1、mark 有标记文本标签(突出的黄色标记)。
我要标注<mark>我中大奖了</mark> 太高兴了,快兑奖去...
4.2 、video 元素定义视频,比如电影片段或其他视频流。
<video width="1280" height="720" controls src="video.mp4">
您的浏览器不支持 video 标签。
</video>
- 需要注意的是,video标签只支持Ogg、MPEG4、WebM这三种视频媒体格式.
- 但是,video标签对这三种视频格式是有具体要求的:
Ogg = 带有 Theora 视频编码 + Vorbis 音频编码
MPEG4 = 带有 H.264 视频编码 + AAC 音频编码
WebM = 带有 VP8 视频编码 + Vorbis 音频编码
4.3 、audio 元素定义音频,比如音乐或其他音频流
<audio src=“audio.mp3“ controls>
您的浏览器不支持 audio 标签。
</audio>
- 需要注意的是,audio标签只支持wav、mp3、ogg这三种音频媒体格式
4.4 、embed 元素用来插入各种多媒体格式,可以是midi,WAV,aiff,au,MP3等
<embed src="embed.swf" width="800px" height="600px" />
4.5、time 元素表示日期或时间,也可以同时表示两者,是一种微格式定义
- 首先解释一下微格式的定义,所谓的微格式,它是一种利用HTML的class属性来对网页添加附加信息的方法。附加信息比如新闻事件的发生日期和时间、个人电话号码、企业邮箱等。
- time元素无歧义的、明确的对机器的日期和时间进行编码,并且更易读
- time元素代表24小时中的某个时刻或某个日期,表示时刻时允许带时差,它可以定义很多种格式,如:
<time datetime="2010-11-13">2010年11月13日</time>
<time datetime="2010-11-13">11月13日</time>
<time datetime="2010-11-13">我的生日</time>
<time datetime="2010-11-13T20:00">我生日的晚上8点</time>
<time datetime="2010-11-13T20:00z">我生日的晚上8点</time>
<time datetime="2010-11-13T20:00+09:00">我生日的晚上8点的美国时间</time>
- 编码时机器读到的部分是datetime属性的值,而元素的开始标记与结束标记之间的内容是显示在网页上的;
- time有一个pubdate属性,pubdate属性是可选的、布尔值属性。它可以用到time元素上,表示文章或整个网页的发布日期。比如:
<time datetime="2013-11-29" pubdate>11月29日</time>
- time元素不能代表是发布日期,只有增加了pubdate属性才代表是发布的日期。
五、删除原HTML标签
- 全部代码参见:
- 删除的纯表现的元素:
- basefont,big,center,font, s,strike,tt,u;
- 删除的对可用性产生负面影响的框架类元素:
- frame,frameset,noframes;
- 删除的产生混淆的元素:
- acronym ,applet,isindex,dir。
- 删除的纯表现的元素:
六、重新定义的标签
6.1 b、i 标签
6.2 small、strong标签
- 实际运用时没有区别。在HTML4.01中,small元素显示为更小的文本。在HTML5中,small元素定义旁注信息,并显示为更小的文本。免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求。
- strong 定义重要的文本。请见课程代码案例03-01-10-strong.html
<dl>
<dt><strong>套餐 99元</strong></dt>
<dd>牛排套餐 <small>含牛排350克,西兰花100克</small></dd>
<dt><strong>双人餐 199元</strong></dt>
<dd>叉烧双拼 <small>港式烧鹅,港式叉烧各300克,油菜300克</small></dd>
</dl>
<hr>
<span>某宝客服</span > <small> 售后服务 | 联系我们 | 版权信息 | 声明 | 投诉</small>
6.3 dt标题、dd内容、hr主题结束
- dl、dt、dd是一组合标签,为常用标题+列表型标签。
<dt>标题</dt>
<dd>内容... ...</dd>
<dt>gentleman</dt>
<dd>绅士,风度翩翩,有修养的男士... ...</dd>
- hr主题结束
<section>内容区域</ section >
<hr>
<footer>关于我们 | 售后服务 | 地址电话</footer>
6.4 iframe框架标签增加了安全性属性sendbox
- 通过如上所示的方法设置iframe元素的sendbox属性后,框架内显示的内容被添加如下限制:
- 页面中的插件被禁止
- 页面中的表单禁止被提交
- 页面中的JavaScript代码禁止被运行
<iframe sendbox src=“xxx.html”></iframe>
或
<iframe sendbox=“” src=“xxx.html”></iframe>
本章重点总结
掌握header、nav、article、aside、footer标签的使用的方法。
【HTML&CSS教学】-第2章 HTML5标签,详细教学就到这里, 后续还有HTML5表单技术~CSS基础等。。。的学习博客给到大家!别忘了一键三连,谢谢支持!