HTML
HTML的概念和三大基石和标准文档流
概念：
HTML：超文本标记语言
作用：
需要将java在后台根据用户请求处理的请求结果在浏览器中显示给用户.
在浏览器中数据需要使用友好的格式展现给用户.
HTML是告诉浏览器接收到数据使用什么样的数据组织形式进行显示
使用：
HTML的标准文档规范
HTML的标签
---------------------------------------------------
互联网三大基石：
URL：统一资源定位符
HTTP：超文本传输协议(规范浏览器和服务器之间数据交互的格式)
HTML：超文本标记语言(有效的组织数据在浏览器端的显示)
HTML的文档声明：
文件名.html 或者 文件名.htm
HTML的标准文档结构
注意：HTML是由浏览器解析执行的
<html>
<head>
<!--
主要是配置浏览器显示数据的配置信息
例如:字符编码等
一般是给浏览器进行使用 、
-->
</head>
<body>
<!--
给用户进行数据展示
-->
this is my first html
</body>
</html>
<!--
` HTML的标准文档结构学习：
顶层标签：HTML
头标签：head
主体标签：body
注意：
HTML的标签语法为：<标签名></标签名>(双标签) <标签名/>（单标签)
-->
HTML的head标签学习
前端开发工具介绍：
Hbuilder：可以快速的生产HTML标准文档结构，集成了很多方便的快捷键
-----------------------------------------------
网页标题标签：
<title>html study</title><!-- 网页标题标签：告诉浏览器使用什么标题显示网页 -->
编码格式标签：
<meta charset="utf-8"/><!-- 网页解析编码格式配置(HTML5)：告诉浏览器使用指定的编码格式解析文档 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!-- HTML4：文档编码格式设置 -->
网页搜索优化标签：
<meta name="keywords" content="HTML,head"/><!-- 网页关键字 -->
<meta name="description" content="head标签学习,666"/><!-- 网页描述 -->
<meta name="author" content="ly"/><!-- 网页作者 -->
网页指定跳转标签：
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/><!-- 网页自动跳转 -->
其他标签：
例如：css引入和js引入标签
示例源码：
<html>
<head>
<!-- head标签中主要配置浏览器的配置信息 -->
<title>html study</title><!-- 网页标题标签：告诉浏览器使用什么标题显示网页 -->
<!-- <meta charset="utf-8"/><!-- 网页解析编码格式配置(HTML5)：告诉浏览器使用指定的编码格式解析文档 --> -->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!-- HTML4：文档编码格式设置 -->
<!--
了解：
关键字
网页描述
作者
作用：提高网页在浏览器中的搜索概率
-->
<meta name="keywords" content="HTML,head"/><!-- 网页关键字 -->
<meta name="description" content="head标签学习,666"/><!-- 网页描述 -->
<meta name="author" content="ly"/><!-- 网页作者 -->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/><!-- 网页自动跳转 -->
</head>
<body>
</body>
</html>
HTML的body标签
HTML的body标签(文本标签)
标题标签：
h1到h6：会将其中的数据加黑加粗显示，并且显示级别依次递减，标题标签自带换行功能(块级标签)
属性：
align：center left right
水平线标签：
hr：会在页面中显示一条水平线
属性：
width="宽度"：设置水平线的宽度
size="高度"： 设置水平线的高度
color="颜色"：设置水平线的颜色
段落标签：
p：会将一段数据作为整体进行显示，主要是进行css和js操作时比较方便。会自动换行(块级元素)
特点：
段间距比较大
换行符：
br:告诉浏览器需要在此位置换行
空格符：
：告诉浏览器在此位置增加空格
权重标签：(行内元素)
b：会将内容加黑显示
i：会将内容斜体显示
u：会将内容增加下划线
del：增加中划线
以上标签不会自动换行，并且可以嵌套使用
注意：
1.标签的属性是对标签的功能的进一步补充，可以由开发人员自由指定标签的属性值，来达到想要的显示效果
2.像素单位占据的是电脑屏幕的大小，百分比占据的是浏览器窗口的大小
代码示例：
<html>
<head>
<title>HTML的body标签</title>
<meta charset="utf-8"/>
</head>
<body>
<!-- 标题类型 -->
<h1 align="center">我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
<hr width="600px" size="20px" color="red" align="left"/>
<p>
战斗中负伤而下身瘫痪的前海军战士杰克•萨利<br>
（萨姆•沃辛顿 Sam Worthington 饰
</p>
<p>
战斗中负伤而<u>下身瘫痪</u>的前海军战士<i>杰克•萨利</i>
（<b>萨姆•沃辛顿</b> <del>Worthington</del> 饰
</p>
<p>
战斗中负伤而下身瘫痪的前海军战士杰克•萨利
（萨姆•沃辛顿 Sam Worthington 饰
</p>
</body>
</html>
HTML的body标签(列表标签)
列表标签学习：
无序列表：
ul：
li：该标签中书写列表内容。一个li标签代表列表中的一行数据
特点：默认数据前有一个黑圆圈符号
有序列表：
ol：
li：该标签中书写列表内容，一个li代表列表中的一行数据
特点：
会自动的给列表进行顺序编码，各二十从小到大并且是连续的
属性：
type：可以改变顺序编码的值，可以是1、a、A、I、i 默认使用阿拉伯数字进行顺序编码
自定义列表：
dl：
dt：数据的标题
dd：数据的具体内容，一个dd表示一条数据
代码示例：
<html>
<head>
<title>列表标签学习</title>
<meta charset="utf-8" />
</head>
<body>
<h3>列表标签学习</h3>
<hr >
<ul>
<li><h3>无序列表</h3></li>
<li>广州</li>
<li>北京</li>
<li>上海</li>
</ul>
<h3>有序列表</h3>
<ol type="">
<li>打游戏</li>
<li>听歌</li>
<li>运动</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>IT课程：</dt>
<dd>java</dd>
<dd>python</dd>
<dt>旅游城市：</dt>
<dd>杭州</dd>
</dl>
</body>
</html>
HTML的图片标签
图片标签：
img：(行内元素)
src：图片路径
本地资源路径：一般本地图片资源使用相对路径即可
网络资源路径：图片资源的URL地址
width:设置图片的宽度。 如果是单独设置，则在保证图片不失真的情况下自动缩小或者放大
单位可以是px也可以是百分比
height:设置图片的宽度。 如果是单独设置，则在保证图片不失真的情况下自动缩小或者放大
单位可以是px也可以是百分比
title：图片标题，鼠标放在图片上的时候会显示
alt：图片加载失败后的提示语
注意：图片是不会自动换行的属于行内元素
注意：
绝对路径：从当前文件出发查找另一文件所经过的路径
相对路径：从根盘符触发所查找文件的路径
代码示例：
<html>
<head>
<title>图片标签学习</title>
<meta charset="utf-8"/>
</head>
<body>
<h3>图片标签学习</h3>
<hr >
<!-- 使用本地资源：图片位于本地电脑中 -->
<img src="img/1.jpg" width="80px" >
<img src="img/2.jpg" width="80px" >
<img src="img/3.gif" width="80px" title="火影忍者" alt="火影忍者">
<hr >
<!-- 使用网络资源： -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582005729619&di=5c8a73728b74120927aab01d9e625b44&imgtype=0&src=http%3A%2F%2Fimg.721g.com%2Fd%2Ffile%2Fbigpic%2F2019%2F02%2F07%2F22%2F2019020722090371.jpg" width="80px">
</body>
</html>
HTML的超链接标签
超链接标签学习：
a标签：
href：要跳转的网页资源路径
本地资源：相对路径
网络资源：网络资源(网页)的URL
target：指明要跳转的网页资源的显示位置
_self: 在当前页中刷新显示
_blank: 在新的标签页中显示
_top: 在顶层页面中显示
_parent: 在父级页面中显示
注意：
超链接标签中一定要声明访问方式，访问方式可以是文字也可以是图片
锚点学习：
作用：在一张网页中进行资源跳转
使用:
先使用超链接标签在指定的网页位置增加锚点，格式为：
<a name="锚点名"></a>
使用a标签可以跳转到指定的锚点，达到网页内部跳转的目的，格式为：
<a sref="#锚点名">访问方式</a>
回到网页顶部：(刷新网页)
<a sref="#">访问方式</a>
代码示例：
<html>
<head>
<title>超链接标签学习</title>
<meta charset="utf-8"/>
</head>
<body>
<h3>超链接标签的学习</h3>
<br>
<!-- 本地资源-->
<h6>本地资源</h6>
<a href="05-HTML的图片标签.html" target="_blank">图片标签</a><br>
<a href="04-HTML的body标签(列表标签).html"><img src="img/3.gif" height="100px"></a>
<hr >
<!-- 网络资源 -->
<h6>网络资源</h6>
<a href="http://www.taobao.com" target="_blank">淘宝</a><br>
<a href="http://www.taobao.com"><img src="img/2.jpg"></a>
<!-- 锚点学习 -->
<h6>锚点学习</h6>
<a href="锚点学习.html">锚点学习</a>
</body>
</html>
HTML的表格标签
表格标签学习:
table标签：声明一个表格
tr：声明一行，设置行高及该行所有单元格的高度。
th：声明一个单元格，表格格，默认居中加黑显示
td：声明一个单元格，默认居左显示原始数据
注意：
行高即所有单元格的高度
行宽即单元格的宽度
属性：
border：给表格添加边框
width：设置表格的宽度
height：设置表格的高度
cellpadding：设置内容距边框的距离
cellspacing：边框的大小
特点：
默认根据数据的多少进行表格大小的显示
单元格的合并：
创建单元格快捷方式：table>tr*行数>td*列数 摁tab键完成
第一步：
首先确保表格是一个规整的表格
第二步：
根据要合并的单元格，找到其所在的源码位置
第三步：
行合并：在要合并的单元格的第一个单元格上使用属性 rowspan="要合并的单元格个数"，并删除其他要合并的单元格完成合并
列合并：在要合并的单元格中的任意一个上使用 rowspan="要合并的单元格个数"，并删除其他要合并的单元格完成合并
代码示例：
<html>
<head>
<title>表格标签</title>
<meta charset="utf-8"/>
</head>
<body>
<h3>表格标签学习</h3>
<hr >
<h4>表格标签的常用属性及设置学习：</h4>
<table border="1px" cellpadding="10px" cellspacing="0">
<tr height="50px">
<th width="100px">科目</th>
<th width="100px">分数</th>
<th width="100px">级别</th>
<th width="150px">说明</th>
</tr>
<tr height="50px">
<td>java</td>
<td>100</td>
<td>8</td>
<td>面对对象</td>
</tr>
<tr height="50px">
<td>c语言</td>
<td>100</td>
<td>8</td>
<td>面向过程的语言</td>
</tr>
</table>
<hr >
<h4>单元格的合并学习：</h4>
<table border="1px" cellspacing="0">
<tr height="35px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="200px" colspan="2" rowspan="2"></td>
</tr>
<tr height="35px">
<td colspan="2"></td>
<td></td>
<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>
HTML的内嵌标签
内嵌标签：
iframe：
src：要显示的网页资源路径
可以是本地(相对路径)也可以是网络资源(url)
注意：
默认当前页面打开及加载src指向的资源
width：设置显示区域的宽度
height：设置显示区域的高度
name：设置内嵌区域的名字，结合超链接标签的target属性使用
作用：
在当前网页中加载其他网页资源，达到不同网页资源之间不互相干扰，并能在同一个页面汇总展现给用户的目的.
代码示例：
<html>
<head>
<title>内嵌标签的学习</title>
<meta charset="utf-8">
</head>
<body>
<h3>内嵌标签的学习</h3>
<hr >
<a href="http://www.jd.com" target="_if">京东</a>
<a href="http://www.taobao.com" target="_tt">淘宝</a><br>
<iframe src="" width="600px" height="50%" name="_if"></iframe>
<iframe src="" width="600px" height="50%" name="_tt"></iframe>
</body>
</html>
HTML的框架标签
注意：
第一步一定要删除body标签
框架标签学习：
frameset
rows：按照行进行切分页面
cols：按照列进行切分页面
子标签：
frame：进行切分区域的占位，一个frame可以单独加载网页资源
src：资源路径(本地或者网络)
name：区域名，结合超链接使用
代码实现：
<html>
<head>
<title>框架标签学习</title>
<meta charset="utf-8">
</head>
<frameset rows="10%,*,10%">
<frame src="framset/top.html" >
<frameset cols="20%,*">
<frame src="framset/left.html" >
<frame src="framset/right.html" name="_right">
</frameset>
<frame src="framset/bottom.html" >
</frameset>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我是top
<a href="../12-HTMLframeset登录界面.html" target="_top">退出</a>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><a href="http://www.baidu.com" target="_right">百度一下</a></li>
<li><a href="http://www.taobao.com" target="_right">淘宝网</a></li>
<li><a href="http://www.jd.com" target="_right">京东</a></li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我是right
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我是bottom
</body>
</html>
HTML的form标签
form表单标签学习：
作用：收集并提交用户数据给指定的服务器
属性：
· action：收集的数据提交地址也就是url
method：收集的数据的提交方式
get：适合小量的数据，表单数据以?隔开拼接在url后面，不同的键值对使用&隔开，不安全
post：适合大量的数据，安全，隐式提交
注意1：
要提交的表单项必须拥有name属性值，否则不会提交
提交的表单项为键值对，键为name属性的值，值为用户输入的数据
注意2：form标签会收集其标签内部的数据
注意3：form表单的数据提交需要依赖于submit提交按钮
form表单域标签：
作用：给用户提供可以进行数据书写或者选择的标签
使用：
文本框：
input：
type:
text 收集少量的文本数据，用户可见
password 收集用户密码数据
name：数据提交的键，也会被js使用
value：默认值
单选框：
input:
type:
redio
name：name属性值相同的单选框只能选择一项数据
value：要提交的数据
checked：checked 使用此属性的单选默认是选择状态
多选框：
input:
type:
checkbox
name：一个多选需要使用相同的name属性值
value：要提交的数据
checked：checked 使用此属性的多选框默认是选择状态
单选下拉框：
select：
name：数据提交的键名，必须声明
子标签option：一个option标签表示一个下拉选项
value：要提交的数据
文本域：
textarea：声明一个可以书写大量文字的文本区域
name：数据提交的键名，css和js也会使用
rows：声明文本域的行数
cols：声明文本域的列数
普通按钮：
input：
type：
button
value
隐藏标签：
input：
hidden
name
value
注意：表单数据提交，提交的是表单域标签的value值
form表单标签的使用：
在点击数据提交时，form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式
提交给action属性所指明的提交地址。
代码示例：
<html>
<head>
<title>from标签学习</title>
<meta charset="utf-8">
</head>
<body>
<h3>from标签学习</h3>
<hr >
<form action="#" method="get">
用户名：<input type="text" name="uname"/><br>
密码：<input type="password" name="upwd"/><br>
性别： 男<input type="radio" name="sex" value="1" checked="checked"/> 女<input type="radio" name="sex" value="0"/><br>
爱好：吃饭<input type="checkbox" name="fav" value="1"/>
睡觉<input type="checkbox" name="fav" value="2"/>
唱歌<input type="checkbox" name="fav" value="3"/><br>
籍贯：<select name="address">
<option value ="">--请选择--</option>
<option value ="1">北京</option>
<option value ="2">上海</option>
<option value ="3">广州</option>
</select> <br>
文本域：<br>
<textarea name="intro" rows="10" cols="30"></textarea><br>
普通按钮：
<input type="button" value="普通按钮" /> <br>
隐藏标签：
<input type="hidden" name="hidden" id="" value="哈哈" />
<input type="submit" value="登录" />
</form>
</body>
</html>
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
