新手前段2-CSDN博客

本文链接：https://blog.csdn.net/m0_74270404/article/details/128936905

1.列表

为了使网页更好读，经常将网页信息以列表的形式展现网站导航、树形菜单、商品展示等。

1.无序列表

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ul>

2.有序列表

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</ol>

3.定义列表

<dl>
	<dt>名词1</dt>
	<dd>名词1的解释-第1项</ldd>
	<dd>名词1的解释-第2项</ldd>
	......
	<dt>名词2</dt>
	<dd>名词2的解释-第1项</ldd>
	<dd>名词2的解释-第2项</ldd>
	......
</dl>

2.表格

1.表格的基本结构及语法

border属性，用来指定边框的宽度。

<body>
	<table border="1">
		<tr>
			<td>第一行第一列的单元格</td>
	    	<td>第一行第二列的单元格</td>
	   	 	<td>第一行第三列的单元格</td>
		</tr>
		<tr>
			<td>第二行第一列的单元格</td>
	    	<td>第二行第二列的单元格</td>
	    	<td>第二行第三列的单元格</td>
		</tr>
	</table>
</body>

2.表格的表头

在表格的实际运用中，一个表格都会有表头，即表格标题，它使用标签进行定义。

<body>
	<table border="1">
		<tr>
			<th>第一行第一列的单元格</th>
	    	<th>第一行第二列的单元格</th>
	   	 	<th>第一行第三列的单元格</th>
		</tr>
		<tr>
			<td>第一行第一列的单元格</td>
	    	<td>第一行第二列的单元格</td>
	    	<td>第一行第三列的单元格</td>
		</tr>
	</table>
</body>

3.表格的跨行与跨列

1.表格的跨行

<body>
	<table birder="1">
		<tr>
			<td rowspan="2">星期一</td>
			<td>汽车</td>
			<td>15人</ty>
		</tr>
		<tr>
			<td>瑜伽</td>
			<td>20人</td>
		</ty>
		<tr>
			<td rowspan="2">星期三</td>
			<td>跳舞</td>
			<td>10人</ty>
		</tr>
		<tr>
			<td>人</td>
			<td>10人</td>
		</ty>
	</table>
</body>

2.表格的跨列

<body>
	<table birder="1">
		<tr>
			<td colspan="2">星期一</td>
		</tr>
		<tr>
			<td>瑜伽</td>
			<td>20人</td>
		</ty>
		<tr>
			<td>跳舞</td>
			<td>10人</ty>
		</tr>
		<tr>
			<td>人</td>
			<td>10人</td>
		</ty>
	</table>
</body>

3.表格的跨行与跨列综合运用

<body>
	<table birder="1">
		<tr>
			<td colspan="3">时间安排表</td>
		</tr>
		<tr>
			<td rowspan="2">星期一</td>
			<td>汽车</td>
			<td>15人</ty>
		</tr>
		<tr>
			<td>瑜伽</td>
			<td>20人</td>
		</ty>
		<tr>
			<td rowspan="2">星期三</td>
			<td>跳舞</td>
			<td>10人</ty>
		</tr>
		<tr>
			<td>人</td>
			<td>10人</td>
		</ty>
	</table>
</body>

3.HTML5媒体元素

1< video>标签
-

<body>
	<video controls loop>
		<source src="视频路径"/>
		<source src="视频路径"/>
		你的浏览器不支持video标签
	</video>
</body>

2.< audio>标签

<body>
	<audio controls loop>
		<source src="音频路径"/>
		<source src="音频路径"/>
		你的浏览器不支持video标签
	</audio>
</body>

4.HTML5结构标签

1.页面结构分析

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

5.< iframe>框架

1.< iframe>框架的语法及基本使用

<iframe src="页面地址"width="宽度" name="名称"></iframe>

2.< iframe>框架与超链接结合使用
在被打开的< iframe>框架上添加name属性

<iframe src="页面地址" name="iframePage"></iframe>

在超链接上设置target目标窗口属性为希望显示的框架窗口名称

<a href="页面地址" target="iframePage"></a>