前端知识点复习day01

前端小君君

于 2020-04-21 16:14:02 发布

阅读量121

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/xsj_boke/article/details/105633612

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

复习

基本知识

标准的html5文档发布时间为2014年
标签一般为双标签和单标签
<html>标签整个文档的根标签
<head>一般说明html的页面信息，不直接显示在页面上 meta charset='utf-8'告知浏览器，现在文档使用的编码<title>网页的标题
<body>一般页面的内容，直接显示在网页上

常用html标签

标题标签：h1/h2/h3/h4/h5/h6 从1到6字体从大到小
段落标签：p。在页面上直接写空格或者是分行是不起效果的必须通过标签或者是css样式修改
照片标签：img（jpg/gif/png）。src属性是图片地址
列表标签：其中实质是css中的list-style-type的取值内容改变
1、无序列表ul>li;ul是父元素标签，li是子元素标签
2、有序列表ol>li;ol是父元素标签，li是子元素标签

链接标签：a标签，实现页面的跳转 href属性跳转页面的路径
1、页面外部的跳转：href中填写网络地址/路径
2、页面内部的跳转：href中填写内部内容的id名称

	<a href="#content1">第一部分内容</a>
	<a href="#content2">第二部分内容</a>
	<a href="#content3">第三部分内容</a>
	<p id="content1">第一部分内容</p>
	<p id="content2">第二部分内容</p>
	<p id="content3">第三部分内容</p>

容器标签：div标签
表单标签：from标签属性：action：将表单的数据提交到什么地址 method提交的方法 get/post
get方法：将表单的数据直接放置到连接地址上，可以直接看的到，不安全但是效率高（搜索的请求就可以用get方法）
post方法：表单数据放置到请求的body里面，不直接显示，安全，但效率比较低，可以表单数据提交的比较大例如图片的提交（账号的登录什么的就可以用post方法）
```
<form action="https://www.baidu.com/s" method="get">
	<input type="text" name="wd" placeholder="请输入搜索的内容" />
	<input type="submit" value="搜索" />
</form>
```
输入框标签：input 属性：type：定义输入标签的类型（text、password、submit），
name:提交数据的名字，value：提交数据的输入框的值，placeholder：提示信息（预置文字）
自定义标签：html5可以自定义标签

滤镜操作

css的滤镜属性

	<style type="text/css">
	img{
		width:400px;
		height:auto;
		display: block;
		margin: 0 auto;
		/*过渡效果*/
		transition: all 3s;
	}
	img:hover{
		-webkit-filter:grayscale(0);
	}
	.img1{
			/*滤镜属性
			*grayscale：设置灰度，1是百分之百，0是百分之0（0就是正常颜色）
			*/
		-webkit-filter:grayscale(1);	
	}
	.img2{
		/*滤镜属性
			*brightness():亮度;默认值是1，0是关灯之后的结果，2是曝光的效果
			*/
		-webkit-filter:brightness(2);
	}
	.img3{
		/*滤镜属性
			*sepia:褐色属性;1是百分之百褐色，正常为0
			*/
			-webkit-filter:sepia(1);
	}
	.img4{
		/*滤镜效果
		* 模糊度：blur单位像素
		*/
		-webkit-filter:blur(5px);
	}
	.img5{
		/*滤镜效果
		* 对比度：contrast：正常就是1，（2，3,4,5黑的更黑，白的更白），如果0就没有任何对比度，变成灰色
		*/
		-webkit-filter:contrast(5);
	}
	.img6{
		/*滤镜效果
		* 饱和度：saturate：正常就是1，（2，3,4,5更饱和），如果0就没有任何对比度，变成灰色
		*/
		-webkit-filter:saturate(2);
	}
	.img7{
		/*滤镜效果
		* 胶片底色效果
		*/
		-webkit-filter:invert(1);
	}
	.img8{
		/*滤镜效果
		* 色相旋转 0和360deg为正常
		*/
		-webkit-filter:hue-rotate(90deg);
	}
	.img9{
		-webkit-filter:blur(10px) grayscale(1);
		transition: all 15s;
	}
	.img9:hover{
		-webkit-filter:blur(1px) grayscale(1);
	}
</style>
	<img class="img1" src="犬夜叉.jpg">
	<img class="img2" src="犬夜叉.jpg">
	<img class="img3" src="犬夜叉.jpg">
	<img class="img4" src="犬夜叉.jpg">
	<img class="img5" src="犬夜叉.jpg">
	<img class="img6" src="犬夜叉.jpg">
	<img class="img7" src="犬夜叉.jpg">
	<img class="img8" src="犬夜叉.jpg">
	<img class="img9" src="犬夜叉.jpg">

前端小君君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端知识点复习day01

复习基本知识标准的html5文档发布时间为2014年标签一般为双标签和单标签<html>标签整个文档的根标签<head>一般说明html的页面信息，不直接显示在页面上 meta charset='utf-8'告知浏览器，现在文档使用的编码<title>网页的标题<body>一般页面的内容，直接显示在网页上常用html标签标题标签...
复制链接

扫一扫

专栏目录