【HTML5】HTML5 高级程序设计学习笔记1 HTML5新特性简介

本文深入探讨了HTML5的内容类型、嵌入资源、流元素、标题部分、交互内容、元数据元素、行内文本和文本标记、节部分元素、语义化标记等关键概念，同时展示了通过JavaScript简化选择器API的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

New DOCTYPE and Character Set
HTML5内容类型

Content Type	Description
Embedded	Content that imports other resources into the document, for example audio, video,canvas, and iframe
Flow	Elements used in the body of documents and applications, for example form, h1, and small
Heading Section headers,	for example h1, h2, and hgroup
Interactive Content that users interact with,	for example audio or video controls, button, and textarea
Metadata Elements—	commonly found in the head section— that set up the presentation or
behavior of the rest of the document,	for example script, style, and title
Phrasing Text and text markup elements,	for example mark, kbd, sub, and sup
Sectioning Elements that define sections in the document,	for example article, aside, and title

这里写图片描述
Semantic Markup 语义化标记

Sectioning Element	Description
header	Header content (for a page or a section of the page)
footer	Footer content (for a page or a section of the page)
section	A section in a web page
article	Independent article content
aside	Related content or pull quotes
nav	Navigational aids

这里写图片描述
Simplifying Selection Using the Selectors API
以前：

Function	Description
getElementById()	Returns the element with the specified id attribute value getElementById(“foo”);
getElementsByName()	Returns all elements whose name attribute has the specified value
getElementsByTagName()	Return all elements whose tag name matches the specified value
getElementsByTagName(“input”);

现在：

<script type="text/javascript">
      document.getElementById("findHover").onclick = function() {
        // find the table cell currently hovered in the page
        var hovered = document.querySelector("td:hover");
        if (hovered)
           document.getElementById("hoverResult").innerHTML = hovered.innerHTML;
      }
</script>