HTML_基础应用
HTML
 表示空格
特殊字符格式为&加上转移
锚链接
过程：1.需要一个锚标记
2.跳转到标记
<a href="#top">点击</a>
按钮
<input type="button" value="按下跳转" name="btn1">
value显示按钮的值
type类型:
button为普通按钮
image为图片按钮
submit为提交按钮
reset重置
简单验证
<p>邮箱:<input type="email" name="emali"></p>
<p>URL:<input type="url" name="url"></p>
<p>数字<input type="number" name="number" step="10" max="100" min="0"></p>
<!-- 滑动块-->
<p>进度条：
<input type="range" min="0" max="100">
</p>
<!-- 搜索框-->
<p>搜索框：
<input type="search" name="sear1"></p>
表单初级验证
<!-- placeholder="账号不超过11位"提示信息 -->
<!-- required 非空判断-->
<!-- pattern 正则表达判断-->
<p>账号：<input type="text" name="username" placeholder="账号不超过11位" required></p>
CSS
1.css入门
如何学习：
1.css是什么
2.css怎么用
3.css选择器
4.美化网页
5.盒子模型
6.浮动
7.定位
8.网页动画
1.1什么是css
层叠样式表Cascading Stype Sheet
CSS表现
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动。。。
1.2快速入门
CSS的优势：
1、内容和表现分离
2、网页结构变现统一，可以实现复用
3、样式十分丰富
4、建议使用独立于html的css文件
5、利用SEO，容易被搜索引擎接录~
VUE：前端框架
1.3css的三种导入方式
1.行内样式：写在标签的里边，添加一个style属性写样式
2.内部样式：写在html内
3.外部样式：使用导入的方式获取css
优先级：1>2>3
就近原则。这三个中一定是行内样式优先级最高，其次内部样式和外部样式就看谁更近，谁写在最上面使用谁。
2.选择器
作用选择页面上的一个或某一些元素
2.1基本选择器
1.标签选择器
p{....} h1{....}
2.类选择器//一个标签可以有多个类。可以属于多个类
.class{....} .btn1{....}
3.id选择器
格式:#名称{....}//id必须保证全局唯一
优先级：id选择器>类选择器>标签选择器
不遵循就近原则
2.2层次选择器
1、后代选择器：在某个元素的后面
/*后代选择器*/
body p{
background: azure;
}
//会选择body后面所有！所有的p标签
2、子选择器：一代。只取下一代。
/*子选择器*/
body>p{
background: cyan;
}
//只会选择body下面一层的p标签只会选择一层。
3、相邻兄弟选择器：
/*相邻兄弟选择器*/
.ac + p{
background: cyan;
}
//只会选择相邻的下一个p标签，对下不对上。也不包括自己。只有一个
4、通用选择器
/* 通用选择器*/
.ac~p{
background: cyan;
}
2.3结构 伪类选择器
1.最简单的
//结构
<body>
//<ul>asdsa<ul>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li> li1</li>
<li> li2</li>
<li> li3</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
<!-- 选择ul下的第一个li标签-->
ul li:first-child{
background: blueviolet;
}
/* 选择ul下的最后一个标签*/
ul li:last-child{
background: blue;
}
/*选中p1标签：定位到父元素，选择当前的第一个元素
选择当前p标签的父元素，选中父元素的第一个标签*/
p:nth-child(1){
color: brown;
background: cyan;
}
//而且选中的必须是p标签才会生效，如果第一个标签不是p标签是不会生效的。
3.类型选
/* 按照类型选择*/
p:nth-of-type(1){
color: brown;
background: cyan;
}
2.4属性选择器（常用）
a[class="links]"//选中a标签中class类型中有links的标签
a[id=first]//选中a标签中id为first的标签
2.5背景设置
<style>
div{
width: 400px;
height: 550px;
border: 1px solid red;
background-image: url("../lib/image/1.jpg") ;
}
.div1{
}
.img1{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="div1" >
<img src="../lib/image/1.jpg" alt="" class="img1">
</div>
<div class="div2">
<img src="../lib/image/1.jpg" alt="" class="img1">
</div>
<div class="div3">
<img src="../lib/image/1.jpg" alt="" class="img1">
</div>
3盒子模型
3.1什么是盒子模型
margin:外边距
padding：内边距
border：边框
4.2边框
margin：0//上下左右
margin：0 1px//上下和左右
margin：0 0 0 0//上下左右
顺时针旋转
JS
1.juqrey
juqrey的使用公式：$(selector).ation()
