JAVA EE(进阶)_HTML
思如云烟，行若磐石。
——陳長生.
❀主页：陳長生.-CSDN博客❀
📕上一篇：JAVA EE（进阶）_进阶的开端-CSDN博客
1.HTML
HTML（HyperText Markup Language）--超文本标记语言
由标签组成，可以进行网页的跳转操作
基础创建：
由html标签，title标签，head标签，body标签组成
html：用于定义网页中的内容及结构
title：用来命名浏览器上方的信息列
body：网页的内容
<!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.练习
<!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>