HTML学习： 超文本标记语言
安利前端开发工具：Hbuilder ！
源码下载资源： 链接：https://pan.baidu.com/s/1rqBH922fu97yePLk0jMe0g 提取码：naej
HTML学习：
- head标签
- body标签
- 图片标签
- 超链接标签
- 表格标签
- 内嵌和框架标签
- 表单
1.HTML的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="内容"/><!--网页关键字-->
<meta name="description" content="内容"/><!--网页描述-->
<meta name="author" content="内容"/><!--网页作者-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/><!--网页自动跳转(5s)--> </head>
<body>this is my first html</body>
</html>
2.HTML的body标签(文本标签)
html
<html>
<head>
<title>HTML的body标签-文本标签学习</title>
<meta charset="utf-8"/>
</head>
<body>
<!--标题标签 -->
<!--align: center left right -->
<h1 align="center">HTML学习很简单</h1>
<h2>HTML学习很简单</h2>
<h3>HTML学习很简单</h3>
<h4>HTML学习很简单</h4>
<h5>HTML学习很简单</h5>
<h6>HTML学习很简单</h6>
<!--600px为占屏幕宽度 若40%为占浏览器窗口宽度比率等等 20px为高度 -->
<hr width="600px" size="20px" color="red" align="left"/>
<!--<p></p>段落标签，每个段落自动换行-->
<p> 我是一个段落<br /><!-- <br/>换行 空格符-->
<b>学习HTML真的很简单</b> <!--<b></b>加粗-->
<i>学习HTML真的很简单</i> <!--<i></i>斜体-->
<u>学习HTML真的很简单</u> <!--<u></u>下划线-->
<del>学习HTML真的很简单</del> <!--<del></del>删除线-->
<i><b><u>学习HTML真的很简单</u></b></i> <!-- i、u、b、del随意嵌套，没有指定顺序-->
</p>
</body>
</html>
2（补）.HTML的body标签(列表标签)
<html>
<head>
<title>列表标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>列表标签学习</h3>
<hr />
<h3>我热爱的城市:</h3>
<ul><!-- <ul>表示无序列表 前面默认黑圈-->
<li>武汉</li><!-- 每一个<li>代表一行-->
<li>新疆</li>
<li>内蒙古</li>
</ul>
<h3>我的爱好:</h3>
<ol type="I"><!-- <ol>表示有序序列表 type可为(1,a,A，I)-->
<li>写代码</li><!-- 每一个<li>代表一行-->
<li>打游戏</li>
<li>看电影</li>
</ol>
<dl><!-- <dl>表示自定义列表-->
<dt>我热爱的课程:</dt> <!--<dt>可以认为是顶头标题-->
<dd>java课程</dd>
<dd>数据结构与算法</dd>
<dd>javaweb</dd>
<dt>我热爱的地方</dt>
<dd>武汉</dd>
<dd>新疆</dd>
<dd>内蒙古</dd>
</dl>
</body>
</html>
3.HTML的图片标签
<html>
<head>
<title>图片标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>图片标签学习</h3>
<hr /> <!--使用本地资源:图片位于本地电脑中-->
<img src="img/1.jpg" height="200px"/> <!--只设置宽度，长度默认比例变化，单位px也可以是%-->
<img src="img/2.jpg" height="200px"/>
<!--title表示鼠标放上去现实的内容 alt表示图片加载失败显示的内容-->
<img src="img/3.gif" height="200px" title="风景图片" alt="加载失败"/>
<hr /> <!--使用网络资源:-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564041564093&di=615775dde0787c6867bb527206dc9414&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20111207%2FImg328215620.jpg" width="200px"/>
<!--各图片之间不回自动换行-->
</body>
</html>
4.HTML的超链接标签
<html>
<head>
<title>超链接标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>超链接标签学习</h3>
<hr />
<!--:
target:指明要跳转的网页资源的显示位置
_self 在当前页中刷新显示
_blank 在新的标签页中显示
_top 在顶层页面中显示
_parent 在父级页面中显示
注意:访问方式可以是文字也,可以是图片.-->
<a href="图片标签学习.html" >图片标签学习</a><br />
<a href="body标签学习(列表标签).html" target="_blank"><img src="img/3.gif" height="100px"/</a>
<hr />
<a href="http://www.taobao.com" target="_self">淘宝一下 </a>
<hr />
<a href="http://www.taobao.com" target="_top"><img src="img/4.png"/></a>
<hr />
<a href="http://www.baidu.com" target="_partent">百度一下</a>
<!--
锚点学习:作用:在一张网页中进行资源跳转
使用:先使用超链接标签在指定的网页位置增加锚点.
点击含有描点标签的位置，自动调到当前页面指定内容处-->
<a href="锚点学习.html">锚点学习</a>
<a name="锚点名" ></a>
<a href="#锚点名" >访问方式</a>
</body>
</html>
5.表格标签
<html>
<head>
<title>表格标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>表格标签学习</h3> <hr />
<!-- <table>标签中有如下属性：border:给表格添加边框
width:设置表格的宽度
height:设置表格的高度
cellpadding:设置内容居边框的距离
cellspacing:设置边框的大小
style="border-bottom:none;"表示此table的底线不要
style="border-top:none;"表示此table的顶线不要 -->
<table border="1px" cellpadding="10px" cellspacing="0px">
<!--一个<tr>表示一行，height表示行高-->
<tr height="50px">
<!--<th>和<td>区别仅仅在于：th的内容是加粗和居中的-->
<!--一个<td>表示一列，weighet表示列宽-->
<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>
<!-- colspan表示列合并 rowsapan表示行合并 需要删掉被合并过来的行或者是列-->
<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>
<!-- <pre>表示这里面内容的样式会浏览器原样输出</pre>
&It;>分别表示<、> 不会让浏览器误认为是标识符
一个大表格可以分成多个小table来拼接而成
中间的部分table需要去顶线和底线，这样处理之后不会看出是拼接而成-->
6.内嵌和框架标签
内嵌标签：(iframe)
<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>框架学习(frameset)
<html>
<head>
<title>框架标签学习：</title>
<meta charset="UTF-8"/>
</head>
<!--
注意:
第一步一定要删除body标签
框架标签学习:
frameset
rows:按照行进行切分页面
cols:按照列进行切分页面
子标签:
frame:进行切分区域的占位,一个frame可以单独加载网页资源.
src:资源路径(本地或者网络)
name:区域名,结合超链接使用
-->
<!--row表示水平划分-->
<frameset rows="10%,*,10%">
<frame src="frameset/top.html" />
<!--这里是将第二个frame当成了一个新网页，然后重新进行再次划分 cols表示纵向-->
<frameset cols="10%,*">
<frame src="frameset/left.html" />
<frame src="frameset/right.html" name="_right"/>
</frameset>
<frame src="frameset/bottom.html" />
</frameset>
</html>网页显示效果：
进行改良:将left页面中变为简单的导航：即超链接
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
</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>
7.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提交按钮.-->
<h3>form标签学习</h3>
<hr />
<form action="#" method="get">
<!--form表单总体分为三大块 input 、textarea 、select
input中 type属性有：
"text" 文本输入框
"password" 密码输入框
"radio" 单选框 checked="checked"表示默认为这个
"checkbox" 多选框 checked="checked"表示默认为这个
"hidden"隐藏表现(表示此内容需要一起提交到服务器，并且对用户不可见)
"button"按钮
"submit"提交表单
其中name/id 和 value可以理解成键值对；name与服务器交互 ；id与css/js交互-->
<!--要注意表单中所有数据，name:value是键值对，value才是数据
这里value:"王五" 表示不输入的情况下 显示王五-->
用户名:<input type="text" name="uname" id="uname" value="王五"/><br />
密码: <input type="password" name="upwd"/><br />
<!--注意这里男/女 的name为相同标识-->
性别 : 男<input type="radio" name="sex" value="1" checked="checked"/> 女<input type="radio" name="sex" value="0"/><br />
<!--checkbox中 name标识应该唯一，不然多选就失去了存在的必要-->
爱好:
吃饭<input type="checkbox" name="fav" value="1" checked="checked"/>
睡觉<input type="checkbox" name="fav" value="2"/>
打豆豆<input type="checkbox" name="fav" value="3"/><br />
籍贯:
<select name="address"><!--单选下拉框-->
<!--这里name标识需要在select中 select="selected"表示默认-->
<option value="" selected="selected">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" >武汉</option>
</select>
<br />
<!-- 文本域:
textarea:声明一个可以书写大量文字的文本区域
name:数据提交的键名,js和css也会使用
rows:声明文本域的行数
cols:声明文本域的列数-->
文本域:<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>
HTML实战一个注册页面(纯HTML)
<html>
<head>
<title>注册页面</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>注册页面</h3>
<hr />
<form action="#" method="get">
<table border="1px" cellspacing="0" 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" value="" />
</td>
</tr>
<tr height="35px">
<td>性别:</td>
<td>
男<input type="radio" name="sex" id="sex" value="1" checked="checked"/>
女<input type="radio" name="sex" id="sex" value="0" />
</td>
</tr>
<tr height="35px">
<td>爱好:</td>
<td>
<input type="checkbox" name="fav" id="fav" value="1" />唱歌
<input type="checkbox" name="fav" id="fav" value="2" />打球
<input type="checkbox" name="fav" id="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" rows="4" cols="20"></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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
