2021-03-10

最新推荐文章于 2024-09-30 21:15:00 发布

懒惰の峰少

最新推荐文章于 2024-09-30 21:15:00 发布

阅读量49

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_36870769/article/details/114631742

版权

主要内容： 1、音频、视频标签
2、table标签
3、列表

视频播放器标签:

	<video src=”视频的路径” controls preload muted autoplay loop poster=”预览图片路径” width=”视频宽度” height=”视频高度”></video>
音频播放器标签:

共有属性:
controls 显示播放器
preload 预加载
muted 默认静音播放
autoplay自动播放
loop循环播放


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- table 
		table>tr>td
		table>thead tbody>tr  > th td
	属性:border 
		width
		bgColor(将被弃用) -->
	<h2>table表格</h2>
	<table border="1" width="100%" bgColor="#ccc">
		<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>

	<hr />
	<h2>2021年商品售卖情况表</h2>
	<table border="1" width="90%" align="center">
		<thead>
			<tr>
				<th>商品名称</th>
				<th>商品价格</th>
				<th>商品种类</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>小苹果</td>
				<td>$1</td>
				<td>水果</td>
			</tr>
			<tr>
				<td>小鸭梨</td>
				<td>$0.5</td>
				<td>水果</td>
			</tr>
			<tr>
				<td>小香蕉</td>
				<td>$3</td>
				<td>水果</td>
			</tr>
		</tbody>
	</table>
<hr />
 
 <!--  
	colspan 合并行
    rowspan 合并列
   -->
	<table border="1" width="50%" align="center">
		<tr>
			<th colspan="3">一日三餐</th>
		</tr>
		<tr>
			<td rowspan="3">早餐菜谱</td>
			<td>食物</td>
			<td>鸡蛋</td>
		</tr>
		<tr>
			<td>饮料</td>
			<td>甜点</td>
		</tr>
		<tr>
			<td>牛奶</td>
			<td>开心粉</td>
		</tr>
	</table>
</body>
</html>

列表：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 
	块标签:
	块级标签大佬:
	div 

	列表标签:
		有序列表:
			ol>li
		无序列表:
			ul>li
	描述标签:
		dl>dt dd
	表格标签:
		table>tr>td
	-->
	<div style="border:1px solid #f90;width:200px;height:400px">sdafdsa</div>
	<h2>贵美商城注册流程</h2>
	<ol>
		<li>输入用户名</li>
		<li>输密码</li>
		<li>输入验证码手机号</li>
		<li>输入验证码手机号</li>
		<li>点击注册</li>
	</ol>
	<h2>客服问题</h2>
	<ul>
		<li>如何注册</li>
		<li>如何登录</li>
		<li>如何付款</li>
		<li>如何买东西</li>
	</ul>
	<h2>什么是电脑?</h2>
	<dl>
		<dt><img src="./upload/1.jpg" width="100"/></dt>
		<dd>是一种高精密的计算机器</dd>
	</dl>
	<hr />
</body>
</html>