2021-07-31 HTML代码

本文介绍了HTML的基础,包括HTML注释、基本标签、实体符号、表格的使用以及表格中的单元格合并和th标签。通过实例展示了如何创建网页标题、段落、字体样式以及表格布局,同时讲解了thead, tbody, tfoot在表格中的作用。
摘要由CSDN通过智能技术生成
  • 001-我的第一个HTML页面
<!--
	1.这是HTML的注释
	2.加上以下代码的第一行就表示HTML5语法,去掉就表示HMTL4.0
	3.HTML不区分大小写,语法松散不严格
-->
<!doctype html>

<!--根-->
<html>
		
	<!--头-->
	<head>
		<!--网页标题,显示在网页左上角-->
		<title>网页的标题</title>
	</head>
	<!--体-->
	<body>
		网页的主体内容,欢迎学习HTML!
	</body>
<!--
</HTML>
-->
</Html>
  • 002-HTML的基本标签
<!doctype html>
<html>
	<head>
		<title>HTML的基本标签</title>
	</head>
	<body>
		<!--段落标记-->	
		<p>HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
		</p><p>超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。</p>
		HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。
		
		<!--标题字:是HTML预留的格式,和word中的标题字相同-->
		<h1>标题字<h1>
		<h2>标题字<h2>
		<h3>标题字<h3>
		<h4>标题字<h4>
		<h5>标题字<h5>
		<h6>标题字<h6>

		<h3>标题字<h3>
		<!--换行标记,br标签是一个独目标记-->
		hello 
		world!
		hello <br>world!

		<!--横线,独目标记-->
		<hr>

		<!--color和width都是hr标签的属性-->
		<hr color = "blue" width = "60%">
		<!--语法太松散-->
		<hr color = 'green' width = 50%>
	
		<!--预留格式-->
		<pre>
			for(int i = 0;i<10;i++){
				System.out.println("i="+i);
			}
		</pre>
	
		<del>删除字</del>
		<ins>插入字</ins>
		<b>粗体字<b>
		<i>斜体字<i>

		10<sup>2</sup>

		10<sub>m</sub>
	
		<!--字体标签-->
		<font color = red size = 20 > 字体标签 </font>
	</body>
</html>
  • 003-HTML的实体符号
<!doctype html>
<html>
	<head>
		<title>实体符号</title>
	</head>
	<body>

		b<a>c
	
		<!--实体符号的特点是: 以&开始,以;结束 。&lt; 是小于号 &gt; 是大于号 -->
		b&lt;a&gt;c	
		

		abc     def<br>
		a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bc

	</body>
</html>
  • 004-HTML的表格
<!doctype html>
<html>
	<head>
		<title>表格</title>
	</head>
	<body>
		
	<br><br><br><br>
	<center><h1>员工信息</h1></center>
	<hr>
	<!--
		border = "1px" 设置表格的边框为1像素宽度
		width 宽度
		height 高度
	-->
	<!--
	<table border = "1px" width = "300px" >
	-->
	<table align = "center" border = "1px" width = "60%px" height ="150px" >
		<!--algin对齐方式-->
		<tr align = "center">
			<td>a</td>
			<td>b</td>
			<td>c</td>
		</tr>
		<tr>
			<td>d</td>
			<td>e</td>
			<td>f</td>
		</tr>
		<tr>
			<td>x</td>
			<td>y</td>
			<td align = "center">z</td>
		</tr>
	</table>

	<body>
</html>
  • 005-HTML的表格-单元格的合并以及th标签
<!doctype html>
<html>
	<head>
		<title>表格单元格合并,以及th标签</title>
	</head>
	<body>
		<!--注意事项:
			1.row合并的时候,删除“下面的”单元格
			2.col合并的时候,对删除哪个没有要求。
		-->
		<table border = "1px" width = "50%">
			<tr>
				<!--
				<td>员工编号</td>
				<td>员工薪资</td>
				<td>部门名称</td>
				-->
				<!--th标签也是单元格标签,比td多的是居中、加粗-->
				<th>员工编号</th>
				<th>员工薪资</th>
				<th>部门名称</th>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>a</td>
				<td>b</td>
				<td rowspan = "2">f</td>
			</tr>
			<tr>
				<td colspan = "2">d</td>
				<!--<td>e</td>
				<td>f</td>
				-->
			</tr>

		</table>
	</body>
</html>
  • 006-HTML的表格-thead tbody tfoot
<!doctype html>
<html>
	<head>
		<title>thead tbody tfoot 在table中不是必须的,只是这样做便于后期的JS代码的编写</title>
	</head>
	<body>

		<table border = "1px" width = "50%">
			<!--头-->
			<thead>
				<tr>
					<th>员工编号</th>
					<th>员工薪资</th>
					<th>部门名称</th>
				</tr>
			</thead>

			<!--体-->
			<tbody>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr>
					<td>a</td>
					<td>b</td>
					<td rowspan = "2">f</td>
				</tr>
				<tr>
					<td colspan = "2">d</td>
				</tr>
			</tbody>
			
			<!--脚-->
			<tfoot>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>ss
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值