Web前端学习day01(HTML)

编程语言 2019-10-24 12:02:46 阅读次数: 0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/weixin_42135811/article/details/102684824

教学导航

  • 了解什么是标记语言
  • 了解HTML主要特性，主要变化以及发展趋势
  • 了解HTML的结构标签
  • 掌握HTML的主要标签（字体，图片，列表，链接，表单等标签）

1.网站信息页面

1.1需求分析:

我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息

1.2技术分析:

HTML概述:

HTML: Hyper Text Markup Language 超文本标记语言

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

标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行

<h1>静夜诗</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>疑是地上霜,</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>
HTML的主要作用:

设计网页的基础,HTML5

HTML语法规范
<!--
	1. 上面是一个文档声明 
	2. 根标签 html
	3. html文件主要包含两部分. 头部分和体部分
		头部分 : 主要是用来放置一些页面信息
		体部分 : 主要来放置我们的HTML页面内容
	4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成  
	5. 标签不区分大小写, 官方建议使用小写
-->

1.3步骤分析:

  1. 公司简介 需要标题
  2. 水平分割线
  3. 四个段落
  4. 第一个段落字体需要红色

1.4代码实现:

<html>
	<head>
		<meta charset="UTF-8">
		<title>网站信息页面</title>
	</head>
	<body>
		<!--
			1. 公司简介 需要标题
			2. 水平分割线
			3. 四个段落
			4. 第一个段落字体需要红色
		-->
		<h3>公司简介</h3>
		
		<hr />
		<p>
		<font color="red">111</font>22<b><i>333</i></b>4444444
		</p>
		<p>
		<strong>1111</strong>234<em>333333，</em>235476876987
		</p>
	</body>
</html>
1.5 扩展内容

​ b : 加粗

​ i : 斜体

​ strong: 加粗, 带语义标签

em:  斜体, 带语义

2.网站图片信息

2.1需求分析:

在我们的网站中通常需要显示LOGO图片,显示效果如下

2.2技术分析

img 标签:

​ 常用的属性;

​ width : 宽度

​ height: 高度

​ src : 指定文件路径

​ alt: 图片加载失败时的提示内容

2.3步骤分析

2.4代码实现

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


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

2.5 扩展-文件路径

  • 相对路径
		./		代表的是当前路径
		../ 	代表的上一级路径
		../../	上上一级路径

3.网站友情链接页面

3.1需求分析

在我们的网站中,通常会显示友商公司的网站链接

  • 百度
  • 新浪微博
  • 黑马程序员

3.2技术分析

列表标签:

​ 无序列表: ul

​ type: 小圆圈,小圆点, 小方块

​ 有序列表: ol

​ type: 1,a ,A,I,

​ start : 指定是起始索引

3.3步骤分析

3.4代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
		1.使用无序列表
			百合网
			世纪家园
			珍爱网
			非诚勿扰
	-->
	<body>
		<ul>
			<li><a href="http://www.baihe.com" target="_blank">百合网</a></li>
			<li><a href="http://www.jiayuan.com">世纪家园</a></li>
			<li>珍爱网</li>
			<li>非诚勿扰</li>
		</ul>
	</body>
</html>
3.5 扩展内容

​ 点击链接,跳转去指定网站

​ a 超链接标签

​ 常用的属性:

​ href: 指定要跳转去的链接地址

​ 如果是网络地址需要加上http协议 ,

​ 如果访问的是本网站的html文件,可以直接写文件路径

​ target : 以什么方式打开

​ _self: 默认打开方式,在当前窗口打开

​ _blank: 新起一个标签页打开页面

内容回顾:

  • 网站信息案例
    • 字体标签 font
      • color: 颜色
      • size: 大小 1~7
      • face: 改变字体
    • p 段落标签
    • h标题标签 : 1~6
    • br 换行
    • hr 水平线
    • b 加粗
    • i 斜体
    • strong : 加粗 包含语义
    • em : 斜体 包含语义
  • 网站图片案例
    • img标签
      • src : 指定图片的路径
      • width: 宽度
      • height: 高度
      • alt : 图片加载错误时的提示信息
    • 相对路径:
      • ./ 代表的是当前路径
      • …/ 代表的上一级路径
      • …/…/ 代表的上上一级路径
  • 友情链接:
    • ul: 无序列表
      • type :
    • ol: 有序列表
      • type : 样式
      • start : 起始索引
    • li : 列表项
    • a 超链接标签
      • href : 要访问的链接地址
      • target : 打开方式
  • 网站首页
    • table标签
      • border: 指定边框
      • width : 宽度
      • height : 高度
      • bgcolor : 背景颜色
      • align : 对齐方式
    • tr标签
    • td标签
      • colspan: 跨列操作
      • rowspan: 跨行操作
    • 表格单元格的合并
    • 表格的嵌套

4.网站首页

4.1需求分析:

​ 根据产品文档,完成商城首页

4.2技术分析:

表格标签table

​ table标签:

​ 常用的属性:

​ bgcolor : 背景色

​ width : 宽度

​ height : 高度

​ align : 对齐方式

​ tr 标签

​ td 标签

合并单元格:

​ colspan : 跨列操作

​ rowspan : 跨行操作

​ 注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉

表格的嵌套:

​在td中可以嵌套一个表格

4.3步骤分析

  1. 创建一个8行一列的表格
  2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
  3. 第二部分: 导航栏部分 : 放置5个超链接
  4. 第三部分: 轮播图
  5. 第四部分: 嵌套一个三行7列表格
  6. 第五部分: 直接放一张图片
  7. 第六部分: 抄第四部分的
  8. 第七部分: 放置一张图片
  9. 第八部分: 放一堆超链接

4.4代码实现

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

5.网站注册页面:

5.1需求分析:

​编写一个HTML页面, 显示效果如图所示

5.2技术分析:

  • 表单标签

    <!--
			表单标签
				action : 直接提交的地址
				
				method : 
						get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
						post 方式  会将参数封装在请求体中, 没有这样的限制
						
			
			input :
				type: 指定输入项的类型
					text : 文本
					password :  密码框
					radio :		单选按钮
					checkbox :  复选框
					file 	 : 上传文件
					submit   : 提交按钮
					button 	 : 普通按钮
					reset	 : 重置按钮
					hidden  : 隐藏域
					
					date    : 日期类型
					tel     : 手机号
					number   : 只允许输入数字
					
				placeholder : 指定默认的提示信息
				name : 在表单提交的时候,当作参数的名称
				id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
			
			textarea : 文本域, 可以输入一段文本
						cols : 指定宽度
						rows : 指定的是高度
			
			select  : 下拉列表
				option : 选择项
		-->

    步骤分析:

    1. logo部分
    2. 导航栏
    3. 注册部分
    4. 页脚图片
    5. 网站声明信息

5.3代码实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册Demo</title>
	</head>
	<body>
		<form action="官网页面.html">
			<input type="hidden" value="dgvdrfg" name="uid" />
			用户名：<input type="text" placeholder="请输入用户名" /><br />
			密码：<input type="password" placeholder="请输入密码" /><br />
			确认密码：<input type="password" placeholder="确认密码" /><br />
			邮箱：<input type="text" placeholder="请输入邮箱" /><br />
			
			手机号码：<input type="tel" placeholder="请输入手机号" /><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 />
			籍贯：
				<select>
					<option>湖南</option>
					<option>北京</option>
					<option>上海</option>
					<option>深圳</option>
				</select><br />
			意见反馈：
			<textarea cols="40" rows="4"></textarea>
			<br />		
			出生日期：
				<input type="date" /><br />
			验证码：<input type="text" /><br />
			<input type="submit" value="注册" />
			<input type="button" value="普通按钮" />
			<input type="reset" value="重置按钮" />
		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
	</head>
	<body>
		<table 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>
								<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="请输入email"></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">女
										</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>
							</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>
					<br />
					Copyright © 2005-2016 传智商城 版权所有
				</td>
			</tr>
		</table>
	</body>
</html>

6.网站后台页面展示

6.1需求分析:

我们前面已经做完了首页商品展示, 那么我们需要一个页面用来编辑我们的商品信息, 还有商品分类, 用户购买之后,还得有订单管理页面

6.2技术分析

框架标签:
frameset

注意: 使用了frameset必须将body删掉,否则页面会有问题

frame
常用属性:

​ src: 引入的html文件路径
​ name: 指定框架的名称

6.3步骤分析

6.4代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="15%,*">
			<frame src="041.html" />
			<frameset cols="15%,*">
				<frame src="042.html" />
				<frame src="043.html" name="rightFrame" />
			</frameset>
	</frameset>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>041</title>
	</head>
	<body bgcolor="pink">
		<h3>QQ邮箱首页</h3>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>042</title>
	</head>
	<body bgcolor="aquamarine">
		<a href="044.html" target="rightFrame">收件箱</a><br />
		<a href="#">垃圾箱</a><br />
		<a href="#">收件箱</a><br />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>043</title>
	</head>
	<body bgcolor="khaki">
		3333
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>044</title>
	</head>
	<body>
		这里面放置具体内容
	</body>
</html>

扩展

框架中点击跳转

常用的快捷键

Ctrl + D 					删除光标当前所在的行
Ctrl + Shift + R 			复制当前行到下一行
Ctrl + Enter 				将光标移动到下一行
Ctrl + Shift + Enter 		将光标定位在上一行
Ctrl + Shift + /            注释当前行
Ctrl + R  					运行当前网页/刷新当前网页

猜你喜欢

转载自blog.csdn.net/weixin_42135811/article/details/102684824
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022