文章目录
一.HTML的概念
概念：超文本标记语言。
作用：需要将java在后台根据用户请求处理的请求结果在浏览器中显示给用户。在浏览器中数据需要使用友好的格式展现给用户。HTML是告诉浏览器接收到的数据使用什么样的数据组织形式进行展示。
使用：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>
<!--head标签中主要配置浏览器的配置信息-->
<title>HTML学习</title><!--网页标题标签:告诉浏览器使用什么标题显示网页-->
<!--<meta charset="utf-8"/><!--网页解析编码格式配置(HTML5):告诉浏览器使用指定的编码格式解析文档-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--HTML4:文档编码格式设置-->
<!--
了解:
关键字
网页描述
作者
作用:提升网页在浏览器中的搜索概率.
-->
<meta name="keywords" content="HTML,SXT,张老师,506"/><!--网页关键字-->
<meta name="description" content="本网页上是关于HTML的head标签学习的,特别棒,6666."/><!--网页描述-->
<meta name="author" content="张老师"/><!--网页作者-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/><!--网页自动跳转-->
</head>
<body>
this is my first html
</body>
</html>六.HTML的主体标签
<html>
<head>
<title>HTML的body标签-文本标签学习</title>
<meta charset="utf-8"/>
</head>
<body>
<!--
标题标签h1到h6:会将其中的数据加粗加黑显示.并且显示依次减弱.标题标签自带换行功能.(块级标签)
属性:
align: center left right
-->
<h1 align="center">今天天气真好,适合学习</h1>
<h2 align="center">今天天气真好,适合学习</h2>
<h3 align="center">今天天气真好,适合学习</h3>
<h4 align="center">今天天气真好,适合学习</h4>
<h5 align="center">今天天气真好,适合学习</h5>
<h6 align="center">今天天气真好,适合学习</h6>
<!--
水平线标签hr:会在页面中显示一条水平线,默认居中显示
属性:
width="宽度" 设置水平线的宽度
size="高度" 设置水平线的高度
color="颜色" 设置水平线的颜色
-->
<hr width="600px" size="20px" color="red" align="center"/>
<!--
段落标签:
p:会将一段数据作为整体进行显示,主要是进行css和js操作时比较方便.会自动换行(块级元素)
特点:
段间距比较大
-->
<!--
换行符br:告诉浏览器需要在此位置换行
空格符 :告诉浏览器在此位置增加空格
权重标签:
b:会将内容加黑显示
i:会将内容斜体显示
u:会将内容增加下划线
del:增加中划线
以上标签不会自动换行,并且可以嵌套使用.
-->
<!--
注意:
1 标签的属性是对标签的功能进一步的补充,可以由开发人员自由指定标签的属性值,来达到想要的显示效果.
2 像素单位占据的是电脑屏幕的大小,百分比占据的是浏览器窗口的大小.
-->
<p>
新华社北京<i>2月22日</i>电<br />
</p>
</body>
</html><html>
<head>
<title>HTML的body标签-列表标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<!--
无序列表ul:
li:该标签中书写列表内容,一个li标签代表列表中的一行数据
特点:默认数据前有一个黑圆圈符
-->
<h3>中国知名城市:</h3>
<ul>
<li>北京</li>
<li>上海</li>
<li>商丘</li>
</ul>
<!--
有序列表ol:
li:该标签中书写列表内容,一个li标签代表列表中的一行数据
特点:会自动的给列表进行顺序编码,格式从小到大并且是连续的.
属性:
type:可以改变顺序编码的值,可以是1 a A I,默认使用阿拉伯数字进行顺序编码
-->
<h3>人生几大爱好:</h3>
<ol type="I">
<li>打游戏</li>
<li>打球</li>
<li>看电影</li>
</ol>
<!--
自定义列表dl:
dt:数据的标题
dd:数据的具体内容,一个dd表示一条数据.
-->
<dl>
<dt>IT课程:</dt>
<dd>java课程</dd>
<dd>python课程</dd>
<dd>大数据课程</dd>
<dt>热门旅游城市:</dt>
<dd>商丘</dd>
<dd>周口</dd>
<dd>新乡</dd>
</dl>
</body>
</html>七.HTML的图片标签
<html>
<head>
<title>图片标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<!--
图片标签img:
src:图片路径
本地资源路径:一般本地图片资源使用相对路径即可
网络资源路径:图片资源的URL地址
相对路径:从当前文件出发查找另一个文件所经过的路径
绝对路径:从根盘符出发所查找文件的路径
width:设置图片的宽度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大,单位可以是px也可以是百分比
height:设置图片的高度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大,单位可以是px也可以是百分比
title:图片标题,鼠标放在图片上的时候会显示
alt:图片加载失败后的提示语
注意:图片是不会自动换行的(行内元素)
-->
<hr />
<!--使用本地资源:图片位于本地电脑中-->
<img src="img2/2.jpg" height="200px" title="这是一个优美的图片" alt="这是一个优美的图片"/>
<hr />
<!--使用网络资源:-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519380344339&di=69b19d78492d7c4bbce2844b815578ce&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201506%2F10%2F20150610220630_Mtz4L.jpeg" width="200px"/>
</body>
</html>八.HTML的超链接标签
<html>
<head>
<title>超链接标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<!--
超链接标签a:
href:要跳转的网页资源路径
本地资源:相对路径
网络资源:网络资源(网页)的URL
target:指明要跳转的网页资源的显示位置
_self 在当前页中刷新显示
_blank 在新的标签页中显示
_top 在顶层页面中显示
_parent 在父级页面中显示
注意:超链接标签中一定要声明访问方式,访问方式可以是文字也可以是图片.
锚点学习:
作用:在一张网页中进行资源跳转
使用:
先使用超链接标签在指定的网页位置增加锚点.格式为:<a name="锚点名" ></a>
使用a标签可以跳转指定的锚点,达到网页内部资源跳转的目的,格式:<a href="#锚点名" >访问方式</a>
-->
<!--本地资源-->
<h4>本地资源:</h4>
<a href="05-HTML-图片标签学习.html" >图片标签学习</a><br />
<a href="04-HTML-body标签(列表标签).html" target="_blank"><img src="img/3.gif" height="100px"/></a>
<hr />
<!--网络资源-->
<h4>网络资源:</h4>
<a href="http://www.taobao.com" target="_blank">淘宝一下</a><br />
<a href="http://www.taobao.com" target="_blank"><img src="img/4.png"/></a>
<hr />
<!--锚点学习:-->
<h4>锚点学习:</h4>
<a href="锚点学习.html">锚点学习</a>
</body>
</html>九.HTML的表格标签
<html>
<head>
<title>表格标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<!--
表格标签table :声明一个表格
tr:声明一行,设置行高及改行所有单元格的高度.
th:声明一个单元格,表头格.默认居中加黑显示
td:声明一个单元格,默认居左显示原始数据
注意:
行高即改行所有单元格的宽度
单元格的宽度即列宽
属性:
border:给表格添加边框
width:设置表格的宽度
height:设置表格的高度
cellpadding:设置内容居边框的距离
cellspacing:设置边框的大小
特点:
默认根据数据的多少进行表格的大小显示
单元格的合并:
第一步:首先确保表格是一个规整的表格
第二步:根据要合并的单元格,找到其所在的源码位置
第三步:
行合并:在要合并的单元格中的第一个单元格上使用属性rowspan="要合并的单元格的个数",并删除其他要合并的单元格完成合并
列合并:在要合并的单元格中的任意一个上使用属性colspan="要合并的单元格的个数",并删除要合并的其他单元格
-->
<h4>表格标签的常用属性及设置学习:</h4>
<table border="1px" cellpadding="10px" cellspacing="0px">
<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>
<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的内嵌和框架标签
<html>
<head>
<title>内嵌标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<!--
内嵌标签iframe:
src:要显示的网页资源路径
可以是本地(相对路径)也可以是网络资源(URL)
注意:
默认当前页面打开及加载src指向的资源
width:设置显示区域的宽度
height:设置显示区域的高度
name:设置内嵌区域的名字,结合超链接标签的target属性使用.
作用:
在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的.
-->
<a href="http://www.baidu.com" target="_if">百度一下</a>
<a href="http://www.so.com" target="_tt">360搜索</a><br />
<iframe src="" width="48%" height="400px" name="_if"></iframe>
<iframe src="" width="48%" height="400px" name="_tt"></iframe>
</body>
</html><html>
<head>
<title>框架标签学习：</title>
<meta charset="UTF-8"/>
</head>
<!--
注意:第一步一定要删除body标签
框架标签学习frameset：
rows:按照行进行切分页面
cols:按照列进行切分页面
子标签frame:进行切分区域的占位,一个frame可以单独加载网页资源.
src:资源路径(本地或者网络)
name:区域名,结合超链接使用
-->
<frameset rows="10%,*,10%">
<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><noframes></noframes>
</html>十一.HTML的表单
<html>
<head>
<title>form标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<!--
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:
radio
name:name属性值相同的单选框只能选择一项数据
value:要提交的数据
checked:checked 使用此属性的单选默认是选择状态
多选框:
input:
type:
checkbox
name:一个多选组需要使用相同的name属性值
value:要提交的数据
checked:checked 使用此属性的多选框默认是选择状态
单选下拉框:
select:
name:数据提交的键名,必须声明
子标签option:一个option标签表示一个下拉选项
value:要提交的数据
文本域:
textarea:声明一个可以书写大量文字的文本区域
name:数据提交的键名,js和css也会使用
rows:声明文本域的行数
cols:声明文本域的列数
普通按钮:
input:
type:
button
value:
隐藏标签:
input
type:
hidden
name
value
注意:表单数据提交提交的是表单域标签的value值
form表单标签的使用:
在点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式
提交给action属性所指明的提交地址.
-->
<h3>form标签学习</h3>
<hr />
<form action="#" method="get">
用户名:<input type="text" name="uname" value="王五"/><br />
密码: <input type="password" name="upwd"/><br />
性别 : 男<input type="radio" name="sex" value="1" checked="checked"/> 女<input type="radio" name="sex" value="0"/><br />
爱好: <br />
吃饭<input type="checkbox" name="fav" value="1" checked="checked"/><br />
睡觉<input type="checkbox" name="fav" value="2"/><br />
打豆豆<input type="checkbox" name="fav" value="3"/><br />
籍贯:<br />
<select name="address">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">商丘</option>
</select>
<br />
文本域:<br />
<textarea name="intro" rows="10" cols="30"></textarea><br />
普通按钮:<br />
<input type="button" id="" value="普通按钮" />
隐藏标签:
<input type="hidden" name="hidden" id="" value="哈哈" />
<input type="submit" value="登录"/>
</form>
</body>
</html>
版权声明：本文为weixin_44145972原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。