学习使我快乐第十二天

最新推荐文章于 2024-09-18 16:24:06 发布

Mr_suyi

最新推荐文章于 2024-09-18 16:24:06 发布

阅读量72

点赞数

文章标签：学习 css html

本文链接：https://blog.csdn.net/mr_suyi/article/details/125646677

版权

Day 012

一、form表单标签

1. form表单标签

主要应用在登录、注册页面能够使input转为按钮之后的功能生效
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<input type="password" placeholder="请输入密码"><br>
			<input type="submit" value="登录">
			<input type="reset" value="重置">
		</form>

	</body>
</html>

二、表格标签

1.表格标签

table标签：声明表格
tr标签：表格的每一行 table row
th标签：表头 table head
td标签：单元格 table date cell

	<table>
			<!-- 第一行 -->
			<tr>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<!-- 第二行 -->
			<tr>
				<td>张三</td>
				<td>男</td>
			</tr>
			<!-- 第三行 -->
			<tr>
				<td>李四</td>
				<td>未知</td>
			</tr>
		</table>

2.表格涉及到的属性

a. table标签：

border - 设置表格外边界（外边框）的宽度
cellspacing - 设置单元格和单元格以及单元格和边框的间距
width - 设置整体表格的宽度（每一列宽度会自动调整比咧）
height - 设置整体表格的高度（每一列宽度会自动调整比咧）
bordercolor - 设置边框的颜色
bgcolor - 设置背景颜色
align - 调整表格水平位置（左对齐：left、右对齐：right、居中对齐：center）

b.tr 标签：

bgcolor - 设置背景颜色
align - 调整文字水平位置（左对齐：left、右对齐：right、居中对齐：center）
valign - 调整文字垂直位置（顶部：top：底部：bottom 中间：middle）
height - 修改一行的高度

c. td 标签：

width - 修改单元格的宽度（本行其他单元格宽度自动缩小或者增大,本列其他单元格宽度也随之自动缩小或者增大）
height - 修改单元格的高度（本行单元格高度随之增加或者缩小）
align - 调整文字水平位置（左对齐：left、右对齐：right、居中对齐：center）
valign - 调整文字垂直位置（顶部：top：底部：bottom 中间：middle）

d. colspan：列合并

e. rowspan：行合并

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>


		<table bordercolor="pink" cellspacing="0" border="1">
			<tr>
				<td colspan="8" align="center">简历</td>
			</tr>
			<tr align="center">
				<td rowspan="5" width="15">个人信息</td>
				<td>姓名</td>
				<td width="60"></td>
				<td>性别</td>
				<td width="60"></td>
				<td>出生日期</td>
				<td width="60"></td>
				<td rowspan="4">
					<img src="./img/管理员.jpg" alt="" width="60px" height="60px">
				</td>
			</tr>
	
			<tr align="center">
				<td>民族</td>
				<td></td>
				<td>籍贯</td>
				<td></td>
				<td>政治面貌</td>
				<td></td>
	
			</tr>
			<tr align="center">
				<td>身高</td>
				<td></td>
				<td>体重</td>
				<td></td>
				<td>身体状况</td>
				<td></td>
			</tr>
			<tr align="center">
				<td>联系电话</td>
				<td></td>
				<td>邮箱</td>
				<td></td>
				<td>现所在地</td>
				<td></td>
			</tr>
			<tr align="center">
				<td>求职意向</td>
				<td colspan="6"></td>
			</tr>
		</table>
	
	</body>
</html>

三、div标签

1.div标签

div标签：无语意标签（盒子标签）
div：一般吧一个范围中涉及的所有标签会放到一起。
div 是调整页面布局之前的最后一个标签

四、CSS样式

1. CSS代码写到哪

a. 内部样式表：将stlye标签放到head标签或者body标签内。
b. 内联样式：可以把样式直接作为一个标签的属性，写入到标签中，使用style属性。
c. 外部样式：有一个后缀名为css的文件专门用来存放css代码，只需要在html代码中使用link标签将css文件引入即可。

2. link标签语法：

如果rel为icon，表示给页面标签设置图标，type为image/图片格式(png、jpg），表示引入xxx格式的图片
- 如：rel=“icon” type=“image/图片格式(png、jpg)” href=“图片的链接和路径”
rel为"stylesheet"表示给页面引入样式表type固定为"text/css" href表示引入"css文件的连接和路径"
- rel="stylesheet"type="text/css"href=“css文件的连接和路径”
css代码注释使用 /* 此处写注释 */

3. CSS样式如何写？

语法：
选择器{
属性：属性值；
属性：属性值；
属性：属性值；}
说明：
a. 选择器：通过标签来选择被修改的内容或者通过属性（id属性，class属性）选择被修改的内容
b. {} ：固定语法仅仅属于内部样式和外部样式
c. 内部样式，外部样式,内联样式：修改内容样式使用属性：属性值;

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 内部样式 -->
		<style>
			/* 这是css注释 */
			h1 {
				color: white;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="./html_stlye.css">
	</head>
	<!-- 内联样式 -->
	<body style="background-color:red;">
		<h1>这里是h1标题</h1>
	</body>
</html>

五、CSS选择器

1.通配符选择器： * ——>能改变所有标签的样式。

2.标签选择器：标签名 ——>不加限定条件，能够修改页面中所有某标签的样式。

3.id选择器。

4.class选择器。

一般在页面标签中会添加id属性和class属性，
其对应的属性值一般是独一无二的，或者是同一类数据使用一个属性值；
通过调用id属性值和class属性值变相的等于调用对应的标签
id选择器：#id属性值；
calss选择器：.class属性值

5.父子选择器：父标签 > 子标签——>被修改样式的为子标签。

6.后代选择器：祖先标签后代标签：被修改的样式为后代样式。

7.兄弟选择器：长兄 ~ 弟弟

8.相邻兄弟选择器。刘关张：刘+关关+张链接符号左边 > 右边

9.nth-child选择器：a：nth-child（3）——>找每一级下的第三个标签，并且这个标签是a标签（html下表从1开始）

列：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<a href="">
				<img src="" alt="">
			</a>
			
			<div></div>
			
			<a href=""></a>
			
			<p></p>
			
		</div>
	</body>
</html>

六、CSS边框样式和文字样式

1.css边框常用属性

border：边框粗细边框的样式（solid：单实线 double：双实线 dashed 虚线 dotted 点）边框颜色
border-radius：num1（num2 num3 num4。
num1：表示将图形（存在四个角）的四个角统一改为一个弧度。
num1 num2 ：num表示图形的左上角和右下角，num2表示图形的右上角和左下角。
num1 num2 num3 ：num1表示左上角，num2表示右上角和左下角，num3右下角。
num1 num2 num3 num4：分别对应左上、右上、右下、左下。
border-top
border-bottom
border-right

2. css文字常用属性

color：修改文字颜色
font-size：字体尺寸
font-family：字体
text-align：位置（left、right、center）
text-decoration：在文字的上方或者下方或者中间田间一条红线（underline、overline、line-through）

3.颜色

三原色 ——> 红、绿、蓝：每种颜色有0-2555，一共256个等级。
- a.颜色可以用英语单词表示。
- b.可以使用三原色的数字等级表示。rgb（0，0，0）或者rgba（0，0，0，透明度）
- c.可以使用颜色的 # + 十六进制符号表示。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 所有选择器可组合使用 */
			/*标签选择器*/
			/* 将页面所有的div改为某样式 */
			/* div{
				border: 1px dashed blueviolet;
				width:100px;
				height: 100px;				
			} */
			/* 将body的子标签中的第一个div改为某样式 */
			body>div:nth-child(1) {
				/* border: 4px double blueviolet; */
				border-top: 4px double blueviolet;
				border-bottom: 4px solid red;
				border-left: 4px dashed pink;
				border-right: 4px dotted green;
				width: 100px;
				height: 100px;
				border-radius: 100% 50%;
			}

			#one {
				border-top: 4px double yellowgreen;
				width: 100px;
				height: 200px;
				background-color: chartreuse;

			}

			.one {
				border: 3px double black;
				border-radius: 100%;
				width: 150px;
				height: 150px;
			}
			p{
				/* color: red;
				color: #ff0000; */
				/* color: rgb(225,0,0); */
				color: rgba(225,0,0,0.5);
				text-align: center;
				font-size: 50px;
				text-decoration: underline;
			}
		</style>

	</head>
	<body>
		<div></div>
		<div id=one></div>
		<div class=one>
			<div id=one></div>
		</div>
		
		<p><b>今日安排</b></p>
		<ul>
			<li>上课</li>
			<li>上课</li>
			<li>上课</li>
			<li>上课</li>
			
		</ul>
	</body>
</html>

七、通配符选择器

1.通配符选择器

HTML标签存在一个叫做外边距和内边距的两个边距。
通配符选择器一般用来去除标签边距的。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		
			*{
				/* 外边距 */
				margin: 0;
				/* 内边距 */
				padding: 0;
			}
			
			div{
				width: 50px;
				height: 50px;
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div></div>
		
		<hr>
		<div></div>
		
		<hr>
		<div></div>
	</body>
</html>