第2章HTML5页面元素及属性
HTML5（一）——新增元素和属性
HTML5（⼀）——新增元素和属性⾃ H5 诞⽣以来，在 html4.0 中有些元素已被 H5 废弃，但是在 H5 中添加了很多新元素以及功能，今天我们学习 H5 中新增的元素和属性都有哪些？新增语义结构标签标签描述<article>定义页⾯独⽴的内容区域。
<aside>定义页⾯的侧边栏内容。
<bdi>允许您设置⼀段⽂本，使其脱离其⽗元素的⽂本⽅向设置。
<command>定义命令按钮，⽐如单选按钮、复选框或按钮<details>⽤于描述⽂档或⽂档某个部分的细节<dialog>定义对话框，⽐如提⽰框<summary>标签包含 details 元素的标题<figure>规定独⽴的流内容（图像、图表、照⽚、代码等等）。
<figcaption>定义 <figure> 元素的标题<footer>定义 section 或 document 的页脚。
<header>定义了⽂档的头部区域<mark>定义带有记号的⽂本。
<meter>定义度量衡。
仅⽤于已知最⼤和最⼩值的度量。
<nav>定义导航链接的部分。
<progress>定义任何类型的任务的进度。
<ruby>定义 ruby 注释（中⽂注⾳或字符）。
<rt>定义字符（中⽂注⾳或字符）的解释或发⾳。
<rp>在 ruby 注释中使⽤，定义不⽀持 ruby 元素的浏览器所显⽰的内容。
<section>定义⽂档中的节（section、区段）。
<time>定义⽇期或时间。
<wbr>规定在⽂本中的何处适合添加换⾏符。
新增标签使⽤时根据描述内容，在适当的地⽅使⽤新标签，应⽤的时候和其他标签是⼀样的，H5 新增标签使得⽹页结构更清晰明了，建议⼤家使⽤新增元素。
简述html5文档的基本结构及元素的功能。
简述html5文档的基本结构及元素的功能。
HTML5是一种用于构建网页的标准语言，它定义了网页的基本结构和元素的功能。
HTML5文档的基本结构如下：<!DOCTYPE html>：这是文档类型声明，告诉浏览器使用的是HTML5规范。
<html>：这是HTML文档的根元素，它包含了整个HTML文档的内容。
<head>：这是头部元素，它包含了一些与网页相关的配置信息，如标题、字符编码和外部样式表等。
<title>：这是标题元素，用于定义网页的标题，显示在浏览器的标题栏上。
<meta>：这是元数据元素，用于定义网页的元数据，如字符编码、关键词和描述等。
<body>：这是主体元素，包含了网页的可见内容，如文本、图片和链接等。
HTML5中的元素具有不同的功能，以下是一些常用元素及其功能的简述：<h1> - <h6>：这是标题元素，用于定义网页中的标题。
h1是最高级标题，h6是最低级标题。
<p>：这是段落元素，用于定义网页中的段落。
每个段落会自动换行，并且会有默认的上下间距。
<a>：这是链接元素，用于创建超链接。
可以指向其他网页、文件或者页面内的锚点。
<img>：这是图像元素，用于插入图片。
可以设置图片的路径、大小和替代文本。
<ul>：这是无序列表元素，用于创建一个无序列表。
列表项会用圆点或者其他符号进行标记。
<ol>：这是有序列表元素，用于创建一个有序列表。
列表项会按照数字或字母的顺序进行标记。
<div>：这是容器元素，用于组织网页中的内容。
可以用来创建块级元素，并且可以通过CSS进行样式设置。
<span>：这是内联元素，用于在行内包裹一段文本或其他元素。
可以用来应用样式或进行DOM操作。
以上只是HTML5文档中一些常用的元素及其功能的简述，HTML5还有许多其他元素和功能，可以根据实际需要进行学习和应用。
《HTML5完整教程》课件
制作一个简单网站注 册页面
学习如何设计和实现一个用户 注册页面。
制作一个简单网页动 态效果
使用JavaScript和CSS3为网页添 加动态效果和交互性。
结束语
1 HTML5的未来
展望HTML5的发展前景和可能的趋势。
2 学习建议和资源推荐
提供给学习者关于深入学习HTML5的建议和推荐资源。
3 答疑时间
多媒体元素
学习如何在HTML5中嵌入视频、 音频和Canvas。
第四章 CSS3新特性
1 CSS3介绍
了解CSS3的功能和应用领域。
2 盒模型
深入了解CSS3盒模型的各个方面，包括边框、填充、外边距等。
3 文字样式
探索CSS3提供的新的文字样式特性，如文pt基础语法
Web Workers
探索Web Workers如何提供多线程编程能力。
Web Socket
学习使用Web Socket实现实时通信和数据传输。
WebGL
了解WebGL的基本原理和在浏览器中展示3D图 像的方法。
第七章 HTML5实战案例
制作一个简单网站
使用HTML5和CSS3创建一个功 能丰富的静态网站。
《HTML5完整教程》PPT 课件
在这份《HTML5完整教程》的PPT课件中，我将向大家介绍HTML5的各个方 面，包括概述、基础语法、新增元素、CSS3新特性、JavaScript基础语法、高 级技术和实战案例等内容。
第一章 HTML5概述
HTML5介绍
了解HTML5的定义、用途和优势。
HTML5特性
1
JS脚本位置
学习如何在HTML文档中嵌入JavaScript代码。
HTML5的标签大全以及相关属性
HTML5的标签⼤全以及相关属性按字母顺序排列的标签列表4: 指⽰在 HTML 4.01 中定义了该元素5: 指⽰在 HTML 5 中定义了该元素标签描述45定义注释。
45定义⽂档类型。
45定义超链接。
45定义缩写。
45HTML 5 中不⽀持。
定义⾸字母缩写。
4定义地址元素。
45HTML 5 中不⽀持。
定义 applet。
4定义图像映射中的区域。
45定义 article。
5定义页⾯内容之外的内容。
5定义声⾳内容。
5定义粗体⽂本。
45定义页⾯中所有链接的基准 URL。
45HTML 5 中不⽀持。
请使⽤ CSS 代替。
4定义⽂本显⽰的⽅向。
45HTML 5 中不⽀持。
定义⼤号⽂本。
4定义长的引⽤。
45定义 body 元素。
45插⼊换⾏符。
45定义按钮。
45定义图形。
5定义表格标题。
45HTML 5 中不⽀持。
定义居中的⽂本。
4定义引⽤。
45定义计算机代码⽂本。
45定义表格列的属性。
45定义表格列的分组。
45定义命令按钮。
5定义下拉列表。
5定义定义的描述。
45定义删除⽂本。
45定义元素的细节。
5定义定义项⽬。
45HTML 5 中不⽀持。
定义⽬录列表。
4定义⽂档中的⼀个部分。
45定义定义列表。
45定义定义的项⽬。
45定义强调⽂本。
45定义外部交互内容或插件。
5定义 fieldset。
45定义 figure 元素的标题。
5定义媒介内容的分组，以及它们的标题。
5HTML 5 中不⽀持。
4定义 section 或 page 的页脚。
5定义表单。
45HTML 5 中不⽀持。
定义⼦窗⼝（框架）。
4HTML 5 中不⽀持。
定义⼦窗⼝（框架）。
4 HTML 5 中不⽀持。
定义框架的集。
4定义标题 1 到标题 6。
45定义关于⽂档的信息。
45定义 section 或 page 的页眉。
5定义有关⽂档中的 section 的信息。
5定义⽔平线。
45定义 html ⽂档。
45定义斜体⽂本。
45定义⾏内的⼦窗⼝（框架）。
45定义图像。
第2章 HTML5的元素与属性
HTML5与之前版本的不同
HTML5的语法与之前HTML语法在某种程度上达到了一定的兼容性。例如，有时可以看见“<p>没 有结束标签”等HTML现象。HTML5不将这些视为错误，而是“允许这些现象存在，并明确记录在规范 中”的方法。那么下面就来看看具体的HTML5语法。 可以省略标签的元素 在HTML5中，元素可以省略标签。具体来讲有3种情况，具体如下： 不允许写结束标记的元素有： area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source 、track、wbr 不允许写结束标记的元素是指不允许使用开始标记与结束标记将元素括起来的的形式，只允许 使用“<元素/>”的形式进行书写。例如： “<br>„</br>”的写法是错误的。正确写法为 “<br/>”。当然，在HTML5以前版本中“<br>”这种写法也是允许的。 可以省略结束标签 li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th 可以省略整个标签（即连开始标签都不用写明） html、head、body、colgroup、tbody需要注意的是，虽然这些元素可以省略，但实际上却是隐 式存在的。例如： “<body>”标签可以省略，但在DOM树上它是存在的，可以永恒访问到 “document.body”。上述列表中也包括了HTML5的新元素。有关这些新元素的用法，将在后面的章 节中详细讲解。
1.HTML5的语法变化 2.新增的元素和废除的元素 3.新增的属性和废除的属性 4.全局属性 5.综合实例——检查单词的拼写情况
第2章 HTML、XHTML、HTML5
第2章 HTML、XHTML、HTML5
第14页
2.2.5 命名空间
在XHTML文档中，还有一句常见的代码： <html xmlns="/1999/xhtml" > xmlns，即XHTML Namespace的缩写，即命名空间。 该属性声明了html顶级元素的命名空间，用来定义该顶级元 素以及其包含的各级子元素的唯一性。由于XML语言允许用 户自定义标签，使用命名空间，可以避免自己定义的标签和 别人定义的标签发生冲突。比如，如果两个人定义了一个一 模一样的文档，若文件头部没有xmlns命名空间的区分，就 会发生冲突，如果在文档头部加上了不同的命名空间，则文 档不会冲突。通俗地讲，命名空间就是给文档做一个标签， 标明该文档是属于哪个网站的。对于HTML文档来说，由于 它的元素是固定的，不允许用户进行定义，所以指定的命名 空间永远是/1999/xhtml。
第20页
2.4 新增和废除的属性
2.4.1 新增的属性 2.4.2 废除的属性
第2章 HTML、XHTML、HTML5
第21页
2.4.1 新增的属性
HTML5中新增的属性主要体现在表单属性、链接 属性以及其他属性。
第2章 HTML、XHTML、HTML5
第22页
2.4.1 新增的属性
第2章 HTML、XHTML、HTML5
第2页
本章的学习目标
了解H TML语言的作用、结构和语法 了解XHTML和XML的关系，及XHTML的 语法特点 掌握HTML5的语法和元素 掌握HTML5中新增的以及废除的元素 掌握HTML5中新增的和废除的属性 掌握HTML5新增的全局属性 掌握HTML5新增的事件
h5 页面元素构成
h5 页面元素构成摘要：1.H5 页面元素的基本概念2.H5 页面元素的构成3.H5 页面元素的应用场景4.H5 页面元素的未来发展趋势正文：一、H5 页面元素的基本概念H5，即HTML5，是一种用于构建网页的标记语言。
相较于传统的HTML4，HTML5 在功能特性、结构、语义化等方面都有了很大的改进。
H5 页面元素指的是在HTML5 中使用的各种标签和元素，它们共同构成了网页的结构和内容。
二、H5 页面元素的构成1.结构元素：包括<header>、<nav>、<main>、<section>、<article>等，这些元素用于构建网页的整体结构，帮助浏览器和用户更好地理解网页内容。
2.内容元素：包括<h1>至<h6>、<p>、<a>、<img>、<video>等，这些元素用于展示网页的具体内容，丰富网页的表现形式。
3.媒体元素：包括<audio>、<canvas>等，这些元素用于实现网页的多媒体功能，提升用户体验。
4.表单元素：包括<form>、<input>、<button>等，这些元素用于创建网页表单，方便用户与网站进行交互。
5.导航元素：包括<nav>、<ul>、<ol>等，这些元素用于创建网页导航菜单，方便用户在网页间进行跳转。
6.脚本元素：包括<script>，这些元素用于编写网页的脚本代码，实现网页的动态效果和交互功能。
三、H5 页面元素的应用场景H5 页面元素广泛应用于各种网站、网页应用和移动端应用中，如企业官网、电子商务平台、社交媒体、在线教育等。
通过H5 页面元素，开发者可以创建出结构清晰、内容丰富、表现形式多样、用户体验优良的网页。
四、H5 页面元素的未来发展趋势随着互联网技术的不断发展，H5 页面元素也将不断完善和丰富。
html5中常见的块级元素及内联元素
html5中常见的块级元素及内联元素在HTML5中，元素分为两种类型：块级元素和内联元素。
块级元素包含整个块，占据整个屏幕横向空间，而内联元素只占据它的内容宽度和高度。
接下来，我将详细介绍HTML5中常见的块级元素和内联元素。
一、块级元素块级元素的特点是它们通常作为容器来显示内容，所以它们显示的内容会在页面上独立成为一个块。
常见的块级元素有：1. <div>元素：它是最常用的块级元素。
通常用来包裹其他HTML 元素，把它们组织在一起形成一个整体。
2. <ul>和<ol>元素：它们分别表示无序列表和有序列表。
通常用来显示项目列表，如网站导航，文章目录等。
3. <h1>~<h6>元素：它们表示6个不同的标题级别。
这些元素通常用来显示文章的标题和副标题等。
4. <p>元素：表示段落。
通常用来显示文章的一段话。
5. <table>元素：表示表格。
用来把数据组织成一行一列的格式。
二、内联元素内联元素部分或全部包含在文本中，只占据内容的宽度和高度。
常见的内联元素有：1. <a>元素：用来创建一个链接。
通常用来链接到另一个页面或下载文件。
2. <span>元素：通常用于给某一部分内容添加CSS样式。
3. <img>元素：用来显示图片。
4. <strong>和<em>元素：表示强调文本。
通常用来重点标识某一部分内容。
5. <input>元素：用来生成表单界面，如输入文本框，单选框等。
总之，块级元素和内联元素都有自己的特点和用途。
HTML5能够灵活地使用它们有助于优化你写的网页。
所以熟练掌握它们的使用方法也是非常重要的。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.6 知识点讲解
让IT教学更简单，让IT学习更有效
1、draggable属性
draggable属性用来定义元素是否可以拖动，该属性有两个值：true和 false，默认为false，当值为true时表示元素选中之后可以进行拖动操作，否则不 能拖动。
2.6 知识点讲解
让IT教学更简单，让IT学习更有效
2.3 分组元素
让IT教学更简单，让IT学习更有效
知识引入
figure和figcaption元素
hgroup元素
2.3 知识点讲解
让IT教学更简单，让IT学习更有效
1、 figure和figcaption元素
figure元素用于定义独立的流内容（图像、图表、照片、代码等等），一般 指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除，也不 会对文档流产生影响。figcaption元素用于为figure元素组添加标题，一个figure 元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或 者最后一个子元素的位置。
2.2 知识点讲解
让IT教学更简单，让IT学习更有效
6、footer元素
footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页 面底部的内容。在HTML5出现之前，一般使用<div id=“footer”></div>标记来 定义页面底部，而通过HTML5的footer元素可以轻松实现。
2.2 知识点讲解
让IT教学更简单，让IT学习更有效
4、aside元素
aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前 页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内 容的部分。 aside元素的用法主要分为两种： • 被包含在article元素内作为主要内容的附属信息。 • 在article元素之外使用，作为页面或站点全局的附属信息部分。
2.6 知识点讲解
让IT教学更简单，让IT学习更有效
4、contenteditable属性
contenteditable属性规定是否可编辑元素的内容，但是前提是该元素必须可 以获得鼠标焦点并且其内容不是只读的。该属性有两个值，如果为true表示可编 辑，为false表示不可编辑。
2.7 制作电影影评网
让IT教学更简单，让IT学习更有效
本章前面讲解了HTML5新增的结构元 素、分组元素、页面交互元素、文本层次语义
案例引入
元素以及常用的标准属性等内容。本节将结合 前面所学知识点制作一个 “电影影评网”， 默认效果如下所示。
2.7 制作电影影评网
让IT教学更简单，让IT学习更有效
当点击“动作电影”时，会显示动作电影的下拉菜单，如下图所示；再次点 击，将下拉菜单收缩。
2.2 知识点讲解
让IT教学更简单，让IT学习更有效
2、nav元素
nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航 性质的链接归纳在一个区域中，使页面元素的语义更加明确。例如下面这段示例 代码： <nav> <ul> <li><a href="#">首页</li> <li><a href="#">公司概况</li> <li><a href="#">产品展示</li> <li><a href="#">联系我们</li> </ul> </nav>
2.1 知识点讲解
让IT教学更简单，让IT学习更有效
4、列表的嵌套应用
在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这 些小类通常还包含若干的子类。同样，在使用列表时，列表项中也有可能包含若 干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。
2.2 结构元素
让IT教学更简单，让IT学习更有效
header元素
知识引入
nav元素
article元素 aside元素 section元素 footer元素
2.2 知识点讲解
让IT教学更简单，让IT学习更有效
1、header元素
HTML5中的header元素是一种具有引导和导航作用的结构元素，该元素可 以包含所有通常放在页面头部的内容。其基本语法格式如下： <header> <h1>网页主题</h1> ... </header>
2.5 知识点讲解
让IT教学更简单，让IT学习更有效
2、mark元素
mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。该 元素的用法与em和strong有相似之处，但是使用mark元素在突出显示样式时更 随意灵活。
2.5 知识点讲解
让IT教学更简单，让IT学习更有效
3、cite元素
2.2 知识点讲解
让IT教学更简单，让IT学习更有效
3、article元素
article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该 元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多 个section元素进行划分，一个页面中article元素可以出现多次。
2.6 知识点讲解
让IT教学更简单，让IT学习更有效
3、spellcheck属性
spellcheck属性主要针对于input元素和textarea文本输入框，对用户输入的 文本内容进行拼写和语法检查。spellcheck属性有两个值：true（默认值）和 false，值为true时检测输入框中的值，反之不检测。
说明
定义度量的值位于哪个点被界定为高的值。 定义度量的值位于哪个点被界定为低的值。 定义最大值，默认值是 1。 定义最小值，默认值是 0。 定义什么样的度量值是最佳的值。如果该值高于 high属性，则 意味着值越高越好。如果该值低于low属性的值，则意味着值 越低越好。 定义度量的值。
2.5 文本层次语义元素
2.4 页面交互元素
让IT教学更简单，让IT学习更有效
知识引入
details和summary元素
progress元素
meter元素
2.4 知识点讲解
让IT教学更简单，让IT学习更有效
1、details和summary元素
details元素用于描述文档或文档某个部分的细节。summary元素经常与 details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标 题。标题是可见的，当用户点击标题时，会显示或隐藏details中的其他内容。
2.3 知识点讲解
让IT教学更简单，让IT学习更有效
2、 hgroup元素
hgroup元素用于将多个标题（主标题和副标题或者子标题）组成一个标题 组，通常它与h1~h6元素组合使用。通常，将hgroup元素放在header元素中。 在使用hgroup元素时要注意以下几点： • 如果只有一个标题元素不建议使用hgroup元素。 • 当出现一个或者一个以上的标题与元素时，推荐使用hgroup元素作为标 题元素。 • 当一个标题包含副标题、section或者article元素时，建议将hgroup元素和 标题相关元素存放到header元素容器中。
让IT教学更简单，让IT学习更有效 让IT教学更简单，让IT学习更有效
第二章 HTML5页面元素及属性
• 结构元素
• 页面交互元素 • 全局属性
• 分组元素
• 文本层次语义元素
目录
列表元素
让IT教学更简单，让IT学习更有效
结构元素 局属性 阶段案例——制作电影影评网
2、hidden属性
在HTML5中，大多数元素都支持hidden属性，该属性有两个属性值：true和 false。当hidden属性取值为true时，元素将会被隐藏，反之则会显示。元素中的 内容是通过浏览器创建的，页面装载后允许使用JavaScript脚本将该属性取消， 取消后该元素变为可见状态，同时元素中的内容也及时显示出来。
2.4 知识点讲解
让IT教学更简单，让IT学习更有效
3、meter元素
meter元素用于表示指定范围内的数值。例如，显示硬盘容量或者对某个后 选者的投票人数占投票总人数的比例等，都可以使用meter元素。 meter元素有多个常用的属性，如下表所示。
属性
high low max min optimum value
2.4 知识点讲解
让IT教学更简单，让IT学习更有效
2、progress元素
progress元素用于表示一个任务的完成进度。这个进度可以是不确定的，只 是表示进度正在进行，但是不清楚还有多少工作量没有完成。 progress元素的常用属性值有两个，具体如下。 • value：已经完成的工作量。 • max：总共有多少工作量。
2.1 列表元素
让IT教学更简单，让IT学习更有效
知识引入
ul元素
ol元素 dl元素 列表的嵌套应用
2.1 知识点讲解
让IT教学更简单，让IT学习更有效
1、ul元素
无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个 列表项之间没有顺序级别之分，通常是并列的。定义无序列表的基本语法格式如 下： <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ul>
cite元素可以创建一个引用标记，用于对文档参考文献的引用说明，一旦在 文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别 于段落中的其他字符。