入坑前需要了解的知识点
能够说出网页的基本组成
- 前端的工作是开发网页,那什么是网页呢?
- 网站是指的因特网上根据一定规则,使用HTML等制作的,用于展示特定内容相关的网页集合。
- 网页是网站中的一页,通常是HTML格式的文件,它要通过浏览器来阅读。
- 网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成,通常我们看到的网页常以.htm或.html后缀结尾的文件,因此将其俗称为HTML文件。
- 什么是HTML?
- HTML指的是超文本语言,他是用来描述网页的一种语言
- HTML不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签
- 所谓的超文本有两层含义
- 它可以加入图片、声音、视频、动画、多媒体等内容(超越了文本限制)
- 它可以从一个文件跳转到另一个文件,与世界各地主机的文件链接
- 网页的形成?
- 网页是由网页元素组成的,这些元素是利用HTML标签描述出来的,然后通过浏览器解析来显示给用户。
- 网页总结
- 网页是由图片、视频、文本、音频等元素组成的,其实就是一个HTML文件
- 网页生成制作,有前端人员进行书写HTML文件,然后用浏览器打开解析渲染,最终我们就能看见网页了。
能够说出常用的浏览器
- 浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Poera,平称五大浏览器。
- 浏览器内核(渲染引擎):负责网页内容、整理讯息、计算网页显示方式并显示网页。
| 浏览器 | 内核 | 备注 |
| --- | --- |---|
|IE | Trident | IE、百度 |
|firefox | Gecko | 火狐浏览器内核 |
|Safari | Webkit | 苹果浏览器内核 |
|chrome/Opera | Blink | 谷歌和跑欧朋浏览器内核,其实Blink是Webkit的分支 |
能够说出Web标准的三大组成部分
- Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合,W3C(万维网联盟)是国际最著名的标准化组织。
- 为什么需要Web标准?
- 浏览器不同,他们显示页面或者排版就会有些许差异。开发者常常需要为多版本的开发而艰苦的工作。
- 遵顼Web标准除了可以让不同的开发人员写出的页面更加标准,更统一外,还有一下的优点。
- 让Web的发展前景变得更广阔
- 内容能被更广泛的设备访问
- 更容易被搜索引擎搜索
- 减低网站流量费用
- 使网站更容易维护
- 提高页面的浏览速度
- Web标准的构成。
标准 | 说明 |
---|
结构 | 结构用于对网页元素进行整理和分类,现阶段主要学的是HTML |
表现 | 表现用于设置网页元素的版式、颜色、字体等外观样式,主要是指css |
行为 | 行为是指网页模型的定义及交互的编写,现阶段主要学的是JavaScript |
HTML标签
说出HTML标签的书写注意规范
HTML的语法规范
- 基本语法概述
- HTML标签是由尖括号包围的关键词,例如
<html>
- HTML通常是成对出现的,例如
<html></html>
,我们称为双标签。标签中的第一个标签我们称为开始标签,第二标签是结束标签。
- 有些特殊的标签必须是单标签(极少数情况下),例如
<br />
,我们称为单标签。
- 标签的关系
包含关系
<head>
<title></title>
</head>
并列关系
<p></p>
<div></div>
HTML基本结构标签
- 第一个HTML网页
- 每一个网页都会有一个基本的结构标签(也成为骨架标签),页面内容也是在这些基本标签上书写,HTML页面也称为HTML文档
骨架标签
<html>
<head>
<title>标题</title>
</head>
<body>
存放内容
</body>
<html/>
- html是页面中最大的标签,我们称为跟标签
- 文档头部,注意在head中我们必须要设置的标签是title标签
- 文档的标题,让页面有一个属于自己的网页标签
- 文档主体,元素包含文档的所有内容,页面内容基本都是放在body里面。
HTML常用标签
- 文档类型声明标签
<!DOCTYPE html>
文档类型声明标签,作用就是告诉他们浏览器使用哪种HTML版本来显示网页。这句话的意思是,当前页面采取的是HTML的页面来显示的。
<!DOCTYPE>
声明位于文档中最前面的位置,处于html标签之前。
<!DOCTYPE>
不是一个HTML标签,它只是文档类型声明标签。
<html lang = en >
,lang用来定义当前文档显示的语言
- en定义语言种类为英文
- zh-CN定义语言种类为中文
- fr定义语言种类为法语
- 简单来说就是en为英文文档,zh-CN就是中文文档,但是这两个并不影响显示英文或者中文,这个属性对浏览器是有作用的,翻译功能的切换。
<meta chartset = 'UTF-8' />
字符集,字符集是多个字符的集合,以便计算机能够识别和存储各类文字,在head标签内,可以通过meta标签的chartset属性来规定HTML文档应该使用哪种字符编码。
- chartset常用的值有:GB2312(简体中文)、BIG5(繁体中文)、GBK(简繁体)和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。
- meta标签规定的字符集是必须要写的,否则可能引起乱码的情况,一般情况下统一使用UTF-8,尽量携程标准的UTF-8,不要写成utf-8或UTF8
- 标题标签
<h1>-<h6>
- 段落标签和换行标签
- 在网页中,要把文字有条理的显示出来,就需要将这些文字分段显示。在HTML标签中,
标签用于定义段落,它可以将网页分成若干个段落。
- 若需要文本强制换行显示,可以使用换行标签
- 文本格式化标签
- 在网页中,有时需要为文本设置粗体、斜体和下划线等效果,使文本以特殊的方式显示。
语义 | 标签 | 说明 |
---|
加粗 | <strong></strong> 或<b></b> | 推荐使用<strong> 标签,语义更强烈 |
倾斜 | <em></em>或<i></i> | 推荐使用<em> ,语义更强烈 |
删除线 | <del></del> 或<s></s> | 推荐使用<del> ,语义更强烈 |
下划线 | <ins></ins>或<u><u> | 推荐使用<ins> ,语义更强烈 |
<div>
和<span>
标签 ,<div>
和<span>
是没有语义的,它们就是一个盒子,用来装内容的。
- 图像标签介绍
- 标签介绍
<img src='图像路径URL' />
属性 | 属性值 | 说明 |
---|
src | 图片路径 | 必须属性,图像路径 |
alt | 文本 | 在图像不能成功加载时,显示 |
title | 文本 | 提示文本,鼠标移到图片上时,显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框线的粗细 |
- 超链接
<a />标签
,作用是从一个页面到另一个页面,既可以跳转外部链接,也可以跳转至内部链接,例如,两个属性的作用如下
- 链接分类
- 外部链接
<a href="跳转目标url" target="目标窗口的弹出方式"></a>
- 内部链接
<a herf="index.html">跳至首页</a>
- 空连接
<a herf="#">空链接</a>
- 下载链接
<a herf="img.zip">下载</a>
如果href里面地址是一个文件或压缩包则会下载这个文件
- 网页元素的链接
<a herf="http://www.baidu.com"><img src="img.png" /></a>
点击这个图片元素就会跳转到百度首页,文本、图片、视频、音频等都可以加
- 锚点链接,点击我们的链接,可以快速定位到页面中的某一个位置。用法:第一步,在链接href中设置属性值为#+名字,例如
<a href="#one">第一季</a>
;第二步,找到目标位置标签,在里面添加一个id属性= 刚刚设置的名字,如<h3 id='two'>第二季介绍</h3>
| 属性 | 作用 |
| --- | --- |
| href | 用于超链接目标的url,必须属性 |
| target | 用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开 |
特殊字符
- 在HTML页面中,一些特俗的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代
特殊符号 | 描述 | 字符代码 |
---|
| 空格符 | |
< | 小于号 | < |
大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
° | 摄氏度 | ° |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2上标 | ² |
³ | 立方3上标 | ³ |
© | 版权 | &copr; |
® | 注册商标 | ® |
表格标签
- 表格的作用;主要用于显示、展示数据;它可以让数据展示的非常规整。
- 表格的基本语法
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<table></table>
用于定义表格的标签;为了更好的表示表格的语义化,可以将表格分为表格头部和表格主体两大部分。<thead>
表示表格头部部分,<tbody>
代表表格主体部分;<tr></tr>
行标签;<th></th>
标题标签,<td></td>
单元格的标签
- 常用的表格属性
属性名 | 属性值 | 描述 |
---|
align | left、right、center | 规定表格相对周围元素的对齐方式 |
border | 1、"" | 规定表格是否有边框,默认为"",表示没有边框 |
width | 像素或者百分比 | 规定表格的宽度 |
cellpadding | 像素值 | 规定单元格边缘border和内容之间的距离,默认是1像素 |
cellspacing | 像素值 | 规定单元格之间的距离,默认是2像素 |
height | 像素 | 规定单元格的高度 |
- 合并表格的单元格
- 合并表格的方式
- 跨行合并:rowspan = "合并行单元格的个数"
- 跨列合并:colspan= "合并列的单元格个数"
列表标签
- 无序列表
<ul><li></li></ul>
- 有序列表
<ol><li></li></ol>
- 自定义列表
<dl>
<dt>名词</dt>
<dd>名词解释</dd>
</dl>
- 在HTML标签中
<dl>
标签用于定义描述列表或(定义列表),该标签会与<dt>
(定义项目/名字)和<dd>
(描述每一个项目/名字)一起使用。
- 列表总结
标签名 | 定义 | 说明 |
---|
<ul></ul> | 无序标签 | 里面只能包含li,没有顺序,使用较多,li里可以包含任何标签 |
<ol></ol> | 有序列表 | 里面只能包含li,有顺序,使用相对较少,li里面可以包含任何标签 |
<dl></dl> | 自定义列表 | 里面只能包含dt和dd,dt和dd里面可以包含任何标签 |
表单标签
- 表单标签的目的是为了收集用户的信息,在HTML中,一个完整的表单通常由表单域、表单控件(也成为表单元素)和提示信息3个部分组成。
- 在HTML中,
<form>
标签会定义表单域,以实现用户信息的收集和传递。<form>
表单会把它范围内的表单元素信息提交给服务器。
<form action="utl地址" method="提交方式" name="表单域名称">
各种表单控件
</form>
属性 | 属性值 | 作用 |
---|
action | url地址 | 用于指定接受并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其值为get或者post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
-
表单控件(表单元素)
- input输入表单元素,用于手机用户信息,其中包含了type属性,输入不同的字段可以拥有很多形式的控件类型(可以是文本输入框、复选框、单选按钮、按钮);
- type属性的属性值如下
| 属性值 | 描述 |
| --- | --- |
| button | 定义可以点击的按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和浏览按钮,供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image |定义图像形式的提交按钮 |
| password | 定义密码字段,该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮,提交按钮会把表单数据提交到服务器 |
| text |定义单行的输入字段,用户可以在其中输入字段 |
-
input标签中的常用属性
属性 | 属性值 | 描述 |
---|
name | 由用户定义 | 定义input元素的名称,在定义单选按钮和复选框时,必须给input表单控件添加一样的name值 |
value | 由用户定义 | 规定input元素的值 |
checked | checked | 规定input元素首次加载时应被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
<lable>
标签为input元素定义标注(标签);当点击lable标签时,input标签鼠标会自动聚焦;语法如下
<label for="sex">男</label>
<input id="sex" type="radio" name="sex" />
核心:input中的id属性值等于for属性值。
- select下拉表单元素,语法如下
- select中必须包含至少一个option标签
- option标签中的selected属性 = "selected"时,表示当前项默认选中
<form>
<select>
<option selected="selected" value="one">选项一</option>
<option value="two">选项二</option>
</select>
<form>
//选中选项一时,返回值是one,选中选项二时,返回值是two
- textarea表单元素,用于输入较多的多行文本。语法如下
<form>
<textare>
文本
</textarea>
</form>
相对路径的三种形式
-
路径介绍
| 相对路径 | 符号 |说明|
| --- | --- | ---|
| 同一级路径 | |图像文件位于HTML文件同一级|
|下一级路径|/|图像位于HTML文件的下一级|
|上一级路径|../|图像位于HTML文件的上一级|
-
绝对路径:是指目录下的绝对路径,直接到达目标位置,通常是从盘符开始的路径,例如,"D:\web\logo.png"或完整的网络地址,"www.baidu.com/images/logo…"
CSS层叠样式表
css的简介
- css是层叠样式表的简称,主要使用场景就是美化网页、页面布局的,css是一种标记语言,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
css语法规范
- css规则主要由两个部分构成:选择器以及一条或者多条声明
- 选择器是用于指定css样式的HTML标签,花括号内是对该对象设置的具体样式
- 属性和属性值是以键值对的形式出现,属性是对指定的对象设置的样式属性;例如文本大小、字体颜色;属性和属性值之间用英文的
:
分开,多个属性之间用英文的;
分开。
- css代码风格
CSS选择器
css基础选择器
- 选择器的作用是根据不同的需求把不同的标签选择出来,就是选择标签用的。
- 在css中,可以根据选择器的类型把选择器分为基础选择器和符合选择器,符合选择器就是建立在基础选择器之上,对基本选择器进行组合形成。
- 基础选择器包括:标签选择器、类选择器、id选择器和通配符选择器
- 类命名规则如下
类命 | 对应的结构类名 |
---|
header | 头部 |
content/container | 内容 |
footer | 尾部 |
nav | 导航栏 |
sidebar | 侧栏 |
column | 栏目 |
left/center/right | 左中右 |
loginbar | 登陆条 |
logo | 标志 |
banner | 广告 |
main | 页面主体 |
hot | 页面热点 |
news | 新闻 |
download | 下载 |
subnav | 子导航 |
menu | 菜单 |
submenu | 子菜单 |
CSS字体属性
- css使用font-family属性定义文本的字体系列
p {
font-family: "微软雅黑",Arial;
}
div {
font-family: "Microsoft Yahei";
}
- 各种字体之间必须使用英文的逗号分隔开。
- 一般情况下,多个单词组成的字体需要在单词之间用间隔分隔开,并且用英文的引号包含单词组。
- 尽量使用系统默认自带的字体,保证在任何浏览器中都能正常的显示。
- 多个字体的,浏览器会由左到右优先显示,如果第一个字体没有,则显示下一个;以此类推。
css的复合选择器
- 复合选择器可以更准确、更高效的选择目标元素,复合选择器由两个或者多个基础选择器,通过同的方式组合而成;通常的复合选择器包括:后代选择器、子元素选择器、并集选择器、伪类选择器等等。
后代选择器
- 后代选择器又称为包含选择器,可以选择父元素里面的子元素,语法就是外层标签写在
前面
,内城标签写在后面
,中间用空格
分隔,内层标签为外层标签的后代。
div p {
color: red;
}
子元素选择器(子选择器)
- 子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,简单李健就是只能选亲儿子元素。样式设置孙子及孙子以下是不会生效的。
- 语法是外层元素
>
内层亲儿子元素
<div class="ins">
<p>
你好
</p>
<div>
<p>换行</p>
</div>
</div>
.ins>p {
color:red;
}
并集选择器
- 并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。
- 语法;并集选择器是各选择器通过英文的
,
连接而成,任何形式的选择器都可以作为并集选择器的一部分。
div>p,ul>li {
color: red;
}
伪类选择器
- 伪类选择器用于向耨写选择器添加特俗的效果,比如给连接添加特殊效果、或选择第一个,第n个元素;伪类选择器最大的特点是用
冒号 :
表示,比如:hover
、:first-child
。
- 链接伪类选择器
-
a:link
;选择所有未被访问的链接。
a:visited
;选择所有已被访问的链接。
a:hover
;选择鼠标移上的链接。
a:active
;选择活动链接(鼠标按下未弹起的链接)
- 链接伪类选择器注意事项
- 为了确保生效,请按照LVHA的顺序声明:
:link
,:visited
,:hover
,:active
。口诀也可以用love hate来记。
:focus
伪类选择器;获取鼠标光标的表单
input:focus {
background: red;
}
css字体属性
css字体大小
p {
font-size: 16px;
}
- px(像素)是我们网页最常用的单位。
- 谷歌浏览器的文字默认大小为16px。
- 不同的浏览器,可能默认的字号大小不一样,我们给body设置一个默认的大小。例如body { font-size: 16px}
css字体粗细
- css使用font-weight属性设置文本字体的粗细。
p {
font-weight: bold;
}
属性值 | 描述 |
---|
normal | 默认值(不加粗) |
bold | 加粗 |
100-900 | 400等于normal,而700等同于bold,注意数字后面不能加符号 |
css文本属性
css文本装饰
- text-decoration属性规定添加到文本的修饰,可以给文本添加下划线、上划线、删除线等
p {
text-decoration: underline;
}
属性值 | 描述 |
---|
none | 没有装饰线,默认值 |
underline | 下划线 |
overline | 上划线 |
line-through | 删除线 |
css文本缩进
- text-indent属性用来指定文本第一行的缩进,通常是将段落的首行缩进。
p {
p {
text-indent: 15px;
}
div {
text-indent: 2em;
}
}
// em是一个相对单位,就是当前元素1个中文文字的大小。
行间距
- line-height属性用于设置行间的距离,可以控制文字与行之间的距离
css文本属性总结
属性 | 表示 | 注意点 |
---|
color | 文本颜色 | 我们通常用 十六进制 比如#ffffff |
text-align | 文本对齐 | 可以设定文字水平对齐方式 |
text-indent | 文本缩进 | 通常用于段落首行缩进2个字的距离 |
text-decoration | 文本修饰 | 添加下划线为underline,取消下划线为none,删除线为line-through |
line-heigt | 行间距 | 用于设置行与行之间的距离 |
css的引入方式
css的三种样式表
- 行内样式表(行内式),是在元素标签内部的style属性中设置css样式,适合简单的样式。
<div style="color:red;font-size:25px"></div>
- 内部样式表(嵌入式),是写在html内部,将所有的css单独放到一个style里面。
<style>
div {
color: red;
}
</style>
- 外部样式表(外链式);实际开发都是外部样式表,适合样式比较多的情况,核心是样式单独写到css文件中,之后把css文件引入HTML页面中。
<link rel="stylesheet" href="home.css">
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|
行内样式表 | 书写方便,权重高 | 结构样式混写 | 较少 | 控制一个标签 |
内部样式表 | 部分结构和样式分离 | 没有彻底分离 | 较多 | 控制一个页面 |
外部样式表 | 完成是心啊结构和样式相分离 | 需要引入 | 最多、吐血推荐 | 可控制多个页面 |
css的元素显示模式
块级元素
- 常见的块级元素
<h1>~<h6>
、<p>
、<div>
、<ul>
、<li>
等。
- 块级元素的特点
- 比较霸道,独占一行。
- 高度、宽度、外边距、以及内边距都可以控制。
- 宽度默认是容器(父级宽度)的100%。
- 是一个容器及盒子,里面可以放行内元素或者块级元素。
- 注意事项
- 文字类的元素内不能使用块级元素。
<p>
标签主要用于存放文字,因此<p>
里面不能放块级元素,特别是<div>
。
- 同理
<h1>~<h6>
也是文字标签,里面也不能放块级元素。
行内元素
- 常见的行内元素:
<a>
、<strong>
、<b>
、<i>
、<del>
、<s>
、<ins>
、<u>
、<span>
等。
- 行内元素的特点
- 相邻的行内元素在一行上,一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认的宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或者其他行内元素。
- 注意事项
- 链接里面不能再放链接
- 特殊情况链接
<a>
里面可以放在块级元素,但是给<a>
转换成块级元素最安全。
行内块元素
- 在行内元素中有几个特殊的标签
<img>
、<input>
、`。他们同时具有块级元素和行内元素的特点。
- 行内块元素的特点
- 和相邻的行内块元素及行内元素在一行上,但是他们之间会有空白间隙。一行可以显示多个。
- 默认宽度就是它本身内容的宽度。
- 宽高、行高、内外边距可以直接设置。
css的三大特性
层叠性
- 相同的选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突样式。
继承性
优先级
- 选择器相同,则执行层叠性(覆盖)
- 选择器不同,则根据选择器的权重执行。选择器权重如下表
选择器 | 选择器权重 |
---|
继承或者* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
id选择器 | 0,1,0,0 |
行内样式 | 1,0,0,0 |
!important | 无穷大 |
css背景图片
- 背景图片的复合写法
- background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置。
- 背景色半透明
- background:rgba(0,0,0,.3)
- 注意:背景半透明不会影响到内容。这是css3新增的属性,是IE9+版本浏览器才支持。
css盒子模型
css浮动
- 清除浮动的方法
-
额外标签法(隔墙法);额外标签法在浮动元素的末尾添加一个空标签,例如<div style="clear:both"></div>
- 优点:通俗易懂,书写方便。
- 缺点:添加许多无意义的标签,结构较差。
- 注意:添加的新标签必须是块级元素,否则不能清除浮动的影响。
-
父元素添加overflow属性,属性值为hidden、auto、scroll都可以。
-
:after
伪元素法,给父级元素添加。
- 优点:没有增加标签,结构更简单。
- 照顾低版本浏览器。
.clearfix:after {
content:'';
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
//IE6 7 专有
*zoom:1;
}
-
双伪元素清除元素,也是为父元素添加。
.clearfix:before,.clearfix:after {
content:'';
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
核心阴影
- box-shadow:h-shadow v-shadow blur spread color inset
值 | 描述 |
---|
h-shadow | 必需,水平阴影位置,允许负值。 |
v-shadow | 必需,垂直阴影位置,允许负值。 |
blur | 可选,模糊距离。 |
spread | 可选,阴影尺寸大小。 |
color | 可选,阴影的颜色。 |
inset | 可选,将外阴影改为内阴影。 |
css书写顺序
- 布局定位属性:
display
、position
、float
、clear
、visibility
、overflow
- 自身属性:
width
、height
、margin
、padding
、border
、background
- 文本属性:
color
、font
、text-decoration
、text-align
、vertical-align
、white-space
、break-word
- 其他属性:
content
、cursor
、border-radius
、box-shadow
、text-shadow
等等。
css定位
- 相对定位relative(重要)
- 相对定位的特点
- 他是相对于自己原来的位置来移动的。(移动位置的时候参照点是自己原来的位置)
- 原来在标准的位置继续占有,后面的盒子仍然以标准流的方式来对待它。(不脱离文档流,继续保留原来的位置),它最典型的应用是给绝对定位当爹的。
- 绝对定位absolute,绝对定位是元素在移动位置的时候,是相对于他的祖先元素
- 绝对定位的特点
- 如果没有祖先元素或祖先元素没有定位,则以浏览器为准定位。
- 如果祖先元素有定位(相对、绝对、固定),则以最近一级的有定位的祖先元素为参考点移动位置。
- 绝对定位不在占有原先的位置,脱离文档流。
- 固定定位fixed,固定于浏览器可视区域的位置。在浏览器页面滚动时元素的位置不会改变。
- 粘性定位sticky,粘性定位可以被认为时相对定位和固定定位的混合
- 语法:
div {position: ticky;top: 10px;}
- 特点:
- 以浏览器的可视窗口为参照点移动元素(固定定位的特点)。
- 粘性定位是占有原先的位置(相对定位的特点)。
- 必须添加
top
、bottom
、left
、right
其中的一个才会有效。
- 定位的拓展
定位模式 | 是否脱标(脱离文档流) | 参照点 |
---|
static静态定位 | 否(占有位置) | 不能使用边偏移 |
relative相对定位 | 否(占有位置) | 相对于自身位置偏移 |
position绝对定位 | 是(不占有位置) | 带有定位的父级元素 |
fixed固定定位 | 是(不占有位置) | 浏览器可视区 |
sticky粘性定位 | 否(占有位置) | 浏览器可视区 |
精灵图
- 精灵技术的目的:为了有效的减少服务器接受和发送请求的次数,提高页面的加载速度。
- 精灵图主要是针对背景图片使用,就是把多个小背景图片整合到一张大图片中。这个大图片我们称为sprites 精灵图或者雪碧图。
- 使用精灵图的核心:移动背景图片的位置,此时可以使用background-position,移动雪碧图到对应的位置即可。
- 精灵图的缺点:
- 图片文件还是比较大的。
- 图片本身放大缩小会失真。
- 一旦图片制作完毕,想要更换非常的发杂。于是便出现了一种技术,就是字体图标iconfont
字体图标
- 字体图标展示的是图标,但是本质属于字体。
- 字体图标的优点
- 轻量级:一个图标字体要比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少服务器的请求。
- 灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等。
- 兼容性:几乎支持所有的浏览器,请放心使用。
- 注意:字体图标并不能替代精灵技术,只是对工作中的图标部分技术的提升和优化。
css用户界面样式
鼠标样式cursor
属性值 | 描述 |
---|
default | 默认 |
pointer | 小手 |
move | 移动十字架 |
not-allowed | 禁止 |
轮廓线outline
- 给表单添加
outline:0
或者outline:none
;样式之后就可以去掉默认input表单点击后的蓝色边框线。
input {outline: none;}
- 如果需要点击以后改变input表单的边框线代码如下
input:focus {
border: 1px solid red;
}
防止拖拽文本域resize
<textarea> 你好</textarea>
textarea {
resize: none;
}
vertical-align属性的应用
- css的vertical-align属性使用场景;经常用于设置图片或者表单(行内块元素)和文字垂直对齐。但是它只对于行内块素或者行内元素有效。
vertical-align: baseline | top | middle | bottom
值 | 描述 |
---|
baseline | 默认。元素位置放在父级的基线上 |
top | 把元素的顶端与行中最高的元素的顶端对齐 |
middle | 把此元素的位置放置在父元素的中部 |
bottom | 把元素的底端与行中最低的元素的底端对齐 |
- 解决图片底部默认空白缝隙的问题
- 出现这个问题的原因是:图片底部会有一个空白间隙,原因是行内块元素和文字的基线对齐。主要解决办法有两种
- 给图片添加vertical-align:middle|top|bottom(提倡使用的)。
- 给图片转换成块级元素,
display:block
。
文字溢出省略号显示
// 单行文本溢出省略号显示
//1、先强制一行内显示文本
white-space: nowrap;(默认normal,自动换行)
//2、超出部分隐藏
overflow: hidden;
//3、文字用省略号替代超出部分
text-overflow: ellipsis;
// 多行文本溢出省略号显示,有较大的兼容性问题,适合于webkit浏览器或移动端(移动端大部分是webkit内核)
overflow: hidden;
text-overflow: elipsis;
//弹性伸缩盒子模型显示
display: -webkit-box;
//限制在一个块元素显示的文本行数
-webkit-line-clamp: 2;
//设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;
css重置样式表
*{margin:0;padding:0}em,i{font-style:normal}li{list-style:none}img{border:0;vertical-align:middle}button{cursor:pointer}a{color:#666;text-decoration:none}a:hover{color:#c81623}button,input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif}body{-webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}.hide,.none{display:none}.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}.clearfix{*zoom:1}
Emmet语法
- 快速生成HTML结构语法
- 如果想要生多个相同标签标签加上
*
个数就可以了;例如li*3就可以快速生成三个li标签。
- 如果有父子级关系的标签可以用
>
,例如ul>li就可以了。
- 如果是兄弟级关系的标签就可以用
+
,例如div+p。
- 如果要生成带有属性或者类的标签,直接写
.demo
或者#nav
加回车键就可以了。
- 如果想要标签类名带顺序可以使用
.demo$*5
即可。
- 如果想要生成的标签内部有内同可以用
{}
包含内容,例如.demo{hello word}
。
- 快速生成css样式
- 比如
w200
可以快速生成width: 200px
- lh20px可以快速生成
line-height: 20px
- ti2em可以快速生成
text-indent: 2em
HTML5的新特性
HTML新增的语义化标签
- HTML5的新增特性主要是针对以前的不足,增加了一些新的标签、新的表单和新的表单属性等。
标签元素 | 描述 |
---|
header | 头部标签 |
nav | 导航栏标签 |
article | 内容标签 |
section | 某个区域标签,可以理解为大号的div |
aside | 侧边栏标签 |
footer | 底部 |
HTML5新增的多媒体标签
属性 | 值 | 描述 |
---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后就自动播放 |
controls | | controls | | 如果出现该属性,则向用户显示控件,比如播放按钮 |
loop | loop | 自动循环播放 |
src | url | 播放MP3的地址 |
属性 | 值 | 描述 |
---|
autoplay | autoplay | 视频就绪就自动播放(谷歌添加muted来解决自动播放的问题) |
controls | controls | 视频播放控件 |
loop | loop | 播放完自动循环 |
preload | auto(预先加载视频) node(不预先加载视频) | 规定是否预加载播放该视频,如果设置了autoplay属性则该属性就会被忽略 |
poster | 图片src | 加载等待的画片图片 |
muted | muted | 静音播放 |
HTML5新增的input表单
- 必须配合form表单使用才有效果
| 属性值 | 说明 |
| --- | --- |
|
type="email"
|限制用户输入必须为邮箱类型 |
|type="url"
|限制用户输入必须为URL类型|
|type="date"
|限制用户输入必须为日期类型|
|type="time"
|限制用户输入必须为时间类型|
|type="month"
|限制用户输入必须为月类型|
|type="week"
|限制用户输入必须为周类型|
|type="number"
|限制用户输入必须为数字类型|
|type="tel"
|限制用户输入必须为手机号码|
|type="search"
|搜素框|
|type="color"
|生成一个颜色选择表单|
HTML5新增的表单属性
属性 | 值 | 说明 |
---|
required | required | 表单拥有该属性表示其内容不能为空,必填 |
palceholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
multiple | multiple | 可以多选文件提交 |
autocomplete | off/on | 当用户在字段开始输入时,浏览器基于之前输入过的值,聚焦后显示出在字段中填写的选项,同时加上name属性,并且提交必须成功的才可以哦 |
- 可以通过以下方式修改placeholder里面的字体颜色。
input::placeholder {
color: red;
}
css3的新特性
css3新增的选择器
属性选择器
- 属性选择器可以根据元素特定的特性来选择元素,这样就可以不用借助于类或者id选择器。
input[value] {
color: red;
}
input[type=submit] {
color: pink;
}
div[class^=icon] {
color: black;
}
div[class$=data] {
cursor: pointer;
}
div[class*=val] {
color: yellow;
}
结构伪类选择器
- 结构伪类选择器主要根据文档结构来选择元素,常用于父级选择器里面的子元素。
选择符 | 简介 |
---|
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中最后一个子元素E |
E:nth-child(n) | 匹配父元素中的第n个子元素E;n可以为even偶数,odd奇数 |
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E中的最后一个 |
E:nth-of-type(n) | 指定类型E中的第n个 |
公式 | 取值 |
---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15 20 |
n+5 | 从第五个开始一直到最后 |
- 注意:
- nth-child对父元素里面所有的孩子排序选择(序号是固定的),先找到第n个孩子看看是否和E匹配,如果不匹配则不生效。
- nth-of-type对父元素里面的指定元素今昔那个排序选择,先去匹配E,然后再根据E找到第n个孩子
伪元素选择器
- 伪元素选择器可以帮助我们利用css创建新标签元素,而不需要HTML标签,从而简化HTML结构。
选择符 | 简介 |
---|
::before | 再元素内部的最前面插入内容 |
::after | 在元素内部的最后面插入内容 |
- 注意
- before和after创建一个元素,但是属于行内元素。
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素。
- 语法:element::before{}。
- before和after必须有content属性。
- 伪元素和标签选择器一样权重为1。
CSS3的其他特性
css3滤镜 filter,将模糊或者颜色偏移等图形效果应用于元素。
- 语法:
filter: 函数()
;例如filter:blur(5px)模糊处理,blur数值越大越模糊。
css3 calc函数,声明css属性值时执行一些计算
- 语法:
width: calc(100% - 50px)
css3 过渡
- 过渡在css3中具有颠覆性,当元素从一个样式变换为另一个样式时为元素添加效果。
- 过渡动画:是从一个状态渐渐的过渡到另外一个状态。
- 可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持,但是不会影响页面布局。
- 我们现在经常和
:hover
一起搭配使用。
- 语法如下
transition: 要过渡的属性 花费的时间 运动曲线 何时开始
- 运动曲线有linear匀速、ease逐渐减速、ease-in加速、ease-out减速、ease-in-out先加速后减速。默认ease
- 如果想要写多个属性,利用逗号分割
transition: width .5s, height .5s
- 如果想要多个属性都变化可以用all
transition: all .5s
- 注意:谁做过渡就给谁加。
2D转换transform
转换(transform),可以实现元素的位移、旋转、缩放等效果,可以简单理解为变形。
动画(animation)
- 用keyframes定义动画
@keyframes 动画名称 {
0% {
width: 200px;
}
100% {
width: 400px;
}
}
- 0%和100%叫做动画序列
- 0%是动画的开始,100%是动画的结束。这样的规则就是动画序列。
- 在@keyframes中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使一种元素逐渐变化到另一种样式的效果,可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间,或用关键词from和to等同于0%和100%。
- 元素使用动画
div {
animation-name:move;
animation-duration:2s
}
属性 | 描述 |
---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写属性,除了animation-play-state属性 |
animation-name | @keyframes规定的动画名称。(必须的) |
animation-duration | 规定动画完成的持续时间,可以是秒(s)或者毫秒(ms) |
animation-timing-function | 规定动画的速度曲线,默认是ease |
animation-delay | 规定动画是合适开始 |
animation-iteration-count | 规定动画被播放的次数,默认是1,值还可以是infinite(无限循环播放) |
animation-direction | 规定动画是否在下一周期逆向播放,默认是normal,值还可以是alternate(逆向播放) |
animation-play-state | 规定动画初始状态是运行还是暂停,默认是running,暂停时paused |
animation-fill-mode | 规定动画结束后的状态,保持forwards,回到起始backwards |