HTML入门基础（2）

最新推荐文章于 2024-09-11 14:09:02 发布

梦在脚下学海无涯

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量218

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/pythonsnail/article/details/107246624

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一，表格

1. 使用表格的一般公式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
</head>
<body>

<!-- table定义表格 -->
<table border="1"> 
	<!-- tr定义表格的行 -->

    <tr>
    	<!-- th定义行内单元的 -->
        <th>第一列的表头</th>
        <th>第二列的表头</th>
    </tr>
    <tr>
        <td>（1,1）的内容</td>
        <td>（1,2）的内容</td>
    </tr>
    <tr>
        <td>（2,1）的内容</td>
        <td>（2,2）的内容</td>
    </tr>
</table>
	
</body>
</html>

在这里插入图片描述

2. 表格标签

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

Table的属性

可选的属性

属性	值	描述

align

left
center
right

不赞成使用。请使用样式代替。

规定表格相对周围元素的对齐方式。

bgcolor

rgb(x,x,x)
#xxxxxx
colorname

不赞成使用。请使用样式代替。

规定表格的背景颜色。

border pixels 规定表格边框的宽度。 cellpadding

pixels
%

规定单元边沿与其内容之间的空白。 cellspacing

pixels
%

规定单元格之间的空白。 frame

void
above
below
hsides
lhs
rhs
vsides
box
border

规定外侧边框的哪个部分是可见的。 rules

none
groups
rows
cols
all

规定内侧边框的哪个部分是可见的。 summary text 规定表格的摘要。 width

%
pixels

规定表格的宽度。

html表格跨行跨列

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<!-- 跨列 -->
	<table border="1" cellspacing="0">
<th>姓名</th>
<th colspan="2" >手机号</th>

	<tr>
		<td>小米</td>
		<td>45666</td>
		<td>22666</td>
	</tr>
	


	</table>


<!-- 跨行 -->
		<table border="1" cellspacing="0">


	<tr>
	<th>姓名</th>
		<td>小米</td>
	
	</tr>
	
	<tr>
    <th rowspan="2" >手机号</th>
		<td>45666</td>
	</tr>
	<tr>
		<td>22666</td>
	</tr>

	</table>

</body>
</html>

单元格内的嵌套

在这里插入图片描述
代码参考：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格的嵌套</title>
</head>
<body>
<table border="1" cellspacing="0" >
<th>
	<tr>
		<td>
		<p>可以在单元格内嵌套段落</p>
		<p>这是两个段落</p>


		</td>
		<td>
		<p>可以在单元格内嵌套表格</p>
		<table border="1" cellspacing="0">
	<tr>
		<td>你们看</td>
		<td>你们看</td>
	</tr>
	<tr>
		<td>你们看</td>
		<td>你们看</td>
	</tr>
</table>

		</td>
	</tr>

	<tr>
		<td>
		<p>可以在单元格内嵌套列表</p>
		 <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>

		</td>
		<td>bey</td>
	</tr>
</th>


</table>
	



</body>
</html>

二，列表

HTML列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述

有序列表

ol标签的属性

compact compact
HTML5 中不支持。HTML 4.01 中不赞成使用。

规定列表呈现的效果比正常情况更小巧。
一般实现的效果图：
reversed reversed 规定列表顺序为降序。(9,8,7…)
start number 规定有序列表的起始值。
type
1
A
a
I
i
规定在列表中使用的标记类型。
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表</title>
</head>
<body>
<h1>阿拉伯数字(start)</h1>
<ol type="1"  start="3">
	<li>咖啡</li>
	<li>咖啡</li>
	<li>咖啡</li>
</ol>
<h1>大写英文字母 (reversed)</h1>
<ol type="A" reversed="reversed">
	<li>可乐</li>
	<li>可乐</li>
	<li>可乐</li>
</ol>
<h1>小写英文字母</h1>
<ol type="a" >
	<li>学碧</li>
	<li>学碧</li>
	<li>学碧</li>
</ol>
<h1>小写罗马数字列表</h1>
<ol type="i" compact="compact">
	<li>橙汁</li>
	<li>橙汁</li>
	<li>橙汁</li>
</ol>
<h1>大写罗马数字列表</h1>
<ol type="I">
	<li>橙汁</li>
	<li>橙汁</li>
	<li>橙汁</li>
</ol>

	
</body>
</html>

无序列表

无序列表的属性

compact compact
不赞成使用。请使用样式取代它。

规定列表呈现的效果比正常情况更小巧。

type
disc
square
circle
不赞成使用。请使用样式取代它。

规定列表的项目符号的类型。

效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无序列表</title>
</head>
<body>
<ul type="square">
	<li>中表</li>
	<li>中表</li>
	<li>中表</li>
</ul>
<ul type="circle">
	<li>余光小偷</li>
	<li>余光小偷</li>
	<li>余光小偷</li>
</ul>
<ul type="disc">
	<li>小偷</li>
	<li>小偷</li>
	<li>小偷</li>
</ul>
	
</body>
</html>

自定义列表

标签解释

dl自定义列表
dt自定义列表项
dd对自定义列表项的描述

效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义列表</title>
</head>
<body>
<dl>
	<dt>物联网</dt>
	<dd>物联网（The Internet of Things，简称IOT）是指通过 各种信息传感器、射频识别技术……</dd>
	<dt>计算机</dt>
	<dd>计算机专业是指计算机硬件与软件相结合、面向系统、更偏向应用的宽口径专业……</dd>
	<dt>图灵</dt>
	<dd>计算机科学之父……</dd>
</dl>
	
</body>
</html>

列表的嵌套

实现效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表的嵌套</title>
</head>
<body>
<ul>
	<li>茶</li>
		<dl>
			<dt>中国的古老饮品</dt>
		</dl>
		<ol type="I">
			<li>红茶</li>
			<li>绿茶</li>
		</ol>
	<li>可乐</li>
	    <dl>
			<dt>外国的新式饮品含有咖啡因</dt>
		</dl>
	<li>雪碧</li>
	 	<dl>
			<dt>外国的新式饮品2柠檬制作</dt>
		</dl>
</ul>
	
</body>
</html>