楔子:

    博主的就业方向是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 width="50%" />
<!--保留文本格式-->
<pre>
*
***
*****
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>右上角标签</sup>
10<sub>右下角标签</sub>
<font 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语法松散,不严格,如代码不区分大小写等。

文章来源:博客园:https://www.cnblogs.com

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注