【总结】HTML与CSS（2202.05.11）

最新推荐文章于 2024-10-18 14:58:16 发布

皮球你个熊猫

最新推荐文章于 2024-10-18 14:58:16 发布

阅读量402

点赞数

分类专栏： Python 文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_45935989/article/details/124716995

版权

Python 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

【总结】HTML与CSS（2202.05.11）

HTML:提供（文字、图片、音频、视频、按钮、输入框）等内容的显示。

CSS:将HTML显示的内容进行布局和样式渲染。

JavaScript：提供页面内容的变化。

1. HTML基础知识

HTML： 超文本标记语言（Hyper Text Markup language）

后缀名：.html、.htm、.shtml、.shtm。
.shtml、.shtm：内置的ssi命令，可以和服务器通信，更新页面内容。

DOS操作系统： 兼容的文件只能是后缀名长度 <=3 的。
所以html和htm是一类文件、shtml和shtm是一类文件。

HTML是通过标签将文字、图片等内容显示到页面中的

显示方式：

1.双标签（一般标签）：
<标签名属性名1=属性值1 属性名2=属性值2 ……></标签名>

2.单标签（自闭合标签）
<标签名属性名1=属性值1 属性名2=属性值2 ……>或者
<标签名属性名1=属性值1 属性名2=属性值2 …… />

头部文件说明：

<!--声明这个是html5-->
<!doctype html>
<!--html标签包含head和body的-->
<html lang="en">
<!--head包含html页面的一些配置属性-->
<head>
    <!--  页面的编码方式  -->
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--  html页面标题  -->
    <title>Document</title>
</head>
<!--页面的内容显示标签-->
<body>

</body>
</html>

2.HTML标签了解

1）文字标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是一个页面标题</title>
	</head>
	<body>
		<!-- 标题标签：自带加粗，自带换行：h1~h6 -->
		<h1>我是一级标签</h1>
		<h2>我是二级标签</h2>
		<h3>我是三级标签</h3>
		<h4>我是四级标签</h4>
		<h5>我是五级标签</h5>
		<h6>我是六级标签</h6>
		<!-- 段落标签：p:自带换行 -->
		<p>大熊猫（学名：Ailuropoda melanoleuca）：
		属于食肉目、熊科、大熊猫亚科、大熊猫属唯一的哺乳动物。仅有二个亚种。雄性个体稍大于雌性。
		体型肥硕似熊、丰腴富态，头圆尾短，头躯长1.2-1.8米，尾长10-12厘米。
		体重80-120千克，最重可达180千克，体色为黑白两色，脸颊圆，有很大的黑眼圈，标志性的内八字的行走方式，也有解剖刀般锋利的爪子。
		大熊猫皮肤厚，最厚处可达10毫米。黑白相间的外表，有利于隐蔽在密林的树上和积雪的地面而不易被天敌发现。</p>
		<p>生活在海拔2600-3500米的茂密竹林里，那里常年空气稀薄，云雾缭绕，气温低于20℃。
		有充足的竹子，地形和水源的分布利于该物种建巢藏身和哺育幼仔。大熊猫善于爬树，也爱嬉戏。
		爬树的行为一般是临近求婚期，或逃避危险，或彼此相遇时弱者借以回避强者的一种方式。
		大熊猫每天除去一半进食的时间，剩下的一半时间多数便是在睡梦中度过。
		在野外，大熊猫在每两次进食的中间睡2-4个小时。
		大熊猫99%的食物都是竹子，可供大熊猫食用的竹类植物共有12属、60多种。
		野外大熊猫的寿命为18-20岁，圈养状态下可以超过30岁。</p>
		
		<!-- 行内标签：span标签：多个span标签可以显示在一行 -->
		<span>请登录</span> |
		<span>我的京东</span> |
		<span>京东快递</span>
		
		<!-- 
		文字倾斜：i\em
		文字加粗：b\strong
		-->
		<b>
			<i>文字既加粗又倾斜</i>
		</b>
	</body>
</html>

2）图片音频视频以及超链接标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 超链接标签：a -->
		<!-- target = "_blank":在新的标签页打开超链接的指定链接 -->
		<a href="http://www.baidu.com" target = "_blank">百度</a>
		
		<!-- 换行标签：br -->
		<br>
		
		<!-- iframe:内联框架 -->
		<!-- px：像素 -->
		<iframe src="https://www.bilibili.com/" frameborder="0" width="100%" height="500px"></iframe>
		
		<!-- 水平线：hr -->
		<hr>
		
		<!-- 图片标签：img -->
		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo">
		<img src="./img/1.jpg" alt="青春无敌漫画美少女" width="200px" height="150px">
		
		<!-- 音频：audio -->
		<audio controls src="./img/qinghuaci.mp3">MP3</audio>
		<!-- s视频：video -->
		<video controls src="./img/大熊猫.mp4"></video>
	</body>
</html>

3）列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 无序列表ul、有序列表ol -->
		<!-- 列表中的内容被li -->
		
		<!-- 无序列表:ul -->
		<p>小说</p>
		<ul>
			<li>
				<a href="https://book.qidian.com/info/1023912499/">霸道总裁</a>
			</li>
			<li>斗破苍穹</li>
			<li>斗罗大陆</li>
		</ul>
		
		<!-- 有序列表:ol -->
		<p>游戏：王者荣耀</p>
		<ol>
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
		</ol>
	</body>
</html>

4）input标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- input标签：
		可以实现输入框、可以实现按钮。
		修改type属性值可以实现不同的功能。
		placeholder:提示文字
		-->
		
		<!-- form:表单标签 -->
		<form method="POST">
			<!-- type="tel":表示这个输入框要输入的是手机号 -->
			<span>手机号：</span>
			<input type="tel" placeholder="请输入手机号：" value="123456">
			<br>
			<span>密 码：</span>
			<input type="password" placeholder="请输入密码：">
			<br>
			<!-- value：在input的标签中设置默认值 -->
			<input type="submit" value="登录">
			<input type="reset" value="重置">
		</form>
		<!-- 上传文件：type="file" -->
		<input type="file">
		<!-- 选择颜色：color -->
		<input type="color">
		<!-- 选择日期和时间 -->
		<br>
		<input type="date">
		<input type="time">
		<br>
		
		<!-- 
		input标签的单选和多选中，input标签是提供选择按钮，label标签是提供选择的内容
		 id属性和for属性相关连，提供input和label一一对应
		 -->
		<!-- 单选 -->
		<!-- 调用id属性使用# -->
		<!-- 单选框中name和id属性值要一致 -->
		<input type="radio" name="性别" id="gender1"><label for="gender1">男</label>
		<input type="radio" name="性别" id="gender2"><label for="gender2">女</label>
		<br>
		<!-- 多选 -->
		<input type="checkbox" name="兴趣" id="intrest1"><label for="intrest1">篮球</label>
		<input type="checkbox" name="兴趣" id="intrest2"><label for="intrest2">足球</label>
		<input type="checkbox" name="兴趣" id="intrest3"><label for="intrest3">皮球</label>
	</body>
</html>

3. CSS选择器

1）CSS选择器基础了解

CSS:层叠样式表。

CSS层叠样式表修改页面中的元素可以精确到像素点。

CSS的使用： 1.行内式。2.内嵌式。3.外链式。

CSS常用的属性：
color : 修改文字的颜色
text-align : 修改文字的对齐方式（左对齐、右对齐、居中对齐）
text-size : 字体尺寸
border : 边框。
margin :外边距
padding : 内边距
font-family : 修改字体样式（宋体、楷体、隶书等）。
banckground : 背景
width：:宽度
height：高度

2）普通单选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- css内嵌式 -->
		<style>
			/* 这是css的注释方式 */
			
			/* 所有标签都自带边距 */
			/* 通配符选择器："*" */
			*{
				margin: 0;
				padding: 0;
			}
			
			/* CSS选择器 */
			/* 标签选择器 */
			/* 页面中存在几个X标签，如果使用标签选择器，所有的X标签都会变成一种样式 */
			div {
				width: 250px;
				height: 250px;
				background-color:red;
			}
			
			/* 类选择器：class，类选择器使用‘.’调用 */
			/* 在body标签中查找类名式one的标签 */
			.one{
				border:5px solid blue;
			}
			/* id选择器使用 ‘#’ 调用 */
			/* id选择器在body标签中查找id名式one的标签 */
			#one{
				border-bottom: 10px solid black;
			}
		</style>
	</head>
	<body>
		<!-- div标签：盒子模型。 -->
		<div class="one">
			
		</div>
		<hr>
		<div id="one">
			
		</div>
	</body>
</html>

3）组合选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 父子选择器：父子选择器使用 > 号连接，左边是父标签，右边是子标签 */
			/* 找类名是one的标签下的所有子标签h1 */
			.one > h1{
				color: red;
			}
			
			.two > ul > li{
				color: blue;
				font-family: "黑体";
				text-align: center;
			}
			/* 后代选择器：使用空格连接，左边是祖先，右边是后代 */
			.one h2{
				color: red;
				font-family: "仿宋";
				text-align: right;
			}
			
			/* 兄弟选择器 ~ 连接 (根据先后顺序排大小，不根据级别)*/
			/* 将类名是one的标签下的子代h1标签的所有比h1标签小的h2标签兄弟改成粉色 */
			.one > h1 ~ h2{
				color: pink;
			}
			/* 相邻兄弟选择器 + 连接 (根据先后顺序排大小，不根据级别) */
			/* 将类名是one的标签下的子代h1标签相邻的比h1标签小的h2标签兄弟改成粉色 */
			.one > h1 + h2{
				color: yellow;
			}
			
			/* 属性选择器 */
			input[type=submit]{
				background-color: blue;
				color: white;
				border: none;
				width: 50px;
				height: 30px;
			}
			
			/* nth-child选择器: python3.7以上版本才有这个选择器 */
			/* nth-child选择器不看标签名，执照某个标签是所有同级（同层次）标签下的第几个 */
			body > div:nth-child(4){
				border: 5px solid blue;
			}
		</style>
	</head>
	<body>
		<h1>我是H1标签</h1>
		<div class="one">
			<h1>我是一级标签</h1>
			<h2>我是二级标签</h2>
			<h2>我是二级标签</h2>
		</div>
		<div class="two">
			<p>游戏</p>
			<ul>
				<li>王者荣耀</li>
				<li>英雄联盟</li>
				<li>Pubg</li>
				<li>CS:GO</li>
			</ul>
		</div>
		<div id="one">
			<input type="submit" value="登录">
			<br>
			<input type="rest" value="重置">
		</div>
	</body>
</html>