HTML学习
HTML的标准结构
<html>
<head>
</head>
<body>
this is my first html.
</body>
</html>
HTML的注释
<!--（插入内容）-->
HTML的head标签
网页标题标签：
<title>HTMl学习</title>
编码格式标签：
<!--<meta charset="utf-8"/>-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
网页搜索优化标签：
<meta name="keywords" content="HTML"/>
<meta name="description" content="学习HTML"/>
<meta name="author" content="张三"/>
网页指定跳转标签：
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
示例源码：
<html>
<head>
<title>html 学习</title>
<!--<meta charset="utf-8"/>-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="keywords" content="HTML"/>
<meta name="description" content="学习HTML"/>
<meta name="author" content="张三"/>
<!--<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>-->
</head>
<body>
this is body
</body>
</html>
HTML的body标签（文本）
网页的标题：
<h1 align="center">我是标题h1</h1>
网页标题一共有六级标题：
<h1 align="center">我是标题h1</h1>
<h2>我是标题h2</h2>
<h3>我是标题h3</h3>
<h4>我是标题h4</h4>
<h5>我是标题h5</h5>
<h6>我是标题h6</h6>
<!--align的left，right，center分别表示将标题居左，居右，居中-->
网页的横杠：
<hr width="600px" size="20px" color="red" align="left"/>
<!--wodth表示有多长的横杠，
size表示有多宽的横杠，
color表示横杠的颜色，
px表示有多少像素
-->
<hr width="50%"/>
<!--%表示横杠占总页面的百分比-->
网页的正文：
<p>
张三在<i>7月5日</i>想学习HTML，<br>
看到HTML特别easy
<del>遂前去学习</del>
的汇报。<br>
学习完HTML<b>张三</b>感觉<u>十分快乐</u>。<br>
</p>
<!-- 表示空格-->
<!--<br>表示回车
<i>7月5日</i>表示将7月5日变为斜体表示
<del>遂前去学习</del>表示将“遂前去学习”打上删除横线
<b>张三</b>表示将“张三”加粗
<u>十分快乐</u>表示将“十分快乐”打上下划线
-->
<!--若同时要将一段话加黑加粗并打上下划线可以通过以下示例完成：-->
<b><i><u>今天天气真好！</u></i></b>
HTML的的body标签（列表）
网页的无序列表：
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<!--
<ul>
<li>表示表中的一行数据
特点：
默认数据前方有一个黑圆圈
-->
示例：
- 北京
- 上海
- 广州
网页的有序列表：
<ol type="1">
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ol>
<!--type中有“1，i，I，a，A”五种属性-->
示例：
- 吃饭
- 睡觉
- 打豆豆
网页的自定义列表：
<dl>
<dt>IT课程</dt>
<dd>Java课程</dd>
<dd>Python课程</dd>
<dt>热门旅游城市:</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>广州</dd>
</dl>
示例：
IT课程
Java课程
Python课程
热门旅游城市:
北京
上海
广州
示例源码：
<html>
<head>
<title>html 学习</title>
<!--<meta charset="utf-8"/>-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="keywords" content="HTML"/>
<meta name="description" content="学习HTML"/>
<meta name="author" content="张三"/>
<!--<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>-->
</head>
<body>
<hr width="600px" size="20px" color="red" align="left"/>
<!--<hr width="1000px"/>-->
<p>
张三在<i>7月5日</i>想学习HTML，<br>
看到HTML特别easy
<del>遂前去学习</del>
的汇报。<br>
学习完HTML<b>张三</b>感觉<u>十分快乐</u>。<br>
</p>
<b><i><u>今天天气真好！
</u></i></b>
<h3>中国知名城市</h3>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<h3>我的爱好</h3>
<ol type="1">
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ol>
<dl>
<dt>IT课程</dt>
<dd>Java课程</dd>
<dd>Python课程</dd>
<dt>热门旅游城市:</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>广州</dd>
</dl>
</body>
</html>
HTML图片标签：
HTML插入图片：
<img src="img/1.jpg" width="100px"/>
<!--
src:图片路径,一般使用相对路径来表示
width:设置图片的宽度，如果是单独设置，则再图片保证不失真的情况下自动调整（单位可以为px和%）
height:设置图片的高度,如果是单独设置,则再图片保证不失真的情况下自动调整（单位可以为px和%）
title:图片标题,鼠标放在图片上的时候会显示
alt:图片加载失败后的提示语
图片默认不换行
-->
<img src="img/4.gif" height="200px" title="这是一张图片" alt="这是一张未加载成功的图片"/>
HTML超链接标签：
<html>
<head>
<title>超链接标签学习</title>
<meta charset="UTF-8">
</head>
<body>
<h3>超链接标签学习</h3>
<hr/>
<h6>本地资源</h6>
<a href="html_test2.html" target="_blank">图片标签学习</a>
<a href="html_test2.html" target="_blank"><img src="img/1.jpg" alt="图片刷新错误！"></a>
<h6>网络资源</h6>
<a href="http://www.baidu.com" target="_blank"><img src="img/4.jpg" height="200px"></a><br>
<a href="http://www.baidu.com" target="_blank">百度一下</a><br>
</body>
</html>
<!--
超链接标签学习:
href:要跳转的网页资源路径
本地资源:相对路径
网络资源:网络资源(网页)的URL
target:指明要跳转的网页资源的显示位置
_self 在当前页中刷新显示
_blank 在新的标签页中显示
_top 在顶层页面中显示
_parent 在父级页面中显示
-->
HTML锚点：
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
</head>
<body>
<h3>锚点学习</h3>
<hr/>
<a href="#first">第一章</a><br>
<a href="#second">第二章</a><br>
<a href="#third">第三章</a><br>
<a href="#fourth">第四章</a><br>
<a href="#fifth">第五章</a><br>
<a name="first"></a>
<p>第一章</p>
<p>
第一章内容
</p>
<a name="second"></a>
<p>第二章</p>
<p>
第二章内容
</p>
<a name="third"></a>
<p>第三章</p>
<p>
第三章内容
</p>
<a name="fourth"></a>
<p>第四章</p>
<p>
第五章内容
</p>
<a href="#">回到顶部</a>
</body>
</html>
<!--
锚点学习:
href:要跳转的网页资源路径
<a href="#first">第一章</a><br>
<a href="#second">第二章</a><br>
<a href="#third">第三章</a><br>
<a name="first"></a>
<a name="second"></a>
<a name="third"></a>
<a href="#">回到顶部</a>
-->
HTML表格标签：
<html>
<head>
<title>表格标签学习</title>
<meta charset="UTF-8">
</head>
<body>
<h3>表格标签学习</h3>
<hr>
<h4>表格标签学习</h4>
<table border="1px" cellpadding="10px" cellspacing="0px">
<tr height="50px">
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr height="50px">
<td>111</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr height="50px">
<td>222</td>
<td>李四</td>
<td>男</td>
<td>19</td>
</tr>
<tr height="50px">
<td>333</td>
<td>王五</td>
<td>女</td>
<td>20</td>
</tr>
</table>
<hr>
<h4>单元格的合并</h4>
<table border="1px" cellspacing="0px">
<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>
<!--
表格标签学习:
table:声明一个表格
tr:声明一行
th:声明一行表头格，默认居中加黑显示
td:声明一行表头格，默认向左显示
属性:
border:给表格添加边框
width:设置表格的宽度
height:设置表格的高度
cellpadding:设置内容居边框的距离
cellspacing:设置边框的大小
单元格的合并
第一步:
首先确保表格是一个规整的表格
第二步:
根据要合并的单元格，找到其所在的源码位置
第三步:
行合并:在要合并的单元格中的第一个单元格上使用属性rowspan= "要合并的单元格的个数" ,并删除其他要合并的单元格完成合并
列合并:在要合并的单元格中的任意-个上使用属性colspan= "要合并的单元格的个数”，并删除要合并的其他单元格
-->
HTML内嵌标签：
<html>
<head>
<meta charset="UTF-8">
<title>内嵌标签学习</title>
</head>
<body>
<h3>内嵌标签学习</h3>
<hr>
<a href="http://www.jd.com" target="_jd">京东</a>
<a href="http://www.baidu.com" target="_bd">百度</a><br>
<iframe src="" width="48%" height="400px" name="_jd"></iframe>
<iframe src="" width="48%" height="400px" name="_bd"></iframe>
</body>
</html>
<!--
内嵌标签:
iframe
src:要显示的网页资源路径,可以是本地(相对路径)也可以是网络资源(URL)
width:设置显示区域的宽度
height:设置显示区域的高度
name:设置内嵌区域的名字，结合target使用
-->
HTML框架标签：
<html>
<head>
<title>框架标签学习: </title>
<meta charset="UTF-8"/>
</head>
<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>
<!--
删除body标签
框架标签学习:
frameset
rows :按照行进行切分页面
cols :按照列进行切分页面
子标签:
frame:进行切分区域的占位,一个frame可以单独加载网页资源.
src:资源路径(本地或者网络)
name:区域名,结合超链接使用
-->
HTML的form标签&表单域:
<html>
<head>
<meta charset="UTF-8">
<title>form标签学习</title>
</head>
<body>
<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">吃饭<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" selected="selected">上海</option>
<option value="3">广州</option>
</select><br>
文本域:<br>
<textarea name="intro" id="" cols="30" rows="10"></textarea><br>
普通按钮:<br>
<input type="button" value="普通按钮"><br>
隐藏标签:<br>
<input type="hidden" name="hidden" value="哈哈"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
<!--
form表单标签学习:
作用:收集并提交用户数据给指定服务器
注意: form标签会收集其标签內部的数据
属性:
action:收集的数据提交地址也就是URL
method:收集的数据的提交方式
get:适合小量数据
post:适合大量数据
注意:
表单数据的提交，要提交的表单项必须拥有name属性值，否则不会提交。(不安全)
提交的表单项数据为键值对,键为name属性的值,值为用户书写的数据。(安全)
注意: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属性所指明的提交地址。
-->
HTML注册实例&总结:
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<h3>注册页面</h3>
<hr>
<form action="#" method="get">
<table border="1px" cellspacing="0px" cellpadding="5px">
<tr height="35px">
<td width="70px">用户名:</td>
<td width="200px">
<input type="text" name="uname" id="uname" value="">
</td>
</tr>
<tr height="35px">
<td>密码:</td>
<td>
<input type="password" name="pwd" id="pwd" value="">
</td>
</tr>
<tr height="35px">
<td>邮箱:</td>
<td>
<input type="text" name="mail" id="mail" value="">
</td>
</tr>
<tr height="35px">
<td>手机号:</td>
<td>
<input type="text" name="phone" id="phone" value="">
</td>
</tr>
<tr height="35px">
<td>性别:</td>
<td>
男<input type="radio" name="sex" value="1" checked="checked"/>
女<input type="radio" name="sex" value="0"/>
</td>
</tr>
<tr height="35px">
<td>爱好:</td>
<td>
<input type="checkbox" name="fav" value="1">吃饭
<input type="checkbox" name="fav" value="2">睡觉
<input type="checkbox" name="fav" value="3">打豆豆
</td>
</tr>
<tr height="35px">
<td>籍贯:</td>
<td>
<select name="address" id="">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
</td>
</tr>
<tr height="35px">
<td>个人介绍:</td>
<td>
<textarea name="intro" cols="20" rows="4"></textarea>
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="checkbox" name="agree" id="agree" value="1"/>是否同意本公司协议
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</body>
</html>
<!--http://localhost:63342/HTML/html_test12.html?
uname=zs&pwd=123&mail=123&phone=123&sex=1&fav=1&fav=2&fav=3&address=1&intro=aaaaaaa&agree=1#
-->
扫一扫
3910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
