HTML5 学习笔记（一）

最新推荐文章于 2022-03-08 18:49:59 发布

想自学翻身的咸鱼

最新推荐文章于 2022-03-08 18:49:59 发布

阅读量182

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_38405966/article/details/80215327

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.HTML 5

在编写 HTML5 文档时，<!doctype> 声明必须位于 HTML5 文档中的第一行:

<!DOCTYPE html>

字符编码 (字符集) 声明也被简化:

HTML5 中的默认字符编码是 UTF-8。

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。

2.HTML5 新特性

（1）HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

（2）HTML5 中引入了很多的标记元素，根据内容类型的不同，这些元素被分成了7大类：

元数据：通常出现在页面的head中，设置页面其他部分的表现和行为。

元素：<base>，<link>，<meta>，<noscript>，<script>，<style>，<title>。

内联：在文档中添加其他类型的内容。

元素：<audio>，<video>，<canvas>，<iframe>，<img>，<math>，<object>，<svg>。

交互：与用户交互的内容。

元素：<a> , <audio> , <video> , <button> , <details> , <embed> , <iframe> , <img> , <input> , <label> , <object> , <select> , <textarea>。

标题：定义段落标题。

元素：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，<hgroup>。

短语：文本和文本标记元素。

元素：<img>，<span>，<strong>，<label>，<br />，<small>，<sub>等。

流内容：包含将包含在文档正常流程中的大多数HTML5元素。

区段内容：定义标题，内容，导航和页脚的范围。

元素：<article>，<aside>，<nav>，<section>

3.HTML5 中的页面结构

通用的 HTML5 页面结构如下图所示：

4.<header> 标签

在 HTML5 中，我们使用简单的 <header> 标签。

<header> 标签定义了文档的头部区域。

<header> 元素适合在 <body> 标签内部使用。

注意：<header> 与<head> 标签完全不同。

例子：

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <header>
        <h1>标题 1</h1>
        <h3>标题 3</h3>
      </header>
   </body>
</html>

5.<footer> 标签

在 HTML5 中，<footer> 标签定义文档或者文档的一部分区域的页脚。

在典型情况下，<footer> 元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等.

文档的页脚：

<footer>
  <p>Posted by: Xiao Lu</p>
</footer>

6.<nav> 标签

在 HTML5 中，<nav> 标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到 <nav> 元素,<nav> 元素只是作为标注一个导航链接的区域。

一个导航链接实例：

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

运行显示结果如下图：

7.<article> 标签

在 HTML5 中，<article> 标签定义独立的内容。

<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。

<article> 的潜在来源：

论坛帖子
博客文章
新闻故事

<article> 
   <h1>文章标题</h1> 
   <p>文章元素的内容</p>
</article>

8.<section> 标签

在 HTML5 中，<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

实例

文档的某个区域，解释了什么是 W3C ：

<section>
  <h1>W3C</h1>
  <p>World Wide Web Consortium (W3C) 是万维网联盟...</p>
</section>

9.<aside> 标签

在 HTML5 中，<aside> 标签定义 <article> 标签外的内容。

aside 的内容应该与附近的内容相关。<aside> 的内容可用作文章的侧栏。

实例

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

10.<audio> 元素

<audio> 标签定义音频,<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

如需在 HTML5 中播放音频，需要使用以下代码：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
浏览器不支持 audio 元素。
</audio>

运行显示结果如下图：

可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

<audio> 元素中的常见的属性：

(1)src 属性

规定音频文件的 URL。

(2)controls 属性:提供添加播放、暂停和音量控件。

如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。

(3)autoplay 属性

如果出现该属性，则音频在就绪后马上播放。

(4)loop 属性

如果出现该属性，则每当音频结束时重新开始播放。

<article> 
   <h1>文章标题</h1> 
   <p>文章元素的内容</p>
</article>

想自学翻身的咸鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 学习笔记（一）

1.HTML 5在编写 HTML5 文档时，&lt;!doctype&gt; 声明必须位于 HTML5 文档中的第一行:&lt;!DOCTYPE html&gt;字符编码 (字符集) 声明也被简化:&lt;meta charset="UTF-8"&gt;HTML5 中的默认字符编码是 UTF-8。对于中文网页需要使用 &lt;meta charset="utf-8"&gt; 声明编码，否则会出现乱...
复制链接

扫一扫