一、HTML初识
1、概念
1. 概念：
HTML：超文本标记语言
2. HTML的作用：
需要将java在后台根据用户请求处理的请求结果在浏览器中显示给用户。
在浏览器中数据需要使用友好的格式展示给用户。
==HTML最大作用是告诉浏览器接收到的数据是使用什么样的数据组织形式显示。==
3. 使用：
HTML的标准文档规范
HTML的标签
System.out.println("学生\t老师\t");
System.out.println("学生<br>老师<br>");
2、三大基石
HTML：
超文本标记语言（有效的组织数据在浏览器端的显示）
HTTP：
超文本传输协议（规范浏览器和服务器之间数据交互的格式）
URL：
统一资源定位符（唯一的定位一个网络资源）
超文本就是包括视频音频的文本
3、HTML的文档声明
文件以html或者htm结尾
4、标准文档结构
<html>
<head>
<!-- 主要是配置 浏览器显示数据的配置信息
例如：字符编码等
一般给浏览器进行使用
-->
</head>
<body>
<!--
给用户进行数据显示
-->
This is my first html!
</body>
</html>
<!--
HTML的标准文档结构学习：
顶层标签：HTML
头标签：head 一般给浏览器进行使用
主体标签：body 给用户进行数据显示
注意：HTML的标签的语法为<标签名></标签名>(双标签)或者<标签名 />(单标签)
-->
注意：html是由浏览器解析执行的
二、HTML的Head标签
前端开发工具介绍：
Hbuilder：可以快速生成HTML的标准文档结构，而且集成了很多方便的快捷键。
1、网页标题标签
<title>学习1</title><title>学习1</title>
<!--网页标题标签，告诉浏览器使用什么标题显示网页-->
2、编码格式标签
<meta http-equiv="content-type" content="text/hrml;charset=utf-8" />
3、 网页搜索优化标签
<meta name="keywords" content="HTML,sjw"/>
<meta name="description" content="本网页是关于什么什么的巴拉巴拉，巴拉巴拉。"/>
<meta name="author" content="zhang"/>
4、 网页指定跳转标签
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="UTF-8">-->
<meta http-equiv="content-type" content="text/hrml;charset=utf-8" />
<!--告诉浏览器使用什么编码格式-->
<title>学习1</title>
<!--网页标题标签，告诉浏览器使用什么标题显示网页-->
<!--
了解：
关键字
网页描述
作者
作用：
提升网页在浏览器中的搜索概率
-->
<meta name="keywords" content="HTML,sjw"/>
<meta name="description" content="本网页是关于什么什么的巴拉巴拉，巴拉巴拉。"/>
<meta name="author" content="zhang"/>
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
<!--指定秒数后刷新到指定网页-->
</head>
<body>
this my first html
</body>
</html>
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
<!--指定秒数后刷新到指定网页-->
5、其他标签
css、js
三、body标签
文本标签
自己占一行的标签叫做块级标签
1、标题标签
2、段落标签
==p:==
会将一段数据作为整体进行显示，主要是进行css和js操作时比较方便
特点：
段落与段落之间会自动换行，
也可以使用 ==br==换行
空格符：
== ==
权重标签：
b：会将内容加黑
i：斜体
u：下划线
del：增加删除线
以上标签不会自动换行，并且可以嵌套使用
3、标签属性
-
align:center left right
-
width="宽度"
-
color="颜色"
-
size="高度"
列表标签
1.无序列表
ul
li:该标签中数学列表内容，一个li标签代表列表中的一行数据
特点：默认数据前有一个黑圆圈符号
2.有序列表
ol
li:该标签书写列表内容，一个li标签代表列表中的一行数据
特点：会自动给列表进行顺序编码，序号连续
属性
type：可以改变顺序编码的值，如a，A，Ⅰ（罗马数字1）
3.自定义列表
dl
dt 数据的标题
dd 数据内容
四、图片标签
1.img
src
-
图片路径
- 本地路径
- 相对路径：从当前所在位置出发的路径
- 绝对路径：从根盘符出发的路径
- 网络资源
- 图片的url地址
- 本地路径
-
width:宽度，单独设置时自动同步高度以保证不失真
-
height：高度
-
alt:加载不成功时显示的文字
-
title:鼠标指上去时显示的文字
2.不自动换行：
行内元素
五、超链接标签
1.超链接标签学习
==a：==
href：写要跳转的资源路径
本地资源：路径
网络资源：url
target:知名要跳转网页资源的显示位置
_self：在当前页刷新显示
_blank:在新标签里显示
_top:在顶层页面显示
_parent:在父级页面显示
注意：超链接标签中声明访问方式，可以是文字也可以是图片
2.锚点学习:
作用：在一张网页中进行资源跳转
使用：
先使用超链接标签在指定的网页位置增加锚点，格式为：
<a id="锚点名"></a>
使用a标签可以跳转指定的锚点，达到网页内部资源跳转的目的，格式：
<a id="#锚点名">访问</a>
------回到顶部
==<a href="#">回到顶部</a>==
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<h3>超链接标签</h3>
<hr />
<h6>本地资源</h6>
<a href="05-HTML-图片标签.html">跳转到05-HTML-图片标签</a>
<a href="05-HTML-图片标签.html"><img src="img/1.JPG" title="跳到05" alt="www" /></a>
<hr />
<h6>网络</h6>
<a href="https://www.runoob.com/js/js-tutorial.html">菜鸟</a>
<a target="_blank" href="https://www.runoob.com/js/js-tutorial.html"><br />
<img title="菜鸟教程" src="https://static.runoob.com/images/icon/mobile-icon.png" alt="" />
</a>
</body>
</html>
六、表格标签
1.表格标签学习
table：声明一个表格
tr：声明一行,设置行高及该行所有单元格的高度
th：声明一个标题格，默认居中加黑加粗
td：声明一个单元格，默认居左显示原始数据，只需要设置第一行单元格的宽度，该列均这么宽
2.表格标签的常用属性学习
-
属性：
-
border:给表格添加边框
-
width:宽
-
height：高
-
cellpadding:
内容距离边框的距离
-
cellspacing：
表格边框的宽度
-
-
特点：
默认根据数据的多少进行表格扩充
3.单元格的合并学习
-
第一步：
确保表格是一个规整表格 -
第二步：
根据要合并的单元格，找到所在源码位置 -
第三步：
- 行合并：在要合并的单元格中第一个上使用属性rowspan=“要合并的单元格个数”，并删除其他单元格完成合并
- 列合并：在要合并的单元格中的任意一个上使用属性colspan=“要合并的单元格个数”，并删除其他单元格
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格标签学习</title> </head> <body> <h3>表格标签学习</h3> <hr /> <h4>表格标签的常用属性学习</h4> <table border="1px" cellpadding="10" cellspacing="0"> <tr height="50px"> <th width="100px">科目</th> <th>分数</th> <th>级别</th> <th>说明</th> </tr> <tr height="50px"> <td>java</td> <td>80</td> <td>b</td> <td>面向对象语言</td> </tr> <tr height="50px"> <td>c语言</td> <td>100</td> <td>a</td> <td>面向过程的语言</td> </tr> </table> <hr /> <h3>单元格的合并学习</h3> <table border="1px" cellpadding="10px" cellspacing="0"> <tr height="35px"> <td width="100px"></td> <td width="100px"></td> <td width="100px"></td> <td width="200px" rowspan="2" colspan="2"></td> </tr> <tr height="35px"> <td colspan="2"></td> <td></td> </tr> <tr height="35px"> <td></td> <td></td> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr height="35px"> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html><pre></pre>标签会原样输出格式
七、内嵌和框架标签
注意：
第一步一定要删除body标签
框架标签学习：
- frameset
- rows：按照行进行切分页面
- cols：按照列进行切分页面
- 子标签：
- frame：进行切分区域的占位，一个frame可以单独加载网页资源
- src：资源路径（本地或者网络）
- name：区域名，结合超链接使用
- frame：进行切分区域的占位，一个frame可以单独加载网页资源
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架标签学习</title>
</head>
<frameset rows="10%,*,10%" border="5px" style="border-color:black;">
<frame src="frameset/top.html"/>
<frameset cols="10%,*">
<frame src="frameset/left.html"/>
<frame src="frameset/right.html" name="_right"/>
</frameset>
<frame src="frameset/bottom.html"/>
</frameset>
</html>
八、HTML表单
1、form表单标签
form表单标签学习：
作用：
收集并提交用户数据给指定的服务器
注意1：form标签会收集其标签内部的数据
属性:
- action:收集的数据的提交地址url
- method：收集的数据的提交方式
- get：适合小量数据，表单数据以问号隔开，拼接在url后面，不同键值对使用&隔开
- post：适合大量数据，安全，隐式提交
注意2：表单数据的提交，要提交的表单项必须有name值，否则不提交
并且提交的数据为键值对
注意3：form表单数据提交需要依赖于submit提交按钮
2、form表单域标签
1）form表单域标签学习：
作用：给用户提供可以进行数据书写或者选择的标签
2）使用：
1.文本框：
input：
type：
text：收集少量的文本数据，用户可见
password：不可见文本数据
name：数据提交的键，也会被js使用
value：默认值
2.单选框：
input：
type：
radio
name：name属性值相同的单选框只能选择一项
value:要提交的数据
checked：使用此属性的单选默认是选择状态
3.多选框：
input：
type：
checkbox
name:一个多选组需要使用相同的name属性
value：要提交的数据
checked：默认选择状态
4.单选下拉框：
select:
name：数据提交的键名，必须声明
option：子标签，一个option标签标示一个下拉选项
value：要提交的数据
5.文本域：
textarea：声明一个可以书写大量文字的文本趋于
name：数据提交的键名，js和css会使用
rows：声明文本域的行数
cols：声明文本域的列数
6.普通按钮：
input：
type：
button
name：如果有，会提交数据，无意义所以多不写
value
7.隐藏标签：
input：
type：
hidden
name
value
注意：表单数据提交提交的是表单域标签的value值
3、form表单标签的使用
在点击数据提交时，form标签会将其内部所有form表单域标签中用户
书写的数据按照method指定的提交方式，提交给action属性指定的提交地址。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form标签学习</title>
</head>
<body>
<h3>form标签学习</h3>
<hr />
<form action="#" method="get">
用户名：<input type="text" name="usrname" value="用户名" /><br />
密码：<input type="password" name="usrpwd"/><br />
性别：
男<input type="radio" name="sex" value="1"/>
女<input type="radio" name="sex" value="0" checked="checked"/> <br />
爱好：<br />
吃饭<input type="checkbox" name="fav" value="1"/><br />
睡觉<input type="checkbox" name="fav"value="2"/><br />
打豆豆<input type="checkbox" name="fav" value="3"/><br />
籍贯：
<select name="address">
<option value="china">中国</option>
<option selected="selected" value="oversea">海外</option>
</select><br />
自我介绍：<br />
<textarea name="intro" id="" cols="30" rows="10"></textarea>
<br />
<input type="button" name="" id="" value="普通按钮" />
隐藏标签：
<input type="hidden" name="hidden" value="哈哈"/>
<input type="submit" value="登录"/>
</form>
</body>
<!--
form表单标签学习：
作用：收集并提交用户数据给指定的服务器
注意1：form标签会收集其标签内部的数据
属性:
action:收集的数据的提交地址url
method：收集的数据的提交方式
get：适合小量数据，表单数据以问号隔开，拼接在url后面，不同键值对使用&隔开
post：适合大量数据，安全，隐式提交
注意2：
表单数据的提交，要提交的表单项必须有name值，否则不提交
并且提交的数据为键值对
注意3：form表单数据提交需要依赖于submit提交按钮
form表单域标签学习：、
作用：给用户提供可以进行数据书写或者选择的标签
使用：
文本框：
input：
type：
text：收集少量的文本数据，用户可见
password：不可见文本数据
name：数据提交的键，也会被js使用
value：默认值
单选框：
input：
type：
radio
name：name属性值相同的单选框只能选择一项
value:要提交的数据
checked：使用此属性的单选默认是选择状态
多选框：
input：
type：
checkbox
name:一个多选组需要使用相同的name属性
value：要提交的数据
checked：默认选择状态
单选下拉框：
select:
name：数据提交的键名，必须声明
option：子标签，一个option标签标示一个下拉选项
value：要提交的数据
文本域：
textarea：声明一个可以书写大量文字的文本趋于
name：数据提交的键名，js和css会使用
rows：声明文本域的行数
cols：声明文本域的列数
普通按钮：
input：
type：
button
name：如果有，会提交数据，无意义所以多不写
value
隐藏标签：
input：
type：
hidden
name
value
注意：表单数据提交提交的是表单域标签的value值
form表单标签的使用：
在点击数据提交时，form标签会将其内部所有form表单域标签中用户\
书写的数据按照method指定的提交方式，提交给action属性指定的提交地址。
-->
</html>
网友评论