本文介绍了HTML中的基础元素，包括表格布局的实践、无序和有序列表的使用，以及定义列表的应用。深入探讨了frameset在创建多窗口框架中的作用，展示了如何设置和切换框架内容。同时，提到了一些常用特殊意义的HTML标签，如`<address>`、`<abbr>`等。最后，简单介绍了XHTML的严谨语法特点和HTML5新增的多媒体元素，如视频和音频的集成。
文章目录
一、HTML表格布局练习题
用表格布局结合一些css实现如下功能的页面：
代码如下：
4.<!DOCTYPE html>
5.<html lang="en">
6.<head>
7. <meta charset="UTF-8">
8. <title>Document</title>
9.</head>
10.<body>
11. <h1>热门电影板块</h1>
12. <hr>
13. <table width="800px">
14. <tr>
15. <td>最近热门电影</td>
16. <td>热门</td>
17. <td>最新</td>
18. <td>豆瓣评分</td>
19. <td>冷门佳片</td>
20. <td>华语</td>
21. <td>欧美</td>
22. <td>日本</td>
23. <td style="padding-right:60px;padding-left:120px">
24. <a href="two.html">更多>></a>
25. </td>
26.
27. </tr>
28. </table>
29. <hr>
30. <table width="800px">
31. <tr>
32. <td><img src="image/2.png" width="200px"></td>
33. <td><img src="image/3.png" width="200px"></td>
34. <td><img src="image/2.png" width="200px"></td>
35. <td><img src="image/3.png" width="200px"></td>
36. </tr>
37. <tr align="center">
38. <td>致命ID</td>
39. <td>万能钥匙</td>
40. <td>禁闭岛</td>
41. <td>恐怖游轮</td>
42. </tr>
43.
44.
45. </table>
46. <table width="800px">
47. <tr>
48. <td><img src="image/2.png" width="200px"></td>
49. <td><img src="image/3.png" width="200px"></td>
50. <td><img src="image/2.png" width="200px"></td>
51. <td><img src="image/3.png" width="200px"></td>
52. </tr>
53. <tr align="center">
54. <td>致命ID</td>
55. <td>万能钥匙</td>
56. <td>禁闭岛</td>
57. <td>恐怖游轮</td>
58. </tr>
59.
60.
61. </table>
62.</body>
</html>
二、HTML中的列表
1.无序列表
应用：导航（nav) 侧栏 (sidebar) 商品栏 贴吧知道 其他贴子的链接
<ul> 无序列表的标签
<li>列表的选项
代码如下（示例）：
<ul>
<li>疾风之刃</li>
<li>武器大师</li>
<li>德玛西亚</li>
<li>艾欧尼亚</li>
</ul>
2.有序列表
<ol>有序列表的标签
<li>列表的选项
有序列表中的其他属性值(该属性都放在ul标签内)：
<type ="n"> n可以为：数字 字母A-Z 罗马字符I II III IV V VI VII VIII （表示排序的标准）
<reversed="reversed">表示降序排序
<start="n">表示从n开始排序（注：n只能是数字）
代码如下（示例）：
<ol type="1" reversed="reversed" start="2">
<li>疾风之刃</li>
<li>武器大师</li>
<li>德玛西亚</li>
<li>艾欧尼亚</li>
</ol>
2.定义列表
<dl>定义列表的标签
<dt>定义项目
<dd>定义的描述
代码如下（示例）：
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
三、多窗口框架 frameset
1.frameset的组成(注：frameset标签与body标签不能连用)
frameset里面的每一个窗口都是一个frame
<frameset>多窗口框架标签
：
<rows>进行行的划分 用%为单位
<cols>进行列的划分 用%为单位
代码如下（示例）：
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
<frame>frameset内的框架
：
<src="url">表示框架中显示文档的地址
等等
代码如上（示例）：
2.frameset的小应用
要求:
在一个网页内 点击a框架中的页面显示b页面，点击b框架中的页面显示c页面，点击c框架中的页面显示d页面，点击d框架中的页面显示a页面
代码如下（示例）:
主页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<frameset rows="10%,80%,10%">
<frame src="A.html" name="header" />
<frameset cols="10%,90%">
<frame name="menu" />
<frame name="center" />
</frameset>
<frame name="footer" />
</frameset>
</html>
A页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A</title>
</head>
<body>
<a href="B.html" target="menu">A</a>
</body>
</html>
B页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B</title>
</head>
<body>
<a href="C.html" target="center">B</a>
</body>
</html>
C页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>C</title>
</head>
<body>
<a href="D.html" target="footer">C</a>
</body>
</html>
D页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D</title>
</head>
<body>
<a href="A.html" target="header">D</a>
</body>
</html>
四、常用标签 特殊意义的标签
<address>用于描述地址 默认斜体
<article>用于描述文章的标题
<header><footer> <nav>为了让程序员能够通过代码看清楚代码的含义
类似于这样的标签他们的作用 和div是相似的 提高代码的阅读能力 -----望文生义
<label> 为input 元素定义标注（ for 属性应当与相关元素的 id 属性相同）
代码如下（示例）:
显示：点击“用户名”文本时，后面的框框有相应地标注显示
<label for="one">用户名：</label>
<input type="text" id="one" />
内联元素 <span> <a>
块状元素 <div> <p>
<span> 内联元素
通常用于修饰文本 默认不具有任何样式 可以通过css来添加样式
五、XHTML
XHTML 它是html4.01版本后出现的一个更严谨语法更纯粹的一个版本
从语法上对html进行更严谨的规范。
html 也可以存在 任意的单词的标签
默认把他们当成文本标签
DTD的命名规范 规范了标签的内容
xml 标签 可以用任意单词来进行定义的
六、HTML5
1.视频和音频
<video>视频
<video src="./video/final.mp4" controls="controls"></video>
<audio>音频
<video src="./video/final.mp4" controls="controls"></video>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
