HTML表格

最新推荐文章于 2021-03-13 10:13:12 发布

Numb-Nanboo

最新推荐文章于 2021-03-13 10:13:12 发布

阅读量103

点赞数 1

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

本文链接：https://blog.csdn.net/xinanbo/article/details/112969227

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我们在浏览网页的时候经常可以看到很多的表格，那么网页上的表格是怎么制作的呢？本篇文章讲述了HTML的常用标签和表格的制作方法。

1.基础概念：

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2.标签与元素

2.1.常见标签

(1)标签大多数是成对出现的，如：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>
			html:超文本标记语言<br/>
			*用来设计网页的标记语言<br/>
			*由浏览器解释执行<br/>
		</p>
		<h1>
			这是大标题
		</h1>
		<h6>
			这是最小标题
		</h6>
		<center>
			<hr>
			<h1>不干了，回老家养猪!!!<br/>最后三天大甩卖!!!</h1>
			<h2>原价:<em><s>299</s></em></h2>
			<h2>现价:<em>99</em></h2>
			<hr>
			<img src="img/祈祷.jpg" alt=""width="500"height="300">
			<img src="img/小喵.jpg" alt=""width="500"height="300">
			<hr>
			<h3>a超链接</h3>
			<!--_self自身打开-->
			<a href="index.html"target="_self">
				<img src="img/祈祷.jpg" alt=""width="300"height="175">
			</a>
			<hr>
			<!--_blank新窗口打开-->
			<a href="index.html"target="_blank">
				<img src="img/祈祷.jpg" alt=""width="300"height="175">
			</a>
			<hr>
			<font size="" color="aqua">我是什么颜色？</font>
			<ins>底部文字</ins>
			<hr>	
		</center>
	</body>
</html>

代码中我们可以看到总是成对的出现如<html></html>的标签，也有例外，如<hr>是分割线，没有必要写结束标签，逻辑上不通。在W3C标准里应该写成<hr/>。/代表结束。一些不需要在中间写数值的也可以用/代替，如<img/>。就像之前提到的，也可以不写/。在一些情况下是没有影响的。

（2）常见标签的含义

<html>包含着HTML代码所有内容，里面包含头<head>和身体<body>；
<title>是定义网页名称的；
<a>是超链接，不能自动换行；
<p>是program，代表段落，可以自动换行的，是外联元素（下面会讲到内联外联）；
<h1>到<h6>是一级标题到六级标题，共有6级；
<center>是居中；
<pre>是预处理格式，输入什么格式就会显示什么格式，比如回车，空格数量等；
....

2.2.标签和元素

严格来讲，标签指的是<h1>这样的单独一个，元素指的是<h1>一级大标题</h1>这样整个包含的所有内容。

3.元素的属性

属性为 HTML 元素提供附加信息。是用来描述元素的特征的。

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
在这里列举了常用属性https://www.w3school.com.cn/tags/att_standard_class.asp

4.表格

4.1.基础使用

表格是用<table>定义的，<tr>代表行<td>代表列，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>演示表格</title>
	</head>
	<body>
		<center>
			<table border="1px" width="300px" height="200px" cellspacing="0" cellpadding="">
				<tr>
					<td align="center">姓名</td>
					<td align="center">职业</td>
					<td align="center"bgcolor="aqua">爱好</td>
				</tr>
				<tr>
					<td align="center">蔡徐坤</td>
					<td align="center">运动员</td>
					<td align="center">唱跳rap篮球</td>
				</tr>
				<tr>
					<td align="center">窃格瓦拉</td>
					<td align="center">小偷</td>
					<td align="center">偷电瓶</td>
				</tr>
			</table>
			<hr>
		</center>
	</body>
</html>

显示结果如下：

4.2.对列表进行操作：

colspan 列合并 rowspan 行合并，属性值是合并的数量。

<table border="1px" width="200px" height="200px" cellspacing="2" cellpadding="" style="background: url(img/祈祷.jpg);">
	<tr>
		<td align="center" colspan="2" bgcolor="chartreuse"></td>
		<td align="center" rowspan="2" bgcolor="aqua"></td>
	</tr>

	<tr>
		<td align="center" rowspan="2" bgcolor="bisque"></td>
		<td align="center" rowspan="1" bgcolor="blue"></td>
	</tr>

	<tr>
		<td align="center" colspan="2" bgcolor="chartreuse"></td>
	</tr>
</table>

运行结果如下：

5.思考一下

怎么做一个表格简历呢？下次写

Numb-Nanboo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表格

我们在浏览网页的时候经常可以看到很多的表格，那么网页上的表格是怎么制作的呢？本篇文章讲述了HTML的常用标签和表格的制作方法。1.基础概念：HTML 指的是超文本标记语言 (HyperTextMarkupLanguage) HTML 不是一种编程语言，而是一种标记语言(markup language) 标记语言是一套标记标签(markup tag) HTML 使用标记标签来描述网页...
复制链接

扫一扫