Web 前端 HTML
来源:互联网 发布:网络推销员工资高吗 编辑:程序博客网 时间:2024/06/06 04:31
HTML格式标签和表单标记
Java Web就是采用Java技术来解决与Web领域相关问题的技术总和。Java的Web框架虽然各不相同,但是总体上都遵循一定的规则:
- 使用Servlet或者Filter拦截客户请求
- 基于MVC的思想设计架构
- 利用约定、XML或Annotation实现配置
- 运用Java面向对象的特点,面向抽象实现请求和响应
- 支持JSP、Freemarker、Velocity等视图
Web主要采用超链接技术,浏览器/服务器工作模式,使用URL标识网上资源。
常见Web技术缩写 表格语法:
Web数据库是指在互联网中以Web查询接口方式访问的数据库资源。
Web项目的开发环境涉及到4个软件:JDK、Tomcat、MyEclipse(我用的是Eclipse)以及MySQL。它们的安装以及配置过程均可以在网上找到。
HTML简介
标准的HTML文档都具有一个基本的整体结构,该基本结构主要包括3个部分:
<html> <head> <title>标题部分</title> </head> <body> 正文部分 </body></html>
(1)<html>
与</html>
是html文档标记,标志文档的开始和结束。
(2)<head>
与</head>
是html文档头标记,用于包含文档的基本信息,比如文档的标题等,注意这部分内容不会显示在网页中。
(3)<body>
与</body>
是html文档主体标记,用于包含文档的正文信息。
注意:<head>
与<body>
为独立的两个部分,之间不允许互相嵌套。
HTML格式标签
1、标题标签<hn>
与</hn>
,其中n(取值范围为1~6)表示标题的等级,n取值越小表示标题的字号越大。
2、格式排版标签 <br>
,该标签的功能是实现强制文本换行,但是行与行之间不会留下空行。
3、文字格式标签 <font>
,该标签的功能是通过设置属性来控制文字的字体、大小、样式和颜色等字体外观。
4、注释标签 <!--
和-->
作为注释标签,在编写HTML文档时,主要是为了提高文档的可读性。
5、表格标签
在HTML中,<table></table>
标签对用来进行一个完整表格的声明,<tr></tr>
标签对用来定义表格中的一行,<th></th>
标签对用来定义表格中列标题单元格,<td></td>
标签对用来定义行中的一个单元格。标签对的放置位置是有规定:<td></td>
、<th></th>
两个标签对需要放在<tr></tr>
标签对之间使用。表格定义的基本格式如下:
<table> <tr> <th>第一列的标题</th> <th>第二列的标题</th> ... </tr> <tr> <td>第一行中第一个单元格内容</td> <td>第一行中第二个单元格内容</td> ... </tr> <tr> <td>第二行中第一个单元格内容</td> <td>第二行中第二个单元格内容</td> ... </tr>...</table>
<th></th>
标签对定义的列标题文字是以粗体方式显示。
表格标签的应用
<html> <head> <title> table.html</title> <meta http - equiv = "content - type" content = "text/html; charset = UTF-8"> </head> <body> <font size = "20">计算机专业课程设置:</font> <table border = "1" width = "100%" bordercolor = "red" cellpadding = "2"> <!-- 设置表格--> <tr height = "50" valign = "middle"> <th width = "30%" colspan = "2">基础课程</th> <th width = "33%" colspan = "2">专业基础课程</th> <th width = "34%" colspan = "2">专业课程</th> </tr> <tr align = "center"> <td width = "16%">高等数学</td> <td width = "16%">大学物理</td> <td width = "17%">C++程序设计基础</td> <td width = "17%">数据库原理</td> <td width = "17%">JavaWeb程序设计</td> <td width = "17%">软件测试</td> </tr> </table> </body></html>
HTML表单标记
表单一般是由表单标签、表单域、表单按钮组成。表单标签包含了处理数据所用CGI程序的URL以及数据提交到服务器的方法;表单域包含了用于用户输入和交互的控件,比如文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等;表单按钮包括提交按钮、复位按钮和一般按钮,用于将数据传送给服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他的一些处理工作。
1、表单标签 <form></form>
标签对用来创建一个表单,<form>
标签用来定义表单的开始、</form>
标签用来定义表单的结束。该标签属于容器标签,表单里所有数据采集功能的控件都需要定义在该标签对之间。
<form active = "url" method = "get|post"> name = "value" onsubmit = "function" onreset = "function" target = "window"</form>
其中Action属性、Onsubmit属性、Onset属性以及Target属性,在这里就不多写了。Name属性用于设置表单名称。
Method属性,用于设置处理程序从表单中获得信息的方式,取值为Get或Post。Get方法在浏览器的地址栏中以明文形式显示表单中各个表单域的值,对数据的长度有一定的限制。Post是将表单中用户输入的数据进行封装,按照HTTP中Post方式传送到服务器上,且对数据的长度基本上没有限制,目前使用此方法的居多。
2、表单域标签
(1)单行输入域标签
<input>
标签用来定义单行输入域,用户可在其中输入单行信息。常用属性如下:
Type属性:用于设置输入域的类型,可取值为:
*Text:单行文本输入区域,包含两个属性Size和Maxlength,Size属性用来定义此区域显示的尺寸大小,Maxlength属性用来定义此区域输入的最大字符数。
*Submit:该按钮主要实现的是将表单中的内容提交给服务器。
*Reset:该按钮主要实现的是将表单中的内容全部清除,然后重新填写。
*Checkbox:复选框,包括一个Checked属性用来设置该复选框默认状态是否被选中。
*Hidden:隐藏区域,用户不能在其中输入,用来预设某些要传送的信息。
*Image:使用图像来替代Submit按钮,图像的源文件名由子属性Src属性来设定。
*Password:输入密码的区域,当用户输入密码时,区域内将会显示*
取代用户输入的内容。
*Radio:单选按钮,包括一个Checked属性用来设置该单选框默认状态是否被选中。
Name属性:用于设置输入域的名称。
Value属性:用于设置输入域的默认值。
Align属性:用于设置输入域的位置,可取值为:left、right、middle、top、bottom。
Onclick属性:用于设置单击按钮后执行的脚本函数名称。
(2)多行输入域标签
<textarea></textarea>
标签对用来定义多行文本输入域,主要属性包括:
*Name属性:用于设置输入域的名称。
*Rows属性:用于设置输入域的行数。
*Cols属性:用于设置输入域的列数。
*Wrap属性:用于设置是否自动换行,属性值可取值为:off、hard、soft。
(3)选择域标签 <select></select>
标签对用来建立一个下框,<option>
标签用来定义下拉列表中的一个选项,用户可以从列表中选择一项或多项。
1)<select></select>
标签对的主要属性包括:
Name属性:用于设置下拉列表的名称;
Size属性:用于设置下拉列表中选项个数(默认值为1);
Multiple属性:用于表示下拉列表支持多选。
2)<option></option>
标签对的主要属性包括:
Selected属性:用于表示当前选项被默认选中。
Value属性:用于设置当前选项的值,在该项被选中之后,其值将被送到服务器上。
3、表单按钮标签 <botton></botton>
标签对用于定义提交表单内容给服务器的按钮,主要属性有Type属性和Accesskey。
*Type属性:用于设置按钮的类型。
*Accesskey属性:用于设置按钮的热键,即按下<Alt>
键的同时按钮该属性值所对应的键便可以快速定位到该按钮。
表单标签的应用案列
使用HTML设计注册表单
<html> <head> <title> 表单案列</title> <meta http - equiv = "content - type" content = "text/html; charset = UTF-8"> </head> <body> <h2 align = "left">用户注册</h2> <form name = "" action = "" method = "post"><hr> <table border = "1"> <tr> <td>用 户 名:</td> <td><input type = "text" name = "userName"></td></tr> <tr> <td>性    别:</td> <td><input type = "radio" name = "sex1" value = "男">男 <input type = "radio" name = "sex2" value = "女">女</td></tr> <tr> <td>出生日期:</td> <td><select name= "select" size = "1"> <!-- 设置可选项目内容 --> <option selected>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> <option>2006</option> <option>2007</option> <option>2008</option> <option>2009</option> <option>2010</option> </select>年 <td><select name= "select" size = "1"> <option selected>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select>月 <td><select name= "select" size = "1"> <option selected>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option> </select>日</td></tr> <tr> <td>证件类型:</td> <td><select name = "select"> <option value = "identify" selected>身份证 <option value = "army">军官证 </select></td> </tr> <tr> <td>证件号码:</td> <td><input type = "text" name = "userID"></td> </tr> <tr> <td>密    码:</td> <td><input type = "password" name = "userPassword1"></td> </tr> <tr> <td>确认密码:</td> <td><input type = "password" name = "userPassword2"></td> </tr> <tr> <td clospan = "2" align = "center"> <input type = "submit" name = "submit" value = "提交">      <input type = "reset" name = "reset" value = "取消"></td></tr> </table> </form> </body></html>
- Web前端基础----HTML
- WEB前端-HTML-基础
- web前端学习--html
- Web 前端 HTML
- Web前端之HTML
- Web前端:HTML~CSS~JS
- WEB前端-HTML-常用标签
- Web前端 html实时预览
- web前端学习------HTML基础
- web前端学习-----HTML标记
- 【Web前端】HTML书写规范
- [Lpp]WEB前端:HTML+CSS
- Web前端之HTML规范
- web前端(html、css)
- emacs 配置web前端环境 html、javascript
- WEB前端开发学习----1.HTML基础
- web前端开发测验之HTML部分
- web前端开发测验之HTML部分
- Java Socket
- Hibernate_操作对象_Session中的refresh()方法与修改事务隔离级别详解
- 基于底层 API 的事务管理
- Objective-C——中文URL编码和解码
- Hadoop-2.6.0完全分布式搭建
- Web 前端 HTML
- 内部类访问局部变量的时候,为什么变量必须加上final修饰
- ssh集成ajax总结
- 对于Spring对websocket的属性注入失败问题,困扰我一天,最后终于解决了
- Java泛型类详细解读
- Android的ANR处理
- 用指针表示数组
- 197
- PAT_1041. Be Unique