本文主要包含HTML基础标签,html基础标签代码,html基本标签等相关知识,mqingo希望在学习及工作中可以帮助到您
1.表格标签
tr 行
td 列
table常用属性:
`width :指定宽度
height : 指定高度
border : 指定边框
bgcolor : 指定背景颜色
align : 指定对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" width="500px" bgcolor="aquamarine" align="center">
<tr bgcolor="aqua" align="center">
<td>1</td>
<td bgcolor="chocolate" align="center">1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td bgcolor="cadetblue" align="center">1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
2.表格合并 表格嵌套
rowspan : 跨行
colspan : 跨列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td colspan="2">11</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>21</td>
<td colspan="3" rowspan="2">
<table border="1px" width="100%">
<tr>
<td>q</td>
<td>w</td>
</tr>
<tr>
<td>e</td>
<td>r</td>
</tr>
</table>
</td>
<td>25</td>
</tr>
<tr>
<td>31</td>
<td>35</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td rowspan="2">45</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
</tr>
</table>
</body>
</html>
3.网站首页
1. 创建一个8行一列的表格
2. 第一部份: LOGO部分: 嵌套一个一行三列的表格[自行选择]
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图
5. 第四部分: 嵌套一个三行7列表格
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1. 创建一个8行一列的表格-->
<table width="100%">
<!--2. 第一部份: LOGO部分: 嵌套一个一行三列的表格-->
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="../img/new_ban.png"/>
</td>
<td>
<img src="../img/header.jpg"/>
</td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
<tr>
<td bgcolor="black" 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>
<!--4. 第三部分: 轮播图[js] -->
<tr>
<td>
<img src="../img/1.jpg" width="100%"/>
</td>
</tr>
<!--5. 第四部分: 嵌套一个三行7列表格-->
<tr>
<td>
<table width="100%" >
<tr>
<td colspan="7">
<h2>最新商品<img src="../img/title2.jpg" /></h2>
</td>
</tr>
<tr align="center">
<td rowspan="2">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" height="240px">
<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
</td>
<td>
<img src="../products/hao/small03.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
<td>
<img src="../products/hao/small04.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
<td>
<img src="../products/hao/small05.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
</tr>
<tr align="center">
<td>
<img src="../products/hao/small03.jpg" width="100%" height="100%"/>
<p>名称</p>
<font color="red">$299</font>
</td>
<td>
<img src="../products/hao/small04.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
<td>
<img src="../products/hao/small05.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
<td>
<img src="../products/hao/small03.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
<td>
<img src="../products/hao/small04.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
<td>
<img src="../products/hao/small05.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--6. 第五部分: 直接放一张图片-->
<tr>
<td>
<img src="../products/hao/ad.jpg" width="100%"/>
</td>
</tr>
<!--7. 第六部分: 抄第四部分的-->
<tr>
<td>
<table width="100%" >
<tr>
<td colspan="7">
<h2>热门商品<img src="../img/title2.jpg"/></h2>
</td>
</tr>
<tr align="center">
<td rowspan="2">
<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
</td>
<td colspan="3" height="240px">
<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
</td>
<td>
<img src="../products/hao/small03.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
<td>
<img src="../products/hao/small04.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
<td>
<img src="../products/hao/small05.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
</tr>
<tr align="center">
<td>
<img src="../products/hao/small03.jpg" width="100%" height="100%"/>
<p>名称</p>
<font color="red">$299</font>
</td>
<td>
<img src="../products/hao/small04.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
<td>
<img src="../products/hao/small05.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
<td>
<img src="../products/hao/small03.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
<td>
<img src="../products/hao/small04.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
<td>
<img src="../products/hao/small05.jpg" width="100%" height="100%"/>
<p>名称</p>
<p><font color="red">$299</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--8. 第七部分: 放置一张图片-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<!--9. 第八部分: 放一堆超链接-->
<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@2016-2020版权所有
</td>
</tr>
</table>
</body>
</html>
4.form表单标签
常用属性:
action:指定提交的地址
method:以什么方式提交
两种方式get[默认] post
get与post的区别:
get将参数拼接在链接后面.有大小限制1k/4k
post将参数封装在请求体中.没有大小限制
input标签
type 指定输入项的类型
name 表单提交的时候,当做参数传递
id 给输入项取一个名字,便于后期找到他,操作他
placeholder 指定默认提示信息[html5]
type常用属性:
hidden 隐藏域 主要是用来防止页面的id信息 value属性的值为id值
text 文本框 [html4]
number数字框[html5]
tel九宫格数字框[html5]
date日期类型年月日[html5]
datetime-local日期类型年月日时分[html5]
password 密码框
file 文件
radio 单选
checkbox 多选
submit 提交
button 普通按钮
reset 重置按钮
textarea标签
select 下拉列表 option 列表项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="09网站首页.html">
<input type="hidden" value="swdwf" name="uid"/>
用户名:<input type="text" name="username" id="username1" placeholder="请输入用户名"/><br />
密 码:<input type="password" /><br />
确认密码:<input type="password" /><br />
手机号:<input type="text" /><span>text 手机号html4</span><br />
手机号:<input type="number" /><span>number 数字框 手机号html5</span><br />
手机号:<input type="tel" /><span>tel 九宫格软键盘 手机号html5</span><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" />java
<input type="checkbox" />打球<br />
描 述:<textarea cols="40" rows="60"></textarea><br/>
省 市:
<select>
<option>---请选择---</option>
<option>河北</option>
<option>河南</option>
<option>北京</option>
<option>天津</option>
<option>上海</option>
</select><br />
出生日期:<input type="text"/><span>text 出生日期 html4</span><br/>
出生日期:<input type="date"/><span>date 年月日 出生日期 html5</span><br/>
出生日期:<input type="datetime-local"/><span>datetimelocal 年月日时分 出生日期 html5</span><br/>
验证码:<input type="text" /><br />
<input type="submit" value="注册"/>
<input type="button" value="普通按钮" />
<input type="reset" value="重置"/>
</form>
</body>
</html>
5.网站注册
创建一个5行1列的表格
1. logo部分[自行选择]
2. 导航栏
3. 注册部分
4. 页脚图片
5. 网站声明信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="0" width="100%">
<!--1. logo部分 -->
<tr>
<td>
<table border="0" width="100%">
<tr>
<td>
<img src="../img/tt.png"/>
</td>
<td>
<img src="../image/header.jpg"/>
</td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 2. 导航栏 -->
<tr bgcolor="black" height="50px">
<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>
<!--3. 注册部分 -->
<tr>
<td background="../image/regist_bg.jpg" align="center" width="100%" height="800px">
<table border="5px" width="60%" height="80%" bgcolor="white" align="center">
<tr>
<td>
<table align="center" width="60%">
<tr>
<td colspan="2"><font size="5" color="deepskyblue">会员注册 </font>USER REGISTER</td>
</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="email" placeholder="Email"/></td>
</tr>
<tr>
<td>姓 名:</td>
<td><input type="请输入姓名"/></td>
</tr>
<tr>
<td>性 别:</td>
<td>
<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="button" value="注册"/></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 4. 页脚图片 -->
<tr >
<td >
<img src="../image/footer.jpg" width="100%"/>
</td>
</tr>
<!-- 5. 网站声明信息 -->
<tr align="center">
<td>
<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 />
<p>Copyright 2018-2222 @ 版权所有</p>
</td>
</tr>
</table>
</body>
</html>
6.框架标签frameset 入门
常用属性:
cols:按列划分页面
rows:按行划分页面
注:使用frameset必须把body标签去掉,否则页面会出现显示不出来的问题.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站后台页面</title>
</head>
<!-- 按行划分 -->
<!--<frameset rows="10%,40%,50%">
<frame src="a.html" />
<frame src="b.html" />
<frame src="c.html" />
</frameset>-->
<!-- 按列划分 -->
<frameset cols="10%,40%,50%">
<frame src="a.html" />
<frame src="b.html" />
<frame src="c.html" />
</frameset>
</html>
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="#12B7F5">
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="#565656">
<p>左侧菜单栏</p><br />
<a href="#">百度</a><br />
<a href="#">谷歌</a><br />
<a href="#">火狐</a><br />
<a href="#">IE</a><br />
</body>
</html>
c.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="red">
</body>
</html>
7.网站后台案例
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="30%,*">
<frame src="a.html"/>
<!--<frame src="b.html"/>-->
<frameset cols="20%,*">
<frame src="b.html"/>
<frame src="c.html" name="rightFrame"/>
</frameset>
</frameset>
</html>
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="#12B7F5">
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="#565656">
<p>左侧菜单栏</p><br />
<a href="d.html" target="rightFrame">百度</a><br />
<a href="#">谷歌</a><br />
<a href="#">火狐</a><br />
<a href="#">IE</a><br />
</body>
</html>
c.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="red">
</body>
</html>
d.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
点击左侧菜单栏,右侧显示数据.
</body>
</html>