阅读模式:

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

阅读量:11  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:博主的就业方向是JAVA后端开发嘛,虽然是后端,但是对于一些前端的知识还是要掌握的,所以博主接下来的一段时间要浅学一下 HTMl,CSS,JavaScript...... 楔子: 博主的就业方向是JAVA后端开发嘛,虽然是后端,但是......

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

楔子:

    博主的就业方向是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语法松散,不严格,如代码不区分大小写等。

分享到:
相关阅读:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: