01.html和css基础

最新推荐文章于 2024-08-14 12:22:11 发布

guan_xfeng

最新推荐文章于 2024-08-14 12:22:11 发布

阅读量112

点赞数

分类专栏：前端基础文章标签： html5 css

本文链接：https://blog.csdn.net/guan_xfeng/article/details/124452424

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML

超文本标记语言,专门用来制作网页的.

超文本:网页中可以包含各种类型的元素

标记语言:是一个独特的语言,有独特的语法

文档声明:声明文档的类型

头部分:描述网页的属性,标题,编码

体部分:控制网页即将要展示的元素

HTML不区分大小写,而且语法相对java不太严谨

HTML的元素有特殊性,换行用br标签,空格用&nbsp

列表标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 列表标签 h1~h6-->
		<!-- 有序无序,列表项自动换行 -->
		<h3>执搜榜</h3>
		<!-- 无序列表 -->
		<ul>
			<li>asld;ijfaoisdhgfoew</li>
			<li>asld;ijfaoisdhgfoew</li>
			<li>asld;ijfaoisdhgfoew</li>
			<li>asld;ijfaoisdhgfoew</li>
			<li>asld;ijfaoisdhgfoew</li>
			<li>asld;ijfaoisdhgfoew</li>
		</ul>
		<!-- 有序列表 -->
		<ol>
			<li>dfljsdkjf</li>
			<li>dfljsdkjf</li>
			<li>dfljsdkjf</li>
			<li>dfljsdkjf</li>
		</ol>
	</body>
</html>

图片标签&超链接标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a name="top">我是顶部</a>
		<!-- 3.图片标签<img>
		 src属性用来指定图片位置/路径(相对路径,绝对路径)
		 -->
		<img src="1.jpg" width="800px" height="800px" />
		<img src="1.jpg" width="800" height="800" /><br />
		<!-- 4. 超链接用<a>标签来实现
		 href属性用来让超链接可以被点击,也可以指定超链接地址
		 target="_blank"属性用来让指定超链接的打开方式,默认是_self当前窗口打开,_blank设置超链接新窗口打开
		 -->
		<a href="https://avatar.csdnimg.cn/1/3/D/1_u012932876_1623846383.jpg" target="_blank">百度一下</a>
		<!-- 5.锚定:从一个位置回到指定的另一个位置 -->
		<ul>
			<li>北京富婆通讯录</li>
			<li>北京富婆通讯录</li>
		</ul>
		<a href="#top">^</a><br />
		<a href="https://www.baidu.com/">
			<img  src="1.jpg" width="800px" height="800px" />
		</a>
	</body>
</html>

input标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<br /><br />
		<!-- 1.input标签,表示输入框 -->
        选择框:
        <select>
							<option>请选择</option>
							<option>北京</option>
							<option>广州</option>
							<option>深圳</option>
		</select>
		普通文本输入框:<input type="text" /><br /><br />
		密码:<input type="password" /><br /><br />
        邮箱:<input type="email" /><br /><br />
		单选框:<input type="radio" />男<br /><br />
		数字值:<input type="number" /><br /><br />
		日期输入框:<input type="date" /><br /><br />
		星期输入框:<input type="week" /><br /><br />
		杨幂 复选框:<input type="checkbox" /><br /><br />
		<input type="button" value="点我一下" /><br /><br />
		<!-- button按钮 -->
		<button>再点我一下</button><br /><br />
		
		<!-- 提交按钮:把用户在浏览器输入的数据,提交给后端的java程序来处理 -->
		<input type="submit" value="提交数据" /><br /><br />
		<button type="submit">再提交一下数据</button>
	</body>
</html>

表格标签:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.表格标签 -->
		<!-- 表格:<table>
		 <tr>:行
		 <td>:列
		 bgcolor:背景色
		 宽度:width
		 边框:border
		 单元格间距:cellpadding,设置为0就是单元格间没有间距
		 <th>:表头效果,居中加粗的效果-->
		<table border="1" bgcolor="pink" width="500px" cellspacing="0">
			<tr>
				<td>1-1</td>
				<td>1-2</td>
				<td>1-3</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
				<td>2-3</td>
			</tr>
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<td>3-3</td>
			</tr>
		</table>
	</body>
</html>

表格小练习:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 练习表格
		 th标签是表头效果,加粗居中
		 合并单元格
		 合并行/行合并:把N行合并成一大行
		 合并列/列合并:把N列合并成一大列-->
		<h3>流量调查表</h3><br />
		<table border="1px" bgcolor="pink" cellspacing="0" width="500px">
			<tr>
				<th>总页面流量</th>
				<th>共计来访</th>
				<th>会员</th>
				<th>游客</th>
			</tr>
			
			<tr>
				<td>111</td>
				<td>222</td>
				<td>333</td>
				<td>444</td>
			</tr>
			
			<tr>
				<td>555</td>
				<td>666</td>
				<td>777</td>
				<td>888</td>
			</tr>
			
			<tr>
				<td>9991124</td>
				<td>234234</td>
				<td>3453</td>
				<td>r65456</td>
			</tr>
			
			<tr>
				<td>3465436</td>
				<td colspan="3">123123</td>
			</tr>
		</table>
		<br/>

		<!-- 合并行和合并列 -->
		<table border="1px" bgcolor="pink" cellspacing="0">
			<tr>
				<th colspan="2" >11</th>
				<th>12</th>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
			</tr>
			
		</table>
	</body>
</html>

表单标签:

只有表单标签,才能提交数据(是指把前端输入的数据提交给 java程序的过程),表单标签本质上就是一个特殊的表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.表单标签:比表格多了数据提交的功能
		要求:必须使用form标签+必须有提交按钮+必须配置name属性
		效果:实现了数据提交,数据都在地址栏进行了拼接
		数据提交的格式:属性名=属性值
		其中属性名是网页上标签的name属性 的值,  属性值 是用户在浏览器中输入的数据
		placeholder属性提示输入内容

		表单提交数据的方式:get和post两种方式
		get方式提交数据:在地址栏拼接数据,可以方便查看数据,但是不安全,长度受限
		post方式提交数据:安全,长度没有限制,数据大小没有限制,但是,不好找数据...
		form标签拥有两具重要属性,method属性来用指定数据提交方式,默认是get

		method属性用来指定数据提交方式,默认是get
		action属性用来指定数据提交给哪段java程序来处理
		 -->
		<form method="post" action="#">
			<h1>注册表单</h1>
			<table border="1px"  cellspacing="0">
				<tr>
					<td>用户名:</td>
					<td width="200px"><input type="text" name="user"/></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td width="200px"><input type="password" name="pwd"/></td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td width="200px"><input type="password"/></td>
				</tr>
				<tr>
					<td>昵称:</td>
					<td width="200px"><input type="text"/></td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td width="200px"><input type="email"/></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td width="200px">
						<input type="radio" name="sex">男</input>
						<input type="radio" name="sex">女</input>
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td width="200px">
						<input type="checkbox" name="hobit">篮球</input>
						<input type="checkbox" name="hobit">足球</input>
						<input type="checkbox" name="hobit">乒乓球</input>
					</td>
				</tr>
				<tr>
					<td>城市:</td>
					<td width="200px">
						<!-- 下拉选择框 -->
						<select>
							<option>请选择</option>
							<option>北京</option>
							<option>广州</option>
							<option>深圳</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<!-- 上传文件文本框 -->
						<input type="file" />
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text" />
						<img src="#" />
						<button>点我换一张</button>
					</td>
				</tr>
				<tr>
					<td>自我描述:</td>
					<td>
						<!-- 文本域,可以写多行文字 -->
						<textarea>请在这里写...</textarea>
					</td>
				</tr>
				<tr>
					<!-- 合并列 -->
					<td colspan="2">
						<button type="submit">提交</button>
						<button type="reset">重置</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

每个标签都加上name属性:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表单提交数据的方式:get和post两种方式
		get方式提交数据:在地址栏拼接数据,可以方便查看数据,但是不安全,长度受限
		post方式提交数据:安全,长度没有限制,数据大小没有限制,但是,不好找数据...
		form标签拥有两具重要属性,method属性来用指定数据提交方式,默认是get

		method属性用来指定数据提交方式,默认是get
		action属性用来指定数据提交给哪段java程序来处理 -->
		
		<form method="post" action="#">
			<h1>注册表单</h1>
			<table border="1px" cellspacing="0">
				<tr>
					<td>用户名:</td>
					<td>
						<input type="text" name="user" />
					</td>
				</tr>
				
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="pwd" />
					</td>
				</tr>
				
				<tr>
					<td>确认密码:</td>
					<td>
						<input type="password" name="repwd" />
					</td>
				</tr>
				
				<tr>
					<td>昵称:</td>
					<td>
						<input type="text" name="nick" />
					</td>
				</tr>
				
				<tr>
					<td>邮箱:</td>
					<td>
						<input type="email" name="mail" />
					</td>
				</tr>
				
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="1" />男
						<input type="radio" name="sex" value="0" />女
					</td>
				</tr>
				
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="like" value="lq" />篮球
						<input type="checkbox" name="like" value="zq" />足球
						<input type="checkbox" name="like" value="ppq" />乒乓球
					</td>
				</tr>
				
				<tr>
					<td>城市:</td>
					<td>
						<select name="city">
							<option value="">请选择</option>
							<option value="bj">北京</option>
							<option value="gz">广州</option>
							<option value="sz">深圳</option>
						</select>
					</td>
				</tr>
				
				<tr>
					<td>头像:</td>
					<td>
						<input type="file" name="photo" />
					</td>
				</tr>
				
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text"  />
						<img src="2.jpg" width="100px" height="60px" />
						<button>点我换一张</button>
					</td>
				</tr>
				
				<tr>
					<td>自我描述:</td>
					<td>
						<textarea>请在这里写...</textarea>
					</td>
				</tr>
				
				<tr>
					<td colspan="2">
						<button type="submit">提交</button>
						<button type="reset">重置</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

表单总结:

1.标签:form表单用来提交数据,table表格,h1标题,tr表里的行,td行里的列,input输入框

select用来定义下拉框,option定义下拉选项,img图片标签,button是按钮,textarea文本域标签

2.属性:method是用来指定form提交数据方式,action是用来指定form提交数据到哪段程序

bgcolor设置表格的背景色,border设置表格的边框,width设置表格的宽度

cellspacing设置单元格间距,type是设置输入框的类型,src用来指定图片的位置

name是用来作为数据提交时的标识,colspan用来设置列合并

单选框/多选框默认选项:checked=“checked”

3.问题:单选框和多选框,默认提交的都是on

4.解决方案:给单选框和多选框提供value属性用来指定提交时要使用的值(不再提交on了)

div,p,span三种标签的用法及加入音乐和视频的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 一个占一行:块元素 -->
		<div>大家好</div>
		<div>大家好</div>
		<div>大家好</div>
		
		<!-- 段落 -->
		<p>Nice</p>
		<p>Nice</p>
		<p>Nice</p>
		
		<!-- 多个占一行:行元素 -->
		<span>hello</span>
		<span>hello</span>
		<span>hello</span>
        
        
        
        <!-- 在网页中加入音频和视频 -->
		<audio controls="controls" >
			<source src="jay.mp3"></source>
		</audio>
		
		<!-- 在网页中加入视频 -->
		<video controls="controls">
			<source src="b.mp4"></source>
		</video>


	</body>
</html>

CSS技术:

1.CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。

主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

2.语法:选择器{样式1;样式2;样式3;}

3.使用位置:内联CSS,内部CSS,外部CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试css入门案例</title>
	</head>
	<body>
		<!-- css代码的出现位置:行内css/内联css -->
		<!-- 1.需求:把div文字修饰成红色 -->
		<div style="color: purple;">你好CSS</div>
		<div style="color: chartreuse;">你好css2</div>
		<div>你好css2</div>
	</body>
</html>

CSS选择器

css为了方便选中网页中的元素进行修饰,提供了各种选择器,分类:基础选择器+高级选择器

标签名选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试css入门案例</title>
		<!-- 内部了的CSS -->
		<!-- 放在head头部标签里面
		 把div修饰成红色文字
		 标签名选择器,选中了网页中所有叫div的标签们~-->
		<style type="text/css">
			/* 练习1:把div修饰成红色文字 */
			div{
				color: blue;
			}
			/* 练习2:把span */
			span{
				/* 设置字号大小 */
				font-size: 30px;
				font-family: "宋体";
			}
		</style>
	</head>
	<body>
		<!-- css代码的出现位置:行内css/内联css -->
		<!-- 1.需求:把div文字修饰成红色 -->
		<div style="color: red;">你好CSS</div>
		<div style="color: chartreuse;">你好css2</div>
		<div>你好css2</div><br />
		
		<!-- 标签选择器 -->
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		
		<span>我是span1</span>
		<span>我是span2</span>
	</body>
</html>

class选择器

也叫类选择器,比标签名选择器更细致

使用步骤:给你想要修饰的元素加class属性+通过.获取class值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试选择器</title>
		<!-- 在HTML网页中,嵌套一段css代码,使用style标签 -->
		<style type="text/css">
			/* class选择器/类选择器 */
			/* 语法:选择器{样式1;样式2;} */
			.dd{/*选中了网页中class=dd的元素*/
				font-size: 30px;);
			}
			
			.g{
				background-color:#b0c4de
			}
		</style>
	</head>
	<body>
		<!-- 练习1:只div2修饰字号加大 -->
		<div class="g">我是div1</div>
		<div class="dd">我是div2</div>
		<div class="g">我是div3</div>
		
		<br />
		<!-- 练习2:只a2修饰字号加大 -->
		<a href="https://www.runoob.com/">我是a1</a>
		<a class="dd" href="https://www.runoob.com/">我是a2</a>
	</body>
</html>

id选择器

id选择器的值不能相同,如果要使用id选择器人会选中一个元素

使用步骤:给想要修饰的元素加id属性+通过#获取id的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 选择器{样式1;} */
			#user{
				/* 背景色 */
				background-color: aqua;
			}
			#a{
				/* opacity属性设置字体和图像的透明度,值在(0.0-1.0)之间,值越小越透明 */
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<!-- id选择器 -->
		<!-- 练习1:设置用户名输入框的背景色 -->
		<!-- id选择器:加id属性+通过#获取id的值 -->
		<input id="user" type="text" placeholder="用户名..."/>
		<input type="text" placeholder="密码..." id="user" />
		
		<br/>
		<span>我是span1</span><br/>
		<span id="a">我是span2</span>
	</body>
</html>

分组选择器

是指,把使用不同选择器选中的元素,分成一组,统一设置样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		<style type="text/css">
		/* 1.分组选择器 */
		/* 使用不同的选择器,来选中多种元素 */
		/* 语法:选择器{样式1;样式2;} */
		/* 练习1把两种选择器选中的元素,设置背景色 */
		/* 分组选择器,多种选择器间用逗号隔开 */
			div,#input1{
				background-color: pink;
			}
			/* 练习2:把id/class选择器选中的元素,设置背景色 */
			
			
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		
		<br/>
		<br/>
		
		<input type="text" placeholder="帐号" id="input1" />
		<input type="text" placeholder="密码" id="input2" />
		
		<br/>
		<br/>
		
		<span class="a">我是span1</span>
		<span class="a">我是span2</span>
		
	</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		<style type="text/css">
			/* 1.属性选择器: 根据不同属性,选中不同元素*/
			[type]{
				/* 选中了,有type属性的元素 */
				background-color:indianred;
			}
			/* 练习2:把有type属性的input 设置边框 */
			input[type]{
				border: 3px dashed blue;/*宽度  虚线  颜色*/
				border-radius: 25px;/*圆角边框,值越大越圆*/
			}
			/* 练习3:type=text的input设置背景色 */
			input[type="text"]{
				background-color: seagreen;
				display: none; /*隐藏元素*/
			}
		</style>
		
	</head>
	<body>
		
		<input type="text" placeholder="用户名..." />
		<input type="password" placeholder="密码..." />
		<input type="number" placeholder="年龄..." />
		<input type="text" placeholder="地址..." />
	</body>
</html>

盒子模型:

css认为HTML由一个一个的盒子组成

外边距:margin,是指盒子间的距离

内边距:padding,这是一个盒子的现象,是指内容到边距的距离

边框:是指每个盒子都能设置边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 盒子模型</title>
	</head>
	<body>
		<!-- 设置了外边距,四个方向同时生效 -->
		<input type="radio" style="margin: 20px;" />男<br/>
		<!-- 设置外边距,只设置了左/右/上/下 外边距 -->
		<input type="radio" style="margin-left: 20px;" />男<br/>
		<input type="radio" style="margin-right: 20px;" />男<br/>
		<input type="radio" style="margin-top: 20px;" />男<br/>
		<input type="radio" style="margin-bottom: 20px;" />男<br/>
		
		
		
		<input type="text" placeholder="用户名..." /><br/>
		<!-- 设置内边距(内容和边框的距离) -->
		<input type="text" placeholder="用户名..." style="padding: 10px;" /><br/>
		<!-- 设置内边距(内容和边框的距离),只设置了左/右/上/下 内边距-->
		<input type="text" placeholder="用户名..." style="padding-left: 10px;" /><br/>
		<input type="text" placeholder="用户名..." style="padding-right: 10px;" /><br/>
		<input type="text" placeholder="用户名..." style="padding-top: 10px;" /><br/>
		<input type="text" placeholder="用户名..." style="padding-bottom: 10px;" /><br/>
		
	</body>
</html>

链接外部css文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入外部的css文件 -->
		<link rel="stylesheet" type="text/css" href="css文件名.css"/>
	</head>
	<body>
		
	</body>
</html>

用户注册表单练习:

css文件:

.input{
	width: 350px;
	height: 30px;
	padding: 6px;
}

button{
	background-color: red;
	width: 360px;
	height: 40px;
	color: white;
	border-color: red;
	font-size: 25px;
}
span{
	font-size: 2px;
	color: gray;
	height: 10px;
	padding: 10px;
}
h3{
	padding-left:140px ;
	
}
#readme{
	padding: 15px;
}

html文件:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		<link rel="stylesheet" type="text/css" href="student.css"/>
	</head>
	<body>
		<form action="#" method="post">
			<h3>用户注册</h3>
			<div>
				<input class="input" type="text" name="user" placeholder="用户名" />
			</div>
			<div>
				<span class="font">支持中文,字母,数字,"_","-"的组合,4-20字符</span>
			</div>
			
			<div>
				<input class="input" type="password" name="pwd" placeholder="设置密码" />
			</div>
			<div>
				<span class="font">建议使用数字,字母和符号两种以上的组合,6-20个字符</span>
			</div>
			
			<div>
				<input class="input" type="password" name="repwd" placeholder="设置密码" />
			</div>
			<div>
				<span class="font">两次密码输入不一致</span>
			</div>
			
			<div>
				<input class="input" type="number" name="tel" placeholder="验证手机" />或
				<a href="#">验证邮箱</a>
			</div>
			
			<div id="readme">
				<input type="checkbox"  />我已阅读并同意 <a href="#">《京淘用户注册协议》</a>
			</div>
			
			<div>
				<button type="submit">立即注册</button>
			</div>
		</form>
	</body>
</html>

guan_xfeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
01.html和css基础

HTML超文本标记语言,专门用来制作网页的.超文本:网页中可以包含各种类型的元素标记语言:是一个独特的语言,有独特的语法文档声明:声明文档的类型头部分:描述网页的属性,标题,编码体部分:控制网页即将要展示的元素HTML不区分大小写,而且语法相对java不太严谨HTML的元素有特殊性,换行用br标签,空格用&nbsp列表标签<!DOCTYPE html><html> <head> <meta charset="utf-8">
复制链接

扫一扫