HTML_基础应用

HTML

&nbsp表示空格

特殊字符格式为&加上转移

锚链接

过程：1.需要一个锚标记

2.跳转到标记

点击

按钮

value显示按钮的值

type类型:

button为普通按钮

image为图片按钮

submit为提交按钮

reset重置

简单验证

邮箱:

URL:

数字

进度条：

搜索框：

表单初级验证

账号：

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.最简单的

//结构

//

asdsa



p1




p2




p3





• li1


• li2


• li3





p7




p8





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背景设置




















3盒子模型

3.1什么是盒子模型

margin:外边距

padding：内边距

border：边框

4.2边框

margin：0//上下左右

margin：0 1px//上下和左右

margin：0 0 0 0//上下左右

顺时针旋转

JS

1.juqrey

juqrey的使用公式：$(selector).ation()