ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-01-14 01:31:07  阅读:158  来源: 互联网

标签:标签 代码 单元格 标题 --- HTML 3.2 3.3


楔子:

    博主的就业方向是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>

 

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

 

2、HTMl实体符号:

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

 

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语法松散,不严格,如代码不区分大小写等。

 

标签:标签,代码,单元格,标题,---,HTML,3.2,3.3
来源: https://www.cnblogs.com/Burning-youth/p/15800331.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有