<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>无序列表</title> <!-- 什么是列表 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来， 以便浏览者能更快捷地获得相应的信息！ 01.前面有默认的实心圆 02.每个li独占一行 03.适用于我们的新闻列表，导航栏 --> </head> <body> <ul> <li>好好学习</li> <li>好好学习</li> <li>好好学习</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>有序列表</title> <!-- 01.有顺序，前面默认是阿拉伯数字 02.适用与试卷 和问卷调查！ --> </head> <body> <ol> <li>好好学习</li> <li>好好学习</li> <li>好好学习</li> </ol> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>自定义列表</title> <!-- 01.每个dt dd都独占一行 02.默认前面没有任何标记 03.适用于一个标题下，有多个列表项的场景 --> </head> <body> <dl> <dt>C盘</dt> <dd>文件1</dd> <dd>文件2</dd> <dt>D盘</dt> <dd>文件1</dd> <dd>文件2</dd> </dl> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表格</title> <!-- 01.简单易用，便于阅读 02.结构简单 table中的属性： 01.border： 边框的像素 02.cellpadding 设置内容和单元格之间的距离 03.cellspacing 设置单元格和单元格之间的距离 04.bgcolor 整个表格的背景色 #ffc0cb :代表的是16进制的颜色码 05.width 表格在浏览器中的宽度比 td节点中的 align="left" 默认 align="right" align="center" --> </head> <body> <table border="1px" cellpadding="5px" cellspacing="5px" bgcolor="pink" width="50%"> <tr> <td>第1行的第1列</td> <td>第1行的第2列</td> <td>第1行的第3列</td> </tr> <tr> <td>第2行的第1列</td> <td>第2行的第2列</td> <td>第3行的第3列</td> </tr> </table> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>跨行跨列</title> <!-- 都必须写在td中 rowspan :跨行 colspan:跨列 --> </head> <body> <table border="1px" cellpadding="5px"> <tr> <td colspan="3" align="center"> 学生成绩表</td> </tr> <tr> <td rowspan="2">张三</td> <td>math</td> <td>80</td> </tr> <tr> <td>java</td> <td>90</td> </tr> <tr> <td rowspan="2">李四</td> <td>math</td> <td>85</td> </tr> <tr> <td>java</td> <td>95</td> </tr> </table> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>高级表格</title> </head> <body> <table border="1" cellspacing="0" width="70%"> <caption>年终数据报表</caption> <!--标题--> <thead bgcolor="red"> <!--页眉--> <tr> <th>月份</th> <th>收入</th> </tr> </thead> <tbody bgcolor="pink"> <!--主体--> <tr> <td>1月份</td> <td>5000</td> </tr> <tr> <td>2月份</td> <td>5000</td> </tr> <tr> <td>3月份</td> <td>6000</td> </tr> <tr> <td>4月份</td> <td>8000</td> </tr> </tbody> <tfoot bgcolor="green"> <!--页脚--> <tr> <td>平均月收入</td> <td>6000</td> </tr> <tr> <td>总收入</td> <td>24000</td> </tr> </tfoot> </table> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>音频标签</title> <!-- audio:音频标签 controls：是否显示 控制条 autoplay：是否自动播放 --> </head> <body> <audio controls autoplay> <source src="../audio/music.mp3"> </audio> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>视频标签</title> <!-- video:视频标签 controls：是否显示 控制条 autoplay：是否自动播放 --> </head> <body> <video controls autoplay src="../video/video.mp4"> </video> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>结构元素</title> <!-- 用于网页的布局： header: 头部区域 section：html页面中的一块独立的部分 footer：脚部区域 nav:导航菜单 article:独立的文章内容 aside：常用于侧边栏 --> <style type="text/css"> header{ height: 20px; border: 1px solid red; } section{ height: 1000px; border: 1px solid black; } footer{ height: 50px; border: 1px solid blue; } </style> </head> <body> <header> </header> <section> </section> <footer> </footer> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>内联框架</title> <!-- src ：指的是 我们需要引入的外部文件地址 需求： 用户点击不同的超链接，在iframe框架中 显示不同的页面！ --> </head> <body> <a href="http://www.jd.com" target="myIframe">京东</a> <a href="http://www.taobao.com" target="myIframe">淘宝</a> <a href="http://www.baidu.com" target="myIframe">百度</a> <iframe name="myIframe" src="http://www.baidu.com" scrolling="no" width="500" height="500"></iframe> </body> </html>