最近开始补习前端的知识了,记录一下学习的内容。
由于是小白一个,学习是跟着黑马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期视频资料整理得来。