HTML+CSS 第 1 天

最新推荐文章于 2024-07-24 16:53:23 发布

Stephen_zsky

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量774

点赞数

文章标签： html python前端基础 python

本文链接：https://blog.csdn.net/Stephen_zsky/article/details/80117540

版权

1. 前端三大语言

结构标准

Html

Html是网页的结构。相当于人的骨骼

表现（样式）标准

Css

Css是网页的美容师。相当于人的化妆师

行为标准

JavaScript

JS是网页的数据交互、效果交互。相当于人学会了技能

2. HTML注释

<!—注释的内容-->

<!--规定页面用第几代HTML版本-->
<!DOCTYPE html>
<!--HTML是网页的根目录-->
<html>
	<!--head头部标签。里面是放一些能够控制整个页面的内容，例如CSS-->
	<head>
		<!--字符集-->
		<meta charset="UTF-8">
		<title>淘宝网！淘 - 我喜欢</title>
	</head>
	<!--页面的主体。用户的可视区域-->
	<body>
		這裡是主體，用戶的可視區域
	</body>
	<!--这里面就是写注释的内容-->
</html>

3. 几个带有样式的标签

加粗：<b></b> <strong></strong>

倾斜：<i></i> <em></em>

下划线：<u></u> <ins></ins>

删除线:<s></s> <del></del>

红色部分的带有强调语气的作用：即有样式，又能够让搜索引擎更容易搜索到

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<b>加粗</b>
		<strong>加粗（强调）</strong>
		<i>倾斜</i>
		<em>倾斜（强调）</em>
		<u>下划线</u>
		<ins>下划线（强调）</ins>
		<hr>
		<s>原价：999</s>   现价：99
		<del>原价：999（强调）</del>   现价：99
	</body>
</html>

4. 图片标签

网页能够接收的图片格式：jpg png gif

5. 文字垂直居中的方法

height:40px;line-height:40px;

行高的值跟高度的值，一样，就能做到垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h1{width: 300px;
				height: 80px;
				line-height: 80px;
				/*规定行高和盒子的height一致，即能达到文字的垂直居中*/
				background: greenyellow;}
		</style>
	</head>
	<body>
		<h1>文字垂直居中</h1>
	</body>
</html>

6. 浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h1{width: 300px;
				height: 80px;
				line-height: 80px;
				/*规定行高和盒子的height一致，即能达到文字的垂直居中*/
				background: greenyellow;}
			span{float: right;
				/*float：left；让元素贴在盒子的最左边，注意是元素，不只是文本
				 float: right；让元素贴在盒子的最右边。*/
				}
		</style>
	</head>
	<body>
		<h1>
			<span>文字垂直居中</span>
		</h1>
	</body>
</html>

float:left; 让元素贴在父盒子的最左边

float:right; 让元素贴在父盒子的最右边

注意，兄弟级之间使用

7. 超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--超链接-->
		<a href="b.html">点击我，跳转到b页面</a>
		<!--加上target="_blank"可以在跳转到新页面的同时，保留原来的页面-->
		<a href="http://www.baidu.com" target="_blank">点击我，跳转到百度</a>
		<!--图片也可以添加超链接-->
		<a href="http://vip.com" target="_blank">
			<img src="lu.jpg">
		</a>
	</body>
</html>

8. 选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.p{color:blue;
				/*类选择器*/
				}
			.red p{color:red;
				/*后代选择器*/
				}
			#red{color:red;
				/*id选择器*/
				}
			a{color:red;}
			/*伪类状态。悬停状态*/
			a:hover{color:pink;font-size:30px;background:yellow;}
		</style>
	</head>
	<body>
		<div>
			<p class="p">我是p类中的p</p>
		</div>
		<hr />
		<div class="red">
			<p>我是后代选择器中的p</p>
		</div>
		<hr />
		<h1 id="red">我是h1</h1>
		<h1>我是h11111111</h1>
		<hr />
		<a href="">百度一下</a>
	</body>
</html>

9. 内外边距

外边距：margin:50px; 作用：盒子（标签）与盒子（标签）之间的间距。用于兄弟级

内边距：padding:50px; 作用：盒子与内容之间的间距。一般用于父子级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.one{width:200px;height:200px;background:pink;margin:50px;padding:50px;}
			.two{width:200px;height:200px;background:blue;}
		</style>
	</head>
	<body>
		<div class="one">暗红色的尽快哈加快速度</div>
		<div class="two"></div>
	</body>
</html>

10. CSS外链式

好处：1.可以重复调用。2.页面简洁

步骤：

1. 新建一个css文件

/*style.css的外链式文件*/
div{color:red;
	width: 200px;
	height: 200px;
	background: blue;}

2. 在html页面的head标签中输入：link – 回车 – 回车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--css外链式-->
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div>我是div</div>
	</body>
</html>

11.案例

图片资源：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{width:285px;height:310px;border-top:1px solid #c8dcf2;border-bottom:1px solid #c8dcf2;}
			.box-title{width:285px;height:40px;}
			.box-title h3{margin:0;font-size:16px;color:#172c45;font-weight:normal;line-height:40px;float:left;}
			.box-title a{float:right;font-size:12px;color:#172C45;text-decoration:none;line-height:40px;}
			p{font-size:12px;color:#737373;line-height:20px;text-indent:2em;}
			p span{color:red;}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box-title">
				<h3>今日头条</h3>
				<a href="">更多>></a>
			</div>
			<div class="box-img">
				<img src="banner.jpg">
			</div>
			<div class="box-txt">
				<p><span>人工智能</span>（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。</p>
			</div>
		</div>
	</body>
</html>

12. 今日CSS属性

字体颜色：color:red;

字体大小：font-size:30px;

宽高：width:300px;height:300px;

背景颜色：background:red;

加粗否：font-weight:bold/normal; bold加粗 normal不加粗

加下划线否：text-decoration:underline/none; underline加下划线。None取消下划线

行高：line-height:30px;

首行缩进：text-indent:2em; 1em代表一个中文字大小

左右浮动：float:left;float:right;

边框：border:1px solidred; boder-top:1px solid green;

内边距：padding:20px;

外边距：margin:20px;

13. Hbuilder快捷键

由于所有的演示用的是Hbuilder完成，因此分享一些简单的Hbuilder以下快捷键

注释：Ctrl+？

快速切换到下一行：Ctrl+回车

快速生成标签：<div></div> 快捷方式：div按tab

快速生成有类名的标签：div.box按tab

快速输出多个标签：p*10 如果是这种：

div.box>p*4>a

</div>

Stephen_zsky

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS 第 1 天

1. 前端三大语言结构标准HtmlHtml是网页的结构。相当于人的骨骼表现（样式）标准CssCss是网页的美容师。相当于人的化妆师行为标准JavaScriptJS是网页的数据交互、效果交互。相当于人学会了技能2. HTML注释&lt;!—注释的内容--&gt;&lt;!--规定页面用第几代HTML版本--&gt;&lt;!DOCTYPE html&gt;&lt;!--HTML是网页...
复制链接

扫一扫