HTML标签:(路径引用自己的)
1.列表
<ul>...<li>..</li>
:无序列表
<ol>...<li>..</li>
:有序列表(一般不用)type用于便前面的原点,三种样式实心圆、空心圆、方块。
<dl>...<dt></dt>..<dd></dd>
:定义列表
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音乐排行榜</title>
</head>
<body>
<h1>音乐排行榜</h1>
<ol>
<li>潇洒走一回<img src="img/pic1.jpg"></li><li>偏偏喜欢你<img src="img/pic1.jpg"></li>
<li>酒干倘卖无<img src="img/pic1.jpg"></li>
<li>不说再见 <img src="img/pic1.jpg"></li>
<li>舍不得你 <img src="img/pic1.jpg"></li>
<li>请跟我来 <img src="img/pic1.jpg"></li>
</ol>
热门活动 更多</strong>
<ul>
<li><img src="img/tutu1.jpg"width="200"height="100"/></li>
<p>推荐活动|原创音乐金钱榜T榜</p>
<li><img src="img/tutu2.jpg"width="200"height="100"/></li>
<p>推荐节目|《TAImusic》爆笑来袭</p>
<li><img src="img/tutu3.jpg"width="200"height="100"/></li>
<p>推荐歌单|继续宠爱张国荣</p>
<li><img src="img/v2-3b32784c326a1f4aeb5fae4f8b5466c7_r.jpg"width="200"height="100"/></li>
<p>推荐活动|330金属音乐节巡演 成都小酒馆音乐空间</p>
</body>
</html>
2.Table表格
<table>...<tr>...<td>
:表格
border边框线 width宽度 height高度
在<tr>
中属性:
align:水平对齐 left左,right右 ,center居中
valign:垂直对齐 top上, bottom下,center,middle居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" >
<tr>
<td colspan="3"align="center">aaa</td>
<td align="center">bbb</td>
<td align="center">ccc</td>
</tr>
<tr>
<td align="center">ddd</td>
<td rowspan="3" align="center">eee</td>
<td align="center">fff</td>
<td colspan="2" rowspan="2" align="center" valign="center">ggg</td>
</tr>
<tr>
<td align="center">hhh</td>
<td align="center">iii</td>
</tr>
<tr>
<td align="center">jjj</td>
<td align="center">kkk</td>
<td align="center">mmm</td>
<td align="center">nnn</td>
</tr>
</body>
</html>
3.表格合并
行合并:rowspan
列合并:colspan
4.iframe内联框架
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com/ " target="bi">点击打开百度</a><br />
<a href="https://www.7788.com/" target="bi">二手市场</a><br />
<a href="index10.html" target="bi">点击打开了一个HTML页面</a><br />
<iframe src="index.html" width="600" height="400" name="bi" scrolling="no"frameborder="0">
<!--name:名字
scrolling=是否需要滚动条
frameborder=是否取消边框
src:路径
注意:如果需要配合超链接使用,注意target必须是ifrane的name的属性值
-->
</body>
</html>
5.媒体元素
video:视频播放器 src
audio:音频播放器 src
公共属性:controls控制面板 autoplay自动播放 loop
解决视频格式无法播放问题
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video src="css/vedio.mp4" controls></video>
<video controls="controls" muted="muted" autoplay="autoplay" loop="loop">
<source src="css/vedio.mp4" type="video/mp4"/>
<!--
muted静音
controls
--></video>
</body>
</html>