html、css回顾

已于 2022-03-13 22:22:40 修改
阅读量475 收藏 2
点赞数 3
分类专栏： Java笔记 后端学习 文章标签： html css 前端
于 2022-01-03 13:59:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k1507157/article/details/121950328
版权

目录

前言

    博主很久以前就学习了Html和css，也学习了Java基础，但是一直没有使用过，写过的项目也都是在使用Python。这不，最近期末结课了，时间挺多，所以准备学学Java Web。网课已经备好了，笔记也会同步分享，有一样的小伙伴一起来看看吧

本章导学

    今天我们先来回顾一下网页部分的Html和css基础知识，这部分知识相信大多数小伙伴都已经学习过，博主我也一样，但是问题是学习了以后就没怎么实际的去使用过，所以很多知识都已经忘了，为了避免拖慢后续的学习进度，所以还是回顾一下相关知识。

Html知识回顾

    HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

访问菜鸟教程

常用标签
文本标签（font)

font标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 文本标签 -->
		<font size="7" face="隶书" color="red">测试font标签</font>
	</body>
</html>

请添加图片描述

段落标签（p）

p标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 段落标签 -->
		<p>【测试p标签】我是一名大学生！我很喜欢计算机！我的每一天都在和代码打交道！</p>
		<p>【测试p标签】如果你看到这段话说明你也在学习Java Web！一起加油吧！</p>
	</body>
</html>

请添加图片描述

换行标签 （br）

br标签

    这个标签需要区别于上一个的段落标签，两者容易混淆。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 段落标签 -->
		<p>【测试p标签】我是一名大学生！我很喜欢计算机！<br/>我的每一天都在和代码打交道！</p>
		<p>【测试p标签】如果你看到这段话说明你也在学习Java Web！一起加油吧！</p>
	</body>
</html>

请添加图片描述

标题标签（h1、h2…）

h标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>测试h标签</h1>
		<h2>测试h标签</h2>
		<h3>测试h标签</h3>
		<h4>测试h标签</h4>
		<h5>测试h标签</h5>
		<h6>测试h标签</h6>
	</body>
</html>

请添加图片描述

图片标签（img）

img标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="./images/p1.png" alt="我爱技术部"/>
	</body>
</html>

请添加图片描述

超链接标签（a）

a标签

  • 普通a标签可以跳转页面和打开图片
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com">点我访问百度</a><br/>
		<a href="images/p1.png">点我打开图片</a>
	</body>
</html>

请添加图片描述
请添加图片描述

  • a标签可以设置锚点，当页面长度足够时可以出现效果
    请添加图片描述
    在这里插入图片描述
列表标签（li)

li标签

  • 无序列表
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>aaa</li>
			<li>aaa</li>
			<li>aaa</li>
			<li>aaa</li>
			<li>aaa</li>
			<li>aaa</li>
			<li>aaa</li>
		</ul>
		
	</body>
</html>

请添加图片描述

  • 有序列表
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ol>
			<li>aaa</li>
			<li>aaa</li>
			<li>aaa</li>
			<li>aaa</li>
			<li>aaa</li>
			<li><a href="https://www.baidu.com">aaaa</a></li>
			<li>aaa</li>
		</ol>
		
	</body>
</html>

请添加图片描述

表格标签（table)

table标签

  • 一般表格
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="600">
		<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>电话</th>
		</tr>
		<tr>
		<td>小柯</td>
		<td>男</td>
		<td>189899</td>
		</tr>
		<tr>
		<td>小小柯</td>
		<td>男</td>
		<td>199899</td>
		</tr>
		</table>
	</body>
</html>

请添加图片描述

  • 特殊样式表格
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="600">
			<caption>个人信息表</caption>
		<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>电话</th>
		</tr>
		<tr>
		<td>小柯</td>
		<!-- 合并列-->
		<td rowspan="2">男</td>
		<td>189899</td>
		</tr>
		<tr>
		<td>小小柯</td>
		<td>199899</td>
		</tr>
		<tr>
		<td>小小</td>
		<td>女</td>
		<td>166699</td>
		</tr>
		<tr>
			<td height="25" colspan="3">其他：</td>
		</tr>
		</table>
	</body>
</html>
表单标签（form）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<!-- 	form不在页面显示，仅仅是一个区域
		lable显示文字标签
		radio单选name需要一样 -->
		<form action="" method="get">
			<label>请输入姓名：</label><input  type="text" name="" id=""/><br/>
			<label>请输入密码：</label><input  type="password" name="" id=""/><br />
			<label>请再次输入密码：</label><input  type="password" name="" id=""/><br />
			<label>性别：</label>
			<input type="radio" name="sex" id="" value="1"/>男
			<input type="radio" name="sex" id="" value="0"/>女<br />
			<label>兴趣爱好：</label>
			<input type="checkbox" name="" id="" value="1"/>游泳
			<input type="checkbox" name="" id="" value="2"/>爬山
			<input type="checkbox" name="" id="" value="2"/>跳水
			<input type="checkbox" name="" id="" value="2"/>跑步<br />
			<select>
				<!-- selected="selected"表示默认选中项 -->
				<option value="1999" selected="selected">1999</option>
				<option value="1998">1998</option>
				<option value="1997">1997</option>
				<option value="1996">1996</option>
				<option value="1995">1995</option>
			</select>年
			<select>
				<!-- selected="selected"表示默认选中项 -->
				<option value="01" selected="selected">01</option>
				<option value="02">02</option>
				<option value="03">03</option>
				<option value="04">04</option>
				<option value="05">05</option>
			</select>月
			<select>
				<!-- selected="selected"表示默认选中项 -->
				<option value="01" selected="selected">01</option>
				<option value="02">02</option>
				<option value="03">03</option>
				<option value="04">04</option>
				<option value="05">05</option>
			</select>日<br />
			<button type="button">按钮一</button>
			<button type="submit">提交</button><br />
			<!-- submit用于提交表单 -->
			<textarea rows="8" cols="100" name="" id="">请输入</textarea><br />
			<input type="file" /><input type="button" value="上传" /><br />
			<!-- 这是一个隐藏域，用作提交不显示的数据 -->
			<input type="hidden" name=""/>
		</form>
	</body>
</html>

请添加图片描述

html综合案例

针对一些特殊的情况我们可以采用表格布局，下面我们将上面的表单使用表格进行布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method=""> 
			<table border="1" width="500">
				<tr>
					<td align="right">请输入用户名:</td>
					<td><input type="text" name="" id="" /></td>
				</tr>
				<tr>
					<td align="right">请输入密码:</td>
					<td><input type="password" name="" id="" /></td>
				</tr>
				<tr>
					<td align="right">请再输入密码:</td>
					<td><input type="text" name="" id="" /></td>
				</tr>
				<tr>
					<td align="right">性别:</td>
					<td><input type="radio" name="sex" id="" />男
						<input type="radio" name="sex" id="" />女
					</td>
				</tr>
				<tr>
					<td align="right">兴趣爱好:</td>
					<td>
						<input type="checkbox" name="" id="" value="1" />游泳
						<input type="checkbox" name="" id="" value="2" />爬山
						<input type="checkbox" name="" id="" value="2" />跳水
						<input type="checkbox" name="" id="" value="2" />跑步
					</td>
				</tr>
				<tr>
					<td align="right">出生年月:</td>
					<td>
						<select> -->
							<!-- selected="selected"表示默认选中项 -->
							<option value="1999" selected="selected">1999</option>
							<option value="1998">1998</option>
							<option value="1997">1997</option>
							<option value="1996">1996</option>
							<option value="1995">1995</option>
						</select>年
						<select>
							<!-- selected="selected"表示默认选中项 -->
							<option value="01" selected="selected">01</option>
							<option value="02">02</option>
							<option value="03">03</option>
							<option value="04">04</option>
							<option value="05">05</option>
						</select>月
						<select>
							<!-- selected="selected"表示默认选中项 -->
							<option value="01" selected="selected">01</option>
							<option value="02">02</option>
							<option value="03">03</option>
							<option value="04">04</option>
							<option value="05">05</option>
						</select>日<br />
					</td>
				</tr>
				<tr>
					<td align="center" colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

请添加图片描述

css知识回顾

    css(层叠样式表)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
访问菜鸟教程

内部样式表

内部样式表是指我们直接将css样式与html文件放在一起，这种方式一般不常用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 这段代码展示内部样式表 */
		p{
			background-color: red;
			font-size: 30px;
			}
		</style>
	</head>
	<body>
		<p>我爱学习！</p>
		<p>我在学习Java Web！</p>
	</body>
</html>

请添加图片描述

外部样式表

外部样式表是指将css样式与html分开存放，这种方法方法比较常用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用外部样式类 -->
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<p>我爱学习！</p>
		<p>我在学习Java Web！</p>
	</body>
</html>

/* 这段代码展示内部样式表 */
		p {
			background-color: red;
			font-size: 30px;
		}

		body {
			background-color: yellow;
			background-image: url(./imgs/2.png);
			/* 设置如何平铺对象的 background-image 属性 */
			background-repeat: no-repeat;
			/* 设置背景图像是否固定或者随着页面的其余部分滚动 */
			background-attachment: fixed;
			/* 设置背景图像的位置位置 */
			background-position: 20px 40px;
		}
背景样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 这段代码展示内部样式表 */
				p {
					background-color: red;
					font-size: 30px;
				}
				body{
					background-color: yellow;
					background-image: url(./imgs/2.png);
					/* 设置如何平铺对象的 background-image 属性 */
					background-repeat: no-repeat;
					/* 设置背景图像是否固定或者随着页面的其余部分滚动 */
					background-attachment: fixed;
					/* 设置背景图像的位置位置 */
					background-position: 20px 40px;
				}
		</style>
	</head>
	<body>
		<p>我爱学习！</p>
		<p>我在学习Java Web！</p>
	</body>
</html>

请添加图片描述

文本样式
p {
	/* 设置文本颜色 */
	color: blue;
	/* 文本方向/书写方向 */
	direction: ltr;
	/* 设置字符间距 */
	letter-spacing: 10npx;
	/* 设置行高 */
	line-height: 20npx;
	/* 设置文本对齐方式 */
	text-align: center;
	/* 文本的修饰 */
	text-decoration: line-through;
	/* 文本设置阴影 */
	text-shadow: coral;
	/* 改变字母大小写 */
	text-transform: lowercase;
	/* 首行缩进 */
	text-indent: 10npx;
}

请添加图片描述

字体样式
ul{
	/* 设置列表项目外观 */
	list-style-type: circle;
	/* 设置列表符号位置 */
	list-style-position: outside;
	/* 设置列表项目标记 */
	list-style-image: url(./imgs/3.gif);
}
选择器
伪类选择器
状态伪类

状态发生变化的时候。


/* 未访问的链接 */
a:link{
	color: red;
}
/* 已访问的链接 */
a:visited{
	color: #0000FF;
}
/* 鼠标移动到连接上(浮动 悬停) */
a:hover{
	color: #FF7F50;
	font-size: 30px;
}
/* 向被激活的元素添加样式 */
a:active{
	color: blue;
}
/* 选择拥有键盘输入焦点的元素 */
/* a:focus{
	
} */

label:hover{
	color: #FF0000;
}

请添加图片描述

结构伪类
/* 
:first-child------>选择元素的第一个子元素 
:last-child------->选择某个元素的最后一个子元素
:nth-child------->选择某个元素的一个或者多个特定子元素
:nth-last-child------>选择某个元素的一个或者多个特定元素，
                      从这个元素的最后一个子元素开始算
:first-of-child-------->选择一个上级元素下的第一个同类子元素*/
h1:first-child{
	background-color: #FF0000;
}

h3:last-child{
	background-color: #FF7F50;
}
伪元素选择器
/* 可以在文本之前插入新内容 */
p::before{
	content: "大家好";
}
/* 可以在文本之后插入新内容 */
p::after{
	content: "你们好";
}
/* 选择制定选择器的首行 */
p::first-line{
	background-color: chocolate;
}
/* 选择文本的第一个字符 */
p::first-letter{
	font-size: 30px;
}
/* 选择指定元素被选中的内容 */
*::selection{
	background-color: green;
}

请添加图片描述

其他选择器
class选择器

允许重复！！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用外部样式类 -->
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<!-- 测试class选择器 -->
	<p class="p1">测试Class选择器！</p>
	</body>
</html>


.p1{
	color: red;
	font-size: 20px;
}

请添加图片描述

id选择器

不允许重复！！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用外部样式类 -->
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<!-- 测试id选择器 -->
	<p id="p11">测试Class选择器！</p>
	</body>
</html>

#p11{
	color: yellow;
	font-size: 20px;
}

请添加图片描述

逗号选择器

用于联合选择器！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用外部样式类 -->
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<!-- 测试逗号选择器 -->
	<p id="p11">测试选择器！</p>
	<p class="p22">测试语句，不知道写什么！</p>
	</body>
</html>


#p11{
	color: yellow;
	font-size: 20px;
}

.p22{
	color: red;
	font-size: 30px;
}

#p11,.p22{
	background-color: #55aaff;
}

请添加图片描述

空格选择器
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用外部样式类 -->
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
	<div id="div1">测试语句1</div>
	<div id="div2">测试语句2</div>
	<div id="div3"><p>测试语句3</p><br/><p>测试语句4</p></div>
	</body>
</html>

#div3 p{
	background-color: #55AAFF;
}

请添加图片描述

>选择器
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用外部样式类 -->
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">
					<p>测试语句3</p><br />
					<p>测试语句4</p>
				</div>
			</div>
			<p>测试语句1</p>
		</div>
	</body>
</html>

#div1>p{
	background-color: #55AAFF;
}

请添加图片描述

属性选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用外部样式类 -->
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">
					<p>测试语句3</p><br />
					<p>测试语句4</p>
				</div>
			</div>
			<p class="p1">测试语句</p>
			<p class="p2">测试语句</p>
			<p id="p3">测试语句</p>
		</div>
	</body>
</html>

p[class='p2']{
	background-color: #55AAFF;
}

p[id='p3']{
	color: red;
}

请添加图片描述

选择器优先级
排名名称
1!important
2行内样式
3id选择器
4类选择器
5标签
6通配符
7浏览器默认属性
div设置

点击查看

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用外部样式类 -->
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<div id="div1">
			这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。
		</div>
	</body>
</html>

#div1{
	background-color: aqua;
	width: 200px;
	height: 200px;
	top: 220px;
	left: 220px;
/* 	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
	元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定 */。
	position: absolute;
	/* 超出隐藏 */
	/* overflow: hidden; */
	/* 超出显示拖动条 */
	/* overflow: auto; */
	/* 设置div边框样式 */
	/* outline: dotted; */
	/* 设置底部线条 */
	border-bottom: solid;
}

请添加图片描述

居中样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用外部样式类 -->
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<div id="div1">
			文字信息
		</div>
	</body>
</html>


#div1{
	background-color: aqua;
	width: 200px;
	height: 200px;
	/* 设置文字居中 */
	text-align: center;
	/* 利用行高实现文字垂直居中 */
	line-height: 200px;
	
	/* 实现对象居中 */
	/* 设置auto的容器必须有宽度 */
	margin: 0px auto;
}

请添加图片描述

定位机制
浮动效果

这里我们要清楚默认的文档流，即元素从上往下以此布局，当使用浮动的时候，元素就会脱离标准文档流。请添加图片描述
请添加图片描述

浮动引起崩塌

我们知道，当我们的父级div没有设置高度或者宽度的时候，他会被子一级元素撑开，否则就会是一条横线。
请添加图片描述
请添加图片描述
请添加图片描述

清除浮动

有些时候我们为了避免这种浮动现象，需要我们在css样式手动清除样式，这样一来我们就可以避免浮动造成的一系列的页面布局的问题了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用外部样式类 -->
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				这是2
			</div>
			<div id="div3">
				这是3
			</div>
			<div id="clear"></div>
			<div id="div4">
				这是4
			</div>
		</div>
	</body>
</html>


#div1 {
	background-color: aqua;
}

#div2 {
	background-color: red;
	width: 200px;
	height: 200px;
	/* div2浮动 */
	float: left;
}

#div3 {
	background-color: yellow;
	width: 220px;
	height: 220px;
	/* div3浮动 */
	float: left;
}

/* 这是清除浮动的第二种方法,设置一个专门的div标签 */
/* #clear {
	clear: both;
} */

#div4 {
	background-color: blue;
	height: 240px;
	width: 240px;
	/* 这是清除浮动的第一种方法,对于需要清除浮动的标签使用clear属性 */
	/* 设置清除浮动 */
	/* clear: both;						 */
}

/* 这是设置清除浮动的第三种方式,这种方式使用伪类,广泛使用于大型网站 */
#clear::after {
	content: "";
	visibility: hidden;
	height: 0px;
	display: block;
	clear: both;
}

/* 解决IE浏览器的一些异常 */
#clear{
	zoom: 1;
}

请添加图片描述
请添加图片描述

总结

这篇文章算是对web的一个回顾，为的是能更快的进入Java Web的学习中来，因为是回顾，所以文章对于内容的细节描述的并不是很多，基本都是通过一个简单的例子来展示用法，有基础的同学基本上一趟看下来就可以回忆起来，没有基础的建议还是先对这些基础知识进行一个补充。这部分有一个最关键的点-----------》页面布局，我们接下来单独做一篇文章讲解。

专业bug开发
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html与css 知识总结
余笙.'的博客
02-28 2834
HTML html结构 HTML结构由<html>、<head>、<body>等几部分组成 html>:定义整个html文档 head>:包含所有头部标签 在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, &
JavaWeb笔记整理——HTML、CSS、JavaScript
i_Water_boy的博客
04-23 765
Java程序员必备前端技术栈——Html、css、JavaScript以及应用笔记详细整理
Javaweb之HTML,CSS的详细解析
qq_69748833的博客
11-04 854
<head></head><body></body>
JavaWeb基础教程-----（5）HTML&CSS
LL的博客
05-28 214
html&css
用java实现html与css,java学习与应用（4.1）--HTML、CSS
weixin_29346059的博客
06-15 448
文件标签文件标签html、head、title、body。html5使用表示html文档，meta的charset指定字符集。注释文本标签h1--h6(标题标签)，p(段落)，br(普通回车解析为空字符)，hr(水平线，color颜色，width宽度，size高度，alien对其方式[center left right])，b(加粗)，i(斜体)，font(字体，color颜色、size大小、fa...
HTML-CSS回顾
02-17
单元01：Web开发，HTML，CSS和Git简介 概述 恭喜你！ 这是您迈向全栈Web开发职业生涯的第一步。 您可以在此领域中走很多路，而本单元是所有这些路的基础。 每个全栈Web开发人员都必须掌握HTML和CSS，并学习如何对...
html-css:回顾一些 HTML5 + CSS 元素和属性
05-30
莱美uso de <ul> e <ol> uso de , <dt> e <dd> 使用链接<a> propriedade max-width em 标签<picture> 页面上的<video>目录标题, , , <h4> ...
HTML+CSS知识笔记、分析案例
最新发布
05-14
CSS看这一篇就够啦，CSS基础大全，可用于快速回顾知识，面试首选； CSS入门容易，精通难。因为CSS的属性很多，一个一个去学去记根本不可能，我们要善于借助网络工具。关于HTML和CSS的学习资源，网上的在线教程、速查...
纯html加css简单网页.zip
07-18
【描述】"基础html加css的简单网页"表明，这个压缩包中的文件可能是为初学者或那些想要回顾HTML和CSS基础知识的人准备的。它可能包含了一个或多个简单的网页示例，这些示例展示了如何用HTML编写结构化的页面元素，如...
HTML678day_htmlCSS_前端基础_
10-01
从"HTML678day_htmlCSS_前端基础_"这个标题来看，我们可以推测这是一系列关于HTML和CSS的三天密集学习资料，特别针对前端开发的基础技能提升。 在前端开发中，HTML（HyperText Markup Language）是构建网页结构的...
JavaWeb之HTML和CSS
qq_38596491的博客
06-22 3362
一、概述 1、B/S软件结构 JavaSE中，C/S结构：客户端（Client）——服务端（Server） JavaWeb中，B/S结构：浏览器（Browser）——服务器（Server） 2、前端开发流程 PS制作效果图——>前端工程师：做成静态网页——>Java程序员：将静态网页改为动态网页 3、网页的组成部分 内容（结构，页面中的内容，使用HTML展现）、表现（布局，颜色，大小等，使用CSS实现）、行为（页面中元素与输入设备交互的响应，一般使用JS技术实现） 4、HTML简介 （Htper
JAVA学习笔记（HTML+CSS）
CSDN_Admin0的博客
02-03 560
文章目录HTML&CSS1，HTML1.1 介绍1.2 快速入门1.3 基础标签1.3.1 标题标签1.3.2 hr标签1.3.3 字体标签1.3.4 换行标签1.3.5 段落标签1.3.6 加粗、斜体、下划线标签1.3.7 居中标签1.3.8 案例1.4 图片、音频、视频标签1.5 超链接标签1.6 列表标签1.7 表格标签1.8 布局标签1.9 表单标签1.9.1 表单标签概述1.9.2 form标签属性1.9.3 代码演示1.10 表单项标签2，CSS
HTML、CSS学习笔记
q2857864700的博客
02-23 1071
1.html:超文本标记语言，用来对网页文档信息进行格式化展示的语言，主要包括头部(head)和主体(body)。    http协议：用于服务器和浏览器之间的数据传送，规定html如何在客户端和服务器端传输    url:统一资源定位符，进行信息资源的唯一定位 网页中三种最基本的页面组成元素是文字、图像、超链接    单元格垂直合并所用的属性是__ rowsp
Java web实现简登录页面（MyBatis+jsp+servlet+html+css+javascript）附源码
热门推荐
poetteaes的博客
07-01 3万+
本文利用MyBatis+jsp+servlet+html+css+javascript实现了一个简单的登录页面。对用户输入的用户名和密码就行校验，校验通过则登录成功，密码和用户信息保存在mysql表中，通过MyBatis访问（MyBatis相关知识可参考先前的文章MyBatis测试）。先给出最终的效果图： 登录成功则进入如下页面： 登录失败，则进入如下页面： 如果输入的密码或者用...
（七）HTML和CSS 、JavaScript 和Java到底有什么区别，今天终于明白了！！！
qq_35885612的博客
01-24 706
有人曾经问过，“HTML CSS 和 JavaScript 以及 Java有什么区别” TCP VS UDP Java VS C 功能先上了再说 高级开发人员作为一个团队进行编程 调试CSS 高级开发人员重构代码 能一个手指完成的绝不用两只手 看实习生编码的时候，我的表情…… 当我尝试进入BIO...
JAVA/HTML/CSS
liuxiaofan_的博客
03-29 256
一、HTML语言基本介绍1.基本结构&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;!--根标签--&gt; &lt;head&gt; &lt;!--网页头部（用于设计网页属性）--&gt; &lt;meta charset="UTF-8"&gt; &lt;!--定义文本信息--&gt; &lt;title&g
html5脑图_6张思维导图，帮你搞定html、css（css画QQ企鹅）
weixin_39880666的博客
01-13 374
先给大家看一张喜欢的图片，缓解下心情，最近敲敲代码累的时候都会看看这几个小活宝，每次都忍不住伸手去摸一下屏幕，可爱到爆，不由自主的就笑了出来。这个是电影《鼠来宝》系列的海报图。不知道有没有人喜欢这几只会唱歌的小活宝。鼠来宝.jpg这几天看了 一下之前整理的html和css的知识点，发现很多东西都有点忘了，趁此机会，复习了一下，也重新整理了一下，决定放出来，也给刚入门的孩纸们一个参考，之前有简友说图...
HTML5+CSS3网页设计-第三章 表单及验证.pptx
12-21
在HTML5+CSS3网页设计的第三章中，主要探讨了表单及其验证的相关概念和技术。这一章节旨在帮助学习者理解和掌握在网页开发中创建交互式表单的基础。以下是一些关键知识点： 1. **常见的表单元素**：预习检查部分...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值