JavaWeb基础

发布日期: 2022-02-15

Java Web 从入门到退坑 —— 第一章HTML

Java Web 从入门到退坑 —— 第一章HTML.md

1. HTML简介

HTML（全称 Hyper Text Markup Language) 超文本标记语言

HTML通过标签来标记要显示网页中的各个部分。网页文件本身就是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

2. HTML代码书写规范

<!DOCTYPE html> <!--约束，声明-->
<html lang="zh_cn"> <!--HTML 表示HTML的开始    lang="zh_cn 表示简体中文   HTML中包括了head & body两部分 -->
<head> <!-- 表示头部信息, 一般包括三部分内容: title标签, css样式 和 js代码 -->
    <meta charset="UTF-8"> <!-- 表示当前页面使用UTF-8字符集 -->
    <title>Title</title> <!-- 表示标题 -->
</head>
<body> <!-- body标签是整个HTML页面的主体内容 -->
    hello world！
</body>
</html> <!--表示整个HTML的结束-->

3. HTML标签介绍

3.1. 标签的格式：

<titleName> Encapsulated data </titleName>

3.2. 标签名大小不敏感

3.3. 标签拥有自己的属性

基本属性：bgcolor="red" 可以修改简单的样式效果
事件属性：onclick="alert('Hello!');" 可以直接设置事件响应后的代码

3.4. 标签又分为单标签和双标签

单标签：<titleName/> <br/>自结束标签
双标签：<titleName> ...Encapsulated data... <\titleName> <p>开始标签 </p>结束标签

3.5. 标签的语法

标签不能交叉嵌套

正确：<div><sqan> good morning </span></div>

错误： <div><span> good morning </div></span>
标签必须正确关闭（闭合）
- 有文本内容的标签
  
  正确： <div> good morning </div>
  
  错误： <div> good morning
- 没有文本内容的标签
  
  正确：<br/>
  
  错误：<br>
属性必须要有值，必须要加引号

正确：<font color = "blue"> good morning </font>

错误：<font color = blue> good morning </font>

错误：<font color> good morning </font>
注释不能嵌套

正确：

错误： -->
注意事项：HTML不是很严谨，有时候标签不闭合也b不会报错

3.6. 常用标签的介绍

3.6.1. `font`字体标签

属性	值	描述	DTD
`color`	`rgb (x,x,x)` `#xxxxxx` `colorname`	定义`font`元素中的文本颜色	TF
`face`	字体名列表	定义`font`元素中文本的字体	TF
`size`	从1到7的数字	如果已经定义了`basefont`,你可以从-6到6之间的数字；定义`font`元素中的文本尺寸	TF

3.6.2. 特殊字符

最常用的字符实体

显示结果	描述	实体名称	实体编号
	空格	` `	`&#160`
`<`	小于号	`<`	`&#60`
`>`	大于号	`>`	`&#62`
`&`	和号	`&`	`&#38`
`"`	引号	`"`	`&#34`
`'`	撇号	`'`（IE不支持）	`&#39`

其他一些常用字符实体

显示结果	描述	实体名称	实体编号
`¢`	分	`&cent`	`&#162`
`£`	镑	`&pound`	`&#163`
`¥`	日圆	`&yen`	`&#165`
`§`	节	`&sect`	`&#167`
`©`	版权	`&copy`	`&#169`
`®`	注册商标	`&reg`	`&#174`
`×`	乘号	`&time`	`&#215`

3.6.3. 标题标签

标题标签是h1到h6，h1最大，h6最小

align为对齐属性，其中left为向左对齐，center为居中对齐，right为向右对齐

3.6.4. 超链接（重点）

在网页中所有点击之后可以跳转的内容都是超链接

标签： <a herf="" target="" > </a>

属性： herf 设置的链接地址

target 设置哪个目标进行跳转： _self表示当前标签页（默认值）， _blank表示打开新标签页

3.6.5. 列表标签

分为三种：无序列表，有序列表，定义列表。其中最常用的是无序列表

标签： <ul type=""> <li> </li> </ul>

<ln> <\ln>行标签

属性：type可以修改表头的标签

无序列表:

代码示例

<ul>
  <li>Xiao Ming</li>
  <li>Xiao Hong</li>
  <li>Xiao Jun</li>
  <li>Xiao Qiang</li>
</ul>

实际效果：

Xiao Ming
Xiao Hong
Xiao Jun
Xiao Qiang

有序列表

代码示例

<ol>
  <li>Xiao Ming</li>
  <li>Xiao Hong</li>
  <li>Xiao Jun</li>
  <li>Xiao Qiang</li>
</ol>

实际效果

Xiao Ming
Xiao Hong
Xiao Jun
Xiao Qiang

3.6.6. `img`标签

img标签可以在HTML页面上显示图片

标签：<img src="" width="" height="" border="">

属性：src设置图片的路径

width设置图片宽度

height设置图片高度

border设置边框大小（单位Pixel）

alt设置当指定路径找不到图片是，用来代替的文字

在JavaSE中，路径分为相对路径和绝对路径

相对路径：从工程名开始算

绝对路径：盘符:/目录/文件名

在Web中，路径也分为相对路径和绝对路径两种

相对路径：

. ——表示当前文件所在目录

.. ——表示当前文件夹所在的上一级目录

文件名 ———表示当前文件所在目录的文件，相当于./文件名（其中./可以省略）

绝对路径：

正确格式是：http://ip:port/工程名/资源路径

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

3.6.7. 表格标签（重点）

标签： <table> <tr> <td> cell <td> </tr> </table>

<tr> </tr>行标签

<th> </th>表头标签

<td> </td>单元格标签

<b> </b>加粗标签

属性： border设置表格边框

width设置表格宽度

height设置表格高度

align设置单元格文本对齐方式（通常用在<tr>或者<td>标签中，若用在<table>中，则设置表格的对齐方式）

cellspacing设置单元格间距

colspan设置跨列

rowspan设置跨行

3.6.8. 了解`iframe`框架标签（内嵌窗口）

iframe标签可以在一个HTML页面上，打开一个小窗口去加载单独的页面。

标签：<iframe src="" width="" height="" > </iframe>

属性： src设置链接地址

width设置框架宽度

height设置框架高度

name设置框架的名字，用于和<a>标签组合使用

<iframe和<a>标签组合使用的步骤

1. 在<iframe>标签中使用name属性定义一个名称

2. 在<a>标签的target属性上设置<iframe>的name属性值

3.6.9. 表单标签（重点）

表单是HTML页面中，用来收集用户信息的所有元素集合，然后将这些信息发送给服务器

标签： <form> </form>

<input type="" />输入框

<select> </select>下拉列表框， <option> </option>为下拉选项

<textarea> 显示的默认值 </textarea>文本域

关于hidden：当我们需要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交的时候同时发送到服务器端）

属性：

<form>: action 设置提交的服务器地址

methood 设置提交的方式GET(默认值)或POST

<input>: type 设置输入框的类型（text文本框，password密码框，radio单选框，checkbox复选框，buttom按钮，reset重置按钮，submit提交按钮，file文件选取框，hidden隐藏域）

value 设置输入框的默认值

size设置输入框的大小

name设置输入框的名字，用于进行分组

checked设置是否默认选中（用于单选，复选框和下拉列表框以及提交数据）

<textarea>: rows 设置显示的行数

cols 设置每行显示的字符数

value 设置发给发送给服务器的值（用于单选，复选框以及下拉列表中的option属性）

注意⚠️：为了让表单更为整齐，通常会将表单放在表格当中

示例代码：

                <form action="https://localhost:8080" method="get">
            <table align="center">
                <h1 align="center">User registration</h1>
                <tr>
                    <td>
                        User name:
                    </td>
                    <td>
                        <label>
                            <input type="text" value="Fuck your mother shit!" name="UserName"/>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        User password:
                    </td>
                    <td>
                        <label>
                            <input type="password" name="Password"/>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        Confirm password:
                    </td>
                    <td>
                        <label>
                            <input type="password"/>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        Gender:
                    </td>
                    <td>
                        <label>
                            <input type="radio" name="Gender" checked="checked" value="Male"/>男
                            <input type="radio" name="Gender" value="Female"/>女
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        Hobby:
                    </td>
                    <td>
                        <label>
                            <input type="checkbox" name="Hobby" value="C/Cpp"/>C/C++
                            <input type="checkbox" name="Hobby" checked="checked" value="Java"/>Java
                            <input type="checkbox" name="Hobby" value="Python"/>Python
                            <input type="checkbox" name="Hobby" value="JavaScript"/>JavaScript
                            <input type="checkbox" name="Hobby" value="Swift"/>Swift
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        Nation:
                    </td>
                    <td>
                        <label>
                            <select name="Nation">
                                <option selected="selected" value="none">--Please select a nation--</option>
                                <option value="China">China</option>
                                <option value="UnitedStates">UnitedStates</option>
                                <option value="Russia">Russia</option>
                                <option value="UnitedKingdo">UnitedKingdom</option>
                                <option value="France">France</option>
                                <option value="Japan">Japan</option>
                                <option value="German">German</option>
                                <option value="Korea">Korea</option>
                            </select>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <label>
                            Introduce myself:<br/>
                            <textarea rows="10" cols="70" name="Introduction">Please enter the article</textarea>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        Attachment:
                    </td>
                    <td>
                        <label>
                            <input type="file" name="Attachment"/>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <label>
                            <input type="hidden" name="action" value="login"/>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <label>
                            <input type="reset" value="Reset"/>
                        </label>
                        <label>
                            <input type="submit" value="Submit"/>
                        </label>
                    </td>
                </tr>
            </table>
            </table>
        </form>

注意⚠️：

1. 提交表单，浏览器会显示如下的地址

https://localhost:8080/?UserName=Index&Password=xonwic-7Wawty-zusfev&Gender=Male&Hobby=C%2FCpp&Hobby=Java&Hobby=Python&Hobby=JavaScript&Hobby=Swift&Nation=China&Introduction=Please+enter+text&Attachment=a.txt&action=login

其中各项的意义分别如下：

https://localhost:8080/ 服务器地址

? 分隔符

UserName=Index 用户名

Password=xonwic-7Wawty-zusfev 用户名

Gender=Male 用户名

Hobby=C%2FCpp&Hobby=Java&Hobby=Python&Hobby=JavaScript&Hobby=Swift 用户名

Nation=China 国籍

Introduction=Please+enter+the+text 自我介绍

Attachment=a.txt 附件

action=login 动作参数

2. 表单提交的时候，数据没有发送给服务器的三种情况：

1. 表单没有name属性值

2. 单选，复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器

3. 表单项不在提交的from标签中

3. GET请求的特点：

1. 浏览器地址栏中的地址是：action属性+[+?+请求参数]，请求参数的格式是：name=value&name=value

2. 不安全，提交的密码会显示出来

3. 它有数据长度的限制

4. POST请求的特点：

1. 浏览器地址栏中只有action属性值

2. 相对于GET请求要安全

3. 理论上没有数据长度的限制

3.6.10. 其他标签

<div> </div> 默认独占一行

<span> </span> 它的长度是封装数据的长度

<p> </p> 段落标签，默认会在段落的上方或下方各空出一行（如果有就不再空）

gregPerlinLi

http://www.gdutnic.com/2022/02/15/java-web-cong-ru-men-dao-tui-keng-di-yi-zhang-html/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 gregPerlinLi !

JavaWeb HTML

Java Web 从入门到退坑第四章 jQuery

2022-02-15 JavaWeb基础

JavaWeb JavaScript jQuery

my first blog

2022-02-15 gregPerlinLi

显示结果	描述	实体名称	实体编号
	空格	` `	`&#160`
`<`	小于号	`<`	`&#60`
`>`	大于号	`>`	`&#62`
`&`	和号	`&`	`&#38`
`"`	引号	`"`	`&#34`
`'`	撇号	`'`（IE不支持）	`&#39`

显示结果	描述	实体名称	实体编号
	空格	` `	`&#160`
`<`	小于号	`<`	`&#60`
`>`	大于号	`>`	`&#62`
`&`	和号	`&`	`&#38`
`"`	引号	`"`	`&#34`
`'`	撇号	`'`（IE不支持）	`&#39`

Java Web 从入门到退坑 第一章 HTML

Java Web 从入门到退坑 —— 第一章HTML

Java Web 从入门到退坑 —— 第一章HTML.md

1. HTML简介

2. HTML代码书写规范

3. HTML标签介绍

3.1. 标签的格式：

3.2. 标签名大小不敏感

3.3. 标签拥有自己的属性

3.4. 标签又分为单标签和双标签

3.5. 标签的语法

3.6. 常用标签的介绍

3.6.1. font字体标签

3.6.2. 特殊字符

3.6.3. 标题标签

3.6.4. 超链接（重点）

3.6.5. 列表标签

3.6.6. img标签

3.6.7. 表格标签（重点）

3.6.8. 了解iframe框架标签（内嵌窗口）

3.6.9. 表单标签（重点）

3.6.10. 其他标签

Java Web 从入门到退坑第一章 HTML

3.6.1. `font`字体标签

3.6.6. `img`标签

3.6.8. 了解`iframe`框架标签（内嵌窗口）

显示结果	描述	实体名称	实体编号
	空格	` `	`&#160`
`<`	小于号	`<`	`&#60`
`>`	大于号	`>`	`&#62`
`&`	和号	`&`	`&#38`
`"`	引号	`"`	`&#34`
`'`	撇号	`'`（IE不支持）	`&#39`