重新整理前端基础知识点

一、HTML特殊符号

二、HTML标签

1. 标签分类

a:按结构分

双标签;常见;如段落标签p、pre、div、标题标签h1~h6、em、i、strong等

单标签;（自闭和标签）;如img、br、等

b:按标签的作用域，性质分

块级元素标签：独占一行,宽高，内边距外边距都可以设置，若宽度未设置，则为父元素的宽度；可以包含其他跨元素或行内元素。常见块级元素：div、p、h1~h6、hr等

行内元素标签:（内联）不独占一行；其宽度随着内容变化而变化；宽度和高度不可以设置，上、下，内、外边距和上下设置都无效，但左、右，内、外边距设置有效。常见行内元素有:input、em、i、strong等

c:行内元素和块元素的转换：

display:inline-block; 可以将行内转化为行内块；block:转化为块；inline转化为行内元素

三、HTML标签详解

1、常见的图片格式

jpg:全名是JPEG，JPEG是压缩格式，牺牲图⽚质量为代价换来⼩体积 ;

bmp:不采⽤其他任何压缩。是windows操作系统中的标准图像⽂件格式

gif:图像互换格式，压缩格式。把存于⼀个⽂件中的多幅图像数据逐幅读出并显示在屏幕上，构成动画 ；

webp:便携式⽹络图形，压缩⽐⾼，⽣成⽂件体积⼩的图⽚形格式，有透明/半透明特性

同时提供了有损压缩和⽆损压缩的图⽚⽂件格式，压缩⽅⾯⽐当前 jpg 格式更优越

img标签：用于在页面展示图片；属性： src="图片路径"、alt="图片无法显示时的内容"、title="属性值" 用于当鼠标放置到图片上的提示信息；

audio/video标签: 用于播放音频和视频 常用属性：autoplay:自动播放，loop：循环播放；controls：添加控制器； poster="图片的路径" 设置视频不能正常显示时所展示的图片； 如果autoplay不生效 可以使用muted属性；

a标签 属性

href=“url”

target="_blank" _self _parent等属性值

download=“url” 一般浏览器不能直接解析的便可以点击直接下载

作用 ：

1、跳转页面

2、 锚点链接

3、下载

2. HTML列表

有序列表，使⽤ <ol> + <li> 标签 （实际使用较少）是有顺序的且每个li前都有相应的编号，如1、2、3、4、 也可能a. b. c. 等 可通过 ol的type属性进行调整；

⽆序列表，使⽤ <ul> + <li> 标签 （实际开发中使用最多） type属性 circle square 形状为圆圈或方框；

⾃定义列表，使⽤ <dl> + <dt> + <dd> 标签 ；

3. HTML表格

<table> 整体结构由两部分组成 <thead>和<tbody>也可以不写

 <table border width="800px">//px客省略
      <thead>//表头
        <tr>
          <th>序号</th>
          <th>班级</th>
          <th>姓名</th>
          <th>成绩</th>
        </tr>
      </thead>
      <tbody>//表格内容体
        <tr>
          <td>1</td>
          <td rowspan="2">年纪1班</td>//用于单元格跨行合并
          <td>张三</td>
          <td>89</td>
        </tr>
        <tr>
          <td>2</td>
          <td>李四</td>
          <td>90</td>
        </tr>
        <tr>
          <td coplspan="2">总成绩</td>//用于单元格跨列合并
          <td>张三</td>
          <td>89</td>
        </tr>
      </tbody>
    </table>

rowspan ：表示跨⾏合并；rowspan="要合并的⾏数" 咧如：rowspan="10" 则说明要跨行合并10个单元格

colspan ：表示跨列合并；colspan="要合并的列数"

table的属性：

border：用于生成所有的包括单元格的边框；

cellspacing:用于指定单元格与单元格之间的距离，如cellspacing="0"(常用);

cellpadding:单元格边距（表格边框与内容的距离） 一般情况写0;

align: center/left/right 用于指定表格所处页面中的位置；

bgcolor:用于设置背景颜色；

4.HTML表单

<form>

<input>标签 输入框

type: "属性值"，

submit 提交

text:文本框，

password 密码框

search 搜索

email 邮箱

url 输入网址

file 上传文件

radio 单选框

checkbox 复选框

select 下拉列表

date 日历控件

hidden隐藏域

color 颜色选择器等等

name:"输入值" 用于将输入的值赋值给它，form提交就是通过该属性 将所有表单内的表单元素的属性和属性值 提交给服务器，

value:"默认值"；

readonly:只读；

disabled:是否禁用；

<form action="www.baaidu.com" method="get">//action指定要提交的服务器地址 method 请求方式
    <div> 输入框： <input type="text" value="请输入" name="info"></input></div>
    <div>  密码： <input type="password" value="请输入" name="password"></input></div>
    <div> 邮箱<input type="email" name="myEmail"></input></div>
    <div>数字输入<input type="number" min="10" max="100" step="10"></input></div>
    <div> 日期  <input name="email" type="date" min="2019-05-09" max="2020-05-09" /></div>
    <div></div>
    <div></div>
       <input type="submit" value="提交"></input>
  </form>

<datalist>标签 搜索复选框 既能搜索又能选择

通过id标识自己 再通过input的list绑定相应的id可以到达两个产生关系 （绑定）同时给input设置name属性 便可以将datalist中选择的值绑定给相应的name,便可以通过form网服务器提交

  <form action="http:://www.baidu.com" method="get">
   输入<input placeholder="" type="search
       " list="list1" name="city">
    </input>
    <datalist id="list1">
        <option value="北京市"></option>
        <option value="广州市"></option>
        <option value="深圳市"></option>
    </datalist>
    <input type="submit" value="提交"></input>
    </form>

<lable>标签 用于包括一段文本内容 一般搭配文本输入框来使用

属性 ：for=“id值” 用于将某一个文本框（设置的ID值）和它联系起来； 当点击label包裹的文本时，会自动在绑定的输入框聚焦；

<label for="input1">这是密码</label>
<input type="text" id="input1" placeholder="请输入信息"></input>

<select>标签 下拉列表 包含<option>标签

<option>标签属性

selected="默认选择项"

value="数据值"

placeholder="提示信息"

disabled="true"等等

<select>
    <option value="shanxi" selected>陕西</option>
    <option value="shanxi1">山西</option>
    <option value="shandong">山东</option>
</select>

<button>标签

属性： type=“类型”

submit 表单的提交按钮

reset 重置

button 按钮等等

三、CSS

css:(cascading style sheet)层叠样式表；

1、样式分类

内联样式(行内样式)、内部样式、外联样式

优先级：!important > 内联样式 > 内部样式 > 外联样式

2、CSS选择器

基础类：id选择器、类选择器、标签选择器；优先级 id选择器 > 类（伪类）> 标签选择器

高级选择器：

交集选择器、并集选择器、子类选择器、属性选择器等

复合选择器优先级会叠加

3、CSS属性

1. 背景 background:"属性值"；

background-color:"";背景颜色

background-image: blue url("") no-repeate ;背景图片；

background-repeate:no-repeate;是否重复

background-size:cover/contain/cover/50%等; 大小等等属性

简写属性 background : blue url("") 50% no-repeate;

2. font 字体

font-size:16px;大小

font-family:字体族

color: blue; 字体颜色

font-weight:500; 字体粗细

font-style:italic 字体风格等等

简写属性 ： font："微软雅黑" 1px black blod italic；

3. display："none"属性

none 隐藏

block 转换为块元素

inline 行内元素

inline-block 行内块元素等等属性

4. text-decoration;文字水平线

underline 下划线

overline 上划线

none没有

line-through 中划线常用与一些过期的api

5.list-style 列表前面的样式

none 无样式

6. text-indent首行缩进

常配合em单位 通长2em为两个文字的缩进

7. line-height行高

8. overflow 文本溢出处理

hidden 隐藏

scroll 滑动条

visible 显示

9. 盒子模型

w3c正常盒子模型:

设置的width仅仅是内容区的宽度

width为设置的content的宽高

盒子大小

width+border+padding+margin

怪异盒模型:

设置的width包括了content+border+padding 之和

盒子大小 = width + margin

a. margin(外边距) 四个方向的属性

margin-top、margin-right、margin-bottom、margin-left

简写属性

margin:10px 10px 10px 10px;(写四个属性值，代表上右下左)；

margin:10px;代表四个

margin:10px 20px; 代表上下和左右

b. padding（内边距）

pdding-top、pdding-right、pdding-bottom、pdding-left

简写属性

pdding:10px 10px 10px 10px;(写四个属性值，代表上右下左)；

pdding:10px;代表四个

pdding:10px 20px; 代表上下和左右

c. border 边框

border-width: 边框宽度

border-style 边框样式

border-color 边框颜色

简写属性 border:1px solid black;

10. 伪类

:hover 鼠标移上时

:actived 被点击时

:checked 被选中时

:link 超链接被点击前

:vieted 超链接被点击后

11.伪元素

::before和::after

::before和::after在被选中元素里面、元素现有内容之前（后）插入内容，需要使用content属性指定要插入的内容。

该内容默认不脱离文档流，占据实际元素空间。可通过定位实现与选中元素的绝对定位

特点：

默认display: inline；

必须设置content属性，否则一切都是无用功；

::before和::after的内容无法被用户通过鼠标长按滑动选中的；会继承原本元素的CSS属性（如原元素的颜色等）

::before 元素之前

::after元素末尾

::first-line 第一行

12.浮动（float）

左浮动 float：left; 右浮动 float:right;

浮动会导致元素脱离文档流

同时会出现父元素高度塌陷的情况，所以需要解决 一般是开启BFC(块级格式化上下文)

BFC如何开启

1. 给父元素添加一个.clearfix类

..clearfix::before,.clear::after{
     visibility:hidden;
     display:block;
     content:"";
     clear:both;
     height:0;
}

2.开启bfc

什么是BFC

1 ）内部的Box会在垂直方向，一个接一个地放置。

2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

4）BFC的区域不会与float box重叠。

5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6）计算BFC的高度时，浮动元素也参与计算

BFC的作用

1）防止外边距重叠。

bfc导致的属于同一个bfc中的子元素的margin重叠(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)

我们可以在div外面包裹一层容器，并触发该容器生成一个BFC。那么两个div便不属于同一个BFC，就不会发生margin重叠了。

2）清除浮动的影响

块级子元素浮动，如果块级父元素没有设置高度，其会有高度塌陷的情况发生。

原因：子元素浮动后，均开启了BFC，父元素不会被子元素撑开。

解决方法：由第六条原理得，计算BFC的高度时，浮动元素也参与计算。所以只要将父容器设置为bfc

就可以把子元素包含进去：这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的

子元素，在这个BFC，这些元素将会回到页面的常规文档流。

3）防止文字环绕

13.定位（position）

开启除了相对定位其余都会脱离文档流

元素默认为静态定位（static）不会脱离文档流;

相对定位（relative） 元素相对于自身进行定位 不会脱离文档流;

absolute 绝对定位 相对于带有定位的父元素进行定位，若没有则会依照body进行定位，脱离文档流；

fixed 固定定位 元素相对于视口进行定位，脱离文档流；