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

java web基础知识

HTML基础

  1. 什么是HTML:它被称为超文本标记语言,用它编写可以被浏览器解释的文件,文件格式是.html/.htm。
  2. 组成:它由主要的三部分组成:
    • < html >用来表示HTML文件的最前端, < /html >表示HTML文件的结束,必须成对出现,一对的大小写可以不一样。
    • < head > < /head>,这对构成的是HTML文件的头部部分,他俩之间的内容不会出现在浏览器的内容部分。一般在 < head > < /head>之间可以使用< title > < /title>和< script> < /script>,这些都是描述HTML文件相关信息的标记对。
    • < body> < /body>,这是HTML的主体部分,里面的内容就是浏览器显示的内容,里面有好多标记,可以对浏览器显示的内容进行美化。
  3. 标记
标记名 使用方法
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> 分割线,两部分用线分割开

图片标记:

标记 功能
“haha” <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>27td> tr> <tr> <td>电话:td> <td>xxxxxxxxtd> tr> <tr> <td>邮箱:td> <td>[email protected]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>7ktd> 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.7td> 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>

代码显示的内容

java web基础知识--HTML标签/INPUT标签/表单的基础知识_第1张图片

超链接:

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

INPUT标签

  • ext -文本框
  • button -按钮
  • submit-提交
  • reset-重置
  • password -密码
  • checkbox-多选
  • radio-单选
  • file -上传文件
  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间(小时和分钟)
  • datetime - 选取时间、日、月、年(UTC 时间)
  • datetime-local - 选取时间、日、月、年(本地时间)
    写法:

表单

  1. 表单的用途:
    • 表单时在网页上给用户来填写信息的,提交用户信息,使网页具有交互功能。一般是将表单设计在一个html页面中,当用户填写信息后做提交操作,于是表单的内容就会从客户端的浏览器上发送给服务器,经过服务器上的jsp或者ASP或者Cgi等处理后,再将用户所需的信息传送给客户端的浏览器上,这样网页就具有交互性了
  2. 表单的构成< form>表单内容< /form>
    • method属性是用来定义处理程序的从表单中获取信息的方法,通常有两种分别是GET和POST两种。
      • GET:GET传递的参数只能带URL后面,文本格式QueryString,各浏览器一般有长度限制,一般认为是2083,如果有中文字符更短。提交到服务器端的数据量小。
      • POST:POST可以传递application/x-www-form-urlencoded的类似QueryString、multipart/form-data的二进制报文格式(支持文件信息嵌入报文传输)、纯文本或二进制的body参数。提交到服务器端的数据量大。
    • target属性用来制定目标窗口的
  3. 创建名字输入表单
  • < body>
    < form>
    姓名:< input name=“username” type=“text” size=“20” maxlength=“5” value=“请输入”/>
    < /form>
    < /body>
  1. 密码框:
    • 密码:< input name=“username” type=“password” size=“20” maxlength=“5” value=“123”/>
  2. 单选按钮:
    • < 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 默认选中
  3. 复选按钮:
    • < body>
      < form>
      爱好:
      < input name=“storp” type=“checkbox” value=“movie” checked/>电影
      < input name=“storp” type=“checkbox” value=“book” /> 看书
      < /form>
      < /body>
  4. 下拉列表:
    • < 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 设置选中
  5. 按钮:
    • < BODY>
      < form>
      < input name=“anniu” type=“button” value=“send”>
      < /form>
      < /BODY>
  6. 图片:
    • < BODY>
      < form>
      < input name=“pt” type=“image” src=“F:\图片1.jpg” width=“300” height=“400” border=“1”>
      < /form>
      < /BODY>
  7. 提交按钮:
    • -< BODY>
      < form>
      < INPUT name=“anniu” TYPE=“submit” value=“提交”>
      < /form>
      < /BODY>
  8. 重置按钮:
    • < 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>

你可能感兴趣的:(Java,web,java)