HTML

由 hrs, 13 十一月, 2019

HTML实例-068 HTML的嵌套列表

标签
HTML

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h2>这是一个嵌套列表实例</h2>
<table border="1">
<tr>
<th>嵌套列表1</th>
<th>嵌套列表2</th>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>西瓜
<ul>
<li>黑美人</li>
<li>无籽瓜</li>
<li>沙瓜</li>
</ul>
</li>
<li>芒果</li>
</ul>

</td>
<td>
<ul>
<li>苹果</li>
<li>西瓜
<ul>
<li>黑美人</li>
<li>无籽瓜</li>
<li>沙瓜
<ul>
<li>中国瓜</li>
<li>进口瓜</li>

</ul>
</li>
</ul>
</li>
<li>芒果</li>
</ul>


</td>
</tr>
</table>
</body>
</html>

运行效果：

html_068.png

评论

由 hrs, 13 十一月, 2019

HTML实例-067 HTML的不同类型的有序列表

标签
HTML

这一节我们来学习一下，不同列表的符号，利用type 属性的值改变输出的结果。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>

<html>
	<body>
	<h2>不同类型的有序列表</h2>
	<table border="1">
		<tr>
			<th>数字列表</th>
			<th>字母列表</th>
			<th>小写字母列表</th>
		</tr>
		<tr>
		<td>
		<ol>
			<li>苹果</li>
			<li>香蕉</li>
			<li>芒果</li>
		</ol>
		</td>
		<td>
		<ol type="A">
			<li>苹果</li>
			<li>香蕉</li>
			<li>芒果</li>
		</ol>
		</td>
		<td>
		<ol type="a">
			<li>苹果</li>
			<li>香蕉</li>
			<li>芒果</li>
		</ol>
		</td>

		</tr>
		<tr>
			<th>罗马字母列表</th>
			<th>小写罗马字母列表</th>
			<th>改变起始值</th>
		</tr>
		<tr>
		<td>
		<ol type="I">
			<li>苹果</li>
			<li>香蕉</li>
			<li>芒果</li>
		</ol>
		</td>
		<td>
		<ol type="i">
			<li>苹果</li>
			<li>香蕉</li>
			<li>芒果</li>
		</ol>
		</td>
		<td align="center">
		start="值"<br />
		例如：<br/>
		start="50"
		</td>
		</tr>
		</table>
	</body>
</html>

运行效果：

html_067.png

从这个实例中看出，我们用一个两行三列的表格，来演示不同类型的有序列表。

type="A"  表示输出大写字母

type="a"  表示输出小写字母

type="I"  表示输罗马字母

type="i"  表示输出小写罗马字母

start="50"  表示输出50开始的序号

 

 

评论

由 hrs, 13 十一月, 2019

HTML实例-066 HTML不同类型的列表

标签
HTML

在编辑html网页中，有时候我们要对列表的符号进行修改，这时我们就要用列表的tyep 属性来定义它。

实例代码：

<!doctype html>
<head>
	<meta charset="utf-8">
</head>
<html>
	<body>
		<h4>disc 项目符号列表：</h4>
		<ul type="disc">
			<li>苹果</li>
			<li>香蕉</li>
			<li>芒果</li>
		</ul>
		<h4>circle 项目符号列表：</h4>
		<ul type="circle">
			<li>苹果</li>
			<li>香蕉</li>
			<li>芒果</li>
		</ul>
		<h4>square 项目符号列表：</h4>
		<ul type="square">
			<li>苹果</li>
			<li>香蕉</li>
			<li>芒果</li>
		</ul>
	</body>
</html>

运行效果：

html_066.png

从这个实例中看出，我们用<ul>标签定义三个无序列表，并且用type属性改变了列表的符号显示。

type="disc"    显示实心黑色小圆点

type="circle"    显示空心小圆点

type="square"    显示实心黑色小方点

评论

由 hrs, 13 十一月, 2019

HTML实例-065 HTML的自定义列表

标签
HTML

实例代码：

<!doctype html>
	<head>
		<meta charset="utf-8">
	</head>
<html>
	<body>
	<h2>这是一个自定义列表</h2>
		<dl>
			<dt>水果类</dt>
			<dd>苹果</dd>
			<dd>香蕉</dd>
			<dd>芒果</dd>
            <dt>蔬菜类</dt>
			<dd>白菜</dd>
			<dd>芹菜</dd>
			<dd>生菜</dd>
		</dl>
		
	</body>
</html>

运行效果：

html_065.png

从这个实例中看出，我们用<dl >标签对列表进行自定义，用<dt>标签定义列表项目，<dd>标签定义列表项目，但此项目会自动进行缩进处理。

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

评论

由 hrs, 13 十一月, 2019

HTML实例-064 HTML的有序列表

标签
HTML

这一节我们来学习有序列表，

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
	<style>
		p{
		color:red;
		}
	</style>
</head>
<html>
	<body>
	<h2>这是一个有序列表</h2>
	<p>默认有序列表</p>
		<ol>
			<li>苹果</li>
			<li>香蕉</li>
			<li>雪梨</li>
		</ol>
	<p>改变有序列表序号</p>
		<ol start="50">
			<li>苹果</li>
			<li>香蕉</li>
			<li>雪梨</li>
		</ol>
	
	</body>
</html>

运行效果：

html_064.png

从这个实例中看出，我们利用<ol>标签创建两个有序列表，默认输出是数字序号1、2、3，但我们可以改变它的序号，我们用start 属性来改变它的序号，在第二个列表中，我们使用了start="50",表示这个序号从50开始算起。

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

评论

由 hrs, 12 十一月, 2019

HTML实例-063 HTML的无序列表

标签
HTML

在编辑html网页的时候，经常会遇到文本列表，这一节我们就来学习html的列表输出。请看下面的实例

实例代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	
	<body>
		<h2>这是一个无序列表</h2>
		<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>橙子</li>
		</ul>
	</body>
</html>

 运行效果：

html_063.png

从这个实例中我们看出，我们用<ul>标签创建一个无序列表，<li>标签定义列表值。

<ul>标签：创建无序列表，默认以黑色小圆点输出。

<li>标签定义列表值

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

评论

由 hrs, 12 十一月, 2019

HTML实例-062 HTML的框架(frame)属性

标签
HTML

这一节我们学习如何对表格的边框进行控制，我们用框架属性frame 来进行定义，下面我们来做一下实例。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
	<style>
		p{
		color:red;
		}
	</style>
</head>

<html>
	<body>
		<h2>这是一个表格框架属性</h2>
		<p>全边框frame=box</p>
		<table frame="box">
			<tr>
				<td>全边框</td>
				<td>全边框</td>
			</tr>
			<tr>
			<td>全边框</td>
			<td>全边框</td>
		</tr>
		</table>
		<p>上边框frame=above</p>
		<table frame="above">
			<tr>
				<td>上边框</td>
				<td>上边框</td>
			</tr>
			<tr>
				<td>上边框</td>
				<td>上边框</td>
			</tr>
		</table>
		<p>下边框frame=below</p>
		<table frame="below">
			<tr>
				<td>下边框</td>
				<td>下边框</td>
			</tr>
			<tr>
				<td>下边框</td>
				<td>下边框</td>
			</tr>
		</table>
		<p>上下边框frame=hsides</p>
		<table frame="hsides">
			<tr>
				<td>上下边框</td>
				<td>上下边框</td>
			</tr>
			<tr>
				<td>上下边框</td>
				<td>上下边框</td>
			</tr>
		</table>
		<p>左右边框frame=vsides</p>
		<table frame="vsides">
			<tr>
				<td>左右边框</td>
				<td>左右边框</td>
			</tr>
			<tr>
				<td>左右边框</td>
				<td>左右边框</td>
			</tr>
		</table>
	</body>
<html>

运行效果：

html_062.png

从这个实例中看出，我们frame属性对表格的边框进行控制。

frame="box"    设置表格的全边框

frame="above"    设置表格的上边框

frame="below"     设置表格的下边框

frame="hsides"      设置表格的上下边框

frame="vsides"       设置表格的左右边框

表格标签

表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

评论

由 hrs, 12 十一月, 2019

HTML实例-061 html表格的对齐方式

标签
HTML

在我们编辑html网页的时候，需要对表格和文本进行对齐，这一节我们就来学习表格的对齐方式。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<style>
pre{
font-size:20px;
color:red;
}
</style>
</head>
<html>
<body>
<h2>这是一个表格的对齐方式实例</h2>
<table border="1" width="400">
<tr>
<th align="center">水果项目</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="center">苹果</td>
<td align="right">300kg</td>
<td align="right">258kg</td>
</tr>
<td align="center">香蕉</td>
<td align="right">480kg</td>
<td align="right">649kg</td>
</tr>
<td align="center">芒果</td>
<td align="right">461kg</td>
<td align="right">374kg</td>
</tr>
<th align="center">总计</th>
<th align="right">1161kg</th>
<th align="right">1361kg</th>
</tr>
</table>
<pre>
align="left"      左对齐
align="center"   居中对齐
align="right"    右对齐
</pre>
<body>
</html>

运行效果：

html_061.png

从这个实例中可以看出，我们对表格的数据进行对齐设置，水果项目为居中对齐，数量为右对齐。

表格的默认对齐方式：单元格标题为居中对齐，单元格文本为左对齐。

评论

由 hrs, 12 十一月, 2019

HTML实例-060 向表格单元添加背景颜色或者背景图像

标签
HTML

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h3>添加单元格颜色和图像</h3>
<table border="1" width="200px" height="100px">
<tr>
<td>背景颜色</td>
<td width="60%" align="center" bgcolor="red">红色</td>
</tr>
<tr>
<td>背景图像</td>
<td width="60%" align="center" background="img/sum.jpeg">图像</td>
</tr>
</table>
</body>
</html>

运行效果：

html_060.png

从这个实例中看出，我们对单元格进行背景颜色的设置和图像的设置，并且对单元格进行宽度的设置和文本的居中 。

border="值"   设置表格的边框

width="值"   设置表格的宽度

height="值"  设置表格的高度

align="方式"  设置表格的对齐方式。

评论

由 hrs, 12 十一月, 2019

HTML实例-059 html给表格添加背景颜色和图像

标签
HTML

在编辑html网页的时候，我们需要对表格进行美化，那我们如何来对表格进行背景颜色和图像的设置，这一节我们就来学习一下。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h2>这是一个为表格添加背景颜色和图像的实例</h2>
<p>添加背景颜色</p>
<table border="1" width="150" height="100" bgcolor="red" cellpadding="15">
<tr>
<td>背景</td>
<td>颜色</td>
</tr>
<tr>
<td>bgcolor</td>
<td>red</td>
</tr>
</table>
<p>添加背景图像</p>
<table border="1" width="150" height="100"
background="img/sum.jpeg"  cellpadding="15">
<tr>
<td>背景</td>
<td>图像</td>
</tr>
<tr>
<td>background</td>
<td>img/sum.jpeg</td>
</tr>
</table>
</body>
</html>

运行效果：

html_059.png

从这两个表格可以看出，第一表格我们为它的前景添加了红色，第二个表格我们为它的背景添加了图像。

bgcolor="颜色"    为表格设置背景颜色

background="路径"   为表格设置背景图像

cellpadding="值"    为表格设置边距

 

评论

HTML