HTML

HTML

HTML慨述:
HTML:Hyoer Text Markup Language超文本标记语言

超文本:比普通文本功能更加强大,可以添加各种样式

标记语言:通过一组标签来对内容进行描述《关键字》

HTML主要作用
设计网页的基础

1代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站信息页面</title>
	</head>
	<body>
		<!--
			1. 公司简介 需要标题
			2. 水平分割线
			3. 四个段落
			4. 第一个段落字体需要红色
		-->
		<h3>公司简介</h3>
		
		<hr />
		<p>
		<font color="red">“中关村黑马程序员训练营”</font>是由<b><i>传智播客

</i></b>联合中关村软件园、CSDN,并委托传智播客进行教学实施的软件开发高端培训机构,致

力于服务各大软件企业,解决当前软件开发技术飞速发展,而企业招不到优秀人才的困扰。 目前

,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开

发高端训练基地,并被评为中关村软件园重点扶持人才企业。
		</p>
		<p>
		<strong>黑马程序员</strong>的学员多为大学毕业后,<em>有理想、有梦想,

</em>想从事IT行业,而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度,远

比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”,必须经历长

达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压

力测试、品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。

百里挑一的残酷筛选制度确保学员质量,并降低企业的用人风险。
		</p>
		<p>
		中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目

实施管理能力,并密切关注技术革新,不断引入先进的技术,研发更新技术课程,确保学员进入

企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。
		</p>
		<p>
		一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术

成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。
		</p>
	</body>
</html>

2网站信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>demo1</title>
	</head>
	<body>
		<!--
			h1 标题 : 
				h后面数字 取值范围:  1~6
		-->
		<h1> 标题1 </h1>
		<h2> 标题2 </h2>
		<h3> 标题3 </h3>
		<h4> 标题4 </h4>
		<h5> 标题5 </h5>
		<h6> 标题6 </h6>
		<h77> 标题h77 </h77>
		普通文本
		<!--水平分割线-->
		<hr />
		<p> 段落1 </p>
		<p> 段落1 </p>
		<p> 段落1 </p>
		
		<hr />
		<!--
			font 标签常用属性
				color: 颜色
				size : 改变字体大小  范围:1~7
				face : 字体
			<标签  属性的名称="属性的值">
		-->
	 	 我要<font color="red" size="1">回家 !!!</font> <br />
	 	 我要<font color="red" size="2">回家 !!!</font> <br />
	 	 我要<font color="red" size="3">回家 !!!</font> <br />
	 	 我要<font color="red" size="4">回家 !!!</font> <br />
	 	 我要<font color="red" size="5">回家 !!!</font> <br />
	 	 我要<font color="red" size="6">回家 !!!</font> <br />
	 	 我要<font color="red" size="7" face="仿宋">回家 !!!</font> <br />
	 	 我要<font color="red" size="77">回家 !!!</font> <br />
		
		
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			常用属性:
				src : 指定图片路径
				width : 指定图片宽度
				height : 图片高度
				alt : 文件加载失败时的提示信息
		-->
		<img src="../img/美女22.jpg" width="500px" alt="这张图片可能加载问题" 

/>
	</body>
</html>

4网站图片信息案例

<!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%" />
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--无序列表
			ul
				li 列表项
			type属性 . 小圆圈, 小方块, 默认小黑点
		-->
		<ul type="square">
			<li>百度</li>
			<li>新浪微博</li>
			<li>黑马程序员</li>
		</ul>
		
		<hr />
		
		<!--
			有序列表
			常用属性:
				type : 指定序号的类型
				start : 从几开始,必须得写数字
		-->
		<ol type="a" start="2">
			<li>百度</li>
			<li>新浪微博</li>
			<li>黑马程序员</li>
		</ol>
		
		
	</body>
</html>

5友情连接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
		1.使用无序列表
			百合网
			世纪家园
			珍爱网
			非诚勿扰
	-->
	<body>
		<ul>
			<li style="display: inline;"><a href="http://www.baihe.com" 

target="_blank">百合网</a></li>
			<li style="display: inline;"><a 

href="http://www.jiayuan.com">世纪家园</a></li>
			<li style="display: inline;">珍爱网</li>
			<li style="display: inline;">非诚勿扰</li>
		</ul>
	</body>
</html>

7网站首页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<!--
			1. 创建一个8行一列的表格
			2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
			3. 第二部分: 导航栏部分 : 放置5个超链接
			4. 第三部分: 轮播图 
			5. 第四部分: 嵌套一个三行7列表格
			6. 第五部分: 直接放一张图片
			7. 第六部分: 抄第四部分的
			8. 第七部分: 放置一张图片
			9. 第八部分: 放一堆超链接
		-->
		<table  width="100%" >
			<!--第一部份: LOGO部分: 嵌套一个一行三列的表格-->
			<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>
			<!--第二部分: 导航栏部分 : 放置5个超链接-->
			<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>
					<img src="../img/1.jpg" width="100%" />
				</td>
			</tr>
			<!--第四部分: 嵌套一个三行7列表格-->
			<tr>
				<td>
					<table  width="100%" height="500px"> 
						<tr>
							<td colspan="7">
								<h3>最新商品<img 

src="../img/title2.jpg"></h3>
							</td>
						</tr>
						<tr align="center">
							<!--左边大图的-->
							<td rowspan="2" width="206px" 

height="480px">
								<img 

src="../products/hao/big01.jpg" />
							</td>
							<td colspan="3" 

height="240px">
								<img 

src="../products/hao/middle01.jpg" width="100%" height="100%" />			

					
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
						</tr>
						<tr align="center">
							
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--第五部分: 直接放一张图片-->
			<tr>
				<td>
					<img src="../products/hao/ad.jpg" 

width="100%" />
				</td>
			</tr>
			<!--第六部分: 抄第四部分的-->
			<tr>
				<td>
					<table  width="100%" height="500px"> 
						<tr>
							<td colspan="7">
								<h3>热门商品<img 

src="../img/title2.jpg"></h3>
							</td>
						</tr>
						<tr align="center">
							<!--左边大图的-->
							<td rowspan="2" width="206px" 

height="480px">
								<img 

src="../products/hao/big01.jpg" />
							</td>
							<td colspan="3" 

height="240px">
								<img 

src="../products/hao/middle01.jpg" width="100%" height="100%" />			

					
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
						</tr>
						<tr align="center">
							
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</td>
							<td>
								<img 

src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font 

color="red">$998</font></p>
							</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>

8表格标签入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			table
				常用属性:
					border : 指定边框
					width  : 	宽度
					height : 	高度
					bgcolor:	背景色
					align	:  对齐方式
					
				tr 标签
				td 标签
			
		-->
		<table border="1px" width="400px" bgcolor="yellow" align="center">
			<tr bgcolor="red" align="center">
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td bgcolor="deeppink" align="center">1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
		</table>
	</body>
</html>

9表格合并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			表格的合并
				colspan :  跨列 
				rowspan :  跨行
		-->
		<table border="1px" width="400px">
			<tr>
				<td colspan="2">11</td>
				
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td colspan="2" rowspan="2">
					<table border="1px" width="100%">
						<tr>
							<td>1</td>
							<td>1</td>
							<td>1</td>
						</tr>
						<tr>
							<td>1</td>
							<td>1</td>
							<td>1</td>
						</tr>
					</table>
				</td>
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
				
				<td>34</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
				<td rowspan="2">44</td>
			</tr>
			<tr>
				<td>51</td>
				<td>52</td>
				<td>53</td>
			</tr>
		</table>
	</body>
</html>

10网站注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			创建一个5行一列的表格
			1. logo部分
			2. 导航栏
			3. 注册部分
			4. 页脚图片
			5. 网站声明信息
		-->
		<table border="1px" width="100%">
			<!-- logo部分-->
			<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 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="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>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="red">
		111
	</body>
</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>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="yellow">
		333
	</body>
</html>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		这里面明年会放置我们的后台数据
	</body>
</html>

11框架标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
		如果使用frameset 需要将body标签取掉
			cols : 按列划分页面
			rows : 按行划分页面
	-->
	<frameset rows="10%,30%,*">
		<frame src="aaa.html" />
		<frame src="bbb.html" />
		<frame src="ccc.html" />
	</frameset>
</html>

12网站后台

<!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>

你可能感兴趣的:(HTML)