前端入门

最新推荐文章于 2024-05-12 07:21:47 发布

袁小伟伟

最新推荐文章于 2024-05-12 07:21:47 发布

阅读量276

点赞数 1

本文链接：https://blog.csdn.net/NINIYUANJ123/article/details/104261585

版权

前端入门之 HTML5 + CSS (寒假第三周)

以前写项目的时候,页面的展示大多数用的都是freemarker或者thymeleaf,但是企业级的开发采用的都是前后端分离的,所以必须掌握部分HTML+CSS+JS的知识。本周用了一周时间看李南江的HTML+CSS的入门视频,特作以下知识点汇总以供复习与总结本周学习成果。

HTML部分常用标签

H标签:不用多说,用来设置标题的字号大小<h1~h2>。
P标签:设置段落。
A标签:用来设置超链接,属性常用的href指出url即可。
IMG标签:用来设置图片,属性src指出地址,width与height设置宽高。
BR标签:换行。
HR标签:水平横线。
B、I、SMALL、STRONG、SUB、SUP等等:文本文字的加粗与斜体与小号字与加重与上下标字。
BASE标签:为页面上的所有的相对链接规定默认 URL 或默认目标。有href和target属性。
LINK标签: 标签定义文档与外部资源的关系,最常见的用途是链接样式表。
TABLE标签:定义一个表格,用TR(table row)定义行,td(table data)来定义每个单元格的数据,TH定义表头的数据。
UL标签:定义一个无序列表。
OL标签:定义一个有序列表。
LI标签:展示列表每行的数据。
Dl标签;用来定义自定义列表,自定义列表以 DL 标签开始。每个自定义列表项以 DT开始。每个自定义列表项的定义以 DD 开始。
DIV标签:是块级元素，它可用于组合其他 HTML 元素的容器,对大的内容块设置样式属性。
SPAN标签:当与 CSS 一同使用时，可用于为部分文本设置样式属性。
INPUT标签:规定了用户可以在其中输入数据的输入字段。INPUT"元素在 FORM元素中使用，用来声明允许用户输入数据的 input 控件。
OPTION标签:定义下拉列表中的一个选项（一个条目）。
DATALIST标签:标签被用来在为 INPUT’元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
请使用 INPUT元素的 list 属性来绑定 DATALIST素。
其他的标签包括HTML、STYLE、TITLE、HEAD、BODY此类的标签不做阐述,其余标签后面见到了再作复习。

css

文字相关的属性:
1.设置字体:font-family: “楷体”; , 默认是宋体,必须加双引号。如果想给中英文加不同的字体,渲染中文的字体也可以渲染英文,但是渲染英文的不能渲染中文,所以,可以 font-family : “可以渲染英文字体1” , “可以渲染中文的字体2”;即可,这样遇到英文用字体1,遇到中文字体1不行就用字体2。
2.文字其他属性: font-family、font-style: italic(斜体)、font-weight: bold (加粗)、font-size: 10px(10像素大小)。连写即为: font: italic bold 10px “楷体”。
3.文本属性:text-decoration: undeline(overline、none、line-through),设置文本的下划线等。text-align: right(left,center),设置文本左对齐。text-indent: 2em,设置文本缩进的,缩进2的文字。
4.文本颜色属性:color: 可以直接英文单词(red、blue、yellow)颜色不是全面、也可以rgb(0,0,0)控制三原色红绿蓝的具体量,rgba(0,0,0,0)比rgb多了一个透明度、十六进制表示 #FFAA00也是表示三原色量的多少,还可以简写为#FA0。
选择器:
1.标签选择器:

 <style>
 	p{
 		color:red;
 	}
 </style>

直接将HTML的标签直接选中,进行相关的属性设置即可。
2.id选择器:

<style>
	# idof1{
		color: red;
	}
</style>
<body>
	<p id="idof1"> 文字 </p>
</body>

这样即可将从id=idof1这个标签中的文字进行渲染。id名在同个页面中不可用重复,命名只可字母/数字/下划线组成。id是为了以后的js所用,css尽量使用下面的class选择器。
3.类选择器:

<style>
	.high{
		color: red;
	}
</style>
<body>
	<p class="high"> 文字 </p>
</body>

这样即可将class=high的标签选中并进行渲染。一个标签可以有多个类名,类名可以重复。可以将一些公共代码抽出到一个类选择器中,然后让标签和这个类选择器绑定即可。

<style>
	.high ul li p{
		color: red;
	}
</style>
<body>
	<dic class="high">
		<ul>
			<li>
				<p>123</p>
			</li>
		</ul>
	</div>
</body>

这样通过选择器一步步往往下找,就可以找到p标签并进行渲染,后代不仅仅是儿子,也包括孙子,重孙。

<head>
	<style>
		.qqq p{
			color: royalblue;
		}
	</style>
</head>

<body>
	<div class="qqq">
		<p>123</p>
		<p>123</p>
		<ul>
			<li>
				<p>123123</p>
			</li>
		</ul>
	</div>
</body>

这样下来,儿子p与重孙p都可以被渲染。
4.子选择器:

<head>
	<style>
		.qqq>p{
			color: royalblue;
		}
	</style>
</head>

<body>
	<div class="qqq">
		<p>123</p>
		<p>123</p>
		<ul>
			<li>
				<p>123123</p>
			</li>
		</ul>
	</div>
</body>

这样下来,只有两个儿子p被渲染,因为子选择器只能渲染的亲儿子,其余人全都不管。
5.
交集选择器:

<head>
	<style>
		.qqq#eee{
			color: royalblue;
		}
	</style>
</head>

<body>
		<p class="qqq" id="eee">123</p>
		<p class="qqq">123</p>


</body>

这样下来,类名为qqq的两个标签与id为eee的标签只有一个交集,所以第一个标签被渲染。

<head>
	<style>
		.qqq,.rrr{
			color: royalblue;
		}
	</style>
</head>

<body>
		<p class="rrr">123</p>
		<p class="qqq">123</p>


</body>

类名为qqq与rrr的标签一起都被渲染。

css三大特性

继承性:
继承性就是给父元素设置一些属性,子元素也可以使用。只有color/font/text/line这些属性才能被继承,继承性不只是儿子,只要是后代都可以继承。在企业级开发中,直接在body中设置统一的字体大小和字体风格等属性。
层叠性
css处理冲突的一种能力,多个选择器选中同个标签,设置了相同的属性
1.优先级之间接选中:
如果是间接选中,那么就是谁离目标标签比较近就听谁的。
2.优先级之直接选中(相同选择器):
如果都是直接选中,并且都是同类型选择器,那就是谁写在后面就听谁的。
3.优先级之直接选中(不同选择器):
如果都是直接选中,并且不是相同类型的选择器,那么就会按照选择器的优先级来层叠。 id > 类 > 标签 > 通配符 > 继承 > 浏览器默认
!important:
用于提升某个直接选中的标签去的选择器中的某个属性的优先级的,可以将呗指定的属性的优先级提升为最高。
注意点:只能用于直接选中,不能用于间接选中。智能提高被指定的属性的优先级,其他的属性的优先级不会被提升。

其余知识点通过代码展示:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		.dingbu{
			font-family: "楷体";
			font-weight: 200em ;
			width: 980px;
			height: 100px;
			background:#D2C8C8;
			margin: auto;
			margin-bottom: 10px;
		}
		.zhongbu{
			width: 980px;
			height: 500px;
			background: #FF0000;
			margin: auto;
			border: 1px solid #CBC9C9;
		}
		.dibu{
			
			width: 980px;
			height: 500px;
			background: #A62D2D;
			margin: auto;
			background-repeat: repeat-x;
			background-image: url("../../../../../../xptyxx-yuanjiawei/Desktop/未标题-1.jpg");
			background-position: center;
			border: 10px dashed #9879F5;
			
		}
		.daohang1{
			width: 200px;
			height: 50px;
			background:#F59798;
			float: left;
			margin: 20px;
			font-style: italic;
			font-size: 17px;
			font-weight: 800;
			text-decoration: underline;
			text-align: center;
		}
		.daohang2{
			width: 500px;
			height: 70px;
			background:#F1CCCD;
			float:right;
			margin: 20px;
		}
		span{
			color: teal;
			
		}
		.zhongbu{
			background-image: url("../../../../../../xptyxx-yuanjiawei/Desktop/文件/照片/微信图片_20200201145813.jpg");
			background-position: -320px -450px;
			background-attachment: fixed;
		}
		.zhongbu_Text{
			width: 220px;
			height: 90px;
			border: 3px solid #F2C9CA;
			padding: 100px;    
			margin: 100px 100px;
			
		}
	</style>
</head>
<!--若使用margin来移动小盒子,必须在大盒子外加边框-->
<body> 
	<div id="" class="dingbu">
		<div class="daohang1">宝马<span>M2</span>,M-<span>Power competition!</span></div>
		<div class="daohang2"></div>
	</div>
	<div class="zhongbu">
		<div class="zhongbu_Text"> 宝马M-Power competition!宝马M-Power competition!宝马M-Power competition!宝马M-Power competition!</div>
	</div>
	<div class="dibu">
		<div class="dibu2"></div>
	</div>
</body>
</html>

asd
123

袁小伟伟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端入门

前端入门之 HTML5 + CSS (寒假第三周)以前写项目的时候,页面的展示大多数用的都是freemarker或者thymeleaf,但是企业级的开发采用的都是前后端分离的,所以必须掌握部分HTML+CSS+JS的知识。本周用了一周时间看李南江的HTML+CSS的入门视频,特作以下知识点汇总以供复习与总结本周学习成果。HTML部分常用标签H标签:不用多说,用来设置标题的字号大小<h...
复制链接

扫一扫