【HTML&CSS教学】-第2章 HTML5标签

最新推荐文章于 2024-08-27 14:09:09 发布

BLACK_113

最新推荐文章于 2024-08-27 14:09:09 发布

阅读量695

点赞数 11

分类专栏： HTML5&CSS3 文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_43182477/article/details/124026666

版权

HTML5&CSS3 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

第2章 HTML5 标签

后面满满都是干货，想学习前端技术的小伙伴强烈建议收藏！

在这里插入图片描述

文章目录

第2章 HTML5 标签
一、HTML5介绍
- 介绍HTML5发展历程
二、结构标签
三、新的全局属性标签
- 全部代码参见：案例03-01-05-global.html
四、其他标签
五、删除原HTML标签
六、重新定义的标签
本章重点总结

一、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基础等。。。的学习博客给到大家！别忘了一键三连，谢谢支持！

BLACK_113

关注

11
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
6
评论
【HTML&CSS教学】-第2章 HTML5标签

后面满满都是干货，想学习前端技术的小伙伴强烈建议收藏！
复制链接

扫一扫

专栏目录