HTML5和CSS3

最新推荐文章于 2024-06-14 09:24:52 发布
最新推荐文章于 2024-06-14 09:24:52 发布
阅读量352 收藏
点赞数
文章标签： html5 css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61677732/article/details/124483279
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

本节简要介绍HTML的相关内容

一、HTML

1. 网页

1.B/S架构
2.特点：
（1）不需要安装
（2）无需更新
（3）跨平台

<!DOCTYPE html>
<!-- html 根标签（元素），网页中的所有内容都要写在根元素的里边 -->
<html>
	<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
	<head>
		<!-- meta标签用来设置网页的元数据，这里meta标签用来设置网页的字符集，避免乱码问题 -->
    	<meta charset="UTF-8">
    	<!-- title中的内容会显示在浏览器的专题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
    	<title>网页的基本结构</title>
</head>
	<body>
		<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
    	<!-- 文档声明(doctype）
    		-用来告诉浏览器当前网页的版本
    		-HTML5的文档声明
    		<!doctype html>  不区分大小写
    	-->
	</body>
</html>

2.字符编码

（1）编码
将字符转换为二进制编码的过程
（2）解码
将二进制码转换为字符的过程
（3）字符集（charset）
编码和解码所采用的规则
常见的字符集：
ASCII（7位，可以表示128个字符）
ISO88591（8位，可以表示256个字符
）
GB2312
GBK
UTF-8（万国码）
（4）乱码问题
如果编码和解码所采用的字符集不同就会出现乱码问题

3.万维网联盟（W3C）

我们编写的网页都要遵循W3C的规范
​根据W3C标准，一个网页主要由三部分组成：结构（HTML）、表现（CSS）、行为（JavaScript）
​ （1）结构
​ HTML用于描述页面的结构
​ （2）表现
​ CSS用于控制页面中元素的样式
​ （3）行为
​ JavaScript用于响应用户操作

4.标签

1.自结束标签
标签一般成对出现，但是也存在一些自结束标签,如：

<img>
<!--<img>和<img/>一样，下面的同理-->
<input>
<br>

2.meta标签
meta主要用于设置网页中的一些元数据，元数据不是给用户看的
charset 指定网页的字符集
name 指定数据的名称
content 指定数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间用逗号隔开
description 用于指定网站的描述,网站的描述会出现在搜索引擎的搜索结果中
title 标签的内容会作为搜索结果的超链接上的文字显示

<meta name="ketwords" content="网上购物，手机，电脑">
<meta name="description" content="这是一个非常不错的网站">

<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<!-- 将页面重定向到另一个网站，3表示经过3秒后跳转 -->

3.块元素
（1）在页面中独占一行的元素称为块元素（block element）
（2）在网页中一般通过块元素来对页面进行布局
4.行内元素
（1）在页面中不独占一行的元素称为行内元素（inline element），主要用来包裹文字
（2）一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素；
块元素中基本什么都能放，但是p元素中不能放任何块元素

<!-- 标题标签都是块元素
	从<h1></h1>到<h6></h6>分别为一级标题到六级标题 -->
<!-- hgroup标签用来为标题分组
	可以将一组相关的标题同时放到hgroup中 -->
	<hgroup>
        <h1>回乡偶书二首</h1>
        <h2>贺知章</h2>
    </hgroup>
<!-- p标签表示页面中的一个段落,p也是一个块元素 -->
	<p>这是一个段落</p>
<!-- em标签用于表示语音语调的加重，是行内元素 -->
	<p>今天天气<em>真</em>不错！</p>
<!-- strong表示强调，重要内容 ，是行内元素-->
	<p>你今天必须要<strong>完成作业</strong></p>
<!-- blockquote表示一个长引用，引用的话会另起一行开始，并且有缩进 -->
	鲁迅说：
    <blockquote>世上本没有路，走的人多了，也便成了路</blockquote>
<!-- q表示一个短引用，会自动加上引号 -->
	子曰:<q>学而时习之，不亦说乎</q>

5.布局标签（结构化语义标签）

<!-- header 表示网页的头部
	main 表示网页的主体部分（一个页面中只会有一个main）
	footer 表示网页的底部
	nav 表示网页中的导航
	aside 和主体相关的其他内容（侧边栏）
	article 表示一个独立的文章
	section 表示一个独立的区块，上边的标签都不能表示时使用section
	这些用的都不多 -->
<!-- div 没有语义，就用来表示一个区块
	目前来讲div还是我们主要的布局元素 
	span 行内元素，没有任何语义，一般用于在网页中选中文字-->

6.注释

<!-- 这是一条注释 -->

（1）注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释
（2）注释用来对代码进行解释说明，注释要求简单明了
（3）注释可以将一些不希望显示的内容隐藏
（4）注释不能嵌套

7.标签的属性

（1）在标签（开始标签和自结束标签）中可以设置属性
（2）属性是一个名值对（x=y），用来设置标签中的内容如何显示。属性和标签名或其他属性应用空格隔开
（3）有些属性有属性值，有些没有。若有，属性值应用引号引起来

<font color="red" size="3">这是一个例子</font>

8.实体（转义字符）

<!-- 实体的语法：&实体的名字;
	&nbsp; 空格
	&gt; 大于号
	&lt; 小于号
	&copy; 版权符号 -->

9.列表

1.无序列表（用的多）
2.有序列表
3.定义列表
用dl标签来创建一个定义列表，dt表示定义的内容，dd对内容进行解释说明

<!-- 列表间可以相互嵌套 -->
<!-- 无序列表 -->
<ul>
        <li>内容一</li>
        <li>内容二</li>
        <li>内容三</li>
    </ul>
<!-- 有序列表 -->
    <ol>
        <li>内容一</li>
        <li>内容二</li>
        <li>内容三</li>
    </ol>
<!-- 定义列表 -->
    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构，用来规定网页中哪里是标题，哪里是段落</dd>
    </dl>

10.超链接

（1）超链接可以让我们从一个页面跳转到其他页面或当前页面的其他位置
（2）用a标签定义超链接
属性：
href 指定跳转的目标路径
-值可以是一个外部网站的地址
-也可以是一个内部页面的地址
（3）超链接是行内元素，在a标签中可以嵌套除它自身外的任何元素

<!-- 跳转到外部网站 -->
<a href="https://www.baidu.com">超链接1</a>

<!-- 跳转到服务器内部页面时，一般我们会使用相对路径
	相对路径以.或..开头
	./
	../
	./可以省略不写，如果不写./也不写../就相当于写了./

	./表示当前文件所在的目录
	../表示当前文件所在目录的上一级目录
	 -->
<a href="./target.html">超链接2</a>
<a href="../07.html">超链接3</a>
<a href="../inner/target2.html">超链接4</a>

（4）属性：target 用来指定超链接打开的位置
可选值：_self 默认值，在当前页面中打开超链接
_blank 在一个新的页面中打开超链接

	<a href="07.html" target="_blank">超连接</a>
	
<!-- id属性（是唯一不重复的）
	-每一个标签都可以添加一个id属性
	-id属性是元素的唯一标识，同一个页面中不能出现重复的id属性
	-id属性以字母开头，不能是数字 
	-要跳转到页面的指定位置，
	 只需将href属性设置为  #目标元素的id属性值-->
	<a href="#bottom">去底部</a>
	<a href="#p3">去第三个自然段</a>
	
<!-- 可以直接将超链接的href属性设置为#,这样点击超链接以后，页面不会
	发生跳转，而是转到当前页面顶部的位置 -->
	<a id="bottom" href="#">回到顶部</a>

<!-- 在开发中可以将#作为超链接的路径的占位符使用 -->
	<a href="#">这是一个新的超连接</a>

<!-- 可以使用 javascript:; 来作为href的属性值
	此时点击这个超链接什么也不会发生 -->
	<a href="javascript:;">超连接</a>

11.图片标签

–用于向当前页面中引入一个外部图片

<!-- 用img标签引入外部图片，img标签是自结束标签
	img属于替换元素（块元素和行内元素之间，具有两种元素的特点）
	属性：
	    src 指定外部图片的路径（路径规则和超链接的一样）
	    alt 图片的描述，描述默认情况下不会显示，
	    	有些浏览器会在图片无法加载时显示 ，
	    	搜索引擎会根据alt中的内容来识别图片，如果不写alt属性，
	    	图片则不会被搜索引擎收录-->
	<img src="./img/3.gif" alt="松鼠">
	<!-- 可以把图片保存在本地，也可以直接在网页中复制图片的地址
		第二种不建议用 -->

<!-- width 图片的宽度（单位是像素）
	height 图片的高度
	宽度和高度中如果只修改了一个，另一个会等比例缩放

	注意：一般情况在pc端，不建议修改图片的大小，
		  需要多大的图片就裁多大，
		  但在移动端，经常对图片进行缩放（大图缩小） -->

–图片的格式
jpeg（jpg）
支持的颜色比较丰富，不支持透明效果，不支持动图
一般用来显示照片
gif
支持的颜色比较少，支持简单透明，支持动图
用来显示颜色单一的图片，动图
png
支持的颜色丰富，支持复杂透明，不支持动图
用来显示颜色丰富，复杂透明的图片（专为网页而生）
webp
这是谷歌新推出的专门用来表示网页中图片的一种格式，它具备其他图片格式的所有优点，而且文件特别小
缺点：兼容性不好
base64
将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式引入图片
一般都是一些需要和网页一起加载的图片才会使用base64
（如何操作：直接在网页中搜索base64，点图片转换base64即可）

效果一样，用小的；效果不一样，用效果好的

12.音视频

1.音频
audio 标签用来向页面中引入一个外部的音频文件，音频文件引入时，默认情况下不允许用户自己控制播放和停止
属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
如果设置了autoplay，在打开页面时会自动播放音乐，但是目前来讲大部分浏览器都不会自动播放音乐
loop 音乐是否循环播放

<audio src="audio.mp3" controls autoplay loop></audio>

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径（用这个好）

<!-- “对不起......”这句话和embed两个选一个就行
	如果使用的浏览器（如IE8）不支持audio标签和source标签，并且选的是“对不起...”这句话，
	那么最终在浏览器中就会出现这句话；如果选的是embed标签，会正常播放 -->
<!-- 不同的浏览器支持的音视频的格式不同
	如果使用的浏览器支持audio标签和source标签，就会从上到下依次检索，
	如果当前浏览器支持mp3格式，就不再看下面的，如果不支持mp3格式，
	就往下走，看是否支持ogg格式...依此往下，最终只会使用一个 -->
	<!-- 引入的是本地文件 -->
<audio controls>
        <!-- 对不起，您的浏览器不支持播放音频，请升级浏览器！-->
        <source src="audio.mp3">
        <source src="audio.ogg">
        <embed src="audio.mp3" type="audio/mp3" width="300" height="50">
</audio>

2.视频
video 标签向网页中引入一个视频
使用方法和audio基本一样

	<!-- 引入的是本地文件 -->
<video controls>
        <source src="flower.webm">
        <source src="flower.mp4">
        <embed src="flower.mp4" type="video/mp4">
    </video>
    <!-- 从视频网站引入视频（腾讯、优酷等）
    	点分享，然后点复制通用代码，直接粘贴即可-->

13.内联框架

很少使用
用于向当前页面中引入一个其他页面
标签 iframe
属性：src 指定要引入的网页的路径
frameborder 指定内联框架的边框

<iframe src="https://www.qq.com" frameborder="0" 
		width="800" height="600"></iframe>

14.快捷键（在vscode中）

（1）输入一个叹号，然后按tab键，html的框架就出来了
（2）注释的快捷键
Ctrl+斜杠
（若没有注释符号，按Ctrl+斜杠，注释符号出现；若有注释，按Ctrl+斜杠，注释消失）
（3）Ctrl+回车，换行，不带后面的文字，只按回车会带着后面的文字
（4）alt+shift+向上的键，往上面复制，向下复制同理
（5）br*2,接着按tab或回车，会直接复制出两个< br >
（6）自动生成英文文本 输入lorem,然后按tab键
（7）

<!-- 输入ul>li,然后按tab键，效果如下 -->
	<ul>
        <li></li>
    </ul>
<!-- 输入ul>li*3,然后按tab键，效果如下 -->
	<ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
<!-- 输入ul+ul,然后按tab键，效果如下 -->
	<ul></ul>
    <ul></ul>

（8）输入div.box,按tab键；输入div#box,按tab

<div class="box"></div>
<div id="box"></div>

（9）在style里，设置样式时，输入h100,按tab,直接显示height:200px;

<head>
	<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>

15.浏览器纠正

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：标签写在根元素外；p元素中嵌套了块元素；根元素中出现了除head和body以外的子元素等
（浏览器不会在源码里纠正，而是在内存中纠正。
如何查看：在网页中，右击，点击检查（或按F12），会弹出一个页面，然后点击elements,即可显示网页在内存中的结构）

二、CSS

1.简介

（1）CSS（层叠样式表），网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，最终我们看到的知识网页的最上边一层
（2）CSS的基本语法
选择器 声明块

选择器：
通过选择器可以选中页面中的指定元素。比如p的作用就是选中页面中所有的p元素

声明块：
通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成，声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以：连接，以；结尾

2.用CSS来修改元素的样式

（1）内联样式（行内样式）：在标签内部通过style属性来设置元素的样式

缺点：
设置的样式只能对一个标签生效；若希望影响到多个元素必须在每一个标签·中都把样式复制一遍；当样式发生变化时，必须要一个一个的修改，很不方便
在开发时不要使用内联样式

<p style="color: blueviolet; font-size: 60px;">少小离家老大回</p>

2.内部样式表
方法：
将样式编写到head中的style标签里，然后通过CSS的选择器选中元素并为其设置各种样式。
可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用，内部样式表更方便对样式进行复用
缺点：
内部样式表只能对一个网页起作用，样式不能跨页面进行复用

<head>
	<style>
        p{
            color:green;
            font-size: 60px;
        }
    </style>
</head>
<body>
	<p>落霞与孤鹜齐飞</p>
</body>

3.外部样式表（最佳实践）
方法：
将CSS样式编写到一个外部的CSS文件中，然后通过link标签引入外部的CSS文件

外部样式表需要通过link标签引入，意味着只要想使用这些样式的网页都可以对其进行引用，使得样式可以在不同的页面之间进行复用；将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验

/*style.css文件*/
p{
	color:green;
	font-size:30px;
}

<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<p>落霞与孤鹜齐飞</p>
</body>

3.注释

/*这是一条注释*/

4.常用选择器

1.元素选择器
作用：根据标签名来选中指定的元素
语法:标签名{}
例子：p{} h1{} div{}

<!-- 将所有段落设置为红色字体 -->
<head>
	<style>
		p{
			color:red;
		}
		h1{
			color:green;
		}
	</style>
</head>
<body>
	<h1>这是标题</h1>
	<p>少小离家老大回</p>
	<p>乡音无改鬓毛衰</p>
	<p>儿童相见不相识</p>
	<p>笑问客从何处来</p>
	<p>秋水共长天一色</p>
	<p>落霞与孤鹜齐飞</p>
</body>

2.id选择器
id属性值不能重复
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}

<!-- 将儿童相见不相识设置为红色 -->
<head>
	<style>
		#red{
			color:red;
		}
	</style>
</head>
<body>
	<h1>这是标题</h1>
	<p>少小离家老大回</p>
	<p>乡音无改鬓毛衰</p>
	<p id="red">儿童相见不相识</p>
	<p>笑问客从何处来</p>
	<p>秋水共长天一色</p>
	<p>落霞与孤鹜齐飞</p>
</body>

3.类选择器（class选择器）
用的多
作用：根据元素的class属性值选中一组元素
语法：.class属性值{]
例子：.blue{}
class是一个标签的属性，它和id类似，不同的是class可以重复使用
可以通过class属性来为元素分组；可以同时为一个元素指定多个class属性（注意 多个class属性值之间用空格隔开）

<!-- 将“秋水...”和“落霞...”这两句话设置为蓝色 -->
<head>
	<style>
		.blue{
			color:blue;
		}
		.abc{
			font-size:30px;
		}
	</style>
</head>
<body>
	<h1 class="blue abc">这是标题</h1>
	<p>少小离家老大回</p>
	<p>乡音无改鬓毛衰</p>
	<p>儿童相见不相识</p>
	<p>笑问客从何处来</p>
	<p class="blue">秋水共长天一色</p>
	<p class="blue">落霞与孤鹜齐飞</p>
</body>

4.通配选择器
作用：选中页面中的所有元素
语法：*{}

<head>
	<style>
		*{
			color:red;
		}
	</style>
</head>
<body>
	<h1 class="blue abc">这是标题</h1>
	<p>少小离家老大回</p>
	<p>乡音无改鬓毛衰</p>
	<p>儿童相见不相识</p>
	<p>笑问客从何处来</p>
	<p class="blue">秋水共长天一色</p>
	<p class="blue">落霞与孤鹜齐飞</p>
</body>

5.复合选择器

1.交集选择器
作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意：交集选择器中如果有元素选择器，必须使用元素选择器开头

<head>
	<style>
		h1.red{
			font-size:30px;
		}
		.a.b.c{
			color:blue;
		}
		/*这种写法没必要,因为id是唯一的*/
		div#box{
			color:green;
		}
	</style>
</head>
<body>
	<h1 class="red">标题</h1>
	<p class="red">这是p元素</p>
	<p class="a b c">你好</p>
</body>

2.选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{}
（这里的逗号相当于或的意思）
例子：#b1,.p1,h1,span,h2.red{}

<head>
	<style>
		h1,span{
			color:blue;
		}
	</style>
</head>
<body>
	<h1>标题</h1>
	<span>你好</span>
</body>

6.关系选择器

父元素：
直接包含子元素的元素叫做父元素
子元素：
直接被父元素包含的元素是子元素
祖先元素：
直接或间接包含后代元素的元素叫做祖先元素
（一个元素的父元素也是它的祖先元素；父元素只有一个，祖先元素可以有多个）
后代元素；
直接或间接被祖先元素包含的元素叫做后代元素
（子元素也是后代元素）
兄弟元素：
拥有相同父元素的元素是兄弟元素

1.子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素

<!-- 为div的子元素span设置字体颜色为红色
	（或者说为div直接包含的span设置字体颜色为红色） -->
<head>
	<style>
		div > span{
			color:red;
		}
		/*选择器可以混合使用*/
		/*div.box > span{
				color:green;
			}*/
		/*可以写好几个
			 div > p > span{
			 	color:blue;
			 }*/
	</style>
</head>
<body>
	<div>
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p元素中的span</span>
        </p>
        <span>我是div中的span元素</span>
    </div>

<!-- <div class="box">
	 	<span>哈喽</span>
	 </div>
	 <div>
	 	<span>你好</span>
	 </div> -->
</body>

2.后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代

<head>
	<!-- 为div中的所有span元素设置字体颜色为蓝色 -->
	<style>
		div span{
			color:blue;
		}
	</style>
</head>
<body>
	<div>
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p元素中的span</span>
        </p>
        <span>我是div中的span元素</span>
    </div>
</body>

3.兄弟元素选择器
（1）选择下一个兄弟（只选择紧挨着的下一个）
语法：前一个 + 下一个

<head>
	<style>
		p + span{
			color:blue;
		}
	</style>
</head>
<body>
	<div>
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p元素中的span</span>
        </p>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
    </div>
</body>

（2）选择下边所有的兄弟
语法：兄 ~ 弟

<head>
	<!-- 为div中的所有span元素设置字体颜色为蓝色 -->
	<style>
		p ~ span{
			color:blue;
		}
	</style>
</head>
<body>
	<div>
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p元素中的span</span>
        </p>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
    </div>
</body>

7.属性选择器

[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值中含有某值的元素

<head>
	<style>
	/*p[title]{}表示选中p标签里含有title属性的
		 [title]{}表示选中所有含有title属性的*/
		/*
		第一个：前三句话变为蓝色
			[title]{
				color:blue;
			}
		第二个：第一句话变为蓝色
			[title=abc]{
				color:blue;
			}
		第三个：前两句话变为蓝色
			[title^=abc]{
				color:blue;
			}
		第四个：第一句话和第三句话变为蓝色
			[title$=abc]{
				color:blue;
			}
		第五个：前三句话变为蓝色
			[title*=abc]{
				color:blue;
			}
			 */
	</style>
</head>
<body>
	<p title="abc">少小离家老大回</p>
	<p title="abcdef">乡音无改鬓毛衰</p>
	<p title="helloabc">儿童相见不相识</p>
	<p>笑问客从何处来</p>
	<p>秋水共长天一色</p>
	<p>落霞与孤鹜齐飞</p>
</body>

8.伪类选择器

伪类（不存在的类，特殊的类）
（1）伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素…
（2）伪类一般情况下都是使用：开头
:first-child 第一个子元素
:last-child 最后一个子元素

:nth-child() 选中第n个子元素（括号里面填几就选中第几个子元素）
特殊值：
n 第n个，n的范围从0到正无穷
2n 或even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序

<head>
	<style>
		/*将ul里的第一个li设置为红色
		   ul>li:first-child{
		   		color:red;
		   }*/
		/*将ul里的最后一个li设置为红色
			ul>li:last-child{
		   		color:red;
		   	}*/
		/*将ul里的偶数位li设置为红色
			ul>li:nth-child(even){
		   		color:red;
		   	}*/
	</style>
</head>
<body>
	<ul>
        <li>第0个</li>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
    <!-- 如果列表是下面这种形式
     <ul>
     	<span>一个span元素</span>
        <li>第0个</li>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
    那么   ul>li:first-child{
		   		color:red;
		   	}
	则不起作用，因为像:first-child这样的伪类都是根据所有的子元素进行排序
	应用下面介绍的伪类：
	ul>li:first-of-type{
			color:red;
		}
	若用下面这个
	ul>li:nth-of-type(3){
			color:green;
		}
	<li>第二个</li>这句话会变成绿色，而不是<li>第一个</li>
	因为像:nth-of-type()这样的伪类在同类	型元素中排序
     -->
</body>

:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序

:not() 否定伪类
将符合条件的元素从选择器中去除

<!-- 除了<li>第二个</li>，<span>一个span元素</span>以外
	（因为:nth-of-type()是在同类型元素中排序），都为蓝色 -->
<head>
	<style>
		ul>li:not(:nth-of-type(3){
				color:blue;
			}
	</style>
</head>
<body>
<ul>
     	<span>一个span元素</span>
        <li>第0个</li>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>

9.超链接的伪类

:link和:visited这两个伪类是超链接独有的

<head>
	<style>
		/*:link 用来表示没访问过的链接（正常的链接）*/
		a:link{
			color:red;
			/*font-size: 30px; 若加了这句话，下面的三个链接的大小都改变
				因为都是正常的链接*/
		}
		/*:visited 用来表示访问过的链接
			由于隐私的原因，:visited 这个伪类只能修改链接的颜色，
			不能修改大小等其他样式*/
		a:visited{
			color:orange;
		}
		/*:hover 用来表示鼠标移入的状态*/
		a:hover{
			color:aqua;
			font-size:30px;
		}
		/*:active 用来表示鼠标点击时的状态*/
		a:active{
			color:green;
		}
	</style>
</head>
<body>
	<a href="https://www.baidu.com">百度</a>
    <a href="https://www.baidu123.com">百度123</a>
    <a href="https://www.qq.com">qq</a>
</body>

10.伪元素选择器

伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素使用::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容

<head>
	<style>
		p::first-letter{
            font-size: 30px;
        }
        p::first-line{
            background-color: gold;
        }
        p::selection{
            color:greenyellow;
        }
	</style>
</head>
<body>
	<p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Harum voluptatibus hic deleniti? Veritatis delectus error 
       architecto a sequi molestias libero et iste, odit voluptatum
       perferendis, exercitationem blanditiis temporibus vel! Sequi!
    </p>
</body>

::before 表示元素的开始
::after 表示元素的最后
::before和::after必须结合content属性来使用

<head>
	<style>
		div::before{
            content:'aaa'
        }
        div::after{
            content:'bbb'
        }
	</style>
</head>
<body>
	<div>hello,how are you</div>
</body>

最终效果：aaahello,how are youbbb

前面介绍的短引用标签q,使用q标签后，会自动加上双引号，就是使用了::before和::after

11.样式的继承

（1）样式的继承：我们为一个元素设置的样式同时也会应用到它的后代元素上
（2）继承是发生在祖先元素和后代元素之间的
（3）继承的设计是为了方便我们的开发，利用继承可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式
（4）注意：并不是所有的样式都会被继承
比如：背景相关的、布局相关等样式不会被继承

<head>
	<style>
	/*默认背景是透明的，所以<span>我是p元素中的span</span>背景会变化*/
		p{
            color:lightcoral;
            background-color:yellow;
        }
        div{
            color:lightseagreen;
        }
        /*body中所有内容的字体大小都被设置为50px*/
        body{
            font-size: 50px;
        }
	</style>
</head>
<body>
	<p>
        我是一个p元素
        <span>我是p元素中的span</span>
    </p>
    <span>我是p元素外的span</span>
    <div>
        我是一个div
        <span>
            我是div中的span元素
            <em>我是span中的em</em>
        </span>
    </div>
</body>

12.选择器的权重

（1）样式的冲突：
当通过不同的选择器选中相同的元素，并且为相同的样式设置不同的值时，就发生了冲突
（2）发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

选择器的权重：
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级

a. 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）

<!-- 最后背景颜色为红色 -->
<head>
	<style>
        div{
            background-color: orange;
        }
        .red{
            background-color: red;
        }
	</style>
</head>
<body>
	<div id="box1" class="red d1 d2 d3 d4">我是一个div</div>
</body>

<head>
	<style>
	/*最后呈现绿色*/
		#box1{
            background-color: yellow;
        }
        div#box1{
            background-color:green;
        }
        div,p,span{
        	background-color:greenyellow;
        }
	</style>
</head>
<body>
	<div id="box1" class="red d1 d2 d3 d4">我是一个div</div>
</body>

b. 选择器的累加不会超过其最大的数量级（如：类选择器再高也不会超过id选择器）
c. 如果优先级计算后相同，此时优先使用靠下的样式

<head>
	<style>
	/*最后呈现红色*/
		.d1{
			background-color:purple;
		}
		.red{
            background-color: red;
        }
	</style>
</head>
<body>
	<div id="box1" class="red d1 d2 d3 d4">我是一个div</div>
</body>

d. 可以在某一个样式的后边添加 !important ,此时该样式会获取到最高的优先级，甚至超过内联样式
注意：在开发中要慎用！

<head>
	<style>
	/*最后不是chocolate,而是purple*/
		.d1{
			background-color:purple !important;
		}
		.red{
            background-color: red;
        }
	</style>
</head>
<body>
	<div id="box1" class="red d1 d2 d3 d4" 
		style="background-color:chocolate;">我是一个div</div>
</body>

<head>
	<style>
	/*最后背景颜色为紫色，我是一个div大小为20px,
		我是div中的span元素大小为50px,因为通配选择器的优先级比继承高*/
		div{
			background-color:purple;
			font-size: 20px;
		}
        *{
            font-size: 50px;
        }
	</style>
</head>
<body>
	<div id="box1" class="red d1 d2 d3 d4">我是一个div 
		 <span>我是div中的span元素</span></div>
</body>

13.长度单位

（1）像素
屏幕（显示器）实际上是由一个一个的小点点构成的
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
因此同样的200px在不同的设备下显示效果不一样
（2）百分比
也可以将属性值设置为相对于其父元素属性的百分比
设置为百分比可以使子元素跟随父元素的改变而改变
（3）em
em是相对于元素的字体大小来计算的
1em=1font-size
（默认1font-size为16px）
em会根据字体大小的改变而改变
（4）rem
rem是相对于根元素的字体大小来计算

<head>
	<style>
		.box1{
			width:200px;
			height:200px;
			background-color:orange;
		}
		.box2{
			width:50%;
			height:50%;
			background-color:blue;
		}
		/*边长为200px的正方形*/
		.box3{
			font-size:20px;
			width:10em;
			height:10em;
			background-color:green;
		}
		/*
		边长为300px的正方形
			html{
				font-size:30px;
			}
			.box3{
				width:10rem;
				height:10rem;
			}*/
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
	</div>
	<div class="box3"></div>
</body>

14.RGB值和HSL值

RGB
（1）颜色单位：
在CSS中可以直接使用颜色名来设置各种颜色
比如：red、blue、green、yellow…
但是在CSS中直接使用颜色名非常不方便
（2）RGB值
RGB通过三种颜色的不同浓度来调配出不同的颜色
R:red ,G:green ,B:blue
每一种颜色的范围在0~255（0%-100%）之间
语法： RGB（红色，绿色，蓝色）
rgb(0,0,0)为黑色
rgb(255,255,255)为白色
（3）RGBA
在rgb的基础上增加了一个a表示不透明度
需要四个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明，0表示完全透明，.5表示半透明
（4）十六进制的RGB值
语法：#红色绿色蓝色
颜色浓度通过 00~ff 调整
如果颜色每两位重复可以进行简写，如#aabbcc可以写成#abc

<head>
	<style>
		.box3{
			width:100px;
			height:100px;
			background-color:red;
			background-color:rgb(255,0,0);
			background-color:rgba(100,50,30,.5)
			background-color:#ff0000;
			background-color:#abc;
		}
	</style>
</head>
<body>
	<div class="box3"></div>
</body>

HSL
HSL值
H 色相（范围0-360）
S 饱和度（颜色的浓度）（范围0%-100%）
L 亮度（范围0%-100%）
HSLA和RGBA类似

<head>
	<style>
		.box3{
			width:100px;
			height:100px;
			background-color:hsl(100,100%,50%);
		}
	</style>
</head>
<body>
	<div class="box3"></div>
</body>

三、CSS中的布局（layout）

1.文档流

网页是一个多层的结构，最底下的一层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列

对我们来说元素主要有两个状态
在文档流中和不在文档流中（即脱离文档流）

元素在文档流中的特点：
（1）块元素
在页面中独占一行（自上向下垂直排列）；
默认宽度是父元素的全部（会把父元素撑满）；
默认高度是被内容撑开（子元素）
（2）行内元素
不会独占页面的一行，只占自身的大小；
在页面中自左向右水平排列，如果一行中不能容纳下所有的行内元素，那么元素会换到第二行继续自左向右排列（和书写习惯一致）；
默认宽度和默认高度都是被内容撑开

<head>
	<style>
	/*块元素*/
		.box1{
			background-color:yellow;
		}
		.box2{
            width:200px;
            background-color:red;
        }
     /*行内元素*/
     	span{
            background-color: green;
        }
	</style>
</head>
<body>
	<div class="box1">我是div1</div>
	<div class="box2">我是div2</div>
	<span>我是span1</span>
    <span>我是span2</span>
</body>

2.盒子模型

盒模型/盒子模型/框模型（box model）
CSS将页面中的所有元素都设置为了一个矩形的盒子，那么对页面的布局就变成将不同的盒子摆放到不同的位置。

每个盒子都由以下几个部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）

<head>
	<style>
		.box1{
			/*内容区（content）
			元素中所有的子元素和文本内容都在内容区中排列
			内容区的大小由width和height两个属性来设置
			width 设置内容区的宽度
			height 设置内容区的高度
			*/
			width:200px;
			height:200px;
			background-color:#bfa;
			/*边框（border）
			边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子外部
			边框的大小会影响整个盒子的大小
			要设置边框，需要至少设置三个样式：
			边框的宽度  border-width
			边框的颜色  border-color
			边框的样式  border-style
			*/
			border-width: 10px;
            border-color: seagreen;
            border-style: solid;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
</body>

3.盒子模型-边框

border-width 可以不写，有默认值，一般为3个像素（不同浏览器可能不同）
border-color 可以不写，有默认值，若不写，自动使用color的颜色值
border-style 默认值是none,表示没有边框
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
都可以用来指定四个方向的边框的宽度、颜色、样式
值的情况：
四个值：上 下 左 右
三个值：上 左右 下
两个值： 上下 左右
一个值： 上下左右

border-width:10px 20px 30px 40px;
border-color:red orange blue green;

除了上面的三个以外，还有一组border-xxx-width,border-xxx-color,
border-xxx-style,
xxx可以是 top,bottom, left, right
用来单独指定某一个边的宽度、颜色、样式

border简写属性
通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求

border:10px solid red;

同样有四个border-xxx

border-left:10px solid red;
<!-- 若要设置一个没有右边框的盒子
	border:10px red solid;
	border-right:none;
	 -->

4.盒子模型-内边距（padding）

内边距的设置会影响到盒子的大小；背景颜色会延伸到内边距上

一个盒子的可见框的大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。
同样有四个方向 padding-xxx
内边距的简写属性：
可以同时指定四个方向的内边距，规则和border-width一样

padding:10px 20px 30px 40px;

<head>
	<style>
		.box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border:10px solid orange;
            padding:30px;
        }
        .inner{
            width: 100%;
            height: 100%;
            background-color: yellow;
        }
	</style>
</head>
<body>
	<div class="box1">
		<div class="inner"></div>
	</div>
</body>

5.盒子模型-外边距（margin）

外边距不会影响盒子可见框的大小，但是会影响盒子的位置，影响盒子实际占用空间

一共有四个方向的外边距：
margin-top
上外边距，设置一个正值，元素会向下移动
margin-right
默认情况下设置右外边距不会产生任何效果
margin-bottom
下外边距，设置一个正值，其下边的元素会向下移动
margin-left
左外边距，设置一个正值，元素会向右移动
元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果设置左和上外边距，会移动元素自身，而设置下和右外边距会移动其他元素

margin也可以设置负值，如果是负值，元素会向相同方向移动
margin的简写属性：
可以同时设置四个方向的外边距，用法和padding一样

6.盒子的水平布局

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.盒子的垂直布局

在这里插入图片描述
在这里插入图片描述

8.外边距的折叠

在这里插入图片描述
在这里插入图片描述

9.行内元素的盒模型

在这里插入图片描述
在这里插入图片描述

10.浏览器的默认样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

11.盒子的大小

在这里插入图片描述

12.轮廓、阴影和圆角

轮廓和阴影不会影响页面的布局
在这里插入图片描述

border-radius:20px / 40px;
椭圆角
第一个值是水平方向（x轴）的半径，第二个值是垂直方向（y轴）的半径

四、浮动

1.简介

在这里插入图片描述

2.浮动的特点

在这里插入图片描述
在这里插入图片描述

3.高度塌陷和BFC

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.clear

在这里插入图片描述

5.使用after伪类解决高度塌陷

在这里插入图片描述

6.clearfix

在这里插入图片描述

7.相对定位

在这里插入图片描述
在这里插入图片描述

8.绝对定位

在这里插入图片描述
绝对定位元素的位置

在这里插入图片描述
在这里插入图片描述

9.固定定位

在这里插入图片描述

10.粘滞定位

在这里插入图片描述

11.元素的层级

在这里插入图片描述

五、字体

1.字体族

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
字体的简写属性
在这里插入图片描述

2.图标字体

有三种使用方法：
类
伪元素
实体

（1）fontawesome
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
（2）iconfont
在这里插入图片描述

3.行高

在这里插入图片描述

4.文本的水平和垂直对齐

在这里插入图片描述
在这里插入图片描述
其他的文本样式
在这里插入图片描述
在这里插入图片描述

六、背景

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
雪碧图
雪碧图只适用于背景图片
在这里插入图片描述
线性渐变
在这里插入图片描述
径向渐变（放射）
在这里插入图片描述

七、表格

在这里插入图片描述
长表格
在这里插入图片描述
表格样式
在这里插入图片描述
在这里插入图片描述

八、表单

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

以上是对HTML5和CSS3的简单介绍

倚楼听yu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
四、HTML5与css3
come_bn的博客
11-25 279
一、复合选择器 后代选择器、并列选择器； 1.后代选择器： 语法：祖先元素 后代元素1 后代元素2….｛具体的css样式；中间使用空格隔开｝ 代码示例： <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 后代选择器使用空格来实现，后代指的是儿子、孙子。。。。 */ /* div span{color: r..
HTML5与CSS3学习心得
root_1314_0708的博客
08-19 7730
在学习Html5和CSS3过程中,布局都是又标签来进行填充自己的页面,然后通过css来进行对自己的界面进行修饰与装潢,打个比喻,你的body就行一个刚买的房子,里面的标签就像你把自己的房间如何规划,而css呢,就像你要把你的房子进行精装修一样.要选什么样的涂料,在房间喜欢什么样的窗帘,怎样舒适的沙发,还有如何布置自己美丽的卧室.    首先,Web前端的话,要想玩6这个东西,首先你要多多的练习,
html超链接及锚链接的简单使用
juezhenhong的博客
12-22 4937
html超链接及锚链接的使用简介 一、创建外部超链接 1、在本页面中打开超链接 <a href="https://www.baidu.com">百度</a> <a href="https://www.baidu.com" target="_self">百度</a> 注意： 默认情况下，target的值就是_self，所以上面第一条就算不指定target的值，也是直接在本页面中打开超链接。 2、在新的标签页中打开超链接 <a href="htt
html基础-4-超链接、图片、内联框架和音视频
Neptuneyut的博客
05-06 1904
文章目录超链接图片标签内联框架音频标签视频标签参考 超链接 a:超链接标签，例如<a href="https://www.baidu.com">超链接</a> 超链接是用于从一个页面跳转到另外的页面，包括跳到外部网站页面和自定义页面 通过a标签定义，href（Hypertext Reference缩写）中指定跳转地址，指定内部页面时可以引用绝对路径也可以是相对路径，相对路...
HTML5&CSS3新特性
weixin_52972575的博客
05-05 8083
一.HTML5新特性 HTML5新特性针对于以前的不足，增加了一些新的标签，新的表单，新的表单属性等。 1.新增语义化标签 新增的带有语义化的标签 二.CSS3新特性
基于HTML5+CSS3的网页设计与实现
kkkioe的博客
06-09 2912
摘要：随着互联网技术的不断发展，电子设备的广泛应用和高普及度，网页作为互联网信息的重要载体，其网页设计技术将面临新的挑战。HTML和CSS作为网页前端开发所运用的主要核心技术，如何灵活运用，使得web开发出来的网页设计满足绝大多数用户需求是技术人员和项目负责人的核心工作之一。文章以介绍XX主题网站首页页面为对象，实现基于HTML5+CSS3的网页页面设计与优化。...
HTML5+CSS3+JavaScript从入门到精通【文末送书】
一键难忘的博客
05-23 7112
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
HTML5和CSS3的新特性(浓缩好记版)
热门推荐
我的博客
08-22 1万+
综述：这个问题在面试的时候经常被问到，有必要做一个总结，理解的深刻充分一些 1.html5的新特性？(记住有九大模块内容) 添加了video，radio标签 添加了canvas画布和svg,渲染矢量图片 添加了一些列语义化标签header,footer,main,section,aside,nav等 input的type值新添加了很多属性（email，ur...
HTML5和CSS3期末课程设计
06-10
利用HTML5和CSS3写期末课程设计（稳过的那种）
响应式Web设计(HTML5和CSS3实战)
12-09
移动互联网时代到来了 本书将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来。 为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术 不仅讨论了媒体查询 流式。
使用HTML5和css3制作3d立方体动画3d.zip
09-24
比较适合刚刚入门前端正在学习前端css3立体动画的同学
HTML5拖放（Drag and Drop）全面指南：让网页互动起来
艾恩小灰灰的博客
06-06 816
HTML5 引入了许多令人兴奋的新特性，其中之一便是原生支持的拖放（Drag and Drop）功能，它极大地丰富了网页的交互体验，允许用户直接在页面上通过鼠标操作来移动元素。本文将深入浅出地介绍如何在你的网页中实现拖放功能，包括基本概念、API使用、事件处理以及代码示例。
CSS3 简介
lly202406的博客
06-14 313
CSS3，即层叠样式表的第三代，是网页设计和开发中不可或缺的技术之一。它为HTML元素提供了更加丰富和灵活的样式定义，使得网页不仅结构清晰，而且外观精美、交互性强。CSS3继承了CSS2的基本特性，并引入了许多新的特性和功能，极大地提高了网页设计的效率和效果。
动画的js动画于css3区别？
tianxianghuiwei的博客
06-14 213
总体来说，选择CSS3动画还是JavaScript动画取决于你的具体需求和项目的情况。对于简单的动画效果，推荐使用CSS3动画以获得更好的性能和简便性；而对于复杂的动画逻辑或需要更精细控制的情况，则使用JavaScript动画可能更合适。所有用户在使用是要根据需求进行选择，希望可以帮到大家。
HTML5+CSS3+JS小实例：网格图库
艾恩小灰灰的博客
06-05 1534
实例：网格图库。技术栈：HTML+CSS+JS。
js轮播图有，移入移出事件，左右滑动事件功能
最新发布
tianxianghuiwei的博客
06-14 156
具体的轮播可以根据需求进行调整；
背景渐变动画登录页
南北极之间
06-11 151
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
html5和css3导航栏
12-16
HTML5和CSS3是用于网页开发的两种重要的技术标准。HTML5是用于创建网页内容的标记语言，而CSS3则用于控制网页的样式和布局。 在创建导航栏的过程中，我们可以使用HTML5来定义导航栏的结构，例如使用元素来表示导航...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值