java web基础知识--HTML标签INPUT标签表单的基础知识

技术2022-07-31 73

java web基础知识

HTML基础

什么是HTML：它被称为超文本标记语言，用它编写可以被浏览器解释的文件，文件格式是.html/.htm。组成：它由主要的三部分组成： < html >用来表示HTML文件的最前端， < /html >表示HTML文件的结束，必须成对出现，一对的大小写可以不一样。< head > < /head>，这对构成的是HTML文件的头部部分，他俩之间的内容不会出现在浏览器的内容部分。一般在 < head > < /head>之间可以使用< title > < /title>和< script> < /script>，这些都是描述HTML文件相关信息的标记对。< body> < /body>，这是HTML的主体部分，里面的内容就是浏览器显示的内容，里面有好多标记，可以对浏览器显示的内容进行美化。标记标记名使用方法META位于head和title之间，提供给用户不可见的信息。meta标记的用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie;可以用于来鉴别作者，设置页面格式，标注内容提要和一些关键字，还可以设置页面的自动刷新以及等级等等。创建时提供的在中，title之间的内容是出现在浏览器条框中，作为网页的主题出现。< br/>和换行标记< p >强制分段标记空格标记< center>< /center>< center> 置中内容< /center>< h1>< /h1>标题标记，

标题内容内容

< font>< /font>字体标记，还有属性size1-7字体大小，color 字体颜色。face：字体加粗/斜体/加底线加粗，斜体，底线< kbd>< /kbd>< kbd> 粗体等宽字体显示文字< var>< /var>< var>用较小的固定宽度显示字体< s>< /s>删除线

背景标记：

标记功能< body bgcolor=“red”>改变背景颜色font size=“4” face=“黑体” color=“red”改变字体，颜色，和大小，< body background=“bg.jpg”>添加背景图片< hr>分割线，两部分用线分割开

图片标记：

标记功能<img src=“boy.jpg” alt=“haha” align=“left” border="0“ height=“56px” width=“32px”>图片的插入标签

列表：

标签功能< ul>无序列表< ol>有序列表< dl>自定义列表

表格标签：代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简历</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0" align="center" height="920px" width="740px" bgcolor="E4E3DF"> <tr> <td> <table border="0" cellspacing="0" cellpadding="3" align="center" height="900px" width="700px" bgcolor="E4E3DF"> <tr height="40px" bgcolor="white"> <td colspan="3"></td> </tr> <tr height="50px"> <td colspan="3"></td> </tr> <tr height="175px"> <td width="470px" bgcolor="white"> <table border="0" cellspacing="0" cellpadding="2" height="100%" width="100%" bgcolor="white"> <tr align="left"> <td> <h3>自我评价</h3> </td> </tr> <tr> <td> 性格开朗，责任心强，善于组织、协调和沟通，能良好地与团队合作；有丰富的实践经验，肯吃苦，适应力强，吸收新知识快，勇于迎接新挑战。自信，乐观，沉着，责任心强，有上进心，较强的团队合作和沟通能力，较强的抗压能力和学习能力。平时喜欢去图书馆浏览各种书籍以扩大视野，提高修养。</td> </tr> </table> </td> <td width="10px" rowspan="3"></td> <td width="220px" align="center"><img src="img/简历照片.jpg" width="90%" height="95%"></td> </tr> <tr height="15px"> <td></td> <td></td> </tr> <tr height="620px"> <td bgcolor="white"> <h4>工作经历</h4> <p> 对于工作经历，我们首先需要了解的是，简历的目的是向HR展示我能给公司提供什么价值？或者说，我有什么样的资源和能力，能做什么事情。这就是站在招聘方的角度来换位思考。具体来说，就是用动词来表现你在某工作中扮演什么角色，比如使用参与/协助/负责/主导/带领等词。工作内容部分可以写工作具体的内容是什么、过程是什么，要尽量详细地写出项目的流程和内容。方法部分可以写通过什么工具和方法来完成工作的。结果部分可以写工作最终取得了什么成果，这个成果用可量化的指标来展现。尽量不要让经历模糊化，写负责新员工培训，制定员工每月业绩之类的，因为这样的描述，没有工作的人也可以编出来。更详细的工作项目经历也能让招聘方看到你的工作能力。</p> <br> <h4>项目经验</h4> <p> 工作经历是指我在什么岗位负责从事哪些工作，这份工作包含了哪些职责范围；而项目经验是指我在这段工作经历中具体做过的某一件事情，这件事情的背景、目标、过程、结果分别是怎样的。具个例子我在公司从事行政工作，这是工作经历；而我在做行政工作期间，负责了公司年会的策划与实施，这是项目经验。通过这个例子我们可以看到，工作经历与项目经验的侧重点是不同的，工作经历是对一段工作的宏观描述，而项目经验则是对工作经历中某一件事情的具体说明。</p> </td> <td> <table border="0" cellspacing="0" cellpadding="3" width="100%" height="100%"> <tr height="270px" bgcolor="white"> <td> <table border="0" cellspacing="0" cellpadding="2" width="100%" height="100%"> <tr align="center"> <td colspan="2"> <h4>个人信息</h4> </td> </tr> <tr> <td width="50%">姓名：</td> <td>张三</td> </tr> <tr> <td>性别：</td> <td>女</td> </tr> <tr> <td>年龄：</td> <td>27</td> </tr> <tr> <td>电话：</td> <td>xxxxxxxx</td> </tr> <tr> <td>邮箱：</td> <td>xxxxx@qq.com</td> </tr> <tr> <td>工作经验：</td> <td>7年</td> </tr> <tr> <td>现居住地：</td> <td>西安</td> </tr> </table> </td> </tr> <tr height="5px"> <td></td> </tr> <tr height="100px" bgcolor="white"> <td> <table border="0" cellspacing="0" cellpadding="3" width="100%" height="100%"> <tr> <td width="50%" colspan="2" align="center"> <h4>求职意向</h4> </td> </tr> <tr> <td>从事职业</td> <td>机械工程师</td> </tr> <tr> <td>期望月薪</td> <td>7k</td> </tr> </table> </td> </tr> <tr height="5px"> <td></td> </tr> <tr height="150px" bgcolor="white"> <td> <table border="0" cellspacing="0" cellpadding="2" height="100%" width="100%"> <tr> <td width="50%" colspan="2" align="center"> <h4>教育背景</h4> </td> </tr> <tr> <td>学校</td> <td>北京大学</td> </tr> <tr> <td>学历</td> <td>本科</td> </tr> <tr> <td>毕业时间</td> <td>2019.7</td> </tr> <tr> <td>专业</td> <td>机械电子</td> </tr> </table> </td> </tr> <tr height="5px"> <td></td> </tr> <tr height="100px" bgcolor="white"> <td> <table border="0" cellspacing="0" cellpadding="2" height="100%" width="100%"> <tr align="center"> <td> <h4>证书</h4> </td> </tr> <tr> <td>英语6级</td> </tr> <tr> <td>初级工程师</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body>

代码显示的内容

超链接：

连接到其他文档 < a href=“特殊字符.html” target="_blank">连接其他文件< /a> target=“_self” 在自身窗口打开连接到指定位置----->跳转到指定的位置 < a href="#c7">查看指定位置< /a> 指定位置的名字前加#< a name=“c7”> 指定位置 < h2>章节7< /h2> < p>该章节是关于。。。。。。。。。。< /p> </ a> 外部链接 < a href=“http://www.baidu.com”>链接的百度< /a>

INPUT标签

ext -文本框button -按钮submit-提交reset-重置password -密码checkbox-多选radio-单选file -上传文件date - 选取日、月、年month - 选取月、年week - 选取周和年time - 选取时间（小时和分钟）datetime - 选取时间、日、月、年（UTC 时间）datetime-local - 选取时间、日、月、年（本地时间）写法：<input type = “text" value=""/>

表单

表单的用途：表单时在网页上给用户来填写信息的，提交用户信息，使网页具有交互功能。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的浏览器上，这样网页就具有交互性了表单的构成< form>表单内容< /form> method属性是用来定义处理程序的从表单中获取信息的方法，通常有两种分别是GET和POST两种。 GET：GET传递的参数只能带URL后面，文本格式QueryString，各浏览器一般有长度限制，一般认为是2083，如果有中文字符更短。提交到服务器端的数据量小。POST：POST可以传递application/x-www-form-urlencoded的类似QueryString、multipart/form-data的二进制报文格式（支持文件信息嵌入报文传输）、纯文本或二进制的body参数。提交到服务器端的数据量大。 target属性用来制定目标窗口的创建名字输入表单 < body> < form> 姓名：< input name=“username” type=“text” size=“20” maxlength=“5” value=“请输入”/> < /form> < /body> 密码框：密码：< input name=“username” type=“password” size=“20” maxlength=“5” value=“123”/> 单选按钮： < body> < form> 男< input name=“sex” type=“radio” value=“boy”/> 女< input name=“sex” type=“radio” value=“girl” checked/> < /form> < /body>name=“sex” 单选按钮的名称，提交给后台的键 value=“boy” 单选按钮的值，提交给后台的值，形成键值。 type=“radio” 该属性是确定单选按钮的形态 checked 默认选中复选按钮： < body> < form> 爱好： < input name=“storp” type=“checkbox” value=“movie” checked/>电影 < input name=“storp” type=“checkbox” value=“book” /> 看书 < /form> < /body> 下拉列表： < body> < form> 请选择你最喜欢的食物： < select name=“mx” multiple size=“1”> < option value=“qxz” selected/>请选择 < option value=“rice”/>米饭 < option value=“nodles”/>面条 < option value=“meat”/>肉 < /select> < /form> < /body>name=“mx” 复选框的名称 multiple 设置多选 size=“1” 列显示几个选项 value=“qxz” 复选框的值 selected 设置选中按钮： < BODY> < form> < input name=“anniu” type=“button” value=“send”> < /form> < /BODY> 图片： < BODY> < form> < input name=“pt” type=“image” src=“F:\图片1.jpg” width=“300” height=“400” border=“1”> < /form> < /BODY> 提交按钮： -< BODY> < form> < INPUT name=“anniu” TYPE=“submit” value=“提交”> < /form> < /BODY> 重置按钮： < BODY> < form> < INPUT name=“anniu” TYPE=“reset” value=“重置” > < /form> < /BODY>

width=“300” height=“400” border=“1”> < /form> < /BODY> 10. 提交按钮： - -< BODY> < form> < INPUT name=“anniu” TYPE=“submit” value=“提交”> < /form> < /BODY> 11. 重置按钮： - < BODY> < form> < INPUT name=“anniu” TYPE=“reset” value=“重置” > < /form> < /BODY>

Processed: 0.010, SQL: 10