1，HTML标准文档结构
<!--
HTML的标准文档结构
-->
<html>
<head></head>
<body>
this is my first html.
</body>
</html>
2、head标签学习
<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>
3、body标签
<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"/>
<i><b><u>今天天气真好,适合学习</u></b></i>
</body>
</html>
<!--
标题标签:
h1到h6:会将其中的数据加粗加黑显示.并且显示依次减弱.标题标签自带换行功能.(块级标签)
属性:
align: center left right
水平线标签:
hr:会在页面中显示一条水平线,默认居中显示
属性:
width="宽度" 设置水平线的宽度
size="高度" 设置水平线的高度
color="颜色" 设置水平线的颜色
段落标签:
p:会将一段数据作为整体进行显示,主要是进行css和js操作时比较方便.会自动换行(块级元素)
特点:
段间距比较大
换行符:
br:告诉浏览器需要在此位置换行
空格符:
 :告诉浏览器在此位置增加空格
权重标签:
b:会将内容加黑显示
i:会将内容斜体显示
u:会将内容增加下划线
del:增加中划线
以上标签不会自动换行,并且可以嵌套使用.
注意:
1 标签的属性是对标签的功能进一步的补充,可以由开发人员自由指定标签的属性值,来达到想要的显示效果.
2 像素单位占据的是电脑屏幕的大小,百分比占据的是浏览器窗口的大小.
-->
4、图片标签
<html>
<head>
<title>图片标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>图片标签学习:</h3>
<pre>
图片标签:
img
src:图片路径
本地资源路径:一般本地图片资源使用相对路径即可
网络资源路径:图片资源的URL地址
width:设置图片的宽度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大
单位可以是px也可以是百分比
height:设置图片的高度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大
单位可以是px也可以是百分比
title:图片标题,鼠标放在图片上的时候会显示
alt:图片加载失败后的提示语
注意:图片是不会自动换行的(行内元素)
注意
相对路径:从当前文件出发查找另一个文件所经过的路径
绝对路径:从根盘符出发所查找文件的路径
</pre>
<hr />
<!--使用本地资源:图片位于本地电脑中-->
<img src="img/1.jpg" height="200px"/>
<img src="img/2.jpg" height="200px"/>
<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>
<!--
图片标签:
img
src:图片路径
本地资源路径:一般本地图片资源使用相对路径即可
网络资源路径:图片资源的URL地址
width:设置图片的宽度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大
单位可以是px也可以是百分比
height:设置图片的高度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大
单位可以是px也可以是百分比
title:图片标题,鼠标放在图片上的时候会显示
alt:图片加载失败后的提示语
注意:图片是不会自动换行的(行内元素)
注意
相对路径:从当前文件出发查找另一个文件所经过的路径
绝对路径:从根盘符出发所查找文件的路径
-->
5、超连接标签
<html>
<head>
<title>超链接标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>超链接标签学习</h3>
<hr />
<pre>
超链接标签学习:
a标签:
href:要跳转的网页资源路径
本地资源:相对路径
网络资源:网络资源(网页)的URL
target:指明要跳转的网页资源的显示位置
_self 在当前页中刷新显示
_blank 在新的标签页中显示
_top 在顶层页面中显示
_parent 在父级页面中显示
注意:
超链接标签中一定要声明访问方式,访问方式可以是文字也可以是图片.
锚点学习:
作用:在一张网页中进行资源跳转
使用:
先使用超链接标签在指定的网页位置增加锚点.格式为:
<a name="锚点名" ></a>
使用a标签可以跳转指定的锚点,达到网页内部资源跳转的目的,格式:
<a href="#锚点名" >访问方式</a>
</pre>
<!--本地资源-->
<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>
6、锚点学习
html>
<head>
<title>锚点学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>锚点学习</h3>
<hr />
<h4>目录:</h4>
<a href="#first">第一章</a><br />
<a href="#second">第二章</a><br />
<a href="#third">第三章</a><br />
<a href="#fourth">第四章</a><br />
<a name="first"></a>
<p>第一章:</p>
<p>
张三下班了,心情甚是苦闷,今年老板没有涨薪,考虑要不要跳槽去商丘呢.听说那里工资很高.....
突然,一辆卡车迎面飞奔而来......
<p>
张三下班了,心情甚是苦闷,今年老板没有涨薪,考虑要不要跳槽去商丘呢.听说那里工资很高.....
突然,一辆卡车迎面飞奔而来......
</p>
<p>
张三下班了,心情甚是苦闷,今年老板没有涨薪,考虑要不要跳槽去商丘呢.听说那里工资很高.....
突然,一辆卡车迎面飞奔而来......
</p>
<p>
张三下班了,心情甚是苦闷,今年老板没有涨薪,考虑要不要跳槽去商丘呢.听说那里工资很高.....
突然,一辆卡车迎面飞奔而来......
</p>
<p>
张三下班了,心情甚是苦闷,今年老板没有涨薪,考虑要不要跳槽去商丘呢.听说那里工资很高.....
突然,一辆卡车迎面飞奔而来......
</p>
<p>第二章:</p>
<a name="second"></a>
<p>
张三醒来发现自己躺在一个陌生的地方,周围绿绿葱葱,在一个森林里....暗处有一双好奇的眼睛在看着他..
</p>
<p>
张三醒来发现自己躺在一个陌生的地方,周围绿绿葱葱,在一个森林里....暗处有一双好奇的眼睛在看着他..
</p>
<p>
张三醒来发现自己躺在一个陌生的地方,周围绿绿葱葱,在一个森林里....暗处有一双好奇的眼睛在看着他..
</p>
<p>
张三醒来发现自己躺在一个陌生的地方,周围绿绿葱葱,在一个森林里....暗处有一双好奇的眼睛在看着他..
</p>
<p>
张三醒来发现自己躺在一个陌生的地方,周围绿绿葱葱,在一个森林里....暗处有一双好奇的眼睛在看着他..
</p>
<p>
张三醒来发现自己躺在一个陌生的地方,周围绿绿葱葱,在一个森林里....暗处有一双好奇的眼睛在看着他..
</p>
<p>第三章:</p>
<a name="third"></a>
<p>
张三被路过的李家大小姐所救,据李小姐所说,张三发现这是一个奇妙的世界,这个世界的人只会使用C语言..
</p>
<p>
张三被路过的李家大小姐所救,据李小姐所说,张三发现这是一个奇妙的世界,这个世界的人只会使用C语言..
</p>
<p>
张三被路过的李家大小姐所救,据李小姐所说,张三发现这是一个奇妙的世界,这个世界的人只会使用C语言..
</p>
<p>
张三被路过的李家大小姐所救,据李小姐所说,张三发现这是一个奇妙的世界,这个世界的人只会使用C语言..
</p>
<p>
张三被路过的李家大小姐所救,据李小姐所说,张三发现这是一个奇妙的世界,这个世界的人只会使用C语言..
</p>
<p>
张三被路过的李家大小姐所救,据李小姐所说,张三发现这是一个奇妙的世界,这个世界的人只会使用C语言..
</p>
<p>
张三被路过的李家大小姐所救,据李小姐所说,张三发现这是一个奇妙的世界,这个世界的人只会使用C语言..
</p>
<p>第四章:</p>
<a name="fourth"></a>
<p>
张三开始宣扬面向对象开发的思想及其好处,得到了广大人民群众的一致认可,被尊为这个世界的java鼻祖....
</p>
<p>
张三开始宣扬面向对象开发的思想及其好处,得到了广大人民群众的一致认可,被尊为这个世界的java鼻祖....
</p>
<p>
张三开始宣扬面向对象开发的思想及其好处,得到了广大人民群众的一致认可,被尊为这个世界的java鼻祖....
</p>
<p>
张三开始宣扬面向对象开发的思想及其好处,得到了广大人民群众的一致认可,被尊为这个世界的java鼻祖....
</p>
<p>
张三开始宣扬面向对象开发的思想及其好处,得到了广大人民群众的一致认可,被尊为这个世界的java鼻祖....
</p>
<p>
张三开始宣扬面向对象开发的思想及其好处,得到了广大人民群众的一致认可,被尊为这个世界的java鼻祖....
</p>
<p>
张三开始宣扬面向对象开发的思想及其好处,得到了广大人民群众的一致认可,被尊为这个世界的java鼻祖....
</p>
<a href="#">回到顶部</a>
</body>
</html>
7、表格标签学习
<html>
<head>
<title>表格标签学习</title>
<meta charset="UTF-8"/>
<pre>
表格标签学习:
table :声明一个表格
tr:声明一行,设置行高及改行所有单元格的高度.
th:声明一个单元格,表头格.默认居中加黑显示
td:声明一个单元格,默认居左显示原始数据
注意:
行高即改行所有单元格的宽度
单元格的宽度即列宽
属性:
border:给表格添加边框
width:设置表格的宽度
height:设置表格的高度
cellpadding:设置内容居边框的距离
cellspacing:设置边框的大小
特点:
默认根据数据的多少进行表格的大小显示
单元格的合并:
第一步:
首先确保表格是一个规整的表格
第二步:
根据要合并的单元格,找到其所在的源码位置
第三步:
行合并:在要合并的单元格中的第一个单元格上使用属性rowspan="要合并的单元格的个数",并删除其他要合并的单元格完成合并
列合并:在要合并的单元格中的任意一个上使用属性colspan="要合并的单元格的个数",并删除要合并的其他单元格
</pre>
</head>
<body>
<h3>表格标签学习</h3>
<hr />
<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>
8、内嵌标签学习
<html>
<head>
<title>内嵌标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>内嵌标签学习</h3>
<hr />
<!--
内嵌标签:
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>
9、框架标签学习
<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>
</html>
10、form标签学习
<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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
