JAVA EE(进阶)_HTML

思如云烟，行若磐石。

------陳長生.

❀主页：陳長生.-CSDN博客❀

📕上一篇：JAVA EE（进阶）_进阶的开端-CSDN博客

1.HTML

HTML（HyperText Markup Language）--超文本标记语言

由标签组成，可以进行网页的跳转操作

基础创建：

由html标签，title标签，head标签，body标签组成

html：用于定义网页中的内容及结构

title：用来命名浏览器上方的信息列

body：网页的内容

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    </body>
</html>

创建的快捷键：！+回车 /！+Tab

1.1标题标签

标题标签就如Word中的标题标签类似，Word中有标题1，标题2等等

Html中也有对应的h1,h2等

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

1.2.图片标签

在网页中插入图片

<img src="" alt="">

<img src=" https://tse2-mm.cn.bing.net/th/id/OIP-C.pVR4rdWmQnX04eLAdOEJYAHaN4?rs=1\&pid=ImgDetMain**" alt="** 玫瑰**" title="** 玫瑰花**"** width=" 100**" height="** 200**">**

src：路径
alt：文本显示内容，（当图片错误时，会显示的内容）
title：当鼠标移动到图片的位置时，会显示的内容
width：宽度
height：高度

1.3.超链接

点击即跳转到其他页面

<a href="">_</a>

<a href=" demo1.html**">** 玫瑰图片链接**</a>**

href：链接
>：可命名链接名称

1.4.表格标签

可在浏览器中创建n行m列的表格

<table border="1" style="border-collapse:collapse">

<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

<td>第一行第三列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td>第二行第二列</td>

<td>第二行第三列</td>

</tr>

</table>

border：表格
border：边框像素大小
style：边框样式
border-collapse:collapse：边框线合并
tr：行
td：列
如果不想要边框线的话，直接删除style和border-collapse:collapse即可

1.5.表单标签

1.5.1.from标签

将内容合并在一块一起提交到某个页面

<form action=""></form>

action：表示要提到内容的目标路径

1.5.2.input标签

各种输入控件

<input type="">

type：input类型

1）文本框

<input type="text" name="" id="" placeholder="">

name：为类型，用于提交到后端
id：为唯一标识，用于提交到后端
placeholder：文本框中的灰色默认值

2）密码框

<input type="password" name="" id="" placeholder="">

name：为类型，用于提交到后端
id：为唯一标识，用于提交到后端
placeholder：文本框中的灰色默认值

3）单选框

<input type="checkbox" name="" id="" checked>

name：为类型，用于提交到后端
id：为唯一标识，用于提交到后端
checked：表示当前的单选框为默认选中状态

4）复选框

<input type="radio" name="" id="" checked>

name：为类型，用于提交到后端
id：为唯一标识，用于提交到后端
checked：表示当前的复选宽为默认选中状态

5）普通按钮

<input type="button" value="" >

value：为按钮上显示的内容

6）提交按钮

<input type="submit">

1.5.3.select标签

下拉列表框

<select name="" id="">

<option value="">北京</option>

<option value="">上海</option>

<option value="">深圳</option>

</select>

name：为类型，用于提交到后端
id：为唯一标识，用于提交到后端
option：表示当前选项的元素

1.5.4.textarea标签

可变化文本框

<textarea name="" id=""></textarea>

1.6.无语义标签

1.6.1.div

独占一行

<div></div>

不独占一行

1.6.2.span

<span></span>

1.7.练习

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
    <div>
        <h1>用户注册</h1>
    </div>
    <div>
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td>手机号</td>
                <td><input type="text" placeholder="请输入手机号"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" placeholder="请输入密码"></td>
            </tr>
        </table>
    </div>
    <div>
        <input type="submit"> 
        <span>已有账号</span>
        <a href="#">登录</a>
    </div>
    
    </body>
</html>