2020年2月15号--HTML5基础学习笔记（四）-CSDN博客

2020年2月15号–HTML5基础学习笔记（四）

HTML5简介

HTML5 的设计目的是为了在移动设备上支持多媒体。
HTML5 还引进了新的功能，可以真正改变用户与文档的交互方式。

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

<!DOCTYPE html>

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

<meta charset="UTF-8">

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

HTML5内容模型

HTML5 中引入了很多的标记元素，根据内容类型的不同，这些元素被分成了7大类：
内联（Embedded）
流（Flow）：包含在文档正常流中的大多数HTML5元素。
标题（Heading)
交互（Interactive）
元数据（Metadata）
短语（Phrasing）
区段（Sectioning)：定义标题，内容，导航和页脚的范围。
语义元素就是清楚的描述了元素所代表的内容，例如<form>
,<table> ,流元素：是规定这些元素可以成为父元素；短语元素：和流元素呼应，规定这些元素可以成为子元素；

内容类型
元数据（Metadata）： 通常出现在页面的head中，向浏览器提供信息和指示。
元素：<base>，<link>，<meta>，<noscript>，<script>，<style>，<title>。
内联（Embedded）： 在文档中添加其他类型的内容。
元素：<audio>，<video>，<canvas>，<iframe>，<img>，<math>，<object>，<svg>。
交互（Interactive）： 与用户交互的内容。
元素：<a> , <audio> , <video> , <button> , <details> , <embed> , <iframe> , <img> , <input> , <label> , <object> , <select> , <textarea>。
标题（Heading）： 定义段落标题。
元素：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，<hgroup>。
短语（Phrasing）： 文本和文本标记元素。
元素：<img>，<span>，<strong>，<label>，<br />，<small>，<sub>等。

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

`<header>` 标签

<header> 标签定义了文档的头部区域。
<header> 元素适合在 <body> 标签内部使用。
实例：

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

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

`<footer>` 标签

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

<footer>
  <p>Posted by: W3Cschool</p>
</footer>

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

`<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>

在这里插入图片描述

`<article>` 标签

在 HTML5 中，<article> 标签定义独立的内容。
<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
<article> 的潜在来源：
论坛帖子
博客文章
新闻故事
评论

`<section>` 标签

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

`<aside>` 标签

在 HTML5 中，<aside> 标签定义 <article> 标签外的内容。
提示：<aside> 的内容可用作文章的侧栏。

`<audio>` 元素

<audio> 标签定义声音，比如音乐或其他音频流。
<audio> 元素支持的 3 种文件格式：MP3、Wav、Ogg。

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

在这里插入图片描述
<source> 标签用来定义多种媒体资源 ，control 属性供添加播放、暂停和音量控件 。
<audio> 元素允许使用多个 <source> 元素。<source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。
可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

`<audio>` 的属性

<audio> 元素中的常见的属性有：
src 属性： 规定音频文件的 URL。
controls 属性： 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
autoplay 属性： 如果出现该属性，则音频在就绪后马上播放。
loop 属性： 如果出现该属性，则每当音频结束时重新开始播放。

`<video>` 元素

<video> 标签定义视频，比如电影片段或其他视频流。
目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>

在这里插入图片描述
<video> 元素与 <audio> 元素一样，支持多个 <source> 元素，<source> 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。
<video> 元素也可以在 <video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

`<video>` 的属性

<video> 元素提供了播放、暂停和音量控件来控制视频。
<video> 元素和 <audio> 元素一样，都有 src，controls，autoplay 和 loop 属性。
同时，<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸。

`<progress>` 标签

<progress> 标签定义运行中的任务进度（进程）。
<progress> 标签的属性有：
max： 规定需要完成的值。
value： 规定进程的当前值。
实例：正在进行中的下载，下载进度的当前值为 30。

<progress value="30" max="100"></progress>

在这里插入图片描述

HTML5 表单1

HTML5 表单
HTML5 为 Web 表单创建带来了很多新特性，添加了多个新属性和输入类型，这些新特性提供了更好的输入控制和验证。
HTML5 中的表单创建方式与 HTML 一样
HTML5 表单新属性
placeholder 属性
HTML5 添加了 placeholder 的新属性。在 <input> 和 <textarea> 元素上，此属性提供一种提示，描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
实例

<form>
   <input type="text" name="fname" placeholder="First name">
   <input type="text" name="lname" placeholder="Last name">
   <input type="submit" value="提交">
</form>

在这里插入图片描述
autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。
实例
让 “First name” input 输入域在页面载入时自动聚焦：

<form>
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

在这里插入图片描述
3. 带必填字段的表单
required 属性规定必须在提交之前填写输入域（不能为空）。
实例
不能为空的 input 字段：

<form autocomplete="off">
  Username: <input type="text" name="username" required>
  <input type="submit">
</form>

在这里插入图片描述
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

HTML5表单2

创建搜索框
新的搜索输入类型可用于创建搜索框：

<input type="search" name="searchitem">

在这里插入图片描述
2. 搜索选项列表
<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
实例：
<input> 元素使用 <datalist> 预定义值:

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

在这里插入图片描述
3. 创建更多的输入类型
HTML5 拥有多个新的输入类型，包括 email，tel，url，date，time 等。
下面是一个例子：

<form>
  <input type="email" name="email" placeholder="example@example.com">
  <br>
  <input type="tel" name="usrtel" placeholder="666.666.6666">
  <br>
  <input type="url" name="homepage" placeholder="example.com">
</form>