最近开始补习前端的知识了，记录一下学习的内容。
由于是小白一个，学习是跟着黑马28期的视频来的，整理的内容比较浅显，也都是视频里有的，有哪里不对的地方还望大牛们指点一二！
HTML定义：
1.什么是HTML?
HTML：Hyper Text Markup Language 超文本标记语言
- 超文本：比文本功能更加强大
- 标记语言：通过一组标签对内容进行描述的一门语言
2.HTML的语法和规范
- HTML文件的扩展名是.html或者是.htm
- HTML文件是由头和体组成
- HTML这组标签是不区分大小写
HTML的标记通常是由开始标签和结束标签组成：<b>内容</b> <br/>
3.<font>标签 <font 属性名=”属性值”>文字</font>
- size:控制字体大小.最小1 最大7
- color：控制字体颜色. 使用英文设置 ，使用16进制数设置
- face：控制字体.
【HTML的排版标签】
<hn>标题标签
<h1>b标题</h1>
<p>段落标签
<p>一段文字</p>
<br/>换行标签
<br/>代表换行
<hr/>水平线标签
<hr/>水平线标签
<b>字体加粗
<b>文字</b>
<i>斜体标签
<i>斜体</i>
4.在网页中显示带有图片的页面效果如下：
如果有素材的话，首先可以看出这个页面是由几张图片组成的，如果由一张图片，则直接用src直接引入就好了，如果由两张或者两张以上的图片组成，则就要考虑使用表格进行排版，分块引入图片了。
【HTML的图片标记】
<img />标签
src：图片的路径
width：图片宽度
height：图片的高度
alt：图片提示
图片路径：
分成相对路径和绝对路径
相对路径:
./ :代表当前路径
../ :代表上一级路径
这里是由一张照片组成，直接一句即可引用，代码如下：
<html>
<head>
<meta charset="utf-8">
<title>网站图片页面</title>
</head>
<body>
<img src="../img/logo2.png"/><img src="../img/header.png" />
</body>
</html>
这里要求在当前html文件的路径下有一个img文件夹，里面有一张名为header.png的图片才可以
5.网页中带有列表的写法：
无序列表：
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>
有序列表：
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>
6.关于超链接的使用：
【超链接标签】
<a>超链接</a>
href：超链接跳转的路径
target：打开方式
_self：在自身页面打开
_blank：打开一个新窗口
实例需求：多图页面
在浏览器中显示网站的首页效果如下：
步骤分析：
正如上面提到的，很多页面都是由很多块组成的，这里可以先将页面分解，使用表格进行
【HTML的表格标签】
表格属性：要用到<table><tr><td>三个标签，其中表格的开始为table标签，行用tr，列用td
border：表格边框
width：表格宽度
height：表格高度
align：水平方向对齐方式 left center right
bgcolor：背景色
步骤一：创建8行表格
步骤二：实现第一行，嵌套一个一行三列表格。
步骤三：实现第二行，实现导航，设置背景色。
步骤四：放置一张图片
步骤五：显示热门商品，创建一个三行七列的表格。对表格进行跨行，跨列的操作。
步骤六：引入一张广告图片。
步骤七：显示最新商品，创建一个三行七列的表格。对表格进行跨行，跨列的操作。
步骤八：广告信息
步骤九：链接版权信息。
代码实现入下：素材可以自己替换，但是素材要保证在当前路径下的img文件夹中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站首页</title>
</head>
<body>
<table width="1400" border="0" align="center">
<tr>
<td>
<!-- LOGO部分 -->
<table width="100%">
<tr height="40">
<td>
<img src="../img/logo2.png"/>
</td>
<td>
<img src="../img/header.png"/>
</td>
<td>
<a href="#">登录</a>
<a href="../案例五：网站注册页面显示/网站的注册页面.html">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<tr height="30" bgcolor="black">
<td>
<!--导航部分-->
<a href="#"><font color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
</td>
</tr>
<tr>
<td>
<img src="../img/1.jpg" width="100%" />
</td>
</tr>
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="7"><font size="5"><b>最新商品</b></font><img src="../img/title2.jpg"></td>
</tr>
<tr>
<td rowspan="2" width="200" height="500">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" width="600" height="250">
<img src="../products/hao/middle01.jpg" width="100%" height="250"/>
</td>
<td width="200" align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200" align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200" align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
<tr>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!--广告-->
<a href="#"><img src="../products/hao/ad.jpg" width="100%"></a>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0">
<tr>
<td colspan="7"><font size="5"><b>最新商品</b></font><img src="../img/title2.jpg"></td>
</tr>
<tr>
<td rowspan="2" width="200" height="500">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" width="600" height="250">
<img src="../products/hao/middle01.jpg" width="100%" height="250"/>
</td>
<td width="200" align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200" align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td width="200" align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
<tr>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
<td align="center">
<img src="../products/hao/small03.jpg"/><br/>
<p><font color="gray">电磁锅</font></p>
<p><font color="red">$499</font></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<tr>
<td align="center">
<a href="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>
<a href="">联系我们</a>
<a href="">招贤纳士</a>
<a href="">法律声明</a>
<a href="../案例三：网站列表页面显示/网站列表页面显示.html">友情链接</a>
<a href="">支付方式</a>
<a href="">配送方式</a>
<a href="">服务声明</a>
<a href="">广告声明</a>
<br/>
Copyright © 2005-2016 传智商城 版权所有
</td>
</tr>
</table>
</body>
</html>
实例二：注册页面的实现
这里用到HTML的表单标签
【HTML的表单标签】
表单标签：
需要提交的表单需要使用<form></form>括起来
action：提交路径
method：提交方式
文本框:
<input type=”text”/>
name
value
size
maxlength
readonly
密码框：
<input type=”password”/>
单选按钮：
<input type=”radio”/>
Checked：默认选中
复选框
<input type=”checkbox”/>
Checked：默认选中
下拉列表框
<select><option></option></select>
Selected：默认选中
Multiple：全部显示
文件上传项
<input type=”file” name=”file”/>
文本区
<textarea name=”” cols=”” rows=””></textarea>
提交按钮
<input type=”submit” value=”注册”>
重置按钮
<input type=”reset” value=”重置”>
普通按钮
<input type=”button” value=”普通按钮”>
隐藏字段
<input type=”hidden” name=”id”/>
提交方式：这个也是经典的面试题，问GET和POST提交方式的区别
GET ：默认值
提交的数据都会在地址栏中进行显示
提交的数据的时候是有大小的限制
POST ：
提交的数据不会再地址栏中进行显示
提交的数据没有大小限制
POST相对更安全些
步骤分析：
步骤一：创建一个5行表格
步骤二：完成每行显示
步骤三：中间行设置一个背景图片，嵌套一个表格居中显示。在表格中显示表单的内容
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
<!-- LOGO部分 -->
<table width="100%">
<tr height="40">
<td>
<img src="../img/logo2.png"/>
</td>
<td>
<img src="../img/header.png"/>
</td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="black" height="30">
<td>
<a href="#"><font color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
</td>
</tr>
<tr height="600">
<td>
<table width="100%" height="100%" background="../img/regist_bg.jpg">
<tr>
<td align="center">
<table width="60%" height="80%" border="1" bgcolor="white">
<tr>
<td>
<form>
<table width="100%" height="100%" border="0" align="center" cellspacing="10">
<tr>
<td>用户名</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="repassword"/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女</td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="birthday"/></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" name="checkcode" size="10"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"/></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<tr>
<td align="center">
<a href="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a>
<a href="">联系我们</a>
<a href="">招贤纳士</a>
<a href="">法律声明</a>
<a href="../案例三：网站列表页面显示/网站列表页面显示.html">友情链接</a>
<a href="">支付方式</a>
<a href="">配送方式</a>
<a href="">服务声明</a>
<a href="">广告声明</a>
<br/>
Copyright © 2005-2016 传智商城 版权所有
</td>
</tr>
</table>
</body>
</html>
【HTML的框架标记】
<frameset>标签
- 使用了frameset标签，不需要使用body.
- 属性：
- rows：横向切分页面
- cols：纵向切分页面
<frame>标签代表切分每个部分的页面 - src：引入页面的路径
实现分块页面：
步骤分析：
步骤一：先将页面切分成上下两个部分。
步骤二：将下部分切分成左右两个部分。
步骤三：分别引入不同的页面。
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="15%,*">
<frame src="top.html" />
<frameset cols="15%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</frameset>
</html>
最后一个表单验证页面：
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get">
<input type="hidden" name="id" value="007"/>
姓名:<input name="username" value="xuduoduo"/><br>
密码:<input type="password" name="password" value="123" disabled="disabled"><br>
性别:<input type="radio" name="sex" value="1" checked="checked">男
<input type="radio" name="sex" value="0">女
<br>
爱好:<input type="checkbox" name="hobby" value="eat">吃
<input type="checkbox" name="hobby" value="drink" checked="checked">喝
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
<br>
头像:<input type="file" name="photo"><br>
籍贯:
<select name="pro">
<option value="01">黑龙江</option>
<option value="02">吉林</option>
<option value="03" selected="selected">辽宁</option>
</select>
<select name="city">
<option >-请选择-</option>
<option value="0101">哈尔滨</option>
<option value="0102">漠河</option>
<option value="0201">长春</option>
<option value="0202">吉林</option>
<option>沈阳</option>
<option>锦州</option>
</select>
<br>
自我介绍:
<textarea name="intr" cols="40" rows="4">good!</textarea>
<br>
<input type="submit" value="保存"/>
<input type="reset" />
<input type="button" value="普通按钮"/>
</form>
</body>
</html>
<!--
表单:
常用属性:
action:信息提交的路径 默认是当前页面
method:表单提交的方式
只需要掌握两种
get(默认)和post
get和post的区别:
1.get请求会把所有的参数追加在地址栏上,post请求不会
2.get请求参数大小有限制,post请求参数大小没有限制
3.post相当于get安全些
常见的子标签
input
select:下拉选
textarea:文本域
input标签
常用的属性:
type:
text:文本框 默认
password:密码框
radio:单选框
checkbox:多选框
file:文件框
submit:提交
reset:重置
button:普通按钮
hidden:隐藏域 在页面上显示 提交的时候可以提交过去
image:图片提交 替代submit
name:
可以将几个单选框(复选框)设置为一组
要想将信息保存到服务器上必须有name属性
readonly:
readonly="readonly" 只读
disabled:
disabled="disabled" 禁用
select :下拉选
格式:
<select name="pro">
<option>黑龙江</option>
</select>
textarea:文本域
常用的属性:
cols:列
rows:行
提交到服务器的内容的格式:
key=value&
对于文本框 密码框 文本域 手写的内容传递过去了
对于单选框和多选框来说,却没有把值传递过去
要想把值传递过去 必须设置value属性
若下拉选要想把选中内容的值传递过去,请加上value属性
默认值:
文本框 密码框:只需要添加value属性
单选框 多选框:添加 checked="checked"
下拉选:添加selected="selected"
文本域:标签体
当我们提交的时候 发现地址栏变化
?username=tom&password=123&sex=on&hobby=on&hobby=on&photo=&pro=黑龙江&city=哈尔滨&intr=good+girl
-->
文章由黑马28期视频资料整理得来。
