前端知识点汇总（一）

HTML介绍

• HTML: Hyper Text Markup Language 超文本标记语言，用来做网页. 负责网页的框架结构布局.
• 1993年 html 1.0 Tim Berners-Lee(蒂姆-博纳斯-李)，万维网之父
• 1995年 html 2.0 IETF(互联网工程小组)
• 1997年1月 html 3.2 W3C(万维网联盟)
• 1997年12月 html 4.0 W3C
• 2014年9月 html 5.0 W3C

常用标签

• 1. 标题标签，双标签，一共有6个，h1~h6，标题标签里的文字，加粗，大小不一。
• 文字的大小的单位 像素px
• 默认的文字大小：16px
• h1 === 32px,h2 === 24px,h3 === 18.72px,h4 === 16px,h5 === 13.28px,h6 === 12px
• 大部分浏览器对文字大小的最小值做了限制，最小12px
• 语义化
• emmet语法：
• (1) 标签名 tab键 ===> 直接生成对应标签
• (2) 标签名1 + 标签名2 tab键 ===> 两个标签兄弟关系
• (3) 标签名1 > 标签名2 tab键 ===> 标签1包含标签2
• (4) （）表示一组
• (5) $ 表示递增，递增多少取决于*后的数字
• (6) {}里面表示标签的内容，如果有$也同样适用
• (7) []里面表示标签的属性,如果有$也同样适用
• 2. 换行标签 单标签 br
• 3. 分割线标签 单标签 hr
• 4. 段落标签 双标签 p
• 5. 图片标签 单标签 img
• src(source)属性： 要显示的图片的位置
• src既可以加载网络图片，也可以加载本地图片
• 本地地址：
• 1. 相对路径：从当前文档所在的位置开始一直找到图片所在的位置结束形成的路径
• 2. 绝对路径：从电脑的根目录开始一直找到图片所在的位置结束形成的路径
• 坑：！！ 绝对路径进行拷贝时，图片的属性里选择常规里的路径进行拷贝，并且在查看时，使用本地文件进行打开，不要使用服务器环境打开。
• alt属性：当图片因为某些原因无法显示时，浏览器会显示alt的内容，给用户以描述。
• width属性：设置图片的宽，值是数字，表示对应得像素
• height属性：设置图片的高，值是数字，表示对应得像素
• 如果只设置width或者height的其中一个值，另一个会按比列自动缩放。当然也可以强制都设置宽度和高度。
• 6. 文字倾斜标签，双标签，em
• 7. 文字加粗标签，双标签，strong
• 8. 超链接标签，双标签，a
• herf属性： 链接要跳转到的位置（网络位置，本地位置）
• 锚点：让网页滚动到指定的位置
• 需要事先给想要跳转到的位置的标签添加一个唯一标识。
• 给标签设置id属性
  
• 9. 列表标签 双标签
• a. ul 无序列表
• b. ol 有序列表
• 不管是ul还是ol，仅仅表示列表本身的区域，此列表里有多少条数据，需要通过li标签实现。
  
• 10. 无意义（无语义）标签 双标签 div 和 span 用来做区域划分
• HTML里标签按照自身的特性可以分成两种:
• <1> 块元素
• a.独占一行
• b.支持设置宽高，如果不设置，默认宽度与其父元素的高度一致，高度由里面的内容撑出
• c.支持设置盒模型里的上下padding和margin值
• <2> 行元素
• a.不独占一行
• b.不支持设置宽高，其大小完全由里面的内容撑出
• c.不支持设置盒模型里的上下padding和margin值
• 块元素：h1-h6,p,ul,ol,li,div
• 行元素：img,em,strong,a,span
• 元素的嵌套规则：
• 1. 块元素里可以嵌套任何的行元素和部分块元素。
• 2. 行元素里只能嵌套行元素，不能嵌套块元素。
• 3. p元素，h1~h6元素不能再嵌套块元素。

基础标签

CSS选择器

• 1. 标签选择器(元素选择器)
• 语法:标签名 {}
• 找到当前文档里所有与标签名相同的标签
• 2. id选择器
• 需要事先 给元素添加唯一标识, id属性
• 语法:#id值 {}
• 找到文档里id值相同的唯一的那个元素
• 3. class选择器
• 事先给需要设置样式的元素设置class属性值.
• 语法:.class值 {}
• 4. 群组选择器--- (复合选择器)
• 语法:选择器1,选择器2, ... {}
• 作用:把所有选择器找到的元素设置相同的样式
• 5. 子选择器
• 语法:选择器1>选择器2>... {}
• 找到文档里选择器1表示的元素里与选择器2表示的元素呈父子关系的选择器2表示的元素,子选择器可以有多个限定条件
• 6. 后代选择器
• 语法:选择器1 选择器2 ... {}
• 找到文档里选择器1表示的元素里与选择器2表示的元素呈后代关系的选择器2表示的元素,后代选择器可以有多个限定条件
• 7. 相邻兄弟选择器
• 语法:选择器1+选择器2+... {}
• 能找到当前文档里与选择器1表示的元素呈兄弟关系且在其后面的相邻的选择器2表示的元素

CSS样式

• CSS:Cancading Style Sheets 层叠样式表
• 作用：决定如何显示html元素。
• 如何书写css?
• 1. 行间css样式：在需要设置样式的标签内，用style属性书写css样式
• 2. 内联css样式：在当前文档的head标签里，用style标签书写css样式
• 3. 外联css样式：新建一个css文件书写css样式
• 常用的css样式：
• 1. 宽（水平） width：px值
• 2. 高（竖直） height：px值
• 3. 背景色 background-color：颜色单词
• 4. 文字颜色 color：颜色单词
• 5. 文字大小 font-size：px值
• 6. 行高 line-height：px值
• 7. 文本的对齐方式 text-align:left/center/right
• 8. 首行缩进 text-indent:px值
• W3C对HTML的开发做出了一个编码理念：
• 结构（html），样式(css)，行为(js)三者相分离

命名规则

• 命名规则:
• 1. 数字不能开头
• 2. 只能由字母,数字,汉字(不建议使用),下划线
• 3. 见名知意

内联css样式

• 如果采用内联的方式书写css，我们需要考虑我们写的样式是对哪一个标签做的设置？
• 解决办法：
• 1. 先找到要设置样式的元素
• 2. 再给元素设置css样式
• 我们通过 选择器 来查找元素
• 内联css样式的优缺点:
• 缺点： 公共的样式无法抽离，可能会造成代码的冗余
• 优点： 符合w3c的编码理念

外联css样式

• 引入外部css文件的方法:
• 1. link标签引入 2. @import引入
• link标签引入和@import引入外部文件的区别
• 1. link是html语法， @import是css语法。
• 2. link方式可以引入多种类型的文件，@import只能引入css文件。
• 3. link方式是在html文档加载的同时就开始引入外部文件，@import需要等到html文档加载完毕之后才开始引入外部文件。
• 4. link方式引入的css样式后期可以用js进行修改，@import引入的样式后期无法修改。
• 外联css样式的优缺点：
• 缺点：需要新建文件
• 优点：完全符合w3c的编码理念
• 抽离公共的样式，提高编码质量

行间CSS样式

• 行间CSS的优缺点:
• 缺点：
• 1. 不符合w3c的编码理念 2. 一个标签的样式如果过多，页面感觉不整洁
• 优点:
• 1. 优先级很高 2. 指向明确

选择器优先级

• 选择器的优先级:
• 通配符选择器--标签选择器--class选择器 --id选择器--行间css选择器--!important(从小到大排列)
• 如果出现复合的选择器(一个选择器由多个基础选择器组成)
• 按照各个选择器的权重计算复合选择器的值,比较值的大小,值越大,优先级越高
• 标签 --0--0--1
• class--0--1--0
• id--1--0--0

背景

背景蒙板:

CSS3背景设置

• 背景色:background-color
• 背景图:background-image:url()
• 背景图片的平铺方式:background-repeat(1) repeat 水平竖直都平铺 默认值(2) repeat-x 水平方向平铺(3) repeat-y 竖直方向平铺(4) no-repeat 不平铺
• 背景图片的位置:background-position
• 写法一: 直接写px数值x方向: 正值右,负值左y方向: 正值下,负值上
• 写法2: 使用方位单词x方向: left, center, righty方向: top, center, bottom
• 写法三: 使用百分比x方向的百分比:(容器的宽-图片的宽) * 百分比y方向的百分比:(容器的高-图片的高) * 百分比
• 背景图片是否跟随网页滚动:background-attachment: fixed;
• 1. 充当蒙板的图片格式必须是png
• 2. 设置成蒙板的图片,系统会把原来透明的设置成不透明的,而不透明的设置成透明的.
• 背景蒙板:-webkit-mask-image: url();
• 背景蒙板的平铺方式:-webkit-mask-repeat: ;
• 背景蒙板的位置:-webkit-mask-position: center center;
• 背景蒙板的大小:-webkit-mask-size: ;
• CSS3背景设置 1. 背景图大小 background-size2. 第一张完整背景图的开始平铺位置 background-origin3. 背景剪裁 background-clip
• 1. background-size 写法一: 填写px数值第一个值表示宽,第二个值表示高
• 写法二: 填百分比 第一个值表示宽,第二个值表示高 宽高分别相对于父级的宽高计算
• 写法三:cover 写法四: contain
• cover和contain在缩放图片时图片都是按比例缩放的 .
• cover要保证图片能填满整个父级区域.但是有可能会造成图片无法全部显示
• contain保证图片缩放至满足填满一个方向即可.但是有可能造成无法填满整个父级区域
• 2. background-origin (1.) border-box:背景图像相对于边框盒来定位。(2.) padding-box:背景图像相对于内边距框来定位。默认值(3.) content-box:背景图像相对于内容框来定位。
• 3. background-clip(1.) border-box:背景被裁剪到边框盒。默认值(2.) padding-box:背景被裁剪到内边距框。(3.) content-box:背景被裁剪到内容框。
• 合写时需要注意有些值得写法
• 1. 同时有bg-position和bg-size时,先写bg-position,后写bg-size ,中间用/分隔
• 2. 同时有bg-origin和bg-clip时,bg-origin在前,bg-clip在后
• background可以设置多个值,一般用于内径图片的拼凑上