0索引
1font标签
2img标签
3友情链接
4table标签
5input标签
6框架标签
7网站注册案例
1font标签
标签常用属性
- color: 颜色
- size : 改变字体大小 范围:1~7
- face : 字体
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网站信息页面title>
head>
<body>
<h1> 标题1 h1>
<h2> 标题2 h2>
<hr />
我要<font color="red" size="1">回家 !!!font> <br />
<p>
<strong>黑马程序员strong>的学员多为大学毕业后，<em>有理想、有梦想，em>想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
p>
body>
html>
2img标签
- 基本属性
src:指定图片的路径
width: 宽度
height: 高度
alt:图片加载错误时的提示信息。
- 相对路径:
./代表的是当前路径
../代表的上一级路径
../../代表的上上-级路径
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<img src="../img/logo2.png" width="30%"/>
<img src="../image/header.jpg" width="30%" />
<img src="../img/美女22.jpg" width="500px" alt="这张图片可能加载问题" />
body>
html>
3友情链接
- ul:无序列表
- type:
- ol有序列表:
- type:样式
- start:起始索引
- li:列表项
- a超链接标签
- href:要坊何的讎接地址. 指定要跳转去的链接地址需要加上http协议,如果访问的是本网站的html文件可以直接写文 target:网站首页打幵方式:
- _blank: 新起一个标签页打开页面
-
_self: 默认打开方式在当前窗口打开
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello worldtitle>
head>
<body>
<ul type="circle">
<li>百度li>
<li>新浪li>
ul>
<hr />
<ol type="1" start="2">
<li>百度li>
<li>新浪li>
ol>
body>
html>
4表格
- table标签:
- border:指定边框
- width:宽度
- height:高度
- bgcolor:背景颜色
- align:对齐方式
- tr标签
- td标签:
- colspan:跨列操作
- rowspan:跨行操作
- 表格单元格的合并
- 表格的嵌套
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<table border="1px" width="400px" align="center" >
<tr align="center">
<td bgcolor="antiquewhite">1td>
<td>1td>
tr>
<tr align="center">
<td>1td>
<td>1td>
tr>
<tr align="center">
<td>1td>
<td>1td>
tr>
table>
<hr />
<table border="1px" width="400px" align="center">
<tr align="center">
<td colspan="2" rowspan="2">1td>
<td>1td>
tr>
<tr align="center">
<td>1td>
tr>
<tr align="center">
<td>1td>
<td>1td>
<td>1td>
tr>
<tr align="center" >
<td>1td>
<td>1td>
<td rowspan="2">1td>
tr>
<tr align="center">
<td>1td>
<td>1td>
tr>
table>
body>
html>
5input标签
1表单标签
- action : 直接提交的地址
- method :
- get 方式 默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
- post 方式 会将参数封装在请求体中, 没有这样的限制
2输入标签
input :
- type: 指定输入项的类型:
- text : 文本
- password : 密码框
- radio : 单选按钮
- checkbox : 复选框
- file : 上传文件
- submit : 提交按钮
- button : 普通按钮
- reset : 重置按钮
- hidden : 隐藏域
- select : 下拉列表
option : 选择项
-
- date : 日期类型
- tel : 手机号（在手机上才能看到效果
- number : 只允许输入数字
- placeholder : 指定默认的提示信息
- name : 在表单提交的时候,当作参数的名称
- id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
- textarea : 文本域, 可以输入一段文本
- cols : 指定宽度
- rows : 指定的是高度
- 用form标签来包裹要提交的内容
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<form action="table.html" >
<input type="hidden" value="sadfaldsfkjl@o3214813278" name="uid"/>
用户名: <input type="text" name="username" id="username" placeholder="请输入用户名" /><br />
密码：<input type="password" placeholder="请输入密码"/> <br />
确认密码：<input type="password" /><br />
邮箱：<input type ="text" /><br />
手机号码：<input type="tel" /><br />
照片：<input type="file" /><br />
性别：<input type="radio" name="sex"/>男
<input type="radio" name="sex" />女<br />
爱好 ：<input type= "checkbox"/> 阅读
<input type= "checkbox"/> 画画
<input type= "checkbox"/> 代码<br />
理想与追求：<textarea cols="3">textarea><br />
籍贯： <select >
<option>--请选择--option>
<option value="安徽">option>
<option value="江苏">option>
<option value="关东">option>
select><br />
出生日期：<input type="datetime-local" /><br />
校验码：<input type="text" />
<input type="submit" value="注册"/>
<input type="button" value="普通按钮"/>
<input type="reset" value="重置按钮"/>
form>
body>
html>
6框架标签
使用frameset 需要将body标签取掉
- cols : 按列划分页面
- rows : 按行划分页面
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<frameset rows="10%,30%,*">
<frame src="aaa.html" />
<frame src="bbb.html" />
<frame src="ccc.html" />
frameset>
html>
网站后台:(QQ邮箱)
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<frameset rows="15%,*">
<frame src="aaa.html" />
<frameset cols="15%,*">
<frame src="bbb.html"/>
<frame src="ccc.html" name="rightFrame"/>
frameset>
frameset>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body bgcolor="pink">
<a href="data.html" target="rightFrame">收件箱a><br />
<a href="#">发送箱a><br />
<a href="#">垃圾箱a><br />
body>
html>
7网站注册案例
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<table border="1px" width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="../img/logo2.png" />
td>
<td>
<img src="../image/header.jpg" />
td>
<td>
<a href="#">登录a>
<a href="#">注册a>
<a href="#">购物车a>
td>
tr>
table>
td>
tr>
<tr bgcolor="black">
<td height="50px">
<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 background="../image/regist_bg.jpg" height="500px">
<table border="5px" width="60%" height="80%" bgcolor="white" align="center" >
<tr>
<td>
<form action="注册入门案例.html">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="5">会员注册font> USER REGISTERtd>
tr>
<tr>
<td>用户名:td>
<td>
<input type="text" placeholder="请输入用户名"/>
td>
tr>
<tr>
<td>密 码:td>
<td>
<input type="password" placeholder="请输入密码"/>
td>
tr>
<tr>
<td>确认密码:td>
<td>
<input type="password" placeholder="请再次输入密码"/>
td>
tr>
<tr>
<td>email:td>
<td>
<input type="text" placeholder="请输入邮箱"/>
td>
tr>
<tr>
<td>姓名:td>
<td>
<input type="text" placeholder="请输入真实姓名"/>
td>
tr>
<tr>
<td>性别:td>
<td>
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女
<input type="radio" name="sex" /> 妖
td>
tr>
<tr>
<td>出生日期:td>
<td>
<input type="date" />
td>
tr>
<tr>
<td>验证码:td>
<td>
<input type="text" />
td>
tr>
<tr>
<td>td>
<td>
<input type="submit" value="注册" />
td>
tr>
table>
form>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="../image/footer.jpg" width="100%" />
td>
tr>
<tr>
<td align="center">
<a href="#">关于我们a>
<a href="#">联系我们a>
<a href="#">招贤纳士a>
<a href="#">法律声明a>
<a href="#">友情链接a>
<a href="#">支付方式a>
<a href="#">配送方式a>
<a href="#">服务声明a>
<a href="#">广告声明a>
<br />
Copyright © 2005-2016 传智商城 版权所有
td>
tr>
table>
body>
html>