java后台写html代码 java写html页面

转载

墨舞青云 2024-03-05 20:53:01

文章标签 java后台写html代码 html html5 默认值 java 文章分类 Java 后端开发

Javaweb学习笔记 html篇

1.B/S软件的结构

客户端 ← 服务器端
→
javase c/s： client service
javaee b/s： broswer service
javaee项目：
客户端：浏览器
服务器端：web服务器
2.前端开发流程
美术实现 → 前端工程师 → java工程师
↓ ↓ ↓
网页设计师后台工程师将静态网页
根据需求 → 前端工程师将修改为动态网页
设计网页设计做成静态 →
网页

3. 网页的组成部分
页面是由三部分组成
分别为：内容（结构），表现，行为

内容（结构）：是我们在页面中可以看到的数据，我们称之为内容，一般内容我们使用html技术来展现
表现：指的是这些内容在页面上的展示形式，比如说，布局，颜色，大小等等一般使用css技术实现
行为：指的是页面中元素与输入设备交互的响应一般使用JavaScript 技术来实现

4.html简介
Hyper Text Markup language （超文本标记语言）简称：html
html通过标签来标记要显示的网页中的各个部分网页文件本身是一种文本文件
通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）
5.创建html文件
1.创建一个web工程（静态web工程）
2.在工程下创建html界面
6.html文件的书写规范

<html> 表示整个html界面的开始
<head> 头信息
<title>标题</title> 标题
</head>
<body> body是页面主体内容
页面主体内容
</body>
</html>  表示整个html界面的结束

html的注释

<!---这里面写注释-->

7.html标签的介绍
1.标签的格式
<标签名>封装的数据</标签名>
2.标签名大小写不敏感
3.标签拥有自己的属性
1.分为基本属性 bgcolor = “red” 可以修改简单的样式和效果
2.事件属性 onclick = “alert(“你好！”)” 可以设置事件响应后的代码
4.标签分为：单标签和双标签
单标签的格式： <标签名 /> 自结束标签 br 换行 hr 水平线
双标签的格式： <标签名>开始标签 …封装的数据… </标签名>结束标签

标签的语法

1.标签不允许交叉嵌套
正确：<head><title>标题名称</title></head>
错误: <head><title>标题名称</head></title>
浏览器会自动修复错误
2.标签必须正确关闭（闭合）
（1）有文本内容的标签
正确：<div>高熙杰</div>
错误：<div>高熙杰
（2）没有文本内容的标签
正确：<br/>
错误：<br>
（3）属性值必须有值 属性值必须加引号
正确：<font color="red">高熙杰</font>
错误：<font color= >高熙杰</font>
      <font color=red >高熙杰</font>
（4）注释内容不能嵌套
正确：<!--这里是注释内容-->
错误：<!--这里是注释内容!<!--这里是注释内容-->-->
<!DOCTYPE html> <!--约束 声明-->
<html lang="zh_CN"> <!--标签表示html的开始    lang="zh_CN" 表示中文 html标签中一般分为两部分，分别是head和body -->
<head> <!-- 表示头部信息 一般包含三部分内容，title标签，css样式，js代码 -->
    <meta charset="UTF-8"> <!--表示当前使用utf-8字符集 -->
    <title>标题</title> <!-- 表示标题 -->
</head>
<!--bgcolor是背景颜色
onclick 表示单击（点击）事件
alert（）是JavaScript语言提供的一个警告框函数
它可以接收任意参数 参数是警告框的提示信息
-->

<body onclick = "alert('hello world')"> <!--body界面是html整个界面显示的主体内容-->
<font color="red">高熙杰</font>
<br/>
<!--这里是注释!--这里是注释-->


<button onclick="alert('hello')">这是个按钮</button>
<br/>
<hr/>
呜呜呜
</body>
</html>

8.常用标签的介绍
8.1font字体标签
需求1：在网页上显示我是字体标签，并修改字体为宋体颜色为红色
font是字体标签它可以修改文本的字体颜色大小（尺寸）
color属性修改颜色
face属性修改字体
size属性修改大小

<font color="red" face="宋体" size="50">我是字体标签</font>

8.2特殊字符
需要用字符去替换他

<!-- 特殊字符 将<br>输出到界面上  
常用的特殊字符
<    <
>    >
空格  

-->
我是<br/>标签
<br/>
我是         谁

8.3标题标签

标题标签是h1到h6
<!-- 标题标签
h1到h6是标题标签
h1最大 h6最小
演示从h1到h6

align 属性是对齐属性
left 左对齐 默认
right 右对齐
center 居中

<!DOCTYPE html> <!--约束 声明-->
<html lang="zh_CN"> <!--标签表示html的开始    lang="zh_CN" 表示中文 html标签中一般分为两部分，分别是head和body -->
<head> <!-- 表示头部信息 一般包含三部分内容，title标签，css样式，js代码 -->
    <meta charset="UTF-8"> <!--表示当前使用utf-8字符集 -->
    <title>标题</title> <!-- 表示标题 -->
</head>
<body>
<h1 align="left">我是标题1</h1>
<h2 align="right">我是标题2</h2>
<h3 align="center">我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
</body>
</html>

8.4 超链接（重点必须掌握）
在网页中所以点击可以跳转的都是超链接

<a href="http://www.baidu.com">百度</a>
<!--a标签是超链接
   href是设置连接的地址
   targat属性设置哪个目标进行跳转
   _self表示当前界面(默认值)
   _blank表示打开新页面进行跳转
-->
<a href="http://www.baidu.com" >百度</a>
<br/>
<a href="http://www.baidu.com" target="_self">百度_self</a>
<br/>
<a href="http://www.baidu.com" target="_blank">百度_blank</a>

8.5 列表标签
无序列表有序列表定义列表

<!--type可以修改列表项前面的符号-->
<!--无序列表-->
<ul type="none">
    <li>刘德华</li>
    <li>张学友</li>
    <li>黎明</li>
    <li>郭富城</li>
</ul>
<!--有序列表-->
<ol>
    <li>刘德华</li>
    <li>张学友</li>
    <li>黎明</li>
    <li>郭富城</li>
</ol>

8.6 image标签
image标签可以在html界面上显示图片
<!-img标签是图片标签用来显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置边框的大小
alt属性设置当指定路径找不到时，用来代替显示的文本内容

在javase中路径也分为相对路径和绝对路径
相对路径
从工程名开始算
绝对路径
盘符:/目录/文件名
在web中路径分为相对路径和绝对路径
相对路径
.表示当前所在目录
…表示当前上一级所在的目录
文件名表示当前文件所在目录的文件，相当于./文件名（./可以省略）
绝对路径
格式是：http://ip:prot/文件名/资源路径

错误格式：盘符:/目录/文件名
–>

<img src=".idea/img/hu.jpeg" height="920" width="650" border="1" alt="胡">

8.7 表格标签
<!- table标签是表格标签
border设置表格边框
width设置表格宽度
height 设置表格高度
align是表格相对于界面的对齐方式
cellspacing是设置单元格是间距
tr是行标签
th是表头标签

td是单元格标签
 align设置单元格对齐方式
 b是加粗标签

–>

<table  border="1" width="300" height="300" align="center" cellspacing="0">
    <tr>
        <td align="center"><b>1.1</b></td>
        <th>1.2</th>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>

8.8 跨行跨列情况
<!- table标签是表格标签
border设置表格边框
width设置表格宽度
height 设置表格高度
align是表格相对于界面的对齐方式
cellspacing是设置单元格是间距
tr是行标签
th是表头标签

td是单元格标签
 align设置单元格对齐方式
 b是加粗标签
 colspan是跨列属性
 rowspan是跨行属性

–>

<table  border="1" width="500" height="500" align="center" cellspacing="0">
    <tr  >
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>

        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td colspan="2" rowspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
8.9 了解iframe框架标签的使用方法
iframe标签它可以在一个html页面上打开一个小窗口去加载一个单独的页面
<body>
<!--iframe标签可以在界面上开辟一个小区域显示一个单独的界面-->
<!--iframe和a标签的组合使用步骤如下：
1.在iframe标签中使用一个name属性定义一个名称
2.在a标签的target属性设置一个iframe的name属性值-->
我是一个单独的完整的界面<br/>
<ol>
 <li>
     <iframe src=".idea/hu.html" height="920" width="650" name="abc">
     </iframe>
 </li>
    <li>
     <iframe src=".idea/hu1.html" height="2000" width="1617">
     </iframe>
    </li>
    <li>

        <a href=".idea/hu1.html" target="abc"><img src=".idea/hu2.jpg" height="1061" width="750"/></a>
    </li>
</ol>



</body>
</html>

8.10 表单标签
什么是表单？
表单就是用来收集用户信息的所有元素集合，然后把这些信息发送给服务器
<!-form标签就是表单
input type=“text” 是文本输入框 value属性是设置默认值的显示内容
input type="password"是密码输入框
input type="radio"是单选框 name属性可以对其进行分组 checked="checked"默认选择
input type=“checkbox”是复选框
selected是下拉列表框
option是下拉列表框中的选项 selected="selected"默认选中
textarea是多行文本输入框 rows可以显示几行的高度 rols每一行可以显示几个字的宽度
默认值是在和之间
input type="reset"是重置按钮重置成默认值 value修改默认值
input type="submit"是提交按钮 value修改默认值
input type="button"是按钮 value修改默认值
input type="file"是文件上传区域
input type="hidden"是隐藏域当我们要发送某些信息时候，不需要用户参与，就可以使用隐藏域（提交时候同样发送给服务器）
–>

<form>
    用户名称：<input type="text" value="在此输入"/> <br/>
    用户密码：<input type="password" maxlength="5"><br/>
    确认密码：<input type="password" maxlength="5"><br/>
    性别：<input type="radio" name="sex" checked="checked">男    <input type="radio" name="sex">女<br/>
    兴趣爱好：<input type="checkbox" checked="checked">java<input type="checkbox">c++<input type="checkbox">JavaScrip<br/>
    国籍：<select>
    <option>-----请选择国籍-------</option>
    <option >中国</option>
    <option selected="selected">美国</option>
    <option>日本</option>
</select>
   <br/>
    自我评价：<textarea cols="20" rows="10">我才是默认值
</textarea>
</br>
    <input type="reset" value="重置">
    <input type="submit" value="提交">
    <input type="button" value="按钮">
    <input type="file">
    <input type="hidden">
</form>
</body>
</html>


<h1 align="center" >用户注册</h1>
<form>
    <table>
        <tr>
            <td>
                用户名称：
            </td>
            <td>
                <input type="text" value="在此输入"/>
            </td>
        </tr>
        <tr>
            <td>
                用户密码：
            </td>
            <td>
                <input type="password" maxlength="5"/>
            </td>
        </tr>
        <tr>
            <td>
                确认密码：
        </td>
            <td>
                <input type="password" maxlength="5">
            </td>
        </tr>
        <tr>
            <td>
                性别：
            </td>
            <td>
                <input type="radio" name="sex" checked="checked">男
            </td>
            <td>
                <input type="radio" name="sex">女
            </td>
        </tr>
        <tr>
            <td>
                兴趣爱好：
            </td>
            <td>
                <input type="checkbox" checked="checked">java
            </td>
            <td><input type="checkbox">c++</td>
           <td><input type="checkbox">JavaScrip</td>
        </tr>
        <tr>
            <td>
                国籍：
            </td>
            <td>
                <select>
                    <option>-----请选择国籍-------</option>
                    <option >中国</option>
                    <option selected="selected">美国</option>
                    <option>日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                自我评价：
            </td>
            <td>
<textarea cols="20" rows="10">我才是默认值</textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="reset" value="重置">
            </td>
            <td>
                <input type="submit" value="提交">
            </td>
            <td>
                <input type="button" value="按钮">
            </td>
            <td>
                <input type="file">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

<!-
form标签是表单标签
action属性设置提交的服务器地址
method属性设置提交的方式get(默认)或post
表单提交的时候，数据没有发送给服务器的三种情况
1.表单上没有name属性值
2.单选，复选（下拉框列表中的option标签）都需要添加value属性，以便发送给服务器
3.表单项不在form的范围内

get请求的特点：
1.浏览器地址栏中的地址是：action属性+？+请求参数
请求参数的格式是name=value&name=value
2.不安全
3.它有数据长度的限制
post请求的特点：
1.浏览器地址栏只有ation属性值
2.相对于get请求要安全
3.理论上没有数据长度的限制
–>

<h1 align="center" >用户注册</h1>
<form action="http://localhost:8080" method="get">
 <input type="hidden" name="action" value="login">
    <table align="center">
        <tr>
            <td>
                用户名称：
            </td>
            <td>
                <input type="text" name="username" value="在此输入"/>
            </td>
        </tr>
        <tr>
            <td>
                用户密码：
            </td>
            <td>
                <input type="password" name="password" maxlength="5"/>
            </td>
        </tr>
        <tr>
            <td>
                确认密码：
        </td>
            <td>
                <input type="password" name="password" maxlength="5">
            </td>
        </tr>
        <tr>
            <td>
                性别：
            </td>
            <td>
                <input type="radio" name="sex" checked="checked" value="boy">男
            </td>
            <td>
                <input type="radio" name="sex" value="girl">女
            </td>
        </tr>
        <tr>
            <td>
                兴趣爱好：
            </td>
            <td>
                <input type="checkbox" checked="checked" name="like" value="java">java
            </td>
            <td><input type="checkbox" name="like" value="cpp">c++</td>
           <td><input type="checkbox" name="like" value="js">JavaScrip</td>
        </tr>
        <tr>
            <td>
                国籍：
            </td>
            <td>
                <select name="country">
                    <option>-----请选择国籍-------</option>
                    <option >中国</option>
                    <option selected="selected">美国</option>
                    <option>日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                自我评价：
            </td>
            <td>
<textarea name="self" cols="20" rows="10">我才是默认值</textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="reset" value="重置">
            </td>
            <td>
                <input type="submit" value="提交">
            </td>
            <td>
                <input type="button" value="按钮">
            </td>
            <td>
                <input type="file">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

8.11 其他标签
<!-div标签默认独占一行
span标签它的长度是封装固定的长度
p段落标签默认会在段落的上方或下方空出一行来（如果已有就不在空了）
–>

div标签1

div标签2

span标签1 span标签2

p段落标签1

p段落标签2

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。