列表，表格和媒体元素

快乐就好ya

已于 2024-09-09 09:26:34 修改

阅读量491

点赞数 9

分类专栏： HTML 文章标签：前端 html5 css3

于 2024-09-09 09:23:35 首次发布

本文链接：https://blog.csdn.net/m0_63233901/article/details/142046520

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

列表

列表分为有序列表，无序列表以及定义列表

有序列表

<ol>
  <li>范冰冰演藏族女孩</li>
  <li>撞死两个人后自拍</li>
  <li>诗隆甜蜜出游</li>
  <li>一线城市楼市退烧</li>
</ol>

ol 声明有序列表，li里面是每一行的内容

无序列表

<ul>
      <li>范冰冰演藏族女孩</li>
      <li>撞死两个人后自拍</li>
      <li>诗隆甜蜜出游</li>
      <li>一线城市楼市退烧</li>
 </ul>

ul声明无序列表，li里面是每一行的内容，前面的小点可以换样式，加个type属性就好了

我们一般都是用无序列表

定义列表

<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>

dl声明无序列表，dt(define list title)定义标题，dd是写每一行内容，需要注意的是，dd会默认缩进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1>音乐排行榜</h1>
		<ol>
			<li><a href="#">潇洒走一回</a><img src="img/pic1.png"/></li>
			<li><a href="#">偏偏喜欢你</a><img src="img/pic1.png"/></li>
			<li><a href="#">酒干倘卖无</a><img src="img/pic1.png"/></li>
			<li><a href="#">不说再见</a><img src="img/pic1.png"/></li>
			<li><a href="#">舍不得你</a><img src="img/pic1.png"/></li>
			<li><a href="#">请跟我来</a><img src="img/pic1.png"/></li>
		</ol>
	</body>
</html>

类型	说明	项目符号
无序列表	以<ul>标签来实现以<li>标签表示列表项	无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容
有序列表	以<ol>标签来实现以<li>标签表示列表项	有序列表ol-li一般用于显示带有顺序编号的特定场合
定义列表	以<dl>标签来实现以<dt>标签定义列表项以<dd>标签定义内容	定义列表一般适用于带有标题和标题解释性内容的场合

表格表格

表格的优点（简单通用，结构稳定）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1"cellspacing="0">
		 <tr>
			<td colspan="3">aaa</td>
			<td>bbb</td>
			<td>ccc</td>
		</tr>
		<tr>
			<td>ddd</td>
			<td rowspan="3">eee</td>
			<td>fff</td>
			<td rowspan="2"colspan="2">ggg</td>
		</tr>
		<tr>
			<td>hhh</td>
			<td>iii</td>
		</tr>
		<tr>
			<td>jjj</td>
			<td>kkk</td>
			<td>mmm</td>
			<td>nnn</td>
		</tr>
	   </table>
	</body>
</html>

<table>标签声明我要使用表格，

<tr>开始写每一行的内容

<border>定义边宽，

<cellspacing>定义边框与边框的距离

<rowspan>合并行

<colspan>合并列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1"width="200"height="200">
		
		<thead>
			<th>今天天气</th>
			<th>2</th>
			<th>3</th>
		</thead>
		<tbody align="center">
			<tr>
			  <td>1</td>
			  <td>2</td>
			  <td>3</td>
			</tr>
		</tbody>
		</table>
	</body>
</html>

<thead>声明头部

<tbody>声明身体

<tfoot>声明脚（这个一般用不到，统计总结的时候可能会用到）

<thead>（能用到是因为在翻页的时候，最上面的部分不需要动，效果是居中加粗）

<align>属性可以让数据左右或者中间(left center right)

<valign>可以让数据靠上靠下居中(top middle bottom)

网页播放视频或者音频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<video muted autoplay="autoplay" loop="loop"controls="controls">
			<source src="img/vedio.mp4" type="video/mp4"></source>
		</video>
	</body>
</html>

<muted>静音播放，

<autoplay>自动播放，

<loop>循环播放

<controls>控件

需要注意的是，属性值等于属性名，只写属性名就好

页面结构分析

header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

常用的标签是<header>,<footer><section><nav>

内联框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>使用iframe嵌套网页</h1>
        <a href="index06.html" target="myframe">点击打开一个HTML页面</a> <br/>
        <a href="http://www.qq.com" target="myframe">QQ</a> <br/>
        <a href="http://www.sohu.com" target="myframe">搜狐</a> <br/>
        <iframe name="myframe" width="100%" height="800"frameborder="0"scrolling="no"></iframe>
    </body>
</html>

需要注意的是target的值和内联框架的name值应该相同，<frameborder>可以调节边框是隐藏，<scrolling>可以调节是否需要滚动条

快乐就好ya

关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
列表，表格和媒体元素

需要注意的是target的值和内联框架的name值应该相同，可以调节边框是隐藏，可以调节是否需要滚动条。dl声明无序列表，dt(define list title)定义标题，dd是写每一行内容，需要注意的是，dd会默认缩进。（能用到是因为在翻页的时候，最上面的部分不需要动，效果是居中加粗）常用的标签是,声明脚（这个一般用不到，统计总结的时候可能会用到）
复制链接

扫一扫