HTML5与CSS3实战：列表、表格与媒体元素解析

"该资源是关于HTML5和CSS3开发商业站点的第二章内容，主要讲解了列表、表格和媒体元素的使用，以及HTML5结构标签在网页布局中的应用。" 在HTML5中，支持三种类型的列表：无序列表（unordered list）、有序列表（ordered list）和定义列表（definition list）。无序列表用`<ul>`标签表示，其特点是列表项前有实心小圆点，常用于展示无特定顺序的信息，如导航菜单。有序列表用`<ol>`标签表示，列表项前带有数字或字母顺序标记，适用于需要排序的信息，如步骤说明。定义列表用`<dl>`标签，由术语`<dt>`和解释`<dd>`组成，常用于术语解释。 在HTML5中，表格的跨行和跨列设置可以通过`<td>`或`<th>`标签的`rowspan`和`colspan`属性实现。例如，`rowspan="2"`会让单元格占据两行，`colspan="3"`则会让单元格占据三列。 HTML5引入了新的媒体元素，包括`<audio>`和`<video>`，使得在网页中嵌入音频和视频变得更加简单。`<audio>`元素用于添加音频内容，可以设置`src`属性指定音频源，还可以通过`controls`属性添加播放控制。`<video>`元素则用于插入视频，除了`src`属性外，还支持`autoplay`、`loop`、`muted`等属性，以及`<source>`标签来提供不同格式的视频源，以适应不同浏览器。 HTML5结构标签，如`<header>`、`<nav>`、`<main>`、`<article>`、`<section>`和`<footer>`，旨在提高网页的语义性和可读性，帮助搜索引擎更好地理解网页内容，同时也方便屏幕阅读器和其他辅助技术的用户。它们用于定义网页的各个部分，如页眉、导航、主要内容、文章、区块和页脚。 网页中文字乱码通常是由于编码不匹配导致的，确保网页编码与文件编码一致（如都使用UTF-8）可以解决这个问题。超链接的打开方式可以设置在`<a>`标签的`target`属性中，`_self`表示在当前窗口打开，`_blank`则会在新窗口或标签页打开。 错误的HTML代码示例： ```html <h1>北京是中国的<p>首都</p> <p>香山的<strong>红叶</strong>在秋季非常漂亮</p></h1></p><h1>北京是中国的<p>首都</p></h1> ``` 这段代码的问题在于`<h1>`标签未正确关闭，`<p>`标签被错误地嵌套在`<h1>`中，且存在多余的`</p>`标签。正确的写法应为： ```html <h1>北京是中国的首都</h1> <p>香山的<strong>红叶</strong>在秋季非常漂亮</p> ``` 本章的学习任务包括使用`<ul>`、`<ol>`、`<dl>`创建列表展示数据，使用`<table>`制作表格，通过`<audio>`和`<video>`播放媒体，以及利用HTML5的结构元素进行网页布局，如`<header>`、`<nav>`等。完成这些目标将有助于提升网页设计的规范性和用户体验。