av元素是什么？

Nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面或者当前页的其他部分。

Nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可以链接到其他页面或者当前页面的其他部分，并不是所有的链接组都要被放在Nav元素里面，只需要把最主要的、基本的、重要的放在Nav元素里面即可。

比如说页脚底部如果有个版权声明，不建议使用Nav元素，而建议使用footer元素是最合适的。一个页面中可用多个Nav元素作为整体或者不同部分的导航

示例代码：

在上面这段代码中，通过在Nav元素内部嵌套无序列表ul来搭建导航结构。通常一个HTML页面中可以包含多个Nav元素，作为页面整体或不同部分的导航。

具体来说Nav元素可以用的场景如下：

1.传统导航条：目前主流网站上都有不同层级的导航条，其作用是跳转到网站的其他主页面。

2.侧边栏导航：目前主流博客网站及电商网站都有侧边栏导航，目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。

3.页内导航：它的作用是在本页面几个主要的组成部分之间进行跳转。

4.翻页操作：翻页操作切换的是网页的内容部分，可以通过单击“上一页”或“下一页”切换，也可以通过单击实际的页数跳转到某一页。

除此Nav元素也可以用于其他重要的、基本的导航链接组中。并不是所有的链接组都要被放进Nav元素，只需要将主要的和基本的链接放进Nav元素即可。

.标签

1.1meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看 charset 指定网页的字符集 name 指定的数据的名称 content 指定的数据的内容

keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

description 用于指定网站的描述

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

将页面重定向到另一个网站

1.2title标签

title标签的内容会作为搜索结果的超链接上的文字显示

<title>Document</title>

1.3标题

• h1 ~ h6 一共有六级标题
• 从h1~h6重要性递减，h1最重要，h6最不重要
• h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
• 标题元素是块元素
• <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
• 
  
• hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
• <hgroup>
  <h1>回乡偶书二首</h1>
  <h2>其一</h2>
  </hgroup>
• 其他标签
• p标签表示页面中的一个段落
• <p>在p标签中的内容就表示一个段落</p>
• em标签用于表示语音语调的一个加重
• <p>今天天气<em>真</em>不错！</p>
• strong表示强调，重要内容！
• <p>你今天必须要<strong>完成作业</strong>！</p>
• blockquote 表示一个长引用
• <blockquote>
  这句话我是从来没有说过的！
  </blockquote>
• q表示一个短引用
• 子曰<q>学而时习之，乐呵乐呵！</q>
• br标签表示页面中的换行
• <br>

1.4布局标签

header 表示网页的头部 main 表示网页的主体部分(一个页面中只会有一个main) footer 表示网页的底部 nav 表示网页中的导航 aside 和主体相关的其他内容（侧边栏） article 表示一个独立的文章 section 表示一个独立的区块，上边的标签都不能表示时使用section

div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素

span 行内元素，没有任何的语义，一般用于在网页中选中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分类

1.1.1.1有序列表

使用ol标签来创建无序列表，使用li表示列表项

<ul>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ul>

1.1.1.2 无序列表

使用ul标签来创建无序列表，使用li表示列表项

<ol>
       <li>结构</li>
       <li>表现</li>
       <li>行为</li>
   </ol>

1.1.1.3定义列表

使用dl标签来创建一个定义列表， 使用dt来表示定义的内容，使用dd来对内容进行解释说明

<dl>
       <dt>结构</dt>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
       <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
   </dl>

1.1.1.4列表之间可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超链接

1.6.1 作用

超链接可以让我们从一个页面跳转到其他页面， 或者是当前页面的其他的位置

1.6.2 定义

使用 a 标签来定义超链接

<a href="https://www.baidu.com">超链接</a>

1.6.3 属性

1.6.3.1属性1：href

指定跳转的目标路径

值可以是一个外部网站的地址

也可以写一个内部页面的地址

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

1.6.3.2 属性2：target

用来指定超链接打开的位置

_self 默认值 在当前页面中打开超链接

_blank 在一个新的要么中打开超链接

<a href="07.列表.html" target="_blank">超链接</a>

1.6.4其他

将#作为超链接的路径的展位符使用

javascript：; 来作为href的属性，此时点击这个超链接什么也不会发生

将超链接的href属性设置为#，这样点击超链接以后 页面不会发生跳转，而是转到当前页面的顶部的位置

跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三个自然段</a>
   <br><br>
<p>
  内容多一点
</p>
<a href="#">这是一个新的超链接</a>
   <br><br>
<a href="javascript：;">这是一个新的超链接</a>
   <br><br>
<a id="bottom" href="#">回到顶部</a>

1.7图片标签

img标签来引入外部图片，img标签是一个自结束标签

属性：src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示

<img src="./img/1.gif" alt="松鼠">

1.8内联框架

用于向当前页面中引入一个其他页面

• src 指定要引入的网页的路径
• frameborder 指定内联框架的边框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音视频标签

1.8.1音频

audio 标签用来向页面中引入一个外部的音频文件的

1.8.1.1 属性

• controls 是否允许用户控制播放
• autoplay 音频文件是否自动播放
• 如果设置了autoplay 则音乐在打开页面时会自动播放
• loop 音乐是否循环播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

<audio controls>
       <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2视频

与 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

• 在table中使用tr表示表格中的一行，有几个tr就有几行
• 在tr中使用td表示一个单元格，有几个td就有几个单元格
• rowspan 纵向的合并单元格
• colspan 横向的合并单元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

长表格

• 可以将一个表格分成三个部分：
• 头部 thead
• 主体 tbody
• 底部 tfoot
• th 表示头部的单元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合计</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合计</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格样式

• border-spacing: 指定边框之间的距离

border-spacing: 0px;

• border-collapse: collapse; 设置边框的合并

border-collapse: collapse;

• 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中tr不是table的子元素

3.表单（form）

• 使用form标签来创建一个表单
• action 表单要提交的服务器的地址
• 数据要提交到服务器中，必须要为元素指定一个name属性值

<input type="text" name="username">

• 单选按钮
• 像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
• checked 可以将单选按钮设置为默认选中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

• 多选框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

• 下拉列表

<select name="haha">
          <option value="i">选项一</option>
          <option selected value="ii">选项二</option>
          <option value="iii">选项三</option>
      </select>

• 提交按钮

<input type="submit" value="注册">

属性

• autocomplete="off" 关闭自动补全
• readonly 将表单项设置为只读，数据会提交
• disabled 将表单项设置为禁用，数据不会提交
• autofocus 设置表单项自动获取焦点

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按钮 -->
      <input type="reset">
      <!-- 普通的按钮 -->
      <input type="button" value="按钮">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按钮</button>
  </form>

4.注释

<!--
我是注释中的注释 注释不能嵌套
-->

5.属性

• 属性，在标签中（开始标签或自结束标签）还可以设置属性
• 属性是一个名值对（x=y）
• 属性用来设置标签中的内容如何显示
• 属性和标签名或其他属性应该使用空格隔开
• 属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来

6.文档声明

<!doctype html>

TML5是一种标记语言，用于创建和呈现网页内容。与早期的HTML版本相比，HTML5具有许多新的功能和改进，可以更好地支持动态内容、多媒体、图形和互动性。在本文中，我们将讨论如何使用HTML5制作网页，以及HTML5与旧版本HTML的区别。

首先，让我们了解一下HTML5的一些主要功能和优势。HTML5具有以下特点：

1. 语义化标签：HTML5引入了一些新的语义化标签，例如、、、等。这些标签的使用可以增强网页的结构并提高搜索引擎的可读性。

2. 多媒体支持：HTML5内置了对多媒体的支持，例如和标签，可以在网页上直接播放视频和音频文件，而无需使用第三方插件。

3. Canvas绘图：HTML5引入了元素，允许开发者通过JavaScript在网页上绘制图形和动画。这对于创建复杂的图表、可视化效果和游戏非常有用。

4. 本地存储：HTML5提供了几种本地存储方法，例如localStorage和sessionStorage。这些方法可以在客户端存储数据，使得网页可以更快地加载和响应用户的操作。

5. 表单增强：HTML5为表单提供了许多新的输入类型和属性，例如日期、时间、颜色、URL等。这些功能减少了对JavaScript的依赖，在客户端验证和收集用户输入数据时更加方便。

现在，让我们看看如何使用HTML5制作网页的基本步骤。

步骤一：创建HTML文档结构HTML5的网页结构包括、和等标签。在标签中，可以设置网页的语言属性（）和字符编码（）。在标签中，可以添加网页的标题（）和其他元数据（标签）。在标签中，可以编写网页的内容。

步骤二：使用语义化标签为了增强网页的结构和可读性，应尽量使用语义化标签。例如，标签用于网页的标题和导航栏，标签用于网页的导航链接，和标签用于划分网页的内容部分。

步骤三：插入多媒体使用、和

等标签插入多媒体内容。例如，使用标签可以插入视频文件，并设置其属性（例如src、width、height）来指定视频的来源和尺寸。

步骤四：绘制图形和动画使用标签和JavaScript绘制图形和动画。通过在标签中指定宽度和高度，并调用JavaScript函数绘制图形，可以在网页上显示自定义的图形和动画效果。

步骤五：使用本地存储使用localStorage和sessionStorage等方法，在客户端存储数据。通过调用JavaScript的API，可以将数据存储在浏览器中，并在需要时读取和更新数据。

步骤六：优化网页性能使用HTML5的新功能来优化网页性能。例如，使用新的表单输入类型和属性可以在客户端验证和收集用户输入数据，减少对服务器的请求和响应时间。

现在，让我们来了解一下HTML5和HTML的区别。

HTML5是HTML的第五个版本，是对以前的HTML版本进行的改进和扩展。与HTML4相比，HTML5具有许多新的功能和语义化标签，使开发者能够创建更现代、丰富和交互性的网页。

以下是HTML5和HTML的一些区别：

1. 标签语义化：HTML5引入了许多新的语义化标签，如、、、等。这些标签增强了网页的结构和可读性，有助于搜索引擎优化和可访问性。

2. 多媒体支持：HTML5内置了对多媒体的支持，如和标签，可以在网页上直接播放视频和音频文件。而在HTML4中，需要使用第三方插件（如Flash）来实现相同的功能。

3. Canvas绘图：HTML5引入了元素，允许在网页上通过JavaScript绘制图形和动画。而在HTML4中，图形和动画的创建通常依赖于第三方插件或JavaScript库。

4. 本地存储：HTML5提供了localStorage和sessionStorage等方法，在客户端存储数据。这使得网页可以更快地加载和响应用户的操作。相比之下，HTML4需要通过服务器来存储和获取数据。

5. 表单增强：HTML5为表单提供了新的输入类型和属性，如日期、时间、颜色、URL等。这减少了对JavaScript和服务器的依赖，提高了用户体验。

总结起来，HTML5相对于HTML4具有更多的功能和改进，使得开发者可以创建更现代、丰富和互动性的网页。它提供了语义化标签、多媒体支持、Canvas绘图、本地存储和表单增强等功能，为网页开发提供了更多的选择和可能性。