整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

Web开发学习笔记（10）-HTML5（五）新属性

TML5 中 input 标签新增了一个 form 属性，可将表单元素绑定到指定的 form 标签上，这样就可以灵活进行布局，同时一个表单元素可以从属于多个表单，这就让表单和表单元素的组合变得更加灵活。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form id="myForm1" action="#" method="GET"></form>
    <form id="myForm2" action="#" method="POST"></form>
    提交到 myForm1：<input type="text" form="myForm1" name="myForm1" />
    <input type="submit" value="提交" form="myForm1" />
    提交到 myForm2：<input type="text" form="myForm2" name="myForm2" />
    <input type="submit" value="提交" form="myForm2" />
  </body>
</html>

显示为，

内容根据不同的表单所属的id进行提交。

打开一个页面，当某个文本框需要获得光标焦点时，可以使用 autofocus 属性来实现。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      <input type="text" autofocus /> <input type="submit" value="搜索" />
    </form>
  </body>
</html>

显示为，

当点击text框，可以获得焦点。

autocomplete 属性是用来规定表单是否应该启用自动完成功能，即“自动补全”。

自动完成功能就是当用户输入一次数据过后，再次输入相同的数据时可以自动补全内容。

autocomplete 属性包括两个属性值：on、off。

其语法格式为：

<form autocomplete="on"></form>

on 为默认值，意思是启用自动完成功能。

<form autocomplete="off"></form>

off 为禁用自动完成功能。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form autocomplete="on">
      您最喜欢的体育运动：
        <input type="text" list="selectList"/>
        <datalist id="selectList">
            <option>Football</option>
            <option>Basketball</option>
            <option>Baseball</option>
            <option>Running</option>
            <option>Boxing</option>
        </datalist>
      <input type="submit" />
    </form>
  </body>
</html>

显示为，

HTML5 中添加的新标签还有 datalist，该标签可实现提供数据列表的功能，而 list 属性则是为了将该标签和指定文本框进行关联所设计的。

语法格式为：

<input list="datalist-id" />

例子与上面autocomplete相同，已经用过了。

placeholder 属性描述输入字段预期值的提示信息，提示用户设置的输入值。

其语法格式为：

<input placeholder="text" />


灰色字体是提示信息，placeholder 属性适用于 input 中的 text、search、url、tel、email 和 password 类型。

HTML5 新增了 min，max 和 step 属性用于为数字或日期输入类型的 input 提供数值限制，可以使用该属性的标签有 number、range、Date pickers。

min 属性规定 input 元素的最小值。其语法格式为：

<input type="number" min="number" /> <input type="date" min="date" />

number 为数字值，date 为日期。

max 属性规定 input 元素的最大值。其语法格式为：

<input type="number" max="number" /> <input type="date" max="date" />

step 属性规定 input 元素数值之间的步长，也就是数字间隔。其语法格式为：

<input type="number" step="number" />

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      输入：<input type="number" min="-1000" max="1000" step="9" /><input
        type="submit"
        value="提交"
      />
    </form>
  </body>
</html>

显示为，

点击上下箭头，数字以9为step增加或减少。

multiple 属性规定用户一次可以输入多个值。

multiple 属性适用于文件上传功能，也可在 email 类型中使用。

其语法格式为：

<input multiple />

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      上传：<input type="file" multiple /><input type="submit" value="上传" />
    </form>
  </body>
</html>

multiple 属性，通常用在 file 和 email 类型中使用来绑定多个值。

使用 HTML5 实现表单验证的几个前提条件：

  • form 标签不能有 novalidate 属性。
  • input 标签一定要有 required 和 pattern 属性。
  • 必须要有 form 标签和提交按钮。

HTML表单验证：

placeholder 属性用于为文本框提供提示说明功能，提示说明该文本框希望用户输入何种数据。

当用光标焦点聚焦到该文本框时，提示说明文字消失。不输入任何信息，提示说明文字不会被当做用户输入数据提交。

<form>
  <input placeholder="提示信息" />
</form>

required 属性是用来限定文本框内容不能为空的。当文本框内容为空时，无法提交表单。该属性适用于 text、password 等大多数文本框。

<form>
  <input required />
</form>

pattern 属性是对用户输入信息进行正则表达式校验。该属性适用于大多数的 input 类型。例如 text、pass、search 等。

<input type="text" pattern="正则表达式" />

pattern 属性常用的正则表达式：

Email 地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?

InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

国内电话号码（0511-4405222、021-87888822）：\d{3}-\d{8}|\d{4}-\d{7}

身份证号（15 位、18 位数字）：^\d{15}|\d{18}$

帐号是否合法（字母开头，允许 5-16 字节，允许字母数字下划线）：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

密码（以字母开头，长度在 6~18 之间，只能包含字母、数字和下划线）：^[a-zA-Z]\w{5,17}$

强密码（必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间）：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

日期格式：^\d{4}-\d{1,2}-\d{1,2} 一年的 12 个月（01～09 和 1～12）：^(0?[1-9]|1[0-2])$

一个月的 31 天（01～09 和 1～31）：^((0?[1-9])|((1|2)[0-9])|30|31)$

例子，假设一个用户登录页面，用户名必填，要求格式为字母数字和下划线组合，长度在 6 到 20 之间。密码为数字，长度也是 6 到 20 之间：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      用户名：<input
        type="text"
        id="userName"
        placeholder="请输入用户名"
        required
        pattern="\w{6,20}"
      />
      密码：<input
        type="password"
        id="password"
        placeholder="请输入密码"
        required
        pattern="\d{6,20}"
      />
      <button>登录</button>
    </form>
  </body>
</html>

显示为，

novalidate 属性是用来取消表单的自动验证功能的，例如前面已经讲过的 email 元素，当用户输入数据格式不符合 email 的格式要求时，系统会自动提示格式不正确，这个功能就是自动验证功能。

若用户不希望系统提示错误信息而是由自己写代码来实现验证提示功能的话，可以使用 novalidate 属性关闭该功能。

例如，取消 email 类型的内置表单验证。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form novalidate>
      email：<input type="email" name="email" /><input
        type="submit"
        value="提交"
      /><br />
    </form>
  </body>
</html>

表单验证的四个相关属性，分别是

  • placeholder 属性：用于为文本框提供提示说明。
  • pattern 属性：用来对用户输入信息进行正则表达式校验的。
  • required 属性：用来限定文本框内容不能为空的。
  • novalidate 属性：用来取消表单的自动验证功能的。

HTML5 新增了一个神奇的属性，用它可以存储一些数据，进行定义和数据存取。

我们以 data- 开头来表示自定义数据属性。

例子，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        li[data-type="one"]{
            background:#8bc34a;
        }
        li[data-type="two"]{
            background:#5089c6;
        }
    </style>
</head>
<body>
    <ul>
        <li data-type="one"></li>
        <li data-type="two"></li>
    </ul>
</body>
</html>

除了使用自定义数据属性设置样式外，我们还可以使用它来创建元素的提示信息。

例子，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        span.tooptip{
            cursor:pointer;
        }
        .tooltip-info{
            position:absolute;
            top: -9999px;
        }
        span.tooltip::before{
            content:attr(data-tooltip);
            position:absolute;
            display:none;
            color:white;
            background:rgba(177, 166, 155, 0.55);
        }
        span:hover::before{
            display:inline-block;
        }
    </style>
</head>
<body>
    <p>
        欢迎来到王椰浪的学习笔记
        <span class="tooltip" data-tooltip="这是一个自定义属性">
            <span class="tooltip-info">
                这是一个自定义属性
            </span>
            王耶浪笔记本
        </span>
    </p>
</body>
</html>


鼠标未放在有自定义属性的文字上


鼠标放在有自定义属性的文字上

  • 文本标记语言(英文HyperText Markup Language,简称：HTML)是一种用于创建网页的标准标记语言!
  • 对于中文网页需要使用<meta charset='utf-8'>声明编码，否则会出现乱码。有些浏览器（如360浏览器）会设置GBK为默认编码，则你需要设置为<meta charset='gbk'>
    例子模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文网(html.cn)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

解析

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

什么是HTML？

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言：HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>

HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p>

HTML 头部元素

头部元素包含关于文档的概要信息，也称为元信息（meta-information）。Meta 意为“关于某方面的信息”。
可以这么说，元数据（meta-data）是关于数据的信息，而元信息是关于信息的信息。

HTML <HEAD> 元素

<head> 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <TITLE> 元素

<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素：
1.定义了浏览器工具栏的标题
2.当网页添加到收藏夹时，显示在收藏夹中的标题
3.显示在搜索引擎结果页面的标题

HTML <BASE> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.html.cn/images/" target="_blank">
</head>

HTML <LINK> 元素

<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <STYLE> 元素

<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <META> 元素

meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域

<META> 标签- 使用实例

  • 为搜索引擎定义关键词:
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  • 为网页定义描述内容:
    <meta name="description" content="免费 Web & 编程 教程">
  • 定义网页作者:
    <meta name="author" content="HTML">
  • 每30秒钟刷新当前页面:
    <meta http-equiv="refresh" content="30">

HTML <SCRIPT> 元素

<script>标签用于加载脚本文件，如： JavaScript。
<script> 元素在以后的章节中会详细描述。

HTML head 元素

标签

描述

<head>

定义了文档的信息

<title>

定义了文档的标题

<base>

定义了页面链接标签的默认链接地址

<link>

定义了一个文档和外部资源之间的关系

<meta>

定义了HTML文档中的元数据

<script>

定义了客户端的脚本文件

<style>

定义了HTML文档的样式文件

HTML 元素

  • HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。例：

开始标签

元素内容

结束标签

<p>

这是一个段落

</p>

<a href="default.html">

这是一个链接

</a>

<br>

换行


  • 说明：HTML 文档是由 HTML 元素定义的
  • 注：开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性
  • 注释: 您将在本教程的下一章中学习更多有关属性的内容。
  • 嵌套的 HTML 元素
  • HTML 文档由嵌套的 HTML 元素构成。大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
  • 空元素
  • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
  • <br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
  • 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
  • 在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
  • 即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

注释标签<!--...-->

HTML注释标签<!--...-->用来在源文档中插入注释。注释不会在浏览器中显示。可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用

标签定义及使用说明

  • <!--...--> 注释标签用来在源文档中插入注释。注释不会在浏览器中显示。
  • 您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。
  • 您也可以在注释内容存储针对程序所定制的信息。在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。一个好的习惯是把注释或样式元素放入注释文本中，这样就可避免不支持脚本或样式的老浏览器把它们显示为纯文本。
<script type="text/javascript">
<!--
function displayMsg()
{
  alert("Hello World!")
}
//-->
</script>
  • 注释：命令行最后的两个正斜杠（//）是 JavaScript 注释符号。这确保了 JavaScript 不会执行 –> 标签。
  • 除了在源文档中有非常明显的作用外，许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档，从传统的 HTML/XHTML 注释中找到特定的字符序列，然后再根据嵌在注释中的命令采取相应的动作。这些动作可能是简单地包括其他文件中的文本（即所谓的服务器端包含，server-inside include），也可能是复杂地执行其他命令去动态生成文档的内容。

HTML 段落与文字

标题

  • 在 HTML 文档中，标题很重要。标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。其中<h1> 定义最大的标题，<h6> 定义最小的标题
  • HTML中的标题标签通过<h1>-<h6>来设置，越往下标题越小

段落

  • 在HTML中段落是通过p标签来定义的，它可以将HTML文档分割为若干段落部分。因为p标签是块级元素，所以浏览器会自动地在段落的前后添加空行。
  • 注意： 因为p标签是块级元素，所以浏览器会自动地在段落的前后添加空行
  • 我们可以通过<br/>标签来对段落进行换行
  • 如果希望在不产生一个新段落的情况下进行换行，就可以使用<br /> 标签，注意它是一个单标签。

文本格式化

  • HTML可定义很多供格式化输出的元素，例：使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式，从而显示粗体 或者 斜体
    示例：
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML教程(html.cn)</title> 
</head> 
<body>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html>

HTML 文本格式化标签

标签

描述

<b>

定义粗体文本

<em>

定义着重文字

<i>

定义斜体字

<small>

定义小号字

<strong>

定义加重语气

<sub>

定义下标字

<sup>

定义上标字

<ins>

定义插入字

<del>

定义删除字

HTML”计算机输出”标签

标签

描述

<kbd>

定义键盘码

<samp>

定义计算机代码样本

<var>

定义变量

<pre>

定义预格式文本

<code>

定义计算机代码

HTML 引文，引用，及标签定义

标签

描述

<abbr>

定义缩写

<address>

定义地址

<bdo>

定义文字方向

<blockquote>

定义长的引用

<q>

定义短的引用语

<cite>

定义引用、引证

<dfn>

定义一个定义项目

区块

  • 大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）；而内联元素则不会。

HTML 区块元素

可以通过 <div> 和 <span> 将 HTML 元素组合起来

HTML块级元素

块级元素在浏览器显示时，通常会以新行来开始和结束 - 例：<h1>, <p>, <ul>, <table>

HTML内联元素

内联元素在显示时通常不会以新行开始 - 例：<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，浏览器会在其前后显示折行 - 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 - <div> 元素的另一个常见的用途是文档布局

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器 - 与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性

HTML字符实体

  • 在 HTML 中，某些字符是预留的，这些预留字符必须被替换为字符实体；而，一些在键盘上找不到的字符也可以使用字符实体来替换。

HTML 实体
在 HTML 中，某些字符是预留的。
比如在 HTML 中不能使用小于号（<）和大于号（>）因为浏览器会误认为它们是标签，所以希望能正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体类似这样

&entity_name;
或
&#entity_number;

HTML 字符实体
不间断空格
HTML 中的常用字符实体是不间断空格( )
浏览器总是会截短 HTML 页面中的空格，如果需要在页面中增加空格的数量，需要使用 字符实体

有用的字符实体

显示结果

描述

实体名称

实体编码


空格



<

小于号

<

<

>

大于号

>

>

&

和号

&

&

“

引号

"

"

‘

撇号

' (IE不支持)

'

￠

分

¢

¢

£

镑

£

£

¥

元

¥

¥

€

欧元

€

€

§

小节

§

§

©

版权

©

©

®

注册商标

®

®

™

商标

™

™

×

乘号

×

×

÷

除号

÷

÷

  • 注意：实体名称对大小写敏感

欢迎大家提议、分享、交流、共同学习进步

多复杂的网页都是由若干个区域构成的，在HTML5中，为了使网页的文档结构更加清晰明了，新增了页眉、内容、页脚等与文档结构相关的主体结构元素。在本次的教学中，我们就来学习HTML5元素中新增的主体结构的一些方法和演示案例。

1.nav元素

nav元素用于定义导航链接的内容，可以作为页面导航的链接组，其中的导航元素链接到其他页面或者当前页面的其他部分，使HTML代码的语义化方面更加精准，同时对于屏幕阅读器等设备的支持也更好。

在html5之前，通常情况下我们会使用＜div＞元素或者＜ul id="nav"＞这样的代码来表示页面的导航，而在HTML5中，我们可以直接将导航链接列表放在＜nav＞元素中，比如下面这个例子：

HTML5中的nav元素

nav元素在网页中有着非常重要的作用，比如网页顶部的导航条，其作用是在多个页面间进行跳转链接；网页侧边栏导航，其作用是从当前页面跳转到其他页面；网页内页导航，其作用是在一个网页中的多个主要部分进行跳转；翻页导航，其作用是在多个网页间实现实现前后页滚动。

2.time元素

time即时间，该元素用于定义日期和时间。由于时区的问题，网页上显示的时间如果处理不好，就会让人产生歧义，比如应该是上午9点15分，却显示成下午22点30分。为了在网页上能准确低显示时间，让所有人都不会产生歧义，因此HTML5新增了time元素。time元素可以表示带时区的时间，还可以定义多种格式的日期和时间，代码和效果如图所示：

HTML5中的time元素

3.article元素

article元素用于定义外部的内容，可以是一篇新的文章、一篇博文、一个帖子、一段评论等等，还可以是来自其他外部源的内容。一个article元素可以有它自己的标题、内容和脚注，还可以与其他的article元素嵌套使用。演例代码如下图所示：

HTML5中的article元素

在这段代码中，header元素中嵌入了文章的标题部分，p元素嵌入了文章的正文，嵌套的article元素又引用了另外一篇文章，最后在结尾处，footer元素嵌入了一下版权信息。

4.section元素

section元素定义文档中的节，比如章节、页眉、页脚或文档中的其他部分。一个section元素通常由内容及其标题组成。代码演示如下图：

HTML5中的section元素

在这段代码中，＜h1＞元素嵌入了这段文字的标题，＜p＞元素嵌入了这段文字的正文，标题和正文构成了文档内容一个独立的块，这个快使用section元素表示。

section元素用于表示文章的段，是一个独立的块，而article元素用于表示文章外部的内容，虽然它也是独立的，请不要把这两者相混淆。比如要在一篇文章中如果需要引用另一篇文章的某些段落时，其代码如下图所示：

HTML5中的section元素

在比如你要在一个段落中引用一篇文章时，其代码如下图：

HTML5中的section元素

5.aside元素

aside元素用来定义article元素以外的内容，其内容应该与article的内容相关。这样的情况在生活中很常见，像文章中的名词解释。名词解释作为文章中的一部分，其内容与文章相关，所以这种情况下就可以使用aside元素。其代码和效果如下图所示：

HTML5中的aside元素

HTML5中的aside元素

另外，aside元素的内容还可以用作文章的侧栏，其内容作为文章的附属信息。例如nav元素导航作为aside元素的内容，这样就实现了一个侧边栏导航条。代码及效果图如下：

HTML5中的aside元素

HTML5中的aside元素

这些元素就是HTML5元素中新增的主体结构了。我们在学习这些代码的时候一定要勤加练习，这样才能够记住它们。下一期我们介绍HTML5元素中新增的非主体结构。了解更多动态资讯请加我们的官方微信号：pyyuanxing。谢谢大家的观看，祝大家生活愉快、身体健康。


在线咨询
上一篇：2024国际物流展会一览表（国内篇）丨Geek Expo
下一篇：css3 阴影的处理办法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 宁远县 安龙县 新宾满族自治县 潜江市 原州区 珠晖区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服