前端小基础

HTML+CSS

网页的基础认知

网页是由文本、音频、视频、图片和超链接等构成的集合体。网页背后的本质是前端程序员写的代码，而程序员的代码是通过浏览器软件转换成网页的。浏览器是网页显示运行的平台，包含IE浏览器、谷歌浏览器、火狐浏览器、苹果浏览器和Opera浏览器，浏览器不同，渲染引擎不同，所以在网页的开发设计中，为了让不同的浏览器显示相同的展示效果，要遵循相同的Web标准。在Web标准中，HTML是结构，决定页面元素；CSS是表现，决定网页的样式美观；JS是行为，控制网页的交互效果。

HTML

HTML的基本认知

HTML是一种超文本标记语言，是一种网页开发语言，是网页组成的基本骨架。通过HTML标签对文本、音频、视频和超链接等内容进行描绘的。
HTML的基本骨架结构：

• head标签，骨架的头部
• body标签，骨架的身体
• title标签，骨架的标题

前端开发工具

在实际开发中，我们常用以下几种开发工具Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder。
但是对比而言，一般推荐VS Code开发工具，它具有体积小，速度快和插件多等优势。

HTML的语法规范

• HTML的注释：快捷键：ctrl+/
• 标签的构成：双标签和单标签
• 标签的结构：属性名=“属性值”
• 标签的关系：父子（嵌套）和兄弟（并列）

HTML的基础标签

1 排版标签

1.1 标题标签：h1-----h6
一到六级标题，标题标签，独占一行，文本加粗加大，大小从1到6逐级递减。
代码：

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

1.2 段落标签：p
段落标签，文本独占一行，段与段之间有间隔。
代码：

<p>段落标签</p>

1.3 换行标签：br
单标签，让文字强制换行。

1.4 水平线标签：hr
主题的分割转换，单标签，在页面中出现一条水平线。

2 文本格式化标签

第一组：

标签	说明
b	加粗
s	删除
u	下划线
i	倾斜

第二组：

标签	说明
strong	加粗
del	删除
ins	下划线
em	倾斜

第二组语义较强，在正式中一般使用第二组。

3 媒体标签

3.1 图片标签：img
代码：

src代表图片的路径；alt代表替换文本，当图片无法显示时显示替换文本；title代表鼠标悬停文本，当鼠标放在图片上后出现的文本。
可以给图片设置width（宽）和height（高）属性，设置一个属性，另一个就会等比缩放，如果两个同时设置，就会导致图片变形。

3.2 路径问题
路径分为绝对路径和相对路径，一般推荐使用相对路径。
绝对路径：一般从盘符开始。也可以是网络地址。
相对路径：从当前文件出发，寻找目标文件。
相对路径的三种情况：

• 同级目录：直接写目标文件的名字
• 下级目录：文件夹名/目标文件的名字
• 上级目录：…/目标文件的名字
  3.3 音频标签和视频标签
  音频标签：audio
  视频标签：vedio

属性	说明
src	路径
controls	播放的控件
autoplay	自动播放
loop	循环播放

注意：在vedio标签中，只有搭配muted实现静音播放才能自动播放。

4 链接标签

链接的意思是点击之后，从一个页面跳转到另一个页面。链接又叫超链接或锚链接。
代码：

<a herf=" ./目标地址.html">超链接</a>

属性：
target_self：表示在当前窗口跳转。这个时跳转的默认状态。
target_blank：表示在新窗口跳转。

在引号里面加#，表示空链接，不跳转。

5 列表标签

列表标签通常使用在新闻列表，排行榜，账单等。分为有序列表、无序列表和自定义列表。
无序列表：

<ul>
	<li>
	内容
	</li>
</ul>

有序列表：ol
自定义列表：dl

<dl>
	<dt>
	主题
	</dt>
	<dd>
	内容
	</dd>
</dl>

注意：在列表中，ul、ol和dl中只能嵌套li标签，但是li标签内可以嵌套任何标签，dl中可嵌套dt和dd标签。在自定义列表中，dd会默认显示缩进效果。

6 表格标签：table

表格标签的嵌套规则：table>tr>td(表格>行>列)

在表格中，table表示表格整体，tr表示行，td表示每行的单元格。border表示边框的宽度。
caption标签，写在table标签中，表示表格的标题，默认位置在表格上面，居中显示。
th标签，表头单元格，写在tr内，一般写在第一行，默认文本加粗居中显示。替换td标签。

合并单元格：

• 跨行合并，rowspan,将多行单元格垂直合并
• 跨列合并,colspan，将多列单元格水平合并
  代码：
  
  运行效果图：

7 表单标签

表单标签在网页中一般用于收集用户信息。

7.1 input系列标签
input标签可以通过type属性值的不同，展示不同效果。

type属性值	说明
text	文本框，输入单行文本
password	密码框，输入密码
radio	单选框，多选一
checkbox	多选
file	上传文件
submit	提交按钮
reset	重置按钮
buttom	普通按钮，之后配合JS使用

占位符：placeholder 提示用户输入的文本。

在单选中，必须添加相同的name属性，才能生效，一组中只有一个被选中。checked是默认选择。

在file中，添加multiple属性可以同选择上传多个文件。

如果需要实现按钮功能，需要配合form标签使用，方法是用form标签把表单标签一起包裹起来。

7.2 bottom标签
在页面中，用户显示点击的按钮，可以将input标签换为buttom标签，目前效果一样。

7.3 下拉菜单：select
代码如下：

<select>
	<option selected>
	内容
	</option>
</select>

selected与之前的checked功能相同，都是默认选中。

7.4 文本域标签：textarea
常见属性：

• cols：规定了文本域内的宽度
• rows：规定了文本域内的行数

7.5 lable标签
lable标签的作用一般是用于绑定内容与表单标签的关系。有两种方法，推荐使用第二种，比较简洁。

①：使用label标签把内容（如：文本）包裹起来， 在表单标签上添加id属性， 在label标签的for属性中设置对应的id属性值。

②：直接使用label标签把内容（如：文本）和表单标签一起包裹起来， 需要把label标签的for属性删除即可。

8 语义化标签

8.1 没有语义的标签
行内元素和块元素，在网页的开发中会经常用到。
例如：
div标签：块元素，独占一行。
span标签：行内元素，一行可以有多个。
8.2 有语义的标签
head 网页头部
nav 网页导航
footer 网页底部

CSS

CSS的基础认知

CSS又叫层叠样式表，作用是给页面中HTML添加样式。一般css写在style标签中，而style标签写在head标签里面，title标签下面。
基本代码如下：

<title>网页名字</title>
<style>
	选择器 {
		css属性名：属性值;
	}
</style>

CSS的常见属性：

CSS的常见属性	作用
color	字体颜色
font-size	字体大小
background-color	背景颜色
width	宽度
height	高度

CSS的引入方式

CSS的引入方式有三种，分别为内嵌式、行内式和外联式。

• 内嵌式，CSS 写在style标签中，适用于小案例。
• 外联式，CSS 写在一个单独的.css文件中，需要通过link标签在网页中引入，一般在大项目中使用。
• 行内式，CSS 写在标签的style属性中，配合JS使用。

基础选择器

选择器的作用是选择页面中对应的标签，方便后续设置样式。

1 标签选择器

结构：
标签名 { css属性名：属性值；}

通过标签名，找到页面中所有这类标签，设置样式，但是，标签选择器选择的是这一类的所有标签，不是某一个标签。

代码和效果图如下：

2 类选择器

结构：
.类名 { css属性名：属性值；}

注意：类选择器选的是标签的类名，前面有一个小点.

类选择器是通过类名，找到页面中所有带有这个类名的标签，设置样式。

所有标签上都有class属性，class属性的属性值称为类名，类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头，一个标签可以同时有多个类名，类名之间以空格隔开，类名可以重复，一个类选择器可以同时选中多个标签。

代码和效果图如下：

3 Id选择器

结构：#id属性值 { css属性名：属性值；}

作用是通过id属性值，找到页面中带有这个id属性值的标签，设置样式。

所有标签上都有id属性，id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！一个标签上只能有一个id属性值，一个id选择器只能选中一个标签。

与类选择器相比，Id选择器只能有一个，一个标签只能有一个id属性值，像人的身份证一样，不可重复。而类选择器却可以重复，一个标签可以同时有多个class类名，所以，在实际开发中，大多使用类选择器。

4 通配符选择器

结构：* { css属性名：属性值；}

作用是找到页面中所有的标签，设置样式。

* {
	margin:0;
	padding:0;
}

在前端基础中，一般使用以上代码消除网页的内外边距。

字体和文本样式

1 字体样式

属性名	说明
font-size	字体大小
font-weight	字体粗细
font-style	字体样式
font-family	字体类型

font-size，取值：数字 + px；谷歌浏览器默认文字大小是16px。

font-weight，取值方式有两种：一是关键字，normal表示正常字体，blod表示加粗字体；二是纯数字，400表示正常，700表示加粗。

font-style，默认为正常normal，倾斜：italic。

字体一般有三种系列：无衬线字体（sans-serif），衬线字体（serif），等宽字体（monospace）。一般在网页开发中使用无衬线字体。

font-family，常见取值：具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列。具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……，字体系列：sans-serif、serif、monospace等…。

运行代码如下：

关于font的复合属性：
font : style weight size family;
如果要省略，只能省略前两个。

2 文本样式

属性	说明
text-indent	文本缩进
text-align	文本水平对齐
text-decoration	文本修饰

text-indent，取值：数字+px或者数字+em（1em 等于当前标签的font-size的大小）。

text-align，有right（右边）、center（中间）和left（左边）三个属性。如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置。text-align : center 能让文本、span标签、a标签、input标签、img标签水平居中。

text-decoration，开发中会使用 text-decoration : none ; 清除a标签默认的下划线。还有一个常用的属性，underline，下划线。

3 line-height行高

line-height，控制一行的上下行间距。取值：数字+px或者倍数（当前标签font-size的倍数）。

行高的两个重要应用：

• 让单行文本垂直居中可以设置 line-height : 文字父元素高度。
• 网页精准布局时，会设置 line-height : 1 可以取消上下间距。

行高和字体样式的复合属性：
font : style weight size/line-height family ;

调试工具

认识 Chrome调试工具 的基础操作，能够使用 Chrome 调试工具 修改和调试样。
方法：点击右键，检查。

• 样式上有删除线，表示样式失效，可能是因为样式被注释掉了或者被覆盖了；
• 样式上有小三角，表示样式报错，可能是因为属性值后没写分号、出现中文标点或者属性名和属性值的单词拼写错误。

选择器进阶

1 复合选择器

1.1 后代选择器：空格
在后代选择器中，选择器与选择器之前通过 空格 隔开，根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素。
选择器语法：选择器1 选择器2 { css }

1.2 子代选择器：>
根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素，子代选择器中，选择器与选择器之前通过 > 隔开，在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式。
选择器语法：选择器1 > 选择器2 { css }

代码运行效果图对比：

如果是空格的话，选中的是所有的儿子，孙子。

如果是大于号的话，只选中儿子。

2 并集选择器

同时选择多组标签，设置相同的样式，并集选择器中的每组选择器之间通过 , 分隔。
选择器语法：选择器1 ， 选择器2 { css }

3 交集选择器

选中页面中 同时满足 多个选择器的标签，交集选择器中的选择器之间是紧挨着的，没有东西分隔，交集选择器中如果有标签选择器，标签选择器必须写在最前面。
选择器语法：选择器1选择器2 { css }

4 hover伪类选择器

选中鼠标悬停在元素上的状态，设置样式。
选择器语法：选择器:hover { css }
任何标签都可以设置悬停属性。

背景属性

1 背景颜色：background-color（bgc）

颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
背景颜色默认值是透明： rgba(0,0,0,0) 、transparen。
在rgba中，a表示透明度，一般数值是从0到1。

2 背景图片：background-image（bgi）

代码格式：

background-image：url（'图片的路径'）;

注意：背景图片中url中可以省略引号，背景图片默认是在水平和垂直方向平铺的，背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的。

3 背景平铺：background-repeat（bgr）

属性值:

取值	效果
repeat	（默认）水平和竖直方向都平铺
no-repeat	不平铺
repeat-x	沿水平方向（x轴）平铺
repeat-y	沿竖直方向（y轴）平铺

4 背景位置：background-position（bgp）

格式：
background-position：水平方向位置 竖直方向位置；

• 方位名词
• 数字+px
  

5 背景属性的连写：background（bg）

格式：
background：color image repeat position；
单个属性值的合写，取值之间以空格隔开。四个属性无顺序之分。

元素显示模式

1 块元素

特点：独占一行（一行只能显示一个），宽度默认是父元素的宽度，高度默认由内容撑开，可以设置宽高。
常见的代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

2 行内元素

特点：一行可以显示多个，宽度和高度默认由内容撑开，不可以设置宽高。
常见的代表标签：a、span 、b、u、i、s、strong、ins、em、del……

3 行内块元素

特点：一行可以显示多个，可以设置宽高。
代表标签：input、textarea、button、select……
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline。

4 元素显示模式转化

元素显示模式转化的作用是改变元素默认的显示特点，让元素符合布局要求。

• display：block；转换成块元素
• display：inline；转换成行内元素
• display：inline-block；转换成行内块元素

CSS的特性

1 继承性

子元素有默认继承父元素样式的特点（子承父业），可以继承的常见属性(文字控制属性都可以继承)：color、font-style、font-weight、font-size、font-family、text-indent、text-align、line-height。

可以在一定程度上减少代码，常见的应用有：

• 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
• 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式，继承失效的情况：

• a标签的color会继承失效
• h系列标签的font-size会继承失效

2 层叠性

给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上；给同一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效。

3 优先级

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式。

优先级比较：

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意：!important写在属性值的后面，分号的前面！!important不能提升继承的优先级，只要是继承优先级最低！

权重叠加计算：

如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效。

行内样式个数>id选择器个数>类选择器个数>标签选择器个数，逐级比较每一级的个数，个数多的优先级高，一级大于二级。如果第一级数字相同，此时再去比较第二级数字。

css布局：盒子模型

CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。

1 内容的宽度和高度

利用 width 和 height 属性默认设置是盒子内容区域的大小。

常见取值：数字+px

2 边框 ：border

边框的作用是设置边框粗细、边框样式、边框颜色效果。

边框属性：

• border-width，数字+px
• border-style，实线solid 虚线dashed 虚线dotted
• border-color，颜色取值

属性的连写形式：
border：10px solid red；（宽度，线条，颜色）（单个取值的连写，取值之间以空格隔开）
快捷键：bd + tab

如果只给盒子的某个方向单独设置边框，属性名：border - 方位名词
方位名词：left（左）、right（右）、top（上）和bottom（下）。
例如：设置上边框为10px，实现，红色。
border-top：10px solid red；

3 盒子大小的计算

盒子的大小会被border撑大，所以在计算盒子的宽度是要减去边框的宽度。

盒子实际大小初级计算公式：
盒子宽度 = 左边框 + 内容宽度 + 右边框
盒子高度 = 上边框 + 内容高度 + 下边框
盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框（具体）
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框（具体）

注意：不会撑大盒子的情况（块级元素）：如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度；此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子；

4 内边距：padding

内边距表示边框与内容区域之间的距离。

padding：1px 2px 3px 4px；

数值分别表示上、右、下、左，顺时针旋转。

同样的，内边距也可以只给盒子的某个方向单独设置。
属性名：padding - 方位名词
属性值：数字 + px

5 CSS3盒子模型（自动內减）

给盒子设置属性 box-sizing : border-box ; 实现自动內减。

优点：浏览器会自动计算多余大小，自动在内容中减去

6 外边距：margin

外边距是设置边框以外，盒子与盒子之间的距离。
margin属性与padding属性相同：

margin:1px 2px 3px 4px;

但是方向不同：

• 水平方向 margin-left，让当前盒子往右移动；margin-right，让右边的盒子向右移动。
• 垂直方向 margin-top，让当前盒子往下移动；margin-bottom，让下面的盒子向下移动。

7 清除默认内外边距

浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding。

代码如下：

* {
	margin:0;
	padding:0;
}

8 特殊情况

外边距正常情况：水平布局的盒子，左右的margin正常，互不影响，最终两者距离为左右margin的和。

外边距折叠现象:

• 合并现象，垂直布局的块级元素，上下的margin会合并，最终两者距离为margin的最大值。（只给其中一个盒子设置margin即可）
• 塌陷现象，互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起往下移动。

对于塌陷现象的解决方案：
给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）；给父元素设置overflow：hidden；转换成行内块元素；设置浮动。

行内元素的margin和padding无效情况：给行内元素设置margin和padding时，水平方向的margin和padding布局中有效！垂直方向的margin和padding布局中无效！