【HTML&CSS教学】-第2章 HTML5标签
第2章 HTML5 标签
后面满满都是干货，想学习前端技术的小伙伴强烈建议收藏！
文章目录
- 第2章 HTML5 标签
- 一、HTML5介绍
-
- 介绍HTML5发展历程
- 二、结构标签
-
- 2.1、(块状元素) 有意义的div
- 2.2、页面布局
- 2.3、标题组h标签hgroup（案例03-01-02-hgroup.html）
- 2.4、figure
- 2.5、figcaption
- 三、新的全局属性标签
-
- 全部代码参见：案例03-01-05-global.html
- 四、其他标签
-
- 4.1、mark 有标记文本标签（突出的黄色标记）。
- 4.2 、video 元素定义视频，比如电影片段或其他视频流。
- 4.3 、audio 元素定义音频，比如音乐或其他音频流
- 4.4 、embed 元素用来插入各种多媒体格式，可以是midi，WAV，aiff，au，MP3等
- 4.5、time 元素表示日期或时间，也可以同时表示两者，是一种微格式定义
- 五、删除原HTML标签
- 六、重新定义的标签
-
- 6.1 b、i 标签
- 6.2 small、strong标签
- 6.3 dt标题、dd内容、hr主题结束
- 6.4 iframe框架标签增加了安全性属性sendbox
- 本章重点总结
一、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 有标记文本标签（突出的黄色标记）。
我要标注我中大奖了 太高兴了，快兑奖去...
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基础等。。。的学习博客给到大家！别忘了一键三连，谢谢支持！
