Web 前端 HTML

最新推荐文章于 2024-09-22 22:34:40 发布

PurpleLavender

最新推荐文章于 2024-09-22 22:34:40 发布

阅读量671

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html-dom 文章标签： html web 前端

本文链接：https://blog.youkuaiyun.com/pengn/article/details/71425226

html-dom 专栏收录该内容

1 篇文章

订阅专栏

HTML格式标签和表单标记

Java Web就是采用Java技术来解决与Web领域相关问题的技术总和。Java的Web框架虽然各不相同，但是总体上都遵循一定的规则：

使用Servlet或者Filter拦截客户请求
基于MVC的思想设计架构
利用约定、XML或Annotation实现配置
运用Java面向对象的特点，面向抽象实现请求和响应
支持JSP、Freemarker、Velocity等视图

Web主要采用超链接技术，浏览器/服务器工作模式，使用URL标识网上资源。

常见Web技术缩写　表格语法：

缩写	简单介绍
HTML	HyperText Mark up Language 超文本标记语言，是一种文本形式的标记符号语言
CSS	Cascading Style Sheet 层叠样式表，主要用来控制页面显示的风格
JSP	Java Server Pages Java服务器页面，采用静态HTML和动态Java语言混合编码；具有跨平台性的优点。JSP技术是Java企业级版本J2EE的一部分，主要负责前端显示。
ASP	Active Server Pages 动态服务器主页，主要特点是：把HTML、脚本和数据库的访问功能结合在一起，组成了服务器端的应用程序。
PHP	HyperText Preprocessor 超文本预处理器。与ASP技术类似，PHP是服务器端的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>用&nbsp户&nbsp名:</td>
                    <td><input type = "text" name = "userName"></td></tr>
                <tr>
                    <td>性&nbsp&nbsp&nbsp&nbsp别:</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>密&nbsp&nbsp&nbsp&nbsp码:</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 = "提交">
                   &nbsp&nbsp&nbsp&nbsp
                   <input type = "reset" name = "reset" value = "取消"></td></tr>
            </table> 
        </form>
    </body>
</html>