HTML文档结构、链接、表格

小脑斧123

于 2020-06-20 21:23:07 发布

阅读量137

点赞数

分类专栏： Pyhon高级

本文链接：https://blog.csdn.net/weixin_42219287/article/details/106820343

版权

Pyhon高级专栏收录该内容

75 篇文章 0 订阅

订阅专栏

HTML5文档结构

<!DOCTYPE html>	 <!--html文档声明-->
<html lang="zh-CN">  <!--网页语言为中文，lang="en"是英文-->
<head>
	<meta charset="utf-8">
	<title>个人主页</title>
</head>

<body>
	
	你好！欢迎访问我的个人网页！

</body>


</html>

html链接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>链接跳转</title>
</head>
<body>
	<h1>网页一的标题</h1>
	<a href="001html文档结构.html">前往网页001</a>
	<a href="http://www.itcast.cn" title="前往传智播客网站..." target="_blank"><img src="images/传智播客.png" alt="传智播客logo"></a>
	<!--_self： 默认替换自己，不新建窗口-->
	<!--_blank: 新建一个窗口-->


	<a href="#">这是一个缺省链接</a> <!--链接到界面顶部-->


	<!--有序列表，快捷键ol>li*4-->
	<ol>
		<li>html</li>
		<li>css</li>
		<li>js</li>
		<li>C++</li>
		<li>python</li>
	</ol>


	<!--无序列表，快捷键ul>(li>a{新闻标题})*5-->
	<ul>
		<li><a href="#">新闻标题一</a></li>
		<li><a href="#">新闻标题二</a></li>
		<li><a href="#">新闻标题三</a></li>
		<li><a href="#">新闻标题四</a></li>
		<li><a href="#">新闻标题五</a></li>
	</ul>


	<!--定义列表，快捷键dl>(dt+dd)*3-->
	<dl>
		<dt>html</dt>
		<dd>负责页面的结构</dd>
		<dt>css</dt>
		<dd>负责页面的表现</dd>
		<dt>javascript</dt>
		<dd>负责页面的行为</dd>

	</dl>

</body>
</html>

html表格

<!DOCTYPE html>
<html>
<head>
	<title>html表格</title>
</head>
<body>
	<h1>表格</h1>
	<!--边框，宽，高-->
	<table border="1" width="300" height="200" align="center">
		<!--tr代表一行-->
		<tr>
			<th>1</th><!--用作表头格子(加粗居中)-->
			<th>2</th>
			<th>3</th>
		</tr>

		<tr>
			<td>1</td><!--用作普通格子(靠左)-->
			<td>2</td>
			<td>3</td>
		</tr>

		<!--水平对齐方式align(left|right|center)-->
		<tr>
			<td align="center">1</td>
			<td align="center">2</td>
			<td align="center">3</td>
		</tr>

		<!--垂直对齐方式valign(top|middle|bottom)-->
		<tr>
			<td align="right" valign="top">1</td>
			<td align="right" valign="middle">2</td>
			<td align="right" valign="bottom">3</td>
		</tr>

	</table>
	<br/>
	<br/>

	<!--table>(tr>td*5)*6-->
	<!--单元格水平合并colspan-->
	<table border="1" width="300" height="200" align="center">
		<tr>
			<td colspan="5">基本情况</td>
		</tr>
		<!--单元格垂直合并rowspan-->
		<tr>
			<td width="25%" >1</td>
			<td width="15%">2</td>
			<td width="25%">3</td>
			<td width="15%">4</td>
			<td width="20%" rowspan="5"><img src="images/003.jpg" alt="人物图片"></td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>

		</tr>
	</table>

</body>
</html>