HTML 入门学习_html bgc-staff-CSDN博客

本文链接：https://blog.csdn.net/qq_61718994/article/details/120589762

学习内容：

表格，页面背景颜色和图片，超链接

学习内容：

表格：

<tr></tr>表示行

<td></td>表示列

<th></th>表示列，<th></th>可以代替<td></td>，<th>单元表格会自动加粗，自动居中

<!DOCTYPE html>
		<meta charset="utf-8">
<html>
<head>
<title>my first html page</title>
<head>
<body>
<font color=red size =6>这是我的第一个HTML！</font>
<br>
<table border="1px"width="45%"height="150px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>178</td>
</tr>
<tr>
	<td>李四</td>
    <td>17</td>
	<td>183</td>
</tr>
<tr>
	<td>王五</td>
	<td>19</td>
	<td>167</td>
	</tr>
<hr>
</table>
</body>
</html>

表格单元合并：

rowspan表示行合并

colspan表示列合并

<!DOCTYPE html>
<meta charset="utf-8">
<html>
	<head>
		<title>my first html page</title>
		<head>
		<body>
			<font color=red size=6>这是我的第一个HTML！</font>
			<br>
			<table width="40%" border="1">
				<tr>
					<td>1</td>
					<td colspan="2">xy</td><!-- colspan表示列合并 2表示两个-->
					<!--<td>y</td>-->
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td rowspan="2">mn</td><!-- rowspan表示行合并 2表示两个-->
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<!--<td>n</td>-->
				</tr>
			</table>
		</body>
</html>

thead ,tbody,tfoot可以把一个table分成三部分；这个语法是为了方便Javascript操作表格

页面背景颜色和背景:

bgclor表示背景颜色；

background表示背景图案

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- body中的bgclor属性指定背景颜色 -->
	 <body bgcolor="goldenrod"> 
	 我的HTML！
	<!-- body中的background指定背景图片 -->
      <!-- <body background="images/dyzh.jpg"> -->
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- body中的bgclor属性指定背景颜色 -->
	<!-- <body bgcolor="goldenrod"> 
	 我的HTML！ -->
	<!-- body中的background指定背景图片 -->
      <body background="images/dyzh.jpg">
	</body>
</html>

超链接：

属性 href表示：hot references 用来指定连接路径

语法：

链路路径可以是一个网络中的路径。也可以是一个本地的路径；

超链接特点：鼠标停留在超链接上自动变成小手，超链接自动添加下划线

超链接中的属性：

target属性：用来设置最终打开窗口的位置

target "_blank":新窗口

target "_self":当前窗口

target "_parent“：当前窗口的父窗口

target "_top":当前窗口的顶级窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="http://map.baidu.com">
			<img src="images/bd.jpg"width="200px" title="点我跳转到百度地图!"/>
			</a>
			<br>
		<a href="https://translate.google.cn/"target="_self">谷歌翻译(当前窗口)</a>
		<br>
		<a href="http://www.baidu.com"target="_blank">百度(新窗口)</a>
		<br>
		<a href="http://www.baidu.com"target="_parent">百度(当前窗口的父窗口)</a>
		<br>
		<a href="http://www.baidu.com"target="_top">百度(当前窗口的顶级窗口)</a>
		<br>
		<iframe src="http://map.baidu.com"></iframe><!-- 一个窗口的内部窗口 -->
	</body>
</html>