HTML

HTML是什么？有什么作用？

HTML: (Hyper Text Markuplanguage)超文本标记语言。

文本:相当于记事本里写的文字。展示信息

超文本:超越了文本仅仅展示信息的功能范畴。泛指:图片、有样式的文字、点击跳转页面的文字。

语言:工具

标记:标签。

HTML是由标签所组成的语言，能展示超文本效果。

HTML是用来写网页的，是设计页面的基础。

HTML的入门案例

步骤1： 创建文件，后缀名改为html或htm。

Java html模板填入数据 html怎么用java_HTML


步骤2：用记事本打开，并编写文字。

Java html模板填入数据 html怎么用java_HTML_02


步骤3：用浏览器打开。

Java html模板填入数据 html怎么用java_HTML_03


这样打开和普通的记事本区别不大，为什么那？

因为想要实现超文本编辑，是需要加标签和属性的。

font：标签

color=“ ”：属性

red：属性值

Java html模板填入数据 html怎么用java_Java html模板填入数据_04


这样就将字体变成了红色

Java html模板填入数据 html怎么用java_html_05

关于HTML的语言特征

  • HTML语言是由头和体组成

这是最标准的HTML格式，以后都要使用这样的格式。

<html>
   <head>
     <title>标题</title>
   </head>
   <body>需要展示给用户看的信息内容</body>
</html>

< html >是HTML页面的开始，就相当于java类大括号。

< head >是页面的头部，存放的都是网页的说明性内容，例如标题。

< body >是页面的身体，需要展示给用户看的信息内容

示例：

Java html模板填入数据 html怎么用java_数据_06


和以前的内容是没什么变化，但是已经有了标题。

Java html模板填入数据 html怎么用java_HTML_07

  • HTML文件的扩展名为html或者htm。Htm是老的命名规范，html 的新的。
  • HTML文件由浏览器直接解析执行，无需编译，直接由上到下依次解析执行。
  • HTML标签通常由开始标签和结束标签组成。例如:< font >内容体< /font >，开始标签和结束标签之间的内容叫做内容体。
  • HTML没有内容体的标签叫做空标签。仅由一个标签组成。例如: < br/ > 自关闭。
  • HTML标签不区分大小写，为了方便阅读，建议使用小写。
  • HTML标签是有属性的，格式为:属性名=”属性值”，属性值用引号引起。引号包含单引号和双引号，建议使用双引号。
  • HTML标签建议包裹嵌套，不建议交叉嵌套。
    包裹嵌套：
    html标签完全包裹了head标签
<html>
	<head>
	</head>
</html>

交叉嵌套：
交叉嵌套是不允许使用的

<html>
	<head>
</html>
	</head>

使用HBuilder编写HTML

安装使用

HTML的基本标签

字体标签和格式化标签

字体标签：< font >

字体标签，用于展示效果中修饰文字样式。
< font >属性名=”属性值”>文字< /font >

size:控制字体大小.最小1~最大7。 如果设置范围不在1~7之间，设置无效。

color: 控制字体颜色.使用英文设置(例如: red,blue…) 。

face: 控制字体类型。只能设置系统字库中存在的字体类型。
示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>

	<body>
		hello
		<font size="7" color="red" face="楷体">world</font>
	</body>

</html>

运行结果：

Java html模板填入数据 html怎么用java_Java html模板填入数据_08

格式化标签

现在有一页代码是李白的静夜思：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		静夜思 
		李白 
		床前明月光, 
		疑是地上霜。 
		举头望明月，
		低头思故乡。
	</body>

</html>

运行结果：

但是在运行时就变成了一整换，并没有段落，怎么办，向下看。

Java html模板填入数据 html怎么用java_HTML_09

换行标签：< br/ >

HTML源码中换行，浏览器解析时会自动忽略。

换行标签，用于展示效果中换行。
示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		静夜思<br /> 
		李白 <br /><br />
		床前明月光, 
		疑是地上霜。 
		举头望明月，
		低头思故乡。
	</body>

</html>

运行结果：

一个标签就是一行

Java html模板填入数据 html怎么用java_Java html模板填入数据_10

段落标签：< p >

段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行。

align:段落内容的对齐方式。
默认是left，内容居左。
Right居右。
Center居中。

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		静夜思<br /> 
		李白 <br /><br />
		床前明月光,
		<p>疑是地上霜。</p>
		<p align="center">举头望明月,</p>
		<p align="right">低头思故乡。</p>
	</body>

</htm

运行结果：

Java html模板填入数据 html怎么用java_数据_11

标题标签：< h1 >

标题标签，用于展示效果中划分标题。

其中< h1 >最大，< h6 >最小。

空格符：  ;

HTML源码中的多个空格，效果中最终会合并成一个。
记住要分号结尾。
空格符号，用于展示效果中显-一个空白的位置。

HTML注释

用于注释HTML源码，不在HTML效果中展示。
格式： < !-- HTML注释内容 – >

图片标签：< img/ >

用于在页面效果中展示一张图片，一般情况下都将图片放入项目中的img文件夹中。
src：指明图片的路径。(必有属性)。

  • 图片路径的写法:
  1. 内网路径:
    绝对路径:文件在硬盘上的具体位置。[不建议使用]
    例如: C:\ JavaWeb001_ html\img\c_ 1.jpg.
    相对路径:从使用者所在目录出发。[建议使用相对路径]
    例如: . ./img/c_ 1.jpg
    . ./表示上一层目录
    ./表示当前目录
  2. 互联网路径:
    必须前面加上http://
    例如: http://www.baidu.com/xx.jpg

width:图片宽度

height: 图片的高度

  • 宽度和高度的设置:
    默认单位是px，像素。例如: width="400” 其实 设置的是width=“400px”。固定不改变的
    百分比设置。例如:\width="50%”。是父标签的百分比。动态改变的
    示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<img src="../img/img_01.jpg" width="200" height="200" />
		<img src="../img/img_02.jpg" />
	</body>
</html>

运行结果：

Java html模板填入数据 html怎么用java_Java html模板填入数据_12

背景图片

背景图片有内容时才会显示

<div style="background-image: url(背景图片地址);"></div>

列表标签

无序列表：< ul >

无序列表标签，用于在效果中定义一个无序列表，配合< li >使用。

列表条目：< li >

列表条目项标签，用于在效果中定义一一个列表的条目。

有序列表：< ol >

有序列表标签，用于在效果中定义一个有序列表，配合< li >使用。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>手机数码</li>
			<li>电脑办公</li>
			<li>家电电视</li>
		</ul>
		<ol>
			<li>手机数码</li>
			<li>电脑办公</li>
			<li>家电电视</li>
		</ol>
	</body>
</html>

运行结果：

Java html模板填入数据 html怎么用java_数据_13

超链接标签：< a >

超链接标签，用于在效果中定义一个可以点击跳转的链接，可以跳转到互联网网页和html页面。

href: 超链接跳转的路径（必有属性）。

内网本机路径:相对路径和绝对路径

互联网路径: http://地址
默认跳转到本页
要超链接正常工作:
①a标签中必须有内容
②a标签必须有href 属性

注意:
①a标签内容体，不仅仅是文字，也可以是其他内容，例如图片。
②a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上,例如图片。

表格标签

表格：< table >

表格标签，用于在效果中定义一个表格。
border:设置表格的边框粗细
width:设置表格的宽度

表格行：< tr >

表格的行标签，用于在效果中定义一个表格行。

表格行单元格（列）：< td >

表格的单元格（列）标签，用于在效果中定义一个表格行中的单元格。

表格表头：< th >

表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格。
< th >和< td >唯一区别: < th >内容居中加粗。

定义表格步骤：
①定义一个表格
< table >< /table >
②定义表格中的一行
< tr >< /tr >
③在表格一行中定义单元格
< td >< /td >

示例：
定义一份成绩表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width="100%">
			<tr>
				<th>姓名</th>
				<th>语文</th>
				<th>数学</th>
				<th>总分</th>
			</tr>
			<tr>
				<td>小明</td>
				<td>100</td>
				<td>100</td>
				<td>200</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>100</td>
				<td>100</td>
				<td>200</td>
			</tr>
		</table>
	</body>
</html>

运行结果：

Java html模板填入数据 html怎么用java_Java html模板填入数据_14

单元格合并

< td >或者< th >都有两个单元格合并属性:。

colspan: 跨列合并单元格（左右表格之间）

rowspan:跨行合并单元格（上下表格之间）

合并步骤:
①确定合并哪几个单元格，确定是跨列合并还是跨行合并
②在第一个出现的单元格上书写合并单元格属性。
③合并几个单元格，属性值就书写几
④被合并的单元格必须删掉。

示例：

没合并之前：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="100%">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td>10</td>
			</tr>
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
				<td>14</td>
				<td>15</td>
			</tr>
			</tabl>
	</body>
</html>

运行结果：

Java html模板填入数据 html怎么用java_数据_15


合并后：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="100%">
			<tr>
				<td colspan="2">1</td>
				
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td rowspan="2">6</td>
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td>10</td>
			</tr>
			<tr>
				
				<td>12</td>
				<td>13</td>
				<td>14</td>
				<td>15</td>
			</tr>
			</tabl>
	</body>
</html>

运行结果：

Java html模板填入数据 html怎么用java_Java html模板填入数据_16

块标签

Java html模板填入数据 html怎么用java_数据_17

块级块标签：< div >

块级的块标签，用于在效果中定义一块，默认占满一行，进行内容的显示。

会自动换行，默认占满一行，适用于大量数据展示。

行级快标签：< span >

行级的块标签，用于在效果中一行上定义一个块，进行内容显示。

有多少内容，就会占用多大空间。

Span不会自动换行，适用于少量数据展示。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>我是div1111111111111111</div>
		<div>我是div2222222222222222</div>
		<span>我是span11111111111111</span>
		<span>我是span22222222222222</span>
	</body>
</html>

运行结果：

div块标签会占满一行，而span块标签有多少内容就占多少。

Java html模板填入数据 html怎么用java_HTML_18

HTML的表单标签

表单标签：< form >

  • < form >< /form >标签。
    用于在效果中定义一个表单，用于提交用户填写的数据。

action:将数据提交到何处。
    默认提交到本页。

method:将数据以何种方式提交
默认为: get
提交方式可定义: get（显式提交）或者post（隐式提交）

Get提交方式特点:把数据拼接到地址栏上。
Post提交方式特点:没有把提交数据拼接到地址栏上。请求体

Get和post提交方式区别:
①get提交的参数列表拼接到了地址栏后面。
 post方式不会拼接地址栏。

②get方式提交的数据敏感信息不安全。
 Post方式提交的数据相对安全。

③get方式提交的数据量有限的。
 Post方式从理论上提交的数据量无限大。

输入项标签：< input/ >

  • < input/ >标签
    表单输入项标签之一，用户可以在该标签上通过填写和选择进行数据的输入。

type ： 设置该标签的种类

type

设置该标签的种类

text

文本框。（默认）

password

密码框。（内容为非明文）

radio

单选框。在同一组内有单选效果

checkbox

复选框。在同一组内有复选效果

submit

提交按钮。用于控制表单提交数据。默认value：提交

reset

重置按钮。用于将表单输入项恢复到默认状态。默认value：重置

file

附件框。用于文件上传。

hidden

隐藏域。一般用作提交服务器需要拿到，但用户不需要看到的数据。

button

普通按钮。 需要和JS的事件一起使用。

name:单选框、复选框进行数据的分组。/ 设置该标签对应的参数名。
   某个表单输入项需要通过参数列表提交，就必须设置name属性。

value:设置该标签对应的参数值。 / 设置按钮的名字
   value属性的设置策略:
   ①文本框、密码框这样的表单输入项，可以不强制指定value,因为用户可以自由输入。
   ②单选框、复选框这样的表单输入项，必须强制指定value, 因为用户无法输入，只能选择，如果不指定value,那么提交上去的只有on

checked:设置单选框/复选框的默认选中状态。

readonly:设置该标签的参数值只读，用户无法手动更改。数据可以正常提交。

disabled:设置该标签不可用，参数值无法更改，且参数值也无法提交。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<input type="hidden" name="uid" value="xxx" />
			用户名：<input type="text" name="username" /><br />
			密   码：<input type="password" name="password" /><br />
			<!-- checked设置“男”为默认值 -->
			男<input type="radio"  checked="checked" name="radio" value="men" />
			女<input type="radio" name="radio" value="wumen" /><br />
			<!-- checked设置“编程为默认值” -->
			爱好：编程<input type="checkbox" checked="checked" name="checkbox" value="java" />
			跑步<input type="checkbox" name="checkbox" value="pao" />
			健身<input type="checkbox" name="checkbox" value="jian" /><br />
			头像：<input type="file" /><br />
			<!-- readonly -->
			注册时间：<input type="text" readonly="readonly" name="date" value="2020年" /><br />
			<!-- disabled -->
			html：<input type="text" disabled="disabled" name="disabled" value="55" /><br />
			<input type="submit" />		<input type="reset" />
		</form>
	</body>
</html>

运行结果：

Java html模板填入数据 html怎么用java_Java html模板填入数据_19


填写数据

Java html模板填入数据 html怎么用java_html_20

Java html模板填入数据 html怎么用java_Java html模板填入数据_21

选择框标签

选择框：
< select >< /select >标签定义一个选择框，配合< option >标签使用。

name:设置该标签对应的参数名。

multiple:设置该标签选项全部显示，并且可以进行多选提交。默认为单选。

选项值：
< option >< /option >选项标签，用于为一个选择框添加一个选项

value:设置需要提交的参数值。

selected:设置选项的默认选中状态。

注意事项:
option的内容体一般是用来进行展示。
参数值应该是option的value属性值。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<select name="test">
				<option value="1">选项一</option>
				<option value="2">选项二</option>
				<option value="3">选项三</option>
			</select>
			<br />
			<select name="city">
				<option value="">选择城市</option>
				<option value="beijing" selected="selected">北京</option>
				<option value="shanghai">上海</option>
			</select>
			<br />
			<select name="hobby" multiple="multiple">
				<option value="code">编码</option>
				<option value="read">阅读</option>
				<option value="run">跑步</option>
			</select>
			<br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

运行结果：

Java html模板填入数据 html怎么用java_数据_22


选择数据提交

Java html模板填入数据 html怎么用java_html_23


Java html模板填入数据 html怎么用java_数据_24

文本域标签：< textarea >

< textarea >< /textarea >标签：
表单输入项标签之一，用户可以在该标签上通过输入进行数据的输入。

name:设置该标签对应的参数名。

文本域和文本框区别:
①文本框不能换行，文本域可以
②文本框参数值是value属性，文本域参数值是标签的内容体

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<textarea name="area">xxxxxxxxxx</textarea>
			<br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

运行结果：

默认值xxxxxxxxxx

Java html模板填入数据 html怎么用java_html_25


提交

Java html模板填入数据 html怎么用java_数据_26

提交表单的中文问题

为什么要使用URL编码

为了保证表单数据传递时能更好区分出name和value。
保证数据传递的完整性。

正常提交数据:
?password=1233456789&username=zhangsan
提交后读取数据时，是利用&符号分割参数值的。

非正常提交数据:
?password=123!2@&cc&usernamezhangsan
而非正常的情况下，密码输入是也有&符号，上传上去后读书时就会发生分割错误的情况。

URL编码解决方式:特殊符号，中文
例如: & -> %26

编码完: ?password=123!2@%26cc&usernamezhangsan
编码完提交上去的&符号就变成了%26，就不会产生分割问题了。

URL编码的表现形式&本质

①你好，进行普通的编码，编码成字节数组。【使用的是页面规定的字符集，例如utf-8】。
②字节数组中的每一个元素，都会从10进制，转为16进制。
③把已经转为16进制的字节数组，以%进行拼接。拼接出的字符串，就是URL编码后的结果。

例如:你好，用UTF-8编码， 编码的字节数组为:
[-28， -67，-96， -27， -91， -67]
URL编码后: %E4%BD%A0%E5%A5%BD