day11；day12合集（CSS选择器，form表单，div标签）

℡抹來的憧憬

已于 2022-07-12 16:40:21 修改

阅读量137

点赞数 1

分类专栏：适合初学者 markdown编辑器基础操作文章标签：前端 javascript html

于 2022-07-06 21:19:20 首次发布

本文链接：https://blog.csdn.net/qq_56630044/article/details/125647994

版权

适合初学者同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

markdown编辑器基础操作

3 篇文章 0 订阅

订阅专栏

form表单标签

其实form表单标签，就是让input转为按钮之后的功能生效。

表格标签

table标签：声明表格

tr标签：表格的每一行（table row的简写）

th标签：表头（table head的简写）

td标签：表格的单元格（table date cell的简写）

表格涉及的属性

table标签

border ：设置表格和单元格的外边界（外边框）的宽度。

cellspacing：设置单元格和单元格、单元格和边框之间的间距。

width：在table里面设置表示是整个表格的宽度。

height：在table里面设置表示是整个表格的高度。

bordercolor：设置边框的颜色。

bgcolor：设置表格整体的背景颜色

align：调整表格的水平位置（左对齐（left），右对齐（right），居中对齐（center））

tr标签

bgcolor：设置背景颜色。

align：调整水平位置（对一整行的单元格生效）（左对齐（left），右对齐（right），居中对齐（center））

valign：调整垂直位置（顶部:top;底部:bottom;中间:middle）

height：修改一行的高度。

td标签

width：修改单一单元格的宽度（这一行的其他单元格自动缩小或增大，本列单元格宽度也随之增加或缩小）

height：修改单元格的高度（本行单元格高度也随之变化）

align：调整水平位置（只对单个单元格起效）（左对齐（left），右对齐（right），居中对齐（center））

valign：调整垂直位置（顶部:top;底部:bottom;中间:middle）

合并

colspan：列合并

rowspan：行合并

简历
个人信息	姓名	性别	出生日期
	民族	籍贯	政治面貌
	身高	体重	身体状况
	联系电话	邮箱	现所在地
	求职意向

<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="80px" height="105px">
		</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>

div标签（盒子标签）

将一个范围中涉及到的所有的标签会放到一起。

div {
				/* 默认页面的宽度是固定的，高度是无限的。 */
				width: 100%;
				height: 264px;
				border-top: 5px solid red;
				border-bottom: 5px solid green;
				border-left:  5px solid blue;
				border-right: 5px solid black;
			}

CSS样式

CSS代码就是写在中的，可以放在head标签或者body标签内。

内部样式表:将style标签放到head标签或者body标签内。

内联样式:可以把样式直接作为一个标签的属性，写入到标签中，使用style属性。

外部样式:有一个后缀名为.css的文件专门用来存放CSS代码，只需要在html代码中使用link标签将CSS文件引入即可。

link标签语法：

如果rel为icon,表示给页面标签页设置图标，type为image/图片格式，表示引入xxx格式的图片
rel=“icon” type=“image/图片格式（png、jpg）” href=“图片的链接和路径”

rel为stylesheet，表示给页面引入样式表，type固定为text/css
rel=“stylesheet” type=“text/css” href=“css文件的链接或者路径”

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

CSS选择器

通配符选择器。：* :能改变所有标签的样式。
标签选择器。标签名 :不加限定条件，能够修改页面中所有某标签。
id选择器。#设置的标签名{}
class选择器。.设置的标签名
父子选择器。父标签 > 子标签:最终选择修改的是子标签。
后代选择器。祖先标签后代标签:最终选择修改的是后代标签。
兄弟选择器。长兄标签 ~ 弟弟标签。
相邻兄弟选择器。刘关张：刘 + 关关 + 张。
nth-child选择器。 a:nth-child（数字） ->找div标签下第二个a标签（html下标从1开始）（数字=3：找第几个标签，如果发现一致，就选择，如果不一致，就都不选择）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#one{}
	</style>
</head>
<body id="one">
	<div>
		<a href=""></a>
	</div>
</body>
</html>

CSS边框样式和文字样式

CSS边框常用属性：

border:边框粗细边框的样式(solid单实线 double双实线 dashed虚线 dotted点) 边框颜色；

border-radius：表示修改边框的四个角

border-radius:num1 (num2 num3 num4)

num1 - 表示将图形（存在四个角）的四个角统一改为一个弧度。

num1 num2 - num1:表示图形的左上角和右下角，num2表示图形的右上角和左下角

num1 num2 num3 - num1表示左上角，num2:右上角和左下角，num3右下角

num1 num2 num3 num4 - 左上、右上、右下、左下（从左上角开始顺时针旋转）

CSS文字常用属性：

color:修改文字颜色

font-size:字体尺寸

font-family:字体

text-align:位置（left、right、center）

text-decoration:在文字的下方或者上方或中间添加一条横线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 所有选择器可以组合使用 */
			/* 标签选择器 */
			/* 将页面中所有的div改为某样式 */
			/* div {
				border: 1px dotted black;
				width: 100px;
				height: 100px;
			} */
			/* 将body标签的子标签中第一个div标签改为某样式 */
			body>div:nth-child(1) {
				border-top: 1px dotted black;
				border-bottom: 1px solid red;
				border-left: 1px dashed blue;
				border-right: 5px double green;
				width: 100px;
				height: 100px;
				/*表示修改四个角 */
				border-radius: 100% 50%;
			}
		#one {
			border-top: 5px solid yellowgreen;
			width: 100px;
			height: 200px;
			background-color: antiquewhite;

		}

		.one {

			border: 3px double blue;
			border-radius: 100%;
		}

		p {
			/* color: red; */
			/* color: #ff0000; */
			/* color: rgb(255, 0, 0); */
			color: rgba(255, 0, 0, 0.5);
			text-align: center;
			font-size: 50px;
			/* 下划线 */
			/* text-decoration: underline; */
			/* 上划线 */
			/* text-decoration: overline; */
			/* 从文字中间穿过 */
			text-decoration: line-through;
		}
	</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>

通配符选择器

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* HTML标签存在一个叫做外边距和内边距的两个边距 */
			/* 通配符选择器一般就是用来去除标签边距。 */
			* {
				/* 外边距 */
				margin: 0;
				/* 内边距 */
				padding: 0;
			}
		div {
			width: 50px;
			height: 50px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div></div>
	<hr>
	<div></div>
	<hr>
	<div></div>
</body>
</html>