前端学习之HTML篇
标签： 前端学习之HTML篇 Html/CSS博客 51CTO博客
2023-07-17 18:24:09 114浏览
虽然之前讲解的内容基本上都是关于后端方面的内容，但由于现在的企业级项目大多都使用前后台分离的模式开发，需要相互整合，这就要求后端开发人员对前端的基本知识具有一定的了解，方便在共同开发中协调和沟通，所以了解一部分的前端知识也是必要的。
前端基础主要有html、css、javascript这三大件，本次主要介绍网页骨架相关的技术html,html技术就像是修建房屋过程中的毛坯房，只有基本的房屋内容架构，并无其他任何装饰。由于html中包含的东西多而杂，因此使用以点概面的方式——通过一个案例来讲解html的主要设计的内容。
本次要实现的页面效果如图：
代码开发工具使用的是HBuilder（也可使用VsCode等开发工具），页面内容主要由各种输入框和图片构成，下面将讲解一比一实现思路：整个外部边框及内容空间由表格标签table构成，在table标签中把对齐方式设置为居中对齐--center,并把整个表格分为一行两列，使用tr和td标签，并给td标签设置长宽，左边的设为宽500px,长600px;右边的td设置为宽300px,长600px，这样设置两个单元格就等高。
放置内容的外部区域已经搭建完毕，再把左边的内容看成一个整体，使用form表单标签进行包裹，第一行文字有字体加粗的效果，使用段落p标签包裹字体加粗strong标签即可实现。第二行注册邮箱使用文字加上input标签，把input标签中的type设置成text即设置该输入框为文本输入框，第三行文字有超链接的标识，使用a标签包裹对应变色的文字即可。第四、五行的创建密码和真实姓名同注册邮箱一样，只需要把创建密码对应的把input标签中的type设置成password。
第六行性别选择，由于常规默认一个人的性别只有一种，所以这里使用input标签中的单选，把input标签中的type设置成radio,并把男和女两个input标签里的name设置为一样的名称（为了实现单向选择）。
第七行生日使用标签select下拉列表框，在select标签中使用option标签设置下拉列表中的内容，如图中的年月日，第八行的我现在的状态实现也是如此。
第九行使用img标签导入本地的一张图片，在img标签的src属性中设置你图片的路径，图片后的文字使用a标签修饰，第十行验证码同注册邮箱实现方法相同，最后一行再使用img导入一张图片即可。
到此左边地效果以完成，右边的实现同左边的基本一致，使用strong标签加粗字体，使用img标签导入图片，并把图片对齐设置为居中对齐即可。
HTML的案例简述到此结束，对于网页的设计更多的是对设计实现思路的揣摩，思路越清晰，实现最终的效果越快，多思考，多练习，不同的思路实现起来虽不同，但只要能达到最终的效果都是OK的，切记不要生搬硬套。
参考源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/logo.gif"/><strong>10秒找到你所有朋友</strong>
<p align="right">已有人人网账号，<a href="#">登录 </a></p>
<table border="" cellspacing="" cellpadding="" align="center">
<tr>
<td width="500" height="600" >
<form action="" method="post">
<p><strong>免费开通人人网账号</strong></p>
注册邮箱：<input type="text" maxlength="30" />
<p align="center">你还可以使用 <a href="#">账号</a> 注册或者 <a href="#">手机号 </a> 注册</p>
创建密码：<input type="password" maxlength="30" /><br />
<br />
真实姓名：<input type="text" maxlength="30" /><br />
<br />
性别：<input type="radio" id="man" name="sex" />
<label for="man" >男</label>
<input type="radio" id="woman" name="sex" />
<label for="woman" >女</label><br />
<br />
生日：<select >
<option>1990</option>
<option>1991</option>
<option>1992</option>
</select>年
<select>
<option>12</option>
<option>11</option>
<option>10</option>
</select>月
<select>
<option>31</option>
<option>30</option>
<option>29</option>
</select>日 <br/>
<br />
我现在：<select>
<option>正在上学 </option>
<option>已毕业</option>
</select><br/>
<br />
<img src="img/verycode.gif" align="center"/><a href="#">看不清换一张？ </a><br />
<br />
验证码：<input type="text" maxlength="20"/><br />
<br />
<img src="img/btn_reg.gif" align="center"/>
</form>
</td>
<td width="300" height="600">
<p align="" ><strong>最热门公共主页 </strong></p><br>
<img align="" src="img/icon_zhaowei.gif"/>
<img align="" src="img/icon_likaifu.gif"/>
<img align="" src="img/icon_shangjie.gif"/>
<p> 赵薇 李开复 商界</p>
<br>
<p align=""><strong>最热门游戏 </strong></p>
<img align="center" src="img/icon_xxzz.gif"/>
<img align="center" src="img/icon_rrnc.gif"/>
<p> 小小战争 人人农场</p>
</td>
</tr>
</table>
</body>
</html>
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
展开评论
您可能感兴趣的博客
