java-web-html部分_javaweb注册页面复选框选择爱好-CSDN博客

本文链接：https://blog.csdn.net/leaarning/article/details/124021618

1.什么是HTML？

超文本标记语言，超文本：超越了文本限制，比普通文本更强大。标记语言：由标签构成的言。

2.基础标签

<h1> 定义标题

<front> 定义文本的字体，字体尺寸，字体颜色

< b > 定义粗体文本

<i> 定义斜体文本

<u> 定义文本下划线

<center>定义文本居中

<p> 定义段落

<br> 定义换行

<hr> 定义水平线

3.图片，视频，音频标签

<img> 定义图片

src：规定显示图像的url，也就是路径

height:定义图片的高度

width：定义图像的宽度

title:设置鼠标悬停时显示信息

alt:设置图片加载失败显示的信息

<audio>定义音频

src：规定音频的url

controls：显示播放控件

<video>定义

scr:规定视频的url

controls：显示播放控件

一般用相对路径：在项目中创建一个img文件夹，专门放图片

然后img src=" ./img/....... ",图片有宽和高科园通过style来改变

alt属性图片特属就是介绍图片的（alt可要可不要）在图片加载不出来才会显示。

title属性大多数标签都有效果就是当鼠标放在图片上面就会有文字。

4.超链接标签

<a> 超链接标签用于链接到另一个资源

href：热引用，后面一定是一个资源地址，可以是网络中某个资源路径，也可以是本地资源路径。

target：指定打开资源的方式，——self：默认值，在当前页面打开 ——blank：在空白页面打开

作用：

通过超链接可以从浏览器向服务器发送请求。

浏览器向服务器发送数据（请求：request）

服务器向浏览器发送数据（响应:response）

5.列表标签

1.有序列表

<ol> 定义有序列表

<li定义列表项>

2.无序列表

<ul>定义无序列表

<li定义列表项>

type可以改变列表的序号序号形状。

6.表格标签

<table> 定义表格

border:规定表格边框的宽度

width：规定表格的宽度

cellspacing：规定单元格之间的空白

<tr>定义行

align:定义表格行的内容的对齐方式

<td>定义单元格（列）

rowspan：规定单元格可横跨的行数（合并）

colspan：规定单元格可横跨的列数（合并）

<th>定义表头单元格

案例：制作一个课程表

	<table border="1px solid black" cellspacing="" cellpadding=""width="700px"height="500px">
			<tr  id="1"align="center">
				<td colspan="2"></td>
				<td >星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
			</tr>
			<tr id="2" align="center">
				<td rowspan="4">上午</td>
		<td >早自习</td>
		<td>英语</td>
		<td>语文</td>
		<td>英语</td>
		<td>语文</td>
				<td>英语</td>
			</tr>
			<tr id="3"align="center">
				<td>第1节</td>
				<td>数学</td>
				<td>数学</td>
				<td>数学</td>
				<td>数学</td>
				<td>数学</td>
			
			</tr>
			<tr id="4"align="center">
				<td >第2节</td>
				<td>物理</td>
				<td>物理</td>
				<td>物理</td>
				<td>物理</td>
				<td>物理</td>
			
			</tr>
			<tr id="5"align="center">
				<td>第3节</td>
				<td>化学</td>
				<td>化学</td>
				<td>化学</td>
				<td>化学</td>
				<td>化学</td>
			
			</tr>
			<tr id="6"align="center"> 
				<td colspan="7" >午休</td>
			
				
			</tr>
			<tr id="7"align="center">
				<td rowspan="3">第4节</td>
				<td>生物</td>
				<td>生物</td>
				<td>生物</td>
				<td>生物</td>
				<td>生物</td>
				<td>生物</td>
			</tr>
			<tr id="8"align="center">
				<td>第6节</td>
				<td>英语</td>
				<td>英语</td>
				<td>英语</td>
				<td>英语</td>
				<td>英语</td>
				
			</tr>
			<tr id="9"align="center">
				<td>第7节</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				<td>语文</td>
				
			</tr>
		</table>

7.布局标签

<div>定义HTML文档中的一个区域部分，经常与css一起使用，用来把布局页面

<span> 用于组合行内元素。

8.表单标签

表单：在网页中主要负责数据采集功能，使用<form>标签定义表单

长这样

作用：收集用户信息。表单展现之后，用户填写表单，然后提交按钮数据个服务器。

表单项(元素):不同类型的input元素，下拉列表，文本域。

<form> 定义表单

action:规定当提交表单时向何处发送表单数据，用来指定数据提交给哪个服务器，和超链接属性中的href属性一样。

method:规定用于发送表单数据的方式

get：浏览器会将数据直接附在表单的action URL 之后。大小限制
post：浏览器会将数据放到http请求消息体中。大小无限制。

readonly和disabled 相同点，都是只读不能修改，但是readonly可以提交给服务器，disabled数据不会提交（即使有name也不会提交）

<input >定义表单项，通过type属性控制输入形式.

maxlength：设置文本可输入的字符数量

<label>为表单项定义标注

<select>定义下拉列表

<option>定义下拉列表的列表项

<textarea>定义文本域

type取值	描述
text	默认值。就是文本框，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
hidden	定义隐藏的输入字段
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	定义了重置按钮，重置按钮会清楚表单中的所有数据
button	定义可点击按钮

	<body>
		<form action="" method="">
		<label for="username">用户名:</label>
		<input type="text" name="username" id="username" value="" /><br>
        <label for="userpassword">密码:</label>
		<input type="password" name="userpassword" id="userpassword" value="" /><br>
		<label>性别</label><br>
			男<input type="radio" name="gender" id="" value="男" />
			女<input type="radio" name="gender" id="" value="女" /><br>
			<label>复选框(爱好)</label><br>
			游戏<input type="checkbox" name="" id="" value="" />
		羽毛球<input type="checkbox" name="" id="" value="" />
		乒乓球<input type="checkbox" name="" id="" value="" /><br>
			<select>
				<option value ="">--请选择--</option>
				<option value ="">西安</option>
				<option value ="">成都</option>
				<option value ="">北京</option>
				<option value ="">杭州</option>
			</select><br>
			<input type="file" name="" id="" value="" />
			<textarea rows="" cols="">这是个文本域</textarea>
		</form>
	</body>

表单的提交

有name才会提交如：<input type="text" name="username"/>

以这种格式提交：action？name=vlue&name=vlue&name=vlue&........

案例：用户注册表单

	<form action="#" method="">
			
		
		<label>用户名</label>
		<input type="text" name="username" id="" value="" /><br>
		<label>密码</label>
	    <input type="password" name="userpwd" id="" value="" /><br>
		<label>确认密码</label>
	    <input type="password" name="aginuserpwd" id="" value="" /><br>
		 <label>性别</label>
		 男<input type="radio" name="gender" id="gender" value="男" />
		 女<input type="radio" name="gender" id="gender" value="女" /><br>
		 <label>兴趣爱好</label>
		 <input type="checkbox" name="hobby" id="" value="打游戏" />打游戏
		 <input type="checkbox" name="hobby" id="" value="打篮球" />打篮球
		 <input type="checkbox" name="hobby" id="" value="看电视" />看电视
         <input type="checkbox" name="hobby" id="" value="跑步" />跑步<br>
        <label>学历</label>
		<select name="degree">
			<option value ="本科" >本科</option>
			<option value ="大专">大专</option>
			<option value ="硕士">硕士</option>
		</select><br>
		<label>简介</label>
		<textarea rows="" cols="" name="message"></textarea><br>
		<input type="submit" name="" id="" value="确认" />
		<input type="reset" name="" id="" value="重置" />
		</form>
	</body>