javaEE001.03 HTML 标签02:重点标签(插入图片<img src、超链接<a 、表格<table>、表单<form、默认值)

  • Post author:
  • Post category:java




系列文章目录



前言

上一篇讲了HTML的常用标签

这一篇继续



一、重点标签



1、插入图片

在这里插入图片描述

在这里插入图片描述

前提:这张图片必须存在,

疑问:我们能不能直接画一张图片呢?答案是可以的,技术上是支持的,但是你能不能画出来就是另外一回事了,

从专业的角度上来讲想化成这个样子不是一个简单的样子,所以一般情况下,常用的方式还是ps一下或者处理一下,直接插入进来

	* 语法:<img src="路径" alt="路径有误时的提示文本" title="鼠标悬停时的提示文本">

在这里插入图片描述

路径写错了,alt=”路径有误时的提示文本”这个就非常重要了

在这里插入图片描述

在这里插入图片描述

比如鼠标悬停,提示商品价格

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

	* 路径问题
		* 目标文件与当前文件在同包,直接查找目标文件
		* 目标文件与当前文件不在同包,先找目标文件的父包,再找目标文件。
			* 返回上一级:   ../

在这里插入图片描述

在这里插入图片描述



2、超链接

	* 语法:<a href="链接路径" target="链接以何种方式打开(_self|_blank)">文本</a>
	* eg:<a href=""><img src=""></a>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意,标准写法是 target=”_blank”跳转新的页面,但是如果你写成target=“2344”,也会跳转一个新的页面,除非写target=”_self”就不会跳转,写一下调试一下就明白了



3、 表格

在这里插入图片描述

* 语法

|

* 跨行跨列

* 跨行:rowspan

* 跨列:colspan

	tr:行
	td:列

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述



4、 表单

	* 语法
		<form action="表单提交路径" method="提交方式(get|post)">
			<input>
			<select>
				<option></option>
			</select>
		</form>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意跟sql语句的区别 select from * Student

在这里插入图片描述

在这里插入图片描述



表单——登录

下面我们做一个登录的练习

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

为啥有些带数据,有些不带数据,因为name属性

在这里插入图片描述

[扩展]:get和post:get把参数包含在URL中,post通过request body传递参数

submit 提交

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

	* input标签中的属性
		type表单项的类型:text|password|radio|checkbox|reset|submit  
			file文件域
			hidden隐藏域
		name名称:无name,就无法提交该数据
		value值:text|password默认值,sumbit按钮的文本值
		checked: radio&checkbox:默认选中
		id:唯一



表单——提交(注册就是其中一种)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

那么这个bug处理完,name值相同怎么体现它的值不同呢?

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

然后是下拉列表(下拉框)

在这里插入图片描述

在这里插入图片描述

下拉框也是比较特殊的

下拉框如果你没有设置value,提交的是你的文本值,建议加一个value

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

post提交数据是在报文中,所以post相对安全一些,比如用户名和密码,就不能用get,否则密码都被别人看到了

在这里插入图片描述



总结

1、需要注意<input type =“radio”……/>不一样的地方,一个是怎么组合、一个是怎么正确提交

2、:get和post:get把参数包含在URL中,表单提交方式默认提交是get,post提交数据是在报文中,参数不会包含在URL中

3、下拉框如果你没有设置value,提交的是你的文本值,建议加一个value

4、注意跨行是rowspan,跨列是colspan(是column的前面三个字母col 这样的简写而不是完整的columnspan)

5、注意有了name才会在地址栏显示,没有name属性就算你是get也不会在url里面显示,像提交按钮或者登录按钮这样的不携带数据的可以不设置name属性



版权声明:本文为qq_41753340原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。