HTML进阶

1.列表

定义：列表就是信息资源的一种展示形式，它可以是信息结构化和条理化，并以列表的样式显示出来，以便浏览者可以更快捷的获取相应的信息。

1.1无序列表

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>吴亦凡强奸少女</li>
			<li>汪峰要开演唱会</li>
			<li>萧敬腾要去非洲</li>
		</ul>
	</body>
</html>

1.2有序列表

<ol>
	<li>周一</li>
	<li>周二</li>
	<li>周三</li>
			
</ol>

1.3定义列表

<dl>
        <dt>水果</dt>
	<dd>蓝莓</dd>
	<dd>香蕉</dd>
	<dd>榴莲</dd>
			
</dl>

1.4三者区别

2.表格

基本语法

<table >表格标签
			<tr style="text-align: center;" >行标签
				<td>1行1列</td>单元格标签
				<td>1行2列</td>
				<td>1行3列</td>
				
			</tr>
			<tr>
				<td>2行1列</td>
				<td>2行2列</td>
				<td>2行3列</td>
			</tr>
			<tr>
				<td>3行1列</td>
				<td>3行2列</td>
				<td>3行3列</td>
			</tr>
		</table>

2.1表格的跨列

<table border="1">
			<tr style="text-align: center;" >
				<td colspan="3">成绩</td>colspan跨行
				
			</tr>
			<tr>
				<td>2行1列</td>
				<td>2行2列</td>
				<td>2行3列</td>
			</tr>
			<tr>
				<td>3行1列</td>
				<td>3行2列</td>
				<td>3行3列</td>
			</tr>
		</table>

2.2表格的跨行

<table border="1px" >
			<tr>
				<td rowspan="2">赵四</td>
				<td>语文</td>
				<td>88</td>
				</tr>
			<tr>
				<td>数学</td>
				<td>99</td>
			</tr>
			<tr>
				<td rowspan="2">广坤</td>
				<td>语文</td>
				<td>66</td>
				
			</tr>
			<tr>
				<td>数学</td>
				<td>100</td>
			</tr>
		</table>

3.视频元素添加

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- contorls播放按钮  autoplay自动播放 -->
		<video  controls="controls" autoplay="autoplay" >
			<source src="../video.mp4" type="video/m4v"></source>
			<source src = "../video.webm" type = "video/webm"></source>
		</video>
	</body>
</html>

4.音频添加

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- controls 播放按钮 autoplay自动播放 -->
		<audio controls="controls" autoplay="autoplay">
			<source src = "../music.mp3" type="audio/mp3"></source>
			<source src ="../music.ogg" type ="audio/ogg"></source>
		</audio>
	</body>
</html>

5.页面结构元素

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- style 规格 border 边框大小 solid 边框颜色 background-color 底纹颜色 
		header 头部 section 主体 footer脚部-->
		<header style="width: 100%; height: 100px; border: 1px solid red; background-color: red;">
			欢迎光临大聪明洗脚城，请选择服务项目<br>
			<strong><a>搓澡</a></strong><strong><a>刮痧</a></strong>
		</header>
		<section style="width: 100%;height: 500px;border: 1px solid red ;background-color: greenyellow;">
			<p>本洗脚城开始于1988年，已有30余年历史，全国各地多家分店...</p>
		</section>
		<footer style="width: 100%;height: 100px; border: 5px solid black; background-color: aqua;">
			<p>加盟热线：8898888 地址：郑州市二七区海为科技园 &copy;大聪明出品必属精品</p>
		</footer>
	</body>
</html>

6.内联框架

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 内联框架 浏览器上的一个区域 用于显示我们 想要的内容 -->
		<iframe src="index3.html" name="myFrame" width="200px" height="200px"></iframe>
		
		
		<a href="http://www.qq.com" target="myFrame">显示index2页面</a>
		
		
	</body>
</html>

7.总结

posted @ 2021-08-11 18:08  码丁XIA  阅读(31)  评论(0)    收藏  举报