WEB-1-前端三剑客

前端三剑客

如果想要制作出来一个漂亮的网页，那么前端“三剑客”是必不可少的。

一. HTML

1. 什么是HTML？

HTML 是一种用来告知浏览器如何组织页面的标记语言，描述页面的整体骨架。由一系列的元素组成。

2. 元素

元素由标签和标签内容组成，具体如下图：

3. 常见的元素

（1）标题元素

h1、h2、h3、h4、h5、h6
依次是一级到6级标题，字号由大到小。

（2）段落元素

用 p 表示段落元素。

（3）列表

• 无序列表：ul
• 有序列表：ol
• 列表项目：li

（4）超链接

用 a 表示链接

（5）图片

用 img 表示。

（6）无语义标签

• 块级无语义标签：div
• 内联无语义标签：span

这两个标签可以表示标题、列表、图片、段落等元素。

二. CSS

1. 什么是 CSS ？

CSS 是一种样式规则语言，用来描述页面的样式。可将样式应用于 HTML 内容， 例如设置背景颜色和字体。

2. 引入的样式

• 内联样式：以元素的属性指定
• 内部样式：以 < style > 标签包裹
• 外部样式：以外部文件的方式

3. 常见的 CSS 选择器

（1）标签选择器

直接写某个具体的标签，表示选中该页面中所有的对应名字的元素
。这种做法大部分来说不是很方便，很多时候，同一个标签有不同的功能，这种情况，我们就可以使用id选择器。

（2）id选择器

可以让一个标签有不同的功能，需要先给html标签指定一个id的值，再通过id选择器选中该元素。一个html中的id是唯一的，不能重复。

（3）类选择器

由于id选择器要求元素只能有唯一id，如果要一次选中多个元素，就不能用id选择器了，使用类（CSS的类）选择器。类选择器非常灵活，可以给任意多的元素引用对应类。

（4）子元素选择器

选定某个标签里面的某个标签。可以和上面的选择器组合使用。

4. CSS 中的属性

（1）字体相关的属性

（2）文本相关属性

（3）背景相关属性

5. CSS 中的盒模型

每一个HTML元素都是一个矩形（盒子）

一些和盒子相关的属性：

（1）盒子的大小：width、height

以上设置高度宽度，是针对块级元素的；
对于行内元素，无法设置宽高。行内元素的尺寸完全是由内部尺寸撑起来的。
如果想让span具有宽度高度，需要将其转成块级元素。

（2）元素的边框

使用border属性设置元素的边框，需要设置3个值：

默认情况下，边框会撑大盒子，可以通过box-sizing属性来修改边框的行为，让边框不撑大盒子。

（3）内边距

通过padding 指定内边距；内边距：边框到内容之间的距离。

padding可以给四个方向都进行设置，内边距会导致盒子被撑大。

（4） 外边距

通过margin 指定外边距，外边距：盒子和盒子之间的边距。

为了实现给两个元素都能够具有一定的间距，可以给上方元素加一个下外边距；也可以给下方元素加一个上外边距，但是不能两个都加，都加了就会产生“外边距塌陷问题”。

外边距的一个经典用法：实现块级元素水平居中给这个块级元素左右外边距设置为auto即可。

padding 也支持这样的复合写法。

6. CSS的布局

布局：把指定的元素放到合适的位置上。

实现水平布局的方式：

• 经典：浮动（float）[有很多副作用]
• 弹性布局，即flex布局[比较推荐]
• 网格布局，即grid布局（下一代的布局方式）

（1）使用弹性布局

• 使用display：flex开启弹性布局（给父元素加这个属性），此时内部的子元素就会按照弹性布局的规则来排列了。

• 通过justify-content属性设置元素水平方向的排列方式，（还是给父元素加这个属性）。

• align-items 设置元素垂直方向的排列

三. JavaScript

JavaScript 是运行在浏览器上的，功能是控制页面与用户之间的交互，是一种脚本语言。

JavaScript 编程语言允许在 Web 页面上实现复杂的功能。如果你看到一个网页不仅仅显示静态的信息，而是显示依时间更新的内容，或者交互式地图，或者 2D/3D 动画图像，或者滚动的视频播放器，等等 —— 基本可以确定，这需要 JavaScript 的参与。
类似于 Java语言，JavaScript也有自己的常见类型的代码块，比如条件语句、循环、函数、以及事件等。由于较为复杂，我们在这里不再赘述。

正是由于HTML、CSS、JavaScript 三者的合作，才使得我们的网页看起来不那么单调，要想学好这“三剑客”，需要经过大量的练习才可掌握，小编在这里预祝每个编程的小伙伴们都能马到成功！！！