2021-10-18

最新推荐文章于 2025-12-15 16:57:23 发布

原创最新推荐文章于 2025-12-15 16:57:23 发布 · 5.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

小白成长记专栏收录该内容

10 篇文章

订阅专栏

今天主要学习了一些前端的东西，初步了解了前端是干什么的，学习了几个标签，发现做前端挺需要耐心的。像下面这个表格，纯HTML写下来，需要不断调试观察，最后得到还不错的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Insert title here</title>
	</head>
	
	<body>
		
		<table border="3px" width="1000px" align="center" cellspacing="0"  bgcolor="aqua">
			<tr>
				<th align="center" colspan="12">员工请假单</th>
			</tr>
			<tr>
				<td colspan="3" align="center">姓名</td>
				<td colspan="3">&nbsp;&nbsp;&nbsp;</td>
				<td align="center">部门</td>
				<td colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<td align="center">工号</td>
				<td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td colspan="3" align="center">职位</td>
				<td colspan="4">&nbsp;&nbsp;&nbsp;</td>
				<td colspan="3" align="center">申请时间</td>
				<td colspan="4">&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td colspan="3" align="center">请假时间（天数）</td>
				<td colspan="9" align="center">从&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时到&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;时，共&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时</td>
			</tr>
			<tr>
				<td colspan="3" align="center">代理人</td>
				<td colspan="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<td colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<td colspan="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td colspan="3" align="center">工作交接事项或NO</td>
				<td colspan="9">&nbsp;</td>
			</tr>
			<tr>
				<td rowspan="3" colspan="3" align="center" height="50xp">事由</td>
				<td rowspan="3" colspan="9" height="50xp">&nbsp;</td>
			</tr>
			<tr></tr>
			<tr></tr>
			<tr>
				<td colspan="12" align="center">申请人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				代理人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				单位主管：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				核准：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</td>	
			</tr>
		</table>
	</body>
</html>

测试运行结果：

学习HTML有一个比较好的网站：w3school 在线教程 w3school 在线教程https://www.w3school.com.cn/

里面有各种标签的功能介绍，想要自学的可以看看。

HTML 是用来描述网页的一种语言，通过各种标签将信息展示给用户。个人感觉上手挺快的，但是东西有点多。好在现在有好多好用的开发工具。

主流工具有VSCode，还是有个国内的HBuilder，后者稍微小众一点，两个都是免费的，可以去官网下载，今天试了试挺好用的。

HTML的文件语法比较简单，就是各种标签嵌套，主体是下面这么个结构：

<html><!--html标签是页面的根标签，标签有开标签，闭标签。在开闭标签之间写要展示的内容-->
<head><!--头标签，写一些配置信息：页面标签，编码格式，搜索词，引入资源-->
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!--身体标签，展示在浏览器上的内容-->

</body>
</html>

然后就主要是记标签，搭配组合就好了。当然这只是初级入门的时候，属于基本功吧，先学会这些，再继续后面的学习。