Html5+css3

html5

新标签

HTML5引入了一些新的语义化标签，这些标签旨在更好地描述网页的结构和内容，提供更好的可读性和可访问性。

这些新标签的引入有助于更好地组织和描述网页内容，提高可读性和可访问性。使用这些标签可以使网页结构更清晰，并为搜索引擎和辅助技术提供更多信息

<header>：定义文档或节的页眉，通常包含网站的标题、导航栏等内容。
<nav>：定义导航链接的容器，用于包含网站的导航菜单。
<section>：定义文档中的一个节或区块，通常包含一组相关的内容。
<article>：定义独立的、完整的文章内容，如博客文章、新闻报道等。
<aside>：定义页面的侧边栏内容，通常包含与主要内容相关但可以独立存在的内容。
<footer>：定义文档或节的页脚，通常包含版权信息、联系方式等内容。
<main>：定义文档的主要内容，每个文档中只能包含一个<main>标签。
<figure>：定义一组媒体内容（如图像、图表、音频、视频等）及其标题。
<figcaption>：定义<figure>元素的标题，用于描述与<figure>相关的媒体内容。
<time>：定义日期或时间，可以用于表示发布日期、事件时间等。

表单控件

HTML5引入了一些新的表单控件，使得在网页中创建表单更加灵活和功能丰富。

<input type="date：日期选择器，允许用户选择日期。
<input="time">：时间输入框，允许用户选择时间。
<input type="">：用于输入电子邮件地址，并提供浏览器端验证。
<input type="url">：用于输入URL地址，并提供浏览器端验证。
<input type="number">：数字输入框，允许用户输入数字，并可以设置小值、最大值等属性。
<input type="range">：范围滑块，允许用户通过拖动块来选择一个值范围。
<input type="color">颜色选择器，允许用户选择颜色。
除了上述的新类型外，在 HTML 5还引入了对 placeholder, autofocus, required, 和 pattern(使用正则表达式进行简单格式验证) 属性的支持。

placeholder 设置默认提示文字
autofocus 设置自动获取焦点
autocomplete 设置是否有联想下拉，一般设置为“off”，将它关掉

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<form>

<label>网址:</label><input type="url" name="" required placeholder="http://xxx"><br><br> 
<label>邮箱:</label><input type="email" name="" required placeholder="123xxx@xxx.com"><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>时间:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br> 
<label>电话:</label><input type="tel" name=""><br><br> 
<label>颜色:</label><input type="color" name=""><br><br> 
<label>搜索:</label><input type="search" name=""><br><br>

<input type="submit" name="" value="提交">

</form>
	
</body>
</html>

音频视频

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>h5 音频 视频</title>
</head>
<body>
	<audio  controls autoplay loop preload muted>
		<!-- <source src="source/audio.mp3" type=""> -->
		<source src="source/audio02.wav" type="">
	</audio>
	<br>

	<video  controls autoplay loop preload width="600" height="400">
		<source src="source/mov.mp4" type="">
		<source src="source/mov.ogg" type="">
	</video>



</body>
</html>

css3

选择器

id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素

伪类选择器

:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与 <selector> 不匹配的所有元素

伪元素选择器

:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容

属性选择器

[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素
[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

层次选择器（p~ul），选择前面有p元素的每个ul元素

优先级

内联 > ID选择器 > 类选择器 > 标签选择器

经过上面的优先级计算规则，我们知道内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!important

继承

继承属性

字体系列属性

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体

文本系列属性

text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

元素可见性
1
visibility

表格布局属性

caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定

列表属性

1
2
3

list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合

引用

1	quotes：设置嵌套引用的引号类型

光标属性

1	cursor：箭头可以变成需要的形状

继承中比较特殊的几点：

a 标签的字体颜色不能被继承
h1-h6标签字体的大下也是不能被继承的

无继承的属性

display
文本属性：vertical-align、text-decoration
盒子模型的属性：宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after

em/px/rem/vh/vw

介绍

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性；从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位

单位

CSS单位
相对长度单位	em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位	cm、mm、in、px、pt、pc

px

px为绝对单位，在于px的大小和元素的其他属性无关
em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）
- em 的值并不是固定的
- em 会继承父级元素的字体大小
- em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
- 任意浏览器的默认字体高都是 16px
rem

rem，相对单位，相对的只是HTML根元素font-size的值

特点：
- rem单位可谓集相对大小和绝对大小的优点于一身
- 和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸
vh、vw

vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度
- 对于普通定位元素就是我们理解的父元素
- 对于position: absolute;的元素是相对于已定位的父元素
- 对于position: fixed;的元素是相对于 ViewPort（可视窗口）

总结

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算

vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

圆角 (border-radius)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3 圆角</title>
	<style type="text/css">
		.box{
			width:200px;
			height:200px;
			border:2px solid #000;
			background-color:gold;
			margin:50px auto 0;
			/* border-top-left-radius:100px 50px; */
			/* border-top-left-radius:100px;
			border-top-right-radius:100px; */

			/* border-radius:40px; */

			/* border-radius:20%; */

			border-radius:50%;
		}
	</style>
</head>
<body>
	<div class="box">
		
	</div>
</body>
</html>

阴影 (box-shadow)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3 阴影</title>
	<style type="text/css">
		
		.box{
			width:200px;
			height:40px;
			background-color:gold;
			margin:100px auto 0;
			box-shadow:10px 10px 10px 0px pink;
		}


		.box2{
			width:200px;
			height:40px;
			background-color:gold;
			margin:100px auto 0;
			box-shadow:0px 0px 20px 2px red inset;
		}


	</style>
</head>
<body>
	<div class="box"></div>

	<div class="box2"></div>
</body>
</html>

透明度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css 透明度</title>
	<style type="text/css">
		body{
			background-color:rgb(255, 255, 255);
		}

		.box{
			width:200px;
			height:200px;
			/* background:url(images/location_bg.jpg); */
			background-color:gold;
			margin:50px auto 0;
			border:2px solid #000;
			border-radius:50%;
			opacity:0.3;
			filter:alpha(opacity=30);
			text-align:center;
			line-height:200px;
		}


		.box2{
			width:200px;
			height:200px;			
			margin:50px auto 0;
			border:2px solid rgba(0,0,0,0.3);
			border-radius:50%;
			text-align:center;
			line-height:200px;
			background-color:rgba(255,215,0,0.3);
		}


	</style>
</head>
<body>
	<div class="box">床前明月光</div>

	<div class="box2">床前明月光</div>
</body>
</html>

过渡动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width:100px;
			height:100px;
			background-color:gold;
			/* transition:border-radius 500ms ease,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s; */

			transition:all 500ms ease;
		}

		.box:hover{
			width:500px;
			height:300px;
			background-color:red;
			border-radius:50px;
		}


	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

运动曲线

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		div{
			width:100px;
			height:50px;
			background-color:gold;
			margin-bottom:20px;
		}

		div:nth-child(1){
			transition:all 1s linear;
		}

		div:nth-child(2){
			transition:all 1s ease;
		}

		div:nth-child(3){
			transition:all 1s ease-in;
		}

		div:nth-child(4){
			transition:all 1s ease-out;
		}

		div:nth-child(5){
			transition:all 1s ease-in-out;
		}

		div:nth-child(6){
			transition:all 1s cubic-bezier(0.750, -0.425, 0.055, 1.480);
		}

		div:hover{
			width:1000px;
		}


	</style>
</head>
<body>
	<div>linear</div>
	<div>ease</div>
	<div>ease-in</div>
	<div>ease-out</div>
	<div>ease-in-out</div>
	<div>bezier</div>
</body>
</html>

动画案例( 文字遮罩)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.box{
			width:200px;
			height:300px;
			margin:50px auto 0;
			border:1px solid #000;
			position:relative;
			overflow:hidden;
		}

		.box img{
			width:200px;
			height:300px;
		}

		.box  .pic_info{
			width:200px;
			height:200px;
			background-color:rgba(0,0,0,0.5);
			color:#fff;
			position:absolute;
			left:0;
			top:300px;
			transition:all 500ms cubic-bezier(0.750, -0.425, 0.055, 1.480);
		}

		.box  .pic_info p{
			margin:20px;
			line-height:30px;
		}

		.box:hover .pic_info{
			top:150px;
		}



	</style>
</head>
<body>
		<div class="box">
			<img src="images/location_bg.jpg">
			<div class="pic_info"><p>图片说明：这是一个风景图图片说明：这是一个风景图图片说明：这是一个风景图</p></div>
		</div>
</body>
</html>

元素旋转

倾斜

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		/*  旋转方向判断
			
			1、x轴向右、y轴向下、z轴向屏幕外

			2、让轴向对着自己，顺时针方向就是该轴向的旋转方向


		   */
		
		.box{
			width:300px;
			height:300px;
			background-color:gold;
			margin:50px auto 0;
			transition:all 500ms ease;

			transform-style:preserve-3d;
			transform:perspective(800px) rotateX(0deg);

		}

		.box:hover{
			/* 
			Z 轴旋转
			transform:rotate(45deg); 

			*/

			transform:perspective(800px) rotateX(-30deg);


		}


	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

旋转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片翻面</title>
	<style type="text/css">
		.con{
			width:300px;
			height:272px;
			margin:100px auto 0;
			position:relative;			
			transform-style:preserve-3d;
			transform:perspective(800px) rotateY(0deg);
		}


		.pic,.info{
			width:300px;
			height:272px;
			position:absolute;
			left:0;
			top:0;
			backface-visibility:hidden;
			transform:perspective(800px) rotateY(0deg);
			transition:all 2000ms ease;
		}


		.info{
			background-color:gold;
			text-align:center;
			line-height:272px;
			transform:translateZ(2px) rotateY(180deg);
		}

		.con:hover .pic{
			transform:perspective(800px) rotateY(180deg);
		}

		.con:hover .info{
			transform:perspective(800px) rotateY(0deg);
		}



	</style>
</head>
<body>
	<div class="con">
		<div class="pic"><img src="images/location_bg.jpg"></div>
		<div class="info">图片文字说明</div>
	</div>
</body>
</html>

案例风车动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation 动画</title>
	<style type="text/css">
		
		.box{
			width:400px;
			height:400px;
			margin:50px auto 0;
			background:url(images/fengche.png) no-repeat;
			animation:moving 1s linear 0s infinite;
		}



		@keyframes moving{
			
			from{
				  transform:rotate(0deg);
			}

			to{
				transform:rotate(360deg);

			}	
		}




	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

案例loading动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width:300px;
			height:125px;
			border:1px solid #000;
			margin:200px auto 0;
		}

		.box p{
			text-align:center;
			width:100%;
			float:left;
			margin:0;
			padding:0;
		}

		.box div{
			width:30px;
			height:70px;
			float:left;
			background-color:gold;
			margin:15px;
			border-radius:10px;
		}

		.box div:nth-child(1){
			background-color:red;
			animation:loading 500ms ease 0s infinite alternate;
		}

		.box div:nth-child(2){
			background-color:green;
			animation:loading 500ms ease 100ms infinite alternate;
		}

		.box div:nth-child(3){
			background-color:pink;
			animation:loading 500ms ease 200ms infinite alternate;
		}

		.box div:nth-child(4){
			background-color:greenyellow;
			animation:loading 500ms ease 300ms infinite alternate;
		}

		.box div:nth-child(5){
			background-color:cyan;
			animation:loading 500ms ease 400ms infinite alternate;
		}




		@keyframes loading{
			from{
				 transform:scaleY(1);
			}

			to{
				 transform:scaleY(0.5);
			}
		}




	</style>
</head>
<body>
	<div class="box">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<p>loading...</p>
	</div>
</body>
</html>

background-size

background-size属性用于指定背景图片的尺寸大小。通过设置background-size属性，你可以控制背景图片的显示方式，使其适应元素的大小或呈现特定效果

语法：background-size: value;

可以是以下几种取值：
- auto: 默认值，保持背景图片原始大小。
- <length>: 使用具体的长度值来定义背景图片的大小。
- <percentage>: 使用百分比来定义背景图片的大小，相对于包含块的大小。
- cover: 背景图片等比例放大或缩小，以完全覆盖元素。
- contain: 背景图片等比例放大或缩小，以完全包含在元素内。

流式布局

流式布局（Fluid Layout）是一种网页布局设计方法，其特点是元素的宽度不固定的像素值而是根据浏览器窗口大小或设备屏幕大小进行自适应调整。

流式布局使用对单位（如百分比）来定义元素的宽度，使得页面可以根据浏览器窗口大小自动调整布局。
元素的宽度会随着浏览器窗口大小的变化而自动调整，从而适应不同分辨率的设备。
流式布局通常会结合媒体查询（Media Queries）来实现响应式设计，以适配不同设备的屏幕大小。

<!DOCTYPE html>
<html lang="en">
<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">
	<title>流体布局</title>
	<style type="text/css">
		body,ul{
			margin:0;
			padding:0
		}

		ul{
			list-style:none;
		}
		
		
		.menu{
			height:50px;
		}

		.menu li{
			/* 
			第一种解决宽度超过的方法：
			width:calc(25% - 4px); 

			*/

			width:25%;
			height:50px;
			text-align:center;
			line-height:50px;
			float:left;
			background-color:gold;
			border:2px solid #000;
			box-sizing:border-box;
		}


	</style>
</head>
<body>
	<ul class="menu">
		<li><a href="">菜单文字</a></li>
		<li><a href="">菜单文字</a></li>
		<li><a href="">菜单文字</a></li>
		<li><a href="">菜单文字</a></li>
	</ul>
</body>
</html>

响应式布局 (媒体查询)

响应式布局是一种网页设计方法，旨在使网站在不同设备上（如桌面脑、平板电脑、手机等）都能呈现出最佳视觉和功能体验。

响应式布局通过使用流式网格、弹性图片大小以及媒体查询等技术，使得页面能根据用户设备的屏幕大小动态调整布局和内容排列。
响应式设计需要考虑用户界面元的尺寸、排列方式和交互方式，并确保它们适不同设备，提供一致的用户体验。
对于不同屏尺寸，可以通过CSS中的媒体查询来设置不同样式规则，或者通过JavaScript实现功能上的适配。

使用优点：

多设备兼容：响应式布局可以确保网站在各种移动设备和桌面端浏览器上都能良好展示，提高了跨平台兼容性。
良好用户体验：无论用户用何种设备访问网站，响应式设计都可以为其提供舒适且一致的浏览体验。
SEO友好：谷歌对移动友好度有利于搜索结果排序,而采用了响应布局就符合这个要求

使用缺点：

复杂设计与开发成本较高：实施响应式设计需要更多精力让页面适各种情况,因此可能会增加项目成本
加载速度变慢: 在某些情况下,加载相对大量图片会导致加载速度减慢

<!DOCTYPE html>
<html lang="en">
<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">
	<title>响应式布局</title>
	<style type="text/css">
		body,ul{
			margin:0;
			padding:0;
		}

		ul{
			list-style:none;
		}

		.con{
			border:1px solid #000;
			overflow:hidden;
		}

		.con li{
			width:23%;
			height:200px;
			background-color:gold;
			float:left;
			margin:30px 1%;
		}


		@media (max-width:800px){

			.con li{
				width:46%;				
				margin:30px 2%;
			}

		}

		@media (max-width:500px){

			.con li{
				width:90%;				
				margin:30px 5%;
			}

		}





	</style>
</head>
<body>
	<ul class="con">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</body>
</html>

响应式布局还可以利用以下技术来实现：

Viewport单位：Viewport单位（如vw、vh、vmin、vmax）可以根据视口（浏览器窗口）的大小来设置元素的尺寸，从而实现响应式设计。
Flexbox布局：使用CSS3中的Flexbox布局来实现灵活的盒子模型，可以更方便地实现响应式布局。
CSS Grid布局：CSS Grid布局是一种二维网格布局系统，可以更灵活地控制元素的排列和布局，适用于响应式设计。
图片响应式设计：通过设置图片的max-width属性为100%来使图片在不同设备上自适应调整大小，保持比例不变。
字体响应式设计：使用相对单位（如em、rem）来设置字体大小，使得字体可以根据设备屏幕大小自适应调整。
响应式框架：使用响应式框架（如Bootstrap、Foundation等）来快速构建响应式网站，这些框架提供了一系列的CSS和JavaScript组件，可以帮助开发者快速实现响应式设计。