复习
基本知识
标准的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">