Web前端（一）HTML

最新推荐文章于 2023-06-20 22:39:05 发布
最新推荐文章于 2023-06-20 22:39:05 发布
阅读量970 收藏 20
点赞数 9
分类专栏： Web前端 Web前端 文章标签： Web前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39782583/article/details/83898698
版权

Day1 : 2018/11/10 HTML

  • 创建页面：

一些基础的标签：

  • 标题：<h1 />
  • 水平线: <hr />
  • 段落: <p></p> 或者<br />
  • 加粗：<b></b>
  • 斜体：<i></i>
  • 下划线：<u></u>
  • 换行：<br />
  • 空格： &nbsp

注：h从1到6逐渐变小，而字体标签的size从1到7逐渐变大

  • 显示图片： <img / >
    图片无法显示
<img  alt="图片无法显示" src="太长了，见源代码"  width="225"  heigh=225 /> 
（其中alt是当图片不能正常显示的时候页面的显示，另外，图片的source就用绝对路径吧）
  • 显示列表:
  • 无序列表：<ul></ul>
  • 需要写入的内容
  • 需要写入的内容
  • 需要写入的内容
<ul  type="disk/circle/square">(分别对应实心圆空心圆和方块）
	<li>需要写入的内容</li>
	<li>需要写入的内容</li>
	<li>需要写入的内容</li>
</ul>
  1. 有序列表：<ol></ol>
  1. 需要写入的内容
  2. 需要写入的内容
  3. 需要写入的内容
<ol  start=“4”   reversed="reversed"  type=(分别对应从4开始，是否倒转和格式）
	<li>需要写入的内容</li>
	<li>需要写入的内容</li>
	<li>需要写入的内容</li>
</ol>

<a  href="www.baidu.com" >  点这里进入百度 </a>
<a  href="D:\JVA_PRJ\HTML_test\img\footer.jpg" > 点这里进入图片 </a>
  • 网站表格： <table><tr><td></td></tr></table>
<table>
	<tr>（行）
		<td></td>（列）
		<td></td>（列）
		<td></td>（列）
	</tr>
	
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>

	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	
</table>
table 和tr的参数含义
border边框像素（px）
width/height 宽/高
align 位置（如居中center）
cellspacing 边框与边框的距离（px）
cellpadding 边框与内容的距离（px）

合并边框的单元格：

注：
1. 要想使单元格里面的图片或者超链接居中，可以在单元格<tr>里面设置align = “center“
2. 在设置单元格的时候最好设置清楚格子的宽高像素，不然填充的时候容易框子大小改变

11121314
2224
3134
41424344
<table>
	<tr>
		<td rowspan="2" align="center">11</td> // 行删除两个
		<td>12</td>
		<td>13</td>
		<td>14</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2" align="center">22</td>  //列和行删除两个，然后删除相应的单元格
		<td>24</td>
	</tr>
	<tr>
		<td>31</td>
		<td>34</td>
	</tr>
		<tr>
		<td>41</td>
		<td>42</td>
		<td>43</td>
		<td>44</td>
	</tr>
	</table>

最后，综合以上，做个小页面，然后用frameset包装一下，点击左边的按钮，就会在右边出现我们写好的页面

效果图：
首先是我们写的页面:在这里插入图片描述

然后frameset包装一下：
在这里插入图片描述
源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商城的实现</title>
	</head>
	<body>
		<table border="2px" width="100%" height="100%">
			<!-- 第一行 -->

			<tr>
				<td colspan="2" width="33.33%"><img src="../img/logo2.png" width="50%"/></td> 
				<td colspan="2"  width="33.33%"><img src="../img/header.png" ></td>
				<td colspan="3"  width="33.33%"> <a href="#">登陆</a>  <a href="#">注册</a> <a href="#">购物车</a>  </td>
			</tr>
			<!-- 第二行 -->
			<tr bgcolor="black">
				<td colspan="7"> 
				 <a href="#" ><font size="5" color="red">首页</font></a>  &nbsp; &nbsp; &nbsp;
				 <a href="#"><font color="red">手机数码</font></a> 
				 <a href="#">电脑办公</a> <a href="#">鞋靴箱包</a> 
				 <a href="#">家用电器</a></td>
			</tr>
			<!-- 第三行 -->
			<tr>
				<td colspan="7" ><img src="../img/1.jpg"  width="100%" /></td>
			</tr>
			<!-- 第四行 -->
			<tr>
				<td colspan="7"><font size="5" color="red">最新商品 </font>
				<img src="../img/title2.jpg"</td>
			</tr>
			<!-- 第五六行 -->
			<tr>
				<td rowspan="2"><img src="../img/big01.jpg" width="100%"></td>
				<td colspan="3"><img src="../img/middle01.jpg" width="100%" height="100%"  /></td>
				
				<td align="center">
				<img src="../img/small03.jpg" align="center"/> <br />
				<a href="#" ><font color="grey">炖锅</font></a> <br />
				<font color="red" >$499</font>
		      </td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
			</tr>



			<tr>
				
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
			</tr>
			<!-- 第七行 -->
			<tr>
				<td colspan="7"><img src="../img/ad.jpg" width="100%" /></td>
			</tr>
			<!-- 第八行 -->
			<tr>
				<td colspan="7"><font size="5" color="red">热门商品 </font>
				<img src="../img/title2.jpg"</td>
			</tr>

			<!-- 第九、十行 -->
			<tr>
							<td rowspan="2"><img src="../img/big01.jpg" width="100%"></td>
							<td colspan="3"><img src="../img/middle01.jpg" width="100%" height="100%"  /></td>
							
							<td align="center">
							<img src="../img/small03.jpg" align="center"/> <br />
							<a href="#" ><font color="grey">炖锅</font></a> <br />
							<font color="red" >$499</font>
					      </td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
						</tr>
			
			
			
						<tr>
							
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
						</tr>
			<!-- 第十一行 -->
			<tr>
				<td colspan="7"><img src="../img/footer.jpg"  width="100%"/></td>
			</tr>
			<!-- 第十二行 -->
			<tr>
				<td colspan="7" 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> 
				 <p> 南京邮电大学 版权所有</p>
				</td>
			</tr>


		</table>


	</body>
</html>

frameset.html

注：frameset 取代了<body></body>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>FrameSet.html</title>
	</head>
	<frameset rows="25%,*">
		<frame src="top.html"/>
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame name="right" />              //将右边取名为name
			
		</frameset>
		
	</frameset>
	
</html>

top.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>top.html</title>
	</head>
	<body>
		<font size="7"> This is top!!</font>
	</body>
</html>

left.html


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>left.html</title>
	</head>
	<body>     //用target 将左边的超链接指向右边的框子里
		<a href="../WebContent/sessionfour.html" target="right" ><font color="greenyellow" size="5">通往右边 </font></a><br /><br />
		<a href="#" ><font color="red" size="5">二号 </font></a><br /><br />
		<a href="#" ><font color="red" size="5">三号 </font></a><br /><br />
		<a href="#" ><font color="red" size="5">四号 </font></a><br /><br />
		
	</body>
</html>

right.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>right.html</title>
	</head>
	<body>
		
	</body>
</html>
馬冬梅啊
关注
  • 9
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
web前端初级.pdf
05-23
Web 前端开发职业技能标准串讲教案初级，内共有四篇：第一篇web页面制作基础，第二篇html5和css3开发基础与应用，第三篇JavaScript程序设计，第四篇轻量级框架开发应用。
html5，web前端实验
12-22
表格的使用，新闻页面排版，div页面排版布局
【Web】HTML
debug...
09-19 679
html超文本标签
Web安全——HTML基础
钟言的博客
06-20 1511
本篇为学习web安全的基础，html基础：详细包含了，对于前端以及后端的认识以及分析HTML认知 1、网页的组成 2、浏览器 3、Web标准 简单的HTML页面架构 四、HTML常见标签 1、meta标签 2、标题标签 3、文本属性 4、form表单 5、a标签 6、锚文本 7、img 标签 8、table 表格 9、列表标签 9.1、无序列表 9.2、有序列表 10、框架的使用等等。
web前端开发（一）—HTML基础
热门推荐
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
Web：HTML的使用
weixin_44330955的博客
08-18 446
1. HTML概述 1.1 HTML简介 HTML（Hypertext Markup Language）超文本标记语言 它负责网页的三个要素之中的结构 HTML使用标签的的形式来标识网页中的不同组成部分 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面 1.2 HTML的标签(元素)、属性和注释 标签(元素) HTML中的标记指的就是标签，也叫做元素 HTML使用标记标签来描述网页 标签分为两种：成对出现标签与自结束标签 成对出现标签：<标签名>标签内容&lt.
淘宝首页web前端课设（HTML+css+js）
06-10
本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果...
web前端，HTML，豆瓣网
06-12
web前端，HTML，豆瓣网，web前端，HTML，豆瓣网，web前端，HTML，豆瓣网，大学课设，作业
Web前端网页期末大作业
01-10
主页设计布局是在网站的左上... 首先选定 本网页制作工具是前端开发利器： WebStorm，创建前端项目工程，并创建相应的文件夹，存放各个css、js，还有网页中用到的各种图片放到pic文件夹中，背景音乐放到music文件夹中。
JavaEE和JavaWeb的区别
m0_70627393的博客
06-13 4424
JavaEE 概念Java EE，Java 平台企业版（Java Platform Enterprise Edition），之前称为Java 2 Platform, Enterprise Edition (J2EE)，2018年3月更名为 Jakarta EE(这个名称应该还没有得到群众认可)。是 Sun 公司为企业级应用推出的标准平台，用来开发B/S架构软件。JavaEE指的是一套规范，也可以认为是遵循JavaEE规范、使用JavaSE实现的技术和框架。 JavaEE 是 Java 应用最广泛的部分。例如
web之HTML
过期的秋刀鱼
08-16 455
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见
java ee 框架 web,javaee web开发框架的优势和特色
weixin_42134094的博客
03-19 1235
Java EE 是 J2EE的一个新的名称。在2004年底中国软件技术大会Ioc微容器(也就是Jdon框架的实现原理)演讲中指出：我们需要一个跨J2SE/WEB/EJB的微容器，保护我们的业务核心组件(中间件)，以延续它的生命力，而不是依赖J2SE/J2EE版本.此次J2EE改名为Java EE，实际也反映出业界这种共同心声。小编带来javaee web开发框架的优势和特色的介绍。javaee w...
JavaEE 与 JavaSE区别
积累鸡汤
10-11 4万+
JavaEE 与 JavaSE区别         Java SE（Java Platform，Standard Edition）。Java SE 以前称为 J2SE。它允许开发和部署在桌面、服务器、嵌入式环境和实时环境中使用的 Java 应用程序。Java SE 包含了支持 Java Web 服务开发的类，并为 Java Platform，Enterprise Edition（Java EE）
web.xml
dizhu3909的博客
03-13 133
在“Web页”节点下，展开WEB-INF节点，然后双击web.xml文件进行查看。 web.xml文件包含Facelets应用程序所需的几个元素。使用NetBeans IDE创建应用程序时，将自动创建以下所有内容。 指定项目阶段的上下文参数： 上下文参数提供Web应用程序所需的配置信息。应用程序可以定义自己的上下文参数。此外，JavaServer Faces技术和Java...
web HTML
cpongo881
08-01 221
javaee, javaweb和javase的区别以及各自的知识体系
羸鹄的博客
03-06 5万+
JavaSE Java SE 以前称为 J2SE。它允许开发和部署在桌面、服务器、嵌入式环境和实时环境中使用的 Java 应用程序。Java SE 包含了支持 Java Web 服务开发的类，并为 Java Platform，Enterprise Edition（Java EE）提供基础。 JavaEE： 例如 : 人们常说的SSH =Spring+Struts+Hiberna...
web前端之html从零开始（一）-----第一个html
李海明的博客
02-22 4451
第一个Html,编码格式要写，否则会出现乱码。<!DOCTYPE html> <html> <head> <title>我的第一个Html页面</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 编码格式，如果浏览器不是utf-8会出乱码 --> </head> <body>
WEB之HTML
weixin_47314449的博客
03-15 809
一、HTML简介二、HTML文档1、创建html文件2、编写html文件内容3、html文档结构 一、HTML简介        HTML是超文本标记语言（Hyper Text Markup Language)。其中，超文本是指连接单个网站或多个网站间的网页的链接。HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML、CSS、JavaScript是构建web程序的三剑客。 二、HTML文档 1、创建html文件 我使用.
Web前端基础（HTML、CSS、JS）
最新发布
08-14
Web前端基础包括HTML、CSS和JS三部分。HTML是超文本标记语言的缩写，是编写网页的基础语言，用来定义网页的结构和内容。CSS是层叠样式表的缩写，用来控制网页的样式和布局。JS是JavaScript的缩写，是一种脚本语言，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值