前端知识总结

HTML

HTML基本结构标签

HTML常用标签

标题标签：

<h1>
...
<h6>

段落标签和换行标签：

<p>我是一个段落标签</p>
换行标签<br />

文本格式化标签

图像标签

超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

链接分类：

1. 外部链接：

<a href="http://www. qq.com" target="_blank">腾讯</a>

target打开窗口的方式默认的值是_self，当前窗口打开页面，_blank新窗口打开页面

2. 内部链接：网站内部页面之间的相互链接.直接链接内部页面名称即可

<a href= " index.html">首页</a>

3. 空链接:如果当时没有确定链接目标时

<a href="#">首页</a > 

4. 下载链接:如果href里面地址是一个文件或者压缩包，会下载这个文件。

<a href="img.zip">下载文件</a>

6. 网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

<a href="http://www. baidu.com"><img src="img.jpg" /></a>

7. 锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.

• 在链接文本的href属性中，设置属性值为#洺字的形式，如

 <a href="#two">第2集</a>

• 找到目标位置标签，里面添加一个id属性=刚才的名字，如:

<h3 id="two">第2集介绍</h3>

注释和特殊标签

<!--注释语句—->     快捷键:ctrl + /

表格标签

<table>
	<tr>
		<td>单元格内的文字</td>
		...
	</tr>
	...
</table>

• 表头单元格：加粗+居中

<th>姓名</ th>

• 表格属性
  
• 表格结构标签：

<thead>标签表格的头部区域、 <tbody>标签表格的主体区域.

• 合并单元格
  跨行合并：rowspan="合并单元格的个数”
  跨列合并：colspan="合并单元格的个数”

 <td colspan= “2”></td>
 册除多余的单元格

列表标签

• 无序列表

<ul>
	<li>列表项1</1i>
	<li>列表项2</1i>
	<li>列表项3</li>
	...
</ul>

去掉li前面的小圆点：

 li{
 	list-style: none;
   }

• 有序列表

<ol>
	<li>列表项1</1i>
	<li>列表项2</1i>
	<li>列表项3</li>
	...
</ol>

• 自定义列表：大哥领着小弟们

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</ dd>
	<dd>名词1解释2</ dd>
</dl>

总结：

表单标签

• 表单域

<form action="url地址” method="提交方式" name="表单域名称">
	各种表单元素控件
</form>

• 表单控件（表单元素）

1. input表单元素

 <input type="属性值">

lable标签：为input元素定义标注(标签)

<label for="sex">男</ label>
<input type="radio" name="sex"id="sex">

标签的for属性应当与相关元素的id属性相同。

2. select下拉表单标签

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
</select>

3. textarea文本域元素

<textarea rows="3" cols="20">
	文本内容
</textarea>

CSS

CSS简介

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器

基础选择器

由单个选择器生成

• 标签选择器

标签名 {
	属性1:属性值1;
	属性2:属性值2 ;
	属性3:属性值3;
	...
	}

• 类选择器

.类名{
	属性1:属性值1;
}

• id选择器：只允许调用一次，用于页面唯一元素

#id名{
	属性1:属性值1;
...
}

• 通配符选择器：选取页面中所有元素（标签），不需要调用

* {
	属性1:属性值1;
...
}

复合选择器

• 后代选择器：> 表示选择元素1里面的所有元素2

元素1 元素2 { 样式声明 }

ul li {样式声明} /*选择ul里面所有的li标签元素*/

• 子选择器：选择元素1里面的所有直接后代（子元素）元素2

元素1 > 元素2 { 样式声明 }

div > p 样式声明}/*选择div里面所有最近一级p标签元素

• 并集选择器：选择元素1和元素2。

元素1 , 元素2 { 样式声明}

ul , div {样式声明} /*选择ul 和div标签元素*/

• 伪类选择器：向某些选择器添加特殊的效果

focus选择器：选取获得焦点的表单元素

input：focus {
	background-color: yellow ;
}

字体属性

• 字体系列

p { font-family:"微软雅黑";}
div {font-family: Arial, "Microsoft rahei"，"微软雅黑";}

• 字体大小
  标题标签比较特殊,需要单独指定文字大小

p {
	font-size: 20px;
}

• 字体粗细

p {
	font-weight: bold;
}

• 字体样式

p {
	font-style: normal;
}

• 复合属性
  • 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
  • 不需要设置的属性可以省略（取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用

body {
	font: font-style font-weight font-size/line-height font-family;
}

文本属性

• 文本颜色

div {
	color: red;
}

• 对齐文本
  div {
  text-align: center;
  }

• 装饰文本
  div {
  text-decoration: underline;
  }

• 文本缩进：首行缩进

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值,

div {
	text-indent : 10px;
}

em是一个相对单位

p {
	text-indent: 2erm;
}

• 行间距

p {
	line-height : 26px;
}

引入方式

• 内部样式表（嵌入式）：写到html页面内部.是将所有的CSS代码抽取出来，单独放到一个style标签中。

<style>
	div {
		color: red;
		font-size: 12px;
	}
</style>

• 行内样式表（行内式）：在元素标签内部的style属性中设定CSS样式。适合于修改简单样式.

<div style="color: red; font-size: 12px; ">青春不常在，抓紧谈恋爱</div>

• 外部样式表（链接式)：实际开发都是外部样式表.适合于样式比较多的情况。
  核心：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用.

<link rel="stylesheet"href="css文件路径">

Emmet语法

元素显示模式

显示模式转换：

• 转换为块元素：display:block
• 转换为行内元素：display:inline
• 转换为行内块：display: inline-block

单行文字垂直居中：让文字的行高等于盒子的高度

背景

• 背景颜色

background-color :颜色值;

• 背景图片

background-image : none l url (url)

• 背景平铺

background-repeat: repeat / no-repeat / repeat-x | repeat-y

• 背景图片位置

background-position: x y;

• 背景固定

background-attachment : scroll l fixed

• 背景复合写法

background：背景颜色 背景图片 地址 背景平铺 背景图像滚动 背景图片位置;

• 背景颜色半透明

background: rgba(0, 0,0,0.3); /*最后一个参数是alpha透明度，取值范围在0~1之间*/

三大特性

• 层叠性
• 继承性
• 优先级
  

盒子模型

边框

border : border-width ll border-style ll border-color

简写：

border: 1px solid red;没有顺序

• 细线边框：

border-collapse :collapse;

• 圆角边框

border-radius : length; /*参数值可以为数值或百分比的形式*/

内边距

复合写法：

外边距：

简写与padding一样

嵌套元素塌陷：

解决办法：

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距。
3. 可以为父元素添加overflow:hidden。

• 居中

.header{ width:960px; margin: 0 auto; }

行内元素或者行内块元素水平居中给其父元素添加 text-align:center即可

• 清除内外边距

* {
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
}

注意∶行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

阴影

• 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

• 文字阴影

text-shadow : h-shadow v-shadow blur color;

浮动

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

选择器{ float:属性值;}

清除浮动：闭合浮动

选择器{clear:属性值;}

1. 额外标签法也称为隔墙法，是W3C推荐的做法。

2. 父级添加overflow属性

3. 父级添加after伪元素

4. 父级添加双伪元素（也是给父元素添加）

.clearfix::before,
.clearfix::after {

    content: "";

    display: table;
}

.clearfix::after {

    clear: both;
}

.clearfix {

    *zoom: 1;
}

css属性书写顺序

css定位

定位模式

• 静态定位=标准流

选择器{ position: static; }

子绝父相

• 相对定位：移动位置的时候参照点是自己原来的位置，不脱标，继续保留原来位置

选择器{ position: relative; }

• 绝对定位：元素在移动位置的时候，是相对于它最近一级有定位的祖先元素来说的，如果都没有，，则以浏览器为准定位。脱标

选择器{ position: absolute; }

水平居中：

• 固定定位：以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动。脱标

选择器{ position : fixed; }

• 粘性定位：以浏览器的可视窗口为参照点移动元素（固定定位特点)；粘性定位占有原先的位置（相对定位特点)
  不脱标

选择器 { position: sticky; top: 10px; }

特点：

• 行内元素添加固定定位和绝对定位，可以直接设置宽度和高度。
• 脱标的盒子不会触发外边距塌陷
• 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)
  但是绝对定位（固定定位）会压住下面标准流所有的内容。

定位叠放次序

数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上。如果属性值相同，则按照书写顺序，后来居上。数字后面不能加单位

选择器{ z-index: 1; }

边偏移

css高级技巧

元素的显示与隐藏

display：隐藏元素后，不再占有原来的位置。

• display:none ;隐藏对象
• display : block ;除了转换为块级元素之外，同时还有显示元素的意思。

visibility：隐藏元素后，继续占有原来的位置。

• visibility : visible;元素可视
• visibility : hidden;元素隐藏

overflow

精灵图

字体图标

css三角

界面样式

• 鼠标样式

• 表单轮廓线取消和防止拖拽

其他

行内块和文字垂直居中对齐

溢出文字用省略号

margin负值的巧妙运用

三角强化

HTML5和CSS3提高

HTML5

• 新增的语义化标签

• 新增的多媒体标签

• 新增input类型

• 新增表单属性

CSS3

选择器：

权重都是10

1. 属性选择器

2. 结构伪类选择器

3. 伪元素选择器

使用场景：

盒子模型

滤镜filter

cal函数

过渡

2D转化

动画

项目注意

常用模块类名命名：

logo优化