vito的Web前端学习 Day9(HTML5 & CSS3)

2022年2月27日

1 HTML5新增标签

1.1 HTML5新增语义化标签

1.2 HTML5新增多媒体标签

1.2.1 视频

1.2.2 音频

1.2.3 多媒体标签总结

1.3 HTML5 新增 input 标签

1.4 HTML5新增表单属性

2 CSS3 新特性

2.1 CSS3新增选择器

2.1.1 属性选择器

2.1.2 结构伪类选择器

2.1.3 CSS3伪元素选择器

2.2 CSS3盒子模型

2.3 CSS3图片模糊处理

2.4 calc计算盒子宽度

2.5 CSS3过渡

3 上传网站

4 总结


1 HTML5新增标签

1.1 HTML5新增语义化标签

1.2 HTML5新增多媒体标签

1.2.1 视频 <video>

<video src="media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster="images/mi9.jpg"></video>

1.2.2 音频 <audio>

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

1.2.3 多媒体标签总结

1.3 HTML5 新增 input 标签

    <h3>HTML5新增input类型</h3>
    <form action="">
    	<ul>
    		<li>邮箱:<input type="email"></li>
    		<li>网址:<input type="url"></li>
    		<li>日期:<input type="date"></li>
    		<li>时间:<input type="time"></li>
    		<li>数量:<input type="number"></li>
    		<li>手机号码:<input type="tel"></li>
    		<li>搜索:<input type="search"></li>
    		<li>颜色:<input type="color"></li>
    		<li><input type="submit" value="提交"></li>
    	</ul>
    </form>

1.4 HTML5新增表单属性

<head>
	<style type="text/css">
        input::placeholder {
			color: orange;
		}
	</style>
</head>
<body>
    <h3>HTML新增的表单属性</h3>
    <form action="">
    	<input type="search" name="sear" required="required" placeholder="请输入" autofocus="autofocus" autocomplete="off">
    	<input type="file" name="" id="" multiple="multiple">
    	<input type="submit" name="" value="提交">
    </form>
</body>

2 CSS3 新特性

2.1 CSS3新增选择器

2.1.1 属性选择器

<head>
	<style type="text/css">
        /* 必须是input 但同时具有 value 这个属性 */
		input[value] {
			color: pink;
		}
		/* 必须是input 但同时具有 value 值等于 “请输入密码” */
		input[value="请输入密码"] {
			color: orange;
		}
		/* 必须是input 但同时具有 value 值以 “请输入” 开头*/
		input[value^="请输入"] {
			font-size: 20px;
		}
		/* 必须是input 但同时具有 value 值以 “用户名” 结尾 */
		input[value$="用户名"] {
			font-weight: 600;
		}
		/* 必须是input 但同时具有 value 值含有 “用” */
		input[value*="用"] {
			font-style: italic;
		}
	</style>
</head>
<body>
<h3>CSS3新增属性选择器</h3>
    <input type="text" value="请输入用户名">
    <input type="text" value="请输入密码">
    <input type="text" value="用户名">
</body>

2.1.2 结构伪类选择器

<head>
	<style type="text/css">
        /* ul中第一个孩子 */
	    ul li:first-child {
	    	background-color: orange;
	    }
	    ul li:first-of-type {
	    	font-size: 20px;
	    }
	    /* ul中最后一个孩子 */
	    ul li:last-child {
	    	background-color: red;
	    }
	    ul li:last-of-type {
	    	font-size: 20px;
	    }
	    /* ul中第三个孩子 */
	    ul li:nth-child(3) {
	    	background-color: yellow;
	    }
	    ul li:nth-of-type(3) {
	    	font-size: 20px;
	    }
	    /* nth-child(n) 从0开始 每次加1 往后面计算 */
	    /* 选择所有孩子 */
	    ol li:nth-child(n) {
	    	font-weight: 700;
	    }
	    /* ol中序号是偶数的孩子 */
	    ol li:nth-child(even) {
	    	background-color: blue;
	    }
	    ol li:nth-child(2n) {
	    	font-size: 30px;
	    }
	    /* ol中序号是奇数的孩子 */
	    ol li:nth-child(odd) {
	    	background-color: gray;
	    }
	    ol li:nth-child(2n+1) {
	    	font-size: 20px;
	    }
	    /* nth-child(n) 会把所有盒子都排序号 执行是先看nth-child 再看前面的 div */
	    /* 执行时发现第一个盒子不是div 所以不执行 */
	    section div:nth-child(1) {
	    	background-color: red;
	    }
	    /* nth-of-type(n) 会把指定元素的盒子排序号 执行是先看 指定元素div 再看 序号n */
	    section div:nth-of-type(1) {
	    	background-color: red;
	    }
	</style>
</head>
<body>
<h3>CSS3新增结构伪类选择器</h3>
    <ul>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    	<li>6</li>
    	<li>7</li>
    	<li>8</li>
    	<li>9</li>
    </ul>
    <ol>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    	<li>6</li>
    	<li>7</li>
    	<li>8</li>
    	<li>9</li>
    </ol>
    <section>
    	<p>1</p>
    	<div>2</div>
    	<div>3</div>
    </section>
</body>

2.1.3 CSS3伪元素选择器

<head>
	<style type="text/css">
        .div1 {
	    	width: 100px;
	    	height: 100px;
	    	background-color: pink;
	    }
	    .div1::before {
            /* content 必写 */
	    	content: '你';
	    	background-color: yellow;
	    }
	    .div1::after {
	    	content: '6';
	    	background-color: white;
	    }
	</style>
</head>
<body>
    <h3>CSS3伪元素选择器</h3>
    <div class="div1">好</div>
</body>

2.2 CSS3盒子模型

<head>
	<style type="text/css">
        .div2 {
	    	width: 100px;
	    	height: 100px;
	    	background-color: pink;
	    	padding: 10px;
	    	margin: 5px;
	    	border: 2px solid black;
	    	/* 盒子大小为 width+padding+border */
	    	box-sizing: content-box;
	    }
	    .div3 {
	    	width: 100px;
	    	height: 100px;
	    	background-color: pink;
	    	padding: 10px;
	    	margin: 5px;
	    	border: 2px solid black;
	    	/* 盒子大小为width */
	    	box-sizing: border-box;
	    }
	</style>
</head>
<body>
    <h3>CSS3伪元素选择器</h3>
    <div class="div1">好</div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

2.3 CSS3图片模糊处理

<head>
	<style type="text/css">
        img {
	    	/* 数值越大越模糊 */
	    	filter: blur(5px);
	    }
	</style>
</head>
<body>
    <h3>CSS3图片模糊处理</h3>
    <img src="images/img.jpg" alt="">
</body>

2.4 calc计算盒子宽度

<head>
	<style type="text/css">
        .div4 {
	    	width: calc(100% - 300px);
	    	height: 100px;
	    	background-color: pink;
	    }
    </style>
</head>
<body>
    <h3>计算盒子宽度</h3>
    <div class="div4"></div>
</body>

2.5 CSS3过渡

<head>
	<style type="text/css">
        .div5 {
	    	width: 100px;
	    	height: 100px;
	    	background-color: pink;
	    	/*transition: 变化属性 花费时间 运动曲线 何时开始*/
	    	/*多个变化属性用逗号分隔*/
	    	/*全部属性变化,变化属性写all*/
	    	transition: width .5s ease .5s, height .5s ease .5s;
	    }
	    .div5:hover {
	    	width: 200px;
	    	height: 200px;
	    }
	</style>
</head>
<body>
    <h3>CSS3过渡</h3>
    <div class="div5"></div>
</body>

3 上传网站

 

4 总结

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		header {
			width: 100%;
			height: 50px;
			background-color: rgb(151, 178, 83);
			border-radius: 10px;
			text-align: center;
			line-height: 50px;
			margin: 10px;
		}
		nav {
			width: 100%;
			height: 50px;
			background-color: rgb(151, 178, 83);
			border-radius: 10px;
			text-align: center;
			line-height: 50px;
			margin: 10px;
		}
		article {
			float: left;
			width: 75%;
			height: 100px;
			background-color: rgb(151, 178, 83);
			border-radius: 10px;
			text-align: center;
			margin: 10px;
		}
		section {
			width: 100%;
			height: 25px;
			background-color: rgb(201, 214, 177);
			border-radius: 10px;
			text-align: center;
			line-height: 25px;
		}
		aside {
			float: left;
			width: 20%;
			height: 100px;
			background-color: rgb(151, 178, 83);
			border-radius: 10px;
			text-align: center;
			margin: 10px;
		}
		footer {
			float: left;
			width: 100%;
			height: 50px;
			background-color: rgb(151, 178, 83);
			border-radius: 10px;
			text-align: center;
			margin: 10px;
		}
		video {
			width: 100%;
		}
		li {
			list-style: none;
		}
		input::placeholder {
			color: orange;
		}
		/* 必须是input 但同时具有 value 这个属性 */
		input[value] {
			color: pink;
		}
		/* 必须是input 但同时具有 value 值等于 “请输入密码” */
		input[value="请输入密码"] {
			color: orange;
		}
		/* 必须是input 但同时具有 value 值以 “请输入” 开头*/
		input[value^="请输入"] {
			font-size: 20px;
		}
		/* 必须是input 但同时具有 value 值以 “用户名” 结尾 */
		input[value$="用户名"] {
			font-weight: 600;
		}
		/* 必须是input 但同时具有 value 值含有 “用” */
		input[value*="用"] {
			font-style: italic;
		}
		/* ul中第一个孩子 */
	    ul li:first-child {
	    	background-color: orange;
	    }
	    ul li:first-of-type {
	    	font-size: 20px;
	    }
	    /* ul中最后一个孩子 */
	    ul li:last-child {
	    	background-color: red;
	    }
	    ul li:last-of-type {
	    	font-size: 20px;
	    }
	    /* ul中第三个孩子 */
	    ul li:nth-child(3) {
	    	background-color: yellow;
	    }
	    ul li:nth-of-type(3) {
	    	font-size: 20px;
	    }
	    /* nth-child(n) 从0开始 每次加1 往后面计算 */
	    /* 选择所有孩子 */
	    ol li:nth-child(n) {
	    	font-weight: 700;
	    }
	    /* ol中序号是偶数的孩子 */
	    ol li:nth-child(even) {
	    	background-color: blue;
	    }
	    ol li:nth-child(2n) {
	    	font-size: 30px;
	    }
	    /* ol中序号是奇数的孩子 */
	    ol li:nth-child(odd) {
	    	background-color: gray;
	    }
	    ol li:nth-child(2n+1) {
	    	font-size: 20px;
	    }
	    /* nth-child(n) 会把所有盒子都排序号 执行是先看nth-child 再看前面的 div */
	    /* 执行时发现第一个盒子不是div 所以不执行 */
	    section div:nth-child(1) {
	    	background-color: red;
	    }
	    /* nth-of-type(n) 会把指定元素的盒子排序号 执行是先看 指定元素div 再看 序号n */
	    section div:nth-of-type(1) {
	    	background-color: red;
	    }
	    .div1 {
	    	width: 100px;
	    	height: 100px;
	    	background-color: pink;
	    }
	    .div1::before {
	    	/* content 必写 */
	    	content: '你';
	    	background-color: yellow;
	    }
	    .div1::after {
	    	content: '6';
	    	background-color: white;
	    }
	    .div2 {
	    	width: 100px;
	    	height: 100px;
	    	background-color: pink;
	    	padding: 10px;
	    	margin: 5px;
	    	border: 2px solid black;
	    	/* 盒子大小为 width+padding+border */
	    	box-sizing: content-box;
	    }
	    .div3 {
	    	width: 100px;
	    	height: 100px;
	    	background-color: pink;
	    	padding: 10px;
	    	margin: 5px;
	    	border: 2px solid black;
	    	/* 盒子大小为with */
	    	box-sizing: border-box;
	    }
	    img {
	    	/* 数值越大越模糊 */
	    	filter: blur(5px);
	    }
	    .div4 {
	    	width: calc(100% - 300px);
	    	height: 100px;
	    	background-color: pink;
	    }
	    .div5 {
	    	width: 100px;
	    	height: 100px;
	    	background-color: pink;
	    	/*transition: 变化属性 花费时间 运动曲线 何时开始*/
	    	/*多个变化属性用逗号分隔*/
	    	/*全部属性变化,变化属性写all*/
	    	transition: width .5s ease .5s, height .5s ease .5s;
	    }
	    .div5:hover {
	    	width: 200px;
	    	height: 200px;
	    }
	</style>
</head>
<body>
	<h3>HTML5新增语义化标签</h3>
	<header>头部标签</header>
	<nav>导航栏标签</nav>
	<article>
		<p>内容标签</p>
		<section>某个区域</section>
	</article>
	<aside>侧边栏标签</aside>
	<footer>尾部标签</footer>

    <h3>HTML5新增多媒体标签</h3>
    <video src="media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster="images/mi9.jpg"></video>

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

    <h3>HTML5新增input类型</h3>
    <form action="">
    	<ul>
    		<li>邮箱:<input type="email"></li>
    		<li>网址:<input type="url"></li>
    		<li>日期:<input type="date"></li>
    		<li>时间:<input type="time"></li>
    		<li>数量:<input type="number"></li>
    		<li>手机号码:<input type="tel"></li>
    		<li>搜索:<input type="search"></li>
    		<li>颜色:<input type="color"></li>
    		<li><input type="submit" value="提交"></li>
    	</ul>
    </form>

    <h3>HTML新增的表单属性</h3>
    <form action="">
    	<input type="search" name="sear" required="required" placeholder="请输入" autofocus="autofocus" autocomplete="off">
    	<input type="file" name="" id="" multiple="multiple">
    	<input type="submit" name="" value="提交">
    </form>

    <h3>CSS3新增属性选择器</h3>
    <input type="text" value="请输入用户名">
    <input type="text" value="请输入密码">
    <input type="text" value="用户名">

    <h3>CSS3新增结构伪类选择器</h3>
    <ul>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    	<li>6</li>
    	<li>7</li>
    	<li>8</li>
    	<li>9</li>
    </ul>
    <ol>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    	<li>6</li>
    	<li>7</li>
    	<li>8</li>
    	<li>9</li>
    </ol>
    <section>
    	<p>1</p>
    	<div>2</div>
    	<div>3</div>
    </section>

    <h3>CSS3伪元素选择器</h3>
    <div class="div1">好</div>

    <h3>CSS3盒子模型</h3>
    <div class="div2"></div>
    <div class="div3"></div>

    <h3>CSS3图片模糊处理</h3>
    <img src="images/img.jpg" alt="">

    <h3>计算盒子宽度</h3>
    <div class="div4"></div>

    <h3>CSS3过渡</h3>
    <div class="div5"></div>
</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值