【HTML】笔记(1)— HTML的基本标签,实体符号,表格(单元格合并等)

  • A+
所属分类:Web前端
摘要

楔子:     博主的就业方向是JAVA后端开发嘛,虽然是后端,但是对于一些前端的知识还是要掌握的,所以博主接下来的一段时间要浅学一下 HTMl,CSS,JavaScript,但小生心系后端,所以笔记的话可能会记得”粗糙”一些(手动狗头)。

楔子:

    博主的就业方向是JAVA后端开发嘛,虽然是后端,但是对于一些前端的知识还是要掌握的,所以博主接下来的一段时间要浅学一下 HTMl,CSS,JavaScript,但小生心系后端,所以笔记的话可能会记得"粗糙"一些(手动狗头)。

 

1、HTML基本标签:

代码:

<!--加上以下标志代表HTML5的语法,没有标志就代表是HTML4的语法--> <!DOCTYPE html>  <!--根--> <html> 	 	<head> 		 		<!--网页标题,显示在网页左上角--> 		<title>HTML的基本标签</title> 	 	</head> 	 	<!--网页的主体内容--> 	<body>		 		 		<!--段落标签--> 		<p>			 			待到秋来九月八,我花开后百花杀。 			冲天香阵透长安,满城尽带黄金甲。 		</p> 		 		<!--六个不同尺码的标题字--> 		<h1>标题字</h1> 		<h2>标题字</h2> 		<h3>标题字</h3> 		<h4>标题字</h4> 		<h5>标题字</h5> 		<h6>标题字</h6> 		 		<!--换行标记--> 		第一行 		<br /> 		第二行 		<br /> 		 		<!--横线标记--> 		<hr /> 		<!--还可以设置颜色,长度,50%代表着横线始终占页面的宽度的50%--> 		<hr color="green" width="50%" /> 		 		<!--保留文本格式--> 		<pre> 			   *    			  *** 			 ***** 		</pre> 		 		<del>删除字</del> 		<ins>插入字</ins> 		<b>粗体字</b> 		<i>斜体字</i> 		 		10<sup>右上角标签</sup> 		10<sub>右下角标签</sub> 		 		<font color="red" size="50">字体标签</font> 		 	</body> </html>

 

代码效果(火狐浏览器):

【HTML】笔记(1)--- HTML的基本标签,实体符号,表格(单元格合并等)

 

2、HTMl实体符号:

实体符号有很多,java后端开发常用的基本只有以下三个(空格/小于号/大于号)

【HTML】笔记(1)--- HTML的基本标签,实体符号,表格(单元格合并等)

 

3、表格:

代码:

<!DOCTYPE html> <html> 	<head> 		<title>表格</title> 	</head> 	<body> 		 		<!-- 			表格尺寸: 				表格边框为1像素,宽度为页面的50%,高度为150像素 		--> 		 		<!--此处的 align="center" 会使整个表格居中--> 		<table align="center" border="1px" width="50%" height="150px"> 			<!--使第此行的每一列的内容居中--> 			<tr align="center"> 				<td>1.1</td> 				<td>1.2</td> 				<td>1.3</td> 			</tr> 			<tr> 				<td>2.1</td> 				<!--使第此行的每二列的内容居中--> 				<td align="center">2.2</td> 				<td>2.3</td> 			</tr> 			<tr> 				<td>3.1</td> 				<td>3.2</td> 				<td>3.3</td> 			</tr> 		</table> 		 		<br /><br /><br /> 		 		<!--单元格合并问题-->         <!--将6与9对应的单元格合并,再将7,8对应的单元格合并--> 		<table border="1px" width="35%" height="25%" > 			<tr> 				<td>1</td> 				<td>2</td> 				<td>3</td> 			</tr> 			 			<tr> 				<td>4</td> 				<td>5</td> 				<td rowspan="2">合并格内容</td>  <!--原来的6单元格对应的代码--> 			</tr> 			 			<tr> 				<!--原来的7单元格对应的代码--> 				<!--   					col合并的时候,删除哪个单元格没有要求 					将7对应的单元格删除(注释掉):  <td>7</td>    				 --> 				 				<td colspan="2">合并格内容</td>  <!--原来的8单元格对应的代码--> 				 				<!--原来的9单元格对应的代码--> 				<!--   					row合并的时候,删除下面的单元格 					将9对应的单元格删除(注释掉): <td>9</td>     				--> 			</tr> 		</table> 		 		<br /><br /><br /> 		 		<!--th标签--> 		<table border="1px" width="50%" height="150px"> 			<tr > 				<!--th标签也是单元格标签,比td多的是居中加粗--> 				<th>员工编号</th> 				<th>员工薪资</th> 				<th>部门名称</th> 			</tr> 			 			<tr> 				<td>2.1</td> 				<td >2.2</td> 				<td>2.3</td> 			</tr> 			 			<tr> 				<td>3.1</td> 				<td>3.2</td> 				<td>3.3</td> 			</tr> 		</table> 		 		<br /><br /><br /> 		 		<!--thead,tbody,tfoot 在table中不是必须的,只是这样做便于后期JS代码的编写,但在浏览器的展示效果上是没有任何影响的--> 		<table border="1px" width="50%" height="150px"> 			<thead> 			<tr > 				<th>员工编号</th> 				<th>员工薪资</th> 				<th>部门名称</th> 			</tr> 			</thead> 			 			<tbody> 			<tr> 				<td>2.1</td> 				<td >2.2</td> 				<td>2.3</td> 			</tr> 			</tbody> 			 			<tfoot> 			<tr> 				<td>3.1</td> 				<td>3.2</td> 				<td>3.3</td> 			</tr> 			</tfoot> 		</table> 	</body> </html>

 

代码效果(火狐浏览器):

【HTML】笔记(1)--- HTML的基本标签,实体符号,表格(单元格合并等)

 

随笔:

HTML语法松散,不严格,如代码不区分大小写等。