⭐️ 1. This article begins to introduce JavaWebthe content.
In the past , JavaSEours 软件的结构was: C/S(客户--服务器)结构,
and in ours JavaWeb, the software structure is: B/S(浏览器--服务器)结构.
⭐️ 2. Front-end development process:
(1). According to the requirements of the designer Design the webpage.
(2). The content of the webpage is written by the front-end engineer, and the webpage is made static.
(3). Finally, the webpage is made dynamic by the back-end engineer.
⭐️ 3. The components of the webpage:
( 1). Content: It is the data we see on the page. We generally use HTMLtechnology to realize it.
(2). Performance: The form of content on the page, such as color, layout, size, etc., is generally realized by CSStechnology .
(3). Behavior: The response of the elements in the page to interact with the input device, generally JavaScriptimplemented by technology.

Article Directory

HTML

HTML

1. Introduction to HTML

HTML (Hypertext Markup Language): Through 标签to display, 网页中the content to be displayed.

2. Create an HTML file

❤️(1). Create a Web project (static).

Note: I am using the IDEA2020.2 version to create a project
according to the original javaSEproject creation method, then select the right button of the module Add Framework Support-> check the Java EEinside .Web4.0

❤️(2). Create an HTML file under the Web project.

Note: HTML files are executed 不需要编译directly by 浏览器parsing.

3.HTML writing specification

<!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><!--表示标题-->
</head>
<body ><!--body标签是整个html页面显示的主体内容-->
       hello
</body>
</html><!-- 表示整个html页面的结束 -->

4. Introduction to HTML tags

❤️(1). The format of the tag: <tag name>encapsulated data</tag name>.
❤️(2). The tag name is not case-sensitive.
❤️(3). The tag has its own attributes:
divided into:
basic attributes : You can modify simple style effects.
Event attributes: You can directly set the code after the event response.
❤️(4). Labels are divided into:
single label: <label name>
double label: <label name>encapsulated data</label name>
❤️(5).tag syntax:

Labels cannot be cross-nested
Tabs must be properly closed
Labels without text content
The attribute must have a value, and the attribute value must be quoted
Comments cannot be nested

5. Commonly used labels

font: font label

color 属性Change color
face 属性Change font
size 属性Change font size

<font color="#deb887" face="宋体" size="8"><h3 align="center">蓝天</h3></font>

Effect: insert image description here

Heading tags h1-h6
h1 is the largest and h6
alignis the smallest, which is the alignment attribute, which is
leftleft-aligned
center, center-aligned,
rightand right-aligned
```
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
```
Effect:
hyperlink label
a标签It is the hyperlink
href属性to set the address of the link
target属性to set which page (current page or new page) to jump to,
_selfwhich means to open the current page to jump (default)
_blankmeans to open a new page to jump
```
<a href="http://localhost:8080">百度</a><br/>
<a href="http://localhost:8080" target="_self">百度</a><br/>
<a href="http://lo<li>刘能<li/>calhost:8080" target="_blank">百度</a><br/>
```
Effect:
list label
ulIt is an unordered label,
liit is a list item label, and
type属性the symbol in front of the list item can be modified
–>
```
<ul type="none">
    <li>刘能</li>
    <li>赵四</li>
    <li>广坤</li>
</ul>
```
Effect:
img tag
img标签是图片标签, used to display pictures

src属性You can set the path of the picture.
width属性Set the width of the picture.
height属性Set the height of the picture
border属性. Set the frame size of the
alt属性picture. When the specified path cannot find the picture, it is used to replace the displayed text content.

javaSEThe path in the middle is divided into
relative path: 工程名counting from the beginning
absolute path:盘符:/目录/文件名

javaWebPaths are also divided into relative
paths: the 一点directory where the current file is located is
两点the directory above the directory where the current file is located. The file
name ./文件名indicates the file in the directory where the current file is located ./可以省略
. Absolute path:格式:http://ip:port/工程名/资源路径
```
<img src="./imgs/1.jpg" width="200" height="220" border="1" alt="找不到"/>
<img src="./imgs/2.jpg" width="200" height="220" border="1"/>
```
table is the table label

trYes Row Labels
thYes Header Labels
tdYes Cell Labels
bYes Bold Labels

border属性Set the tableSet
width属性the table widthSet
height属性the table heightSet
align属性the alignment of the table relative to the pageSet
cellspacing属性the cell spacing

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

Effect:
insert image description here

iframe tag
iframe标签You can open up a small area on the page to display a separate page
iframe tag and a标签the steps to use it in combination: ❤️ (1). Define a name
in the iframe tag ❤️ (2). Set the name attribute of the iframe on the a tag Value width: set width height: set heightname属性
target属性
```
<iframe name="abc" width="500" height="400"></iframe>
    <ul>
        <li><a href="hello.html" target="abc">123</a></li>
    </ul>
```
Effect:
form is the form label

  input type=text  是文件输入框 value设置默认显示内容
  input type=password  是密码输入框 value设置默认显示内容
  input type=radio  是单选框 name属性可以对其分组 checked="checked"表示默认选中
  input type=checkedbox 是复选框 checked="checked"表示默认选中
  input type=reset 是重置按钮    value属性修改按钮上的文本
  input type=submit 是提交按钮   value属性修改按钮上的文本
  input type=button 是按钮      value属性修改按钮上的文本
  input type=file   是文件上传域
  input type=hidden 是隐藏域
  当我们要发送信息时,这些信息不需要用户看到
  提交的时候同时发送给服务器

  select 标签是下拉列表框
  option 标签是下拉列表框中的选项 selected="selected"设置默认选中
  textarea表示多行文本输入框(标签)

  rows:设置可以显示几行的高度
  cols:设置每行显示几个字符宽度

<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称:</td>
            <td>
            <input type = "text" value = "默认值"/>
            </td>
        </tr>
        <tr>
            <td>用户密码:</td>
            <td>
                <input type = password value = "abc"/>
            </td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td>
                <input type = password value = "abc"/>
            </td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type = "radio" name = "sex" checked="checked"/>男
                <input type = "radio" name = "sex"/>女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td>
                <input type="checkbox"/>散步
                <input type="checkbox"/>看书
                <input type="checkbox"/>做饭
            </td>
        </tr>
        <tr>
            <td>国籍:</td>
            <td>
                <select>
                    <option>---请选择国籍---</option>
                    <option selected="selected">中国</option>
                    <option>英国</option>
                    <option>韩国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td>
                <textarea rows="10" cols="20">123</textarea>
            </td>
        </tr>
        <tr>
            <td><input type="reset"/></td>
            <td align="center"><input type="submit"/></td>
        </tr>
        <tr>
            <td><input type="button" value="按钮"/></td>
            <td ><input type="file"/></td>
            <td><input type="hidden"/></td>
        </tr>
    </table>

Effect:
insert image description here

6. The request characteristics of GET and POST

The characteristics of a GET request are:

❤️(1). The address in the address bar of the browser is action属性+?+请求参数in 请求参数the format: name=value&name=value.
❤️(2). Not safe.
❤️(3). There is a limit on the length of the data.

The characteristics of the POST request are:

❤️(1). In the address bar of the browser, 只有the action attribute value.
❤️(2). Compared with GET request security.
❤️(3). Theoretically, there is no data length limit

[Front-end basics] HTML