一 HTML
附html学习手册
- html：超文本标记语言，用于显示资源
- http：超文本传输协议，用于传输资源
- url：统一资源定位符，用于定位资源
1 html的结构
<!--表示html文件的开始-->
<html>
<head></head><!--用于存放与页面显示无关的内容-->
<body></body><!--用于存放与与页面显示相关的内容-->
</html><!--用于表示html文件的结尾-->
html语言不区分大小写；
html的属性写在标签中，格式为属性名=属性值，
属性值 需用双引号括起，如没有属性则用空格代替
2 html书写规范
<!-- <!DOCTYPE>并非html标签，只是用来表示一种约束 -->
<!DOCTYPE html>
<html lang="en"> <!-- html标签，表示html的开始
html标签一般分为两部分 分别为head和body -->
<head> <!-- 表示头部信息，一般包含三部分内容，title标签，css样式， js代码 -->
<!-- 表示当前页面所使用的字符集 -->
<meta charset="UTF-8">
<title>这是一个标题</title>
</head>
<!-- 表示页面的主体部分 -->
<body>
这是将要输出在页面上的信息
</body>
</html>
head标签内可以包含的信息：
- content-type text/html;charset=编码集：用于控制当前页面的编码
- title：表示当前页面的标题
body标签的属性：
- bgcolor：主体背景颜色
- background：背景照片
3 html标签介绍
font标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font标签测试</title>
</head>
<body background="../imgs/OET.jpg">
<font color="blue" face="宋体" size="10">这是一个关于font标签的测试</font>
<font color="blue" size="10"><br/>这个标签一般用来设置文字属性</font>
<font color="blue" size="10"><br/>可以设置文字color ， face ， size</font>
</body>
</html>
font标签内可以设置显示文字的颜色，字体和字号（最大为7）
特殊字符标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊字符标签</title>
</head>
<body>
这是简单的换行标签——<br/><br/>
这是简单的水平线标签——<hr/></>
<hr>
这是简单的段落标签——<p/><br/>
<p>
</body>
</html>
注意：通常使用<加分号来表示<，用>加分号来表示>，使用 加上分号来表示空格
标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
下面表示的都是标题标签
<h1 align="left">标题1</h1>
内容
<h2 align="center">标题2</h2>
内容
<h3 align="right">标题3</h3>
内容
<h4>标题4</h4>
内容
<h5>标题5</h5>
内容
<h6>标题6</h6>
内容<h1 align="left">标题1</h1>
内容
<h2 align="center">标题2</h2>
内容
<h3 align="right">标题3</h3>
内容
<h4>标题4</h4>
内容
<h5>标题5</h5>
内容
<h6>标题6</h6>
内容
</body>
</html>
标题标签使用h1——h6表示，标题大小为递减，可以通过align设置标题的位置如left， center和right
超链接标签
在网页中所有点击之后可以跳转的内容都是超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
下面有一个超链接，点击它会自动转到font标签学习页面：<br/>
<a href="1.font标签.html" target="_self">font标签学习</a>（此链接用于当前页面跳转）<br/>
<a href="1.font标签.html" target="_blank">font标签学习</a>（此链接用于新标签页面跳转）<br/>
<a href="http://localhost:63342/JavaWeb/.idea/5.%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE.html?_ijt=h9fk4sfl0920ng8vi769ij1isl" target="_blank">列表标签学习</a>（此链接用于新标签页面跳转）<br/>
</body>
</html>
href表示的是跳转的链接地址；
target属性用于设置跳转方式——_self表示自跳转，_blank表示新页面跳转
<a>可以表示锚点，
声明锚点<a name = 锚点名 />
使用锚点<a href = “锚点所在的页面路径#锚点名” />
列表标签
列表分为有序列表和无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body background="../imgs/OIP.jpg">
<font color="#f0f8ff" size="7">下面ul形式的表示无序列表，type表示无序列表前的标记种类</font>
<ul type="point">
<font color="#f0f8ff" size="7">
<li>刘德华</li>
<li>黎明</li>
<li>张学友</li>
<li>郭富城</li>
</font>
</ul>
<font color="#f0f8ff" size="7">下面ol形式的表示有序列表</font>
<ol type="none">
<font color="#f0f8ff" size="7">
<li>刘德华</li>
<li>黎明</li>
<li>张学友</li>
<li>郭富城</li>
</font>
</ol>
</body>
</html>
ul标签指的是无序列表，type属性可以修改列表项前的符号
ol标签指的是有序列表
li值得是列表项
img标签
img标签可以在html页面上显示图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签</title>
</head>
<body>
下面使用img标签来再页面中展示图片<br/>
<img src="../imgs/OIP.jpg" width="300" height="500" border="1" title="图一"
alt="这行文字表示当找不到图片时显示的代替文本">
<br/>下面使用img标签来再页面中展示图片二<br/>
<img src="../imgs/OET.jpg" width="300" height="500" border="1" title="图二"
alt="这行文字表示当找不到图片时显示的代替文本">
</body>
</html>
img标签是图片标签，可以用来显示图片
i.src属性可以设置图片的路径
ii.width属性可以设置图片的宽度
iii.height属性可以设置图片的高度
iiii.border属性可以设置图片边框的大小
iiiii.alt属性可以设置当当前图片路径不存在是，用来代替的文本内容
注意，在JavaSE中路径分为相对路径和绝对路径
i.相对路径：以相对当前工程名为准
ii.绝对路径：盘符：/目录/文件名
在JavaWeb中路径也分为相对路径和绝对路径
i.相对路径：
.，表示当前文件所在的目录
..，表示当前文件所在的上一级目录
文件名，表示当前文件所在的目录中的文件，相当于./文件名
../文件名，表示当前文件所在的上一级目录中的文件
ii.绝对路径
http://ip:port/工程名/资源路径
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
下面展示的是table标签生成的表格<br/>
<table align="center" border="1" width="300" height="300" cellspacing="0">
<!-- tr表示的是行标签 -->
<tr>
<!-- th表示的是表头 -->
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr><tr>
<!-- td表示的是单元格 -->
<td><img src="../imgs/OET.jpg" width="100" height="100"></td>
<td><img src="../imgs/OET.jpg" width="100" height="100"></td>
<td><img src="../imgs/OET.jpg" width="100" height="100"></td>
<td><img src="../imgs/OET.jpg" width="100" height="100"></td>
<td><img src="../imgs/OET.jpg" width="100" height="100"></td>
</tr><tr>
<td><img src="../imgs/OIP.jpg" width="100" height="100"></td>
<td><img src="../imgs/OIP.jpg" width="100" height="100"></td>
<td><img src="../imgs/OIP.jpg" width="100" height="100"></td>
<td><img src="../imgs/OIP.jpg" width="100" height="100"></td>
<td><img src="../imgs/OIP.jpg" width="100" height="100"></td>
</tr>
</table>
</body>
</html>
table标签是表格标签，用于构建表格
i.border标签用于设置表格标签的边框
ii.width属性可以设置单元格的宽度
iii.height属性可以设置单元格的高度
iiii.align属性可以设置表格的对齐方式
iiiii.cellspacing属性可以设置单元格之间的间距
tr标签是行标签
th标签是表头标签
td是单元格标签，align属性可以设置单元格内对齐方式
b是加粗标签
跨行跨列表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨行跨列表格标签</title>
</head>
<body>
<table border="1" cellspacing="0" align="center">
<tr>
<td colspan="4">
<img src="../imgs/一行一列.JPG" width="358">
</td>
</tr><tr>
<td colspan="4" bgcolor="#faebd7">
<a href="1.font标签.html"><font color="aqua">新华社：阿里巴巴集团已经成为全球最大零售商<br/></font></a>
<a href="1.font标签.html"><font color="#8a2be2">阿里参与电商标准制定 </font></a>
<a href="1.font标签.html"><font color="#8a2be2">优酷土豆成阿狸公司</font></a>
</td>
</tr>
<tr>
<td align="center" onclick="alert('点击有惊喜喔')"><img src="../imgs/三行一列.JPG"></td>
<td align="center" onclick="alert('点击有惊喜喔')"><img src="../imgs/三行二列.JPG"></td>
<td align="center" onclick="alert('点击有惊喜喔')"><img src="../imgs/三行三列.JPG"></td>
<td align="center" onclick="alert('点击有惊喜喔')"><img src="../imgs/三行四列.JPG"></td>
</tr>
<tr>
<td colspan="4">
阿里APP
<a href="4.超链接标签.html">更多>></a><br/>
<img src="../imgs/四行一列.JPG" width="358">
</td>
</tr>
</table>
</body>
</html>
在单元格标签属性中使用colspan=跨列数以及rowspan=跨行数即可以完成行列的跨越
iframe框架标签（内嵌窗口）
iframe标签可以在一个html页面上打开一个小窗口，用于加载一个单独的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe窗口标签</title>
</head>
<body>
下面是一个使用iframe标签构建的页面窗口<br/>
<iframe src="http://www.baidu.com" width="500" height="500" align="center" name="新窗口"></iframe>
<ul>
<li><a href="http://www.baidu.com" target="新窗口">百度</a></li>
<li><a href="http://www.souhu.com" target="新窗口">搜狐</a></li>
<li><a href="http://www.soso.com" target="新窗口">搜搜</a></li>
</ul>
</body>
</html>
iframe标签的使用适用于在当前页面中直接加载单独页面
可以在当前页面中显示超链接而在iframe窗口中显示超链接到的页面。使用步骤是在iframe标签中设置name属性，并且在超链接标签<a>中设置target属性为iframe中的name属性
表单标签——表单的显示
表单是在html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。例如登录qq的界面有用户名和密码，还有记住密码，和登录按钮这就是一个表单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
用户名称：
<input type="text" value="默认值"/><br/>
用户密码：
<input type="password" value="abc123"/><br/>
确认密码：
<input type="password" value="abc123"/><br/>
性别：
<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked="checked"/>女<br/>
兴趣爱好：
<input type="checkbox" checked="checked"/>Java
<input type="checkbox"/>JavaScript
<input type="checkbox"/>C++
<input type="checkbox"/>.Net<br/>
国籍:
<select>
<option selected="selected">--请选择--</option>
<option>中国</option>
<option>漂亮国</option>
<option>日本</option>
<option>绅士国</option>
</select><br/>
自我评价：<br/>
<textarea rows="10" cols="20">请输入您对自己的自我评价</textarea><br/>
<input type="reset"/>
<input type="submit"/>
</form>
</body>
</html>
form标签就是表单，其中的input标签是信息输入标签，type属性用于控制输入内容
<input type="text" value=默认值/>，是文本输入框，value设置默认的显示内容<input type="password" value=默认值/>，是密码输入框，value设置默认显示内容<input type="radio" name = 分组名 checked="checked"/>，是单选框，name属性可以对其进行分组，checked = "checked"表示默认选中<input type="checkbox" checked="chenked"/>，是复选框，checked = "checked"表示默认选中<input type="reset" value=文本内容，是重置按钮，value属性用于修改按钮上的文本<input type="submit" value=文本内容/>，提交按钮，value属性用于修改按钮上的文本<input type="button" value=文本内容"/>，是按钮，value属性用于修改按钮上的文本<input type="file"/>，是文件上传域<input type="hidden"/>，是隐藏于，当我们需要发送某些信息，但是这些信息不需要用参与时，就可以使用隐藏域。（在提交的时候同时发送给服务器）
select标签是下拉列表框，而其内部的option标签是下拉列表框中的选项，selected属性代表默认选中
textarea标签表示多行文本输入框，标签内部的内容是默认值
rows属性设置可以显示高度，cols属性设置可以显示宽度
表单标签——表单格式化
没什么新鲜的，就是把表单放在表格里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body background="../imgs/一行一列.JPG">
<form>
<h1 align="center">用户注册</h1>
<table align="center" border="1" bgcolor="#f0f8ff">
<tr>
<td>用户名称：</td>
<td colspan="2">
<input type="text" value="默认值"/>
</td>
</tr>
<tr>
<td>用户密码：</td>
<td colspan="2">
<input type="password" value="ABC123"/>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td colspan="2">
<input type="password" value="ABC123"/>
</td>
</tr>
<tr>
<td>性别：</td>
<td colspan="2">
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td colspan="2">
<input type="checkbox" />Java
<input type="checkbox" />.Net
<input type="checkbox" />C++
</td>
</tr>
<tr>
<td>国籍：</td>
<td colspan="2">
<select>
<option selected="selected">--请选择--</option>
<option>中国</option>
<option>美国</option>
<option>巴基斯坦</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td colspan="2">
<textarea rows="10" cols="20">请输入文本</textarea>
</td>
</tr>
<tr>
<td></td>
<td align="center">
<input type="reset"/>
</td>
<td align="center">
<input type="submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
表单标签——表单提交细节
form标签是表单标签，用于创建显示表单。form标签中有两个比较重要的属性分别为action属性和method属性。
<form action="http://www.baidu.com" method="get">表单内容<form/>
- action属性设置表单提交到的服务器地址
- method属性设置表单提交的方式（get或者post）
在表单提交的时候，会出现数据没有发送给服务器的情况：
- 表单项没有name属性值（因此所有需要传输给服务器的表单项都需要name属性）
- 单选、复选以及下拉列表中的option标签都需要添加value属性，以便发送给服务器（否则会显示on，这样服务器无法判断选择什么值）
- 表单项不在提交的form标签中
get请求的特点是：
- 浏览器地址栏中的地址是：action属性[+?+请求参数（各类提交了的表单信息）]
请求参数的格式是name=value&name=value - 不安全（因为会在地址栏中显示出各个请求参数的信息）
- 有数据长度的限制
post请求的特点是：
- 浏览器地址栏中的地址只有action属性
- 相对于get请求要更加安全
- 理论上没有数据长度的限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body background="../imgs/一行一列.JPG">
<form action="http://localhost:8080" method="get">
<input type="hidden" name="action" value="login"/>
<h1 align="center">用户注册</h1>
<table align="center" border="1" bgcolor="#f0f8ff">
<tr>
<td>用户名称：</td>
<td colspan="2">
<input name="username" type="text" value="默认值"/>
</td>
</tr>
<tr>
<td>用户密码：</td>
<td colspan="2">
<input name="password" type="password" value="ABC123"/>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td colspan="2">
<input name="password" type="password" value="ABC123"/>
</td>
</tr>
<tr>
<td>性别：</td>
<td colspan="2">
<input type="radio" name="sex" checked="checked" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td colspan="2">
<input name="hobby" type="checkbox" value="java"/>Java
<input name="hobby" type="checkbox" value="net"/>.Net
<input name="hobby" type="checkbox" value="cpp"/>C++
</td>
</tr>
<tr>
<td>国籍：</td>
<td colspan="2">
<select name="country">
<option selected="selected" value="none">--请选择--</option>
<option value="CN">中国</option>
<option value="USA">美国</option>
<option value="BA">巴基斯坦</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td colspan="2">
<textarea name="desc" rows="10" cols="20">请输入文本</textarea>
</td>
</tr>
<tr>
<td></td>
<td align="center">
<input type="reset"/>
</td>
<td align="center">
<input type="submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
其他标签
div标签，span标签，p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他标签</title>
</head>
<body>
<!-- div标签 默认标签中的文字独占一行 -->
<div>偶或</div>
<div>偶或</div>
<div>偶或</div>
<!-- span标签 它的长度是封装数据的长度 -->
<span>span</span>
<span>span</span>
<span>span</span>
<!-- p段落标签 默认在标签内部文字段前段后空一行 -->
<p>p</p>
<p>p</p>
<p>p</p>
</body>
</html>
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
