web前端基础知识点.docVIP

web前端基础知识点

一、HTML（超文本标记语言）

HTML是构建网页的基础。它由一系列的标签组成，这些标签用来描述网页的结构。例如，`html`标签是整个网页的根标签，`head`标签包含了网页的元数据，像网页标题（`title`标签）、样式表引用等。`body`标签则包含了网页中用户可见的内容。

常见的HTML标签还有段落标签`p`，用于创建段落；标题标签`h1`-`h6`，表示不同级别的标题；链接标签`a`，用于创建超链接，可以指向其他网页或者网页内部的锚点；图像标签`img`，用来在网页中插入图片，需要通过`src`属性指定图片的来源等。通过合理组合这些标签，可以构建出一个基本的网页结构。

二、CSS（层叠样式表）

CSS用于控制网页的样式，使网页更加美观和易于阅读。它可以设置元素的颜色、字体、大小、布局等。

1.选择器

-元素选择器：直接以HTML元素名作为选择器，如`p{color:red;}`会将所有`p`标签内的文字颜色设置为红色。

-类选择器：通过定义类名，在HTML元素中使用`class`属性引用，例如在CSS中定义`.highlight{background-color:yellow;}`，在HTML中`pclass=highlight`的段落就会有黄色背景。

-ID选择器：每个页面中ID是唯一的，在CSS中使用``来定义，如`header{font-size:20px;}`，在HTML中`divid=header`就会应用相应的样式。

2.盒模型

-每个HTML元素都可以看作一个盒子，它由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。理解盒模型对于布局非常重要，例如设置元素的宽度和高度时，需要考虑到这些部分的影响。

3.布局方式

-浮动布局：通过`float`属性可以使元素向左或向右浮动，常用于创建多列布局。但是使用浮动布局可能会带来一些清除浮动的问题。

-弹性布局（Flexbox）：是一种更现代的布局方式，通过设置父元素为`display:flex;`，可以方便地控制子元素在水平或垂直方向上的排列、对齐等。

三、JavaScript

JavaScript是一种脚本语言，为网页添加交互性。

1.变量和数据类型

-JavaScript有多种数据类型，包括数字（Number）、字符串（String）、布尔值（Boolean）、对象（Object）、数组（Array）和函数（Function）等。可以使用`var`、`let`或`const`来声明变量，例如`letnum=10;`声明了一个名为`num`的数字变量。

2.函数

-函数是可重复使用的代码块。例如`functionadd(a,b){returna+b;}`定义了一个名为`add`的函数，它接受两个参数并返回它们的和。

3.事件处理

-在网页中，可以为元素添加事件监听器，如点击事件（`click`）、鼠标移入事件（`mouseover`）等。例如，`document.getElementById(button).addEventListener(click,function(){alert(Buttonclicked!);});`，当ID为`button`的元素被点击时，会弹出一个提示框。

4.DOM（文档对象模型）

-DOM将HTML文档表示为一个树形结构，每个HTML元素都是树中的一个节点。通过JavaScript可以操作DOM节点，如获取元素（`document.getElementById`、`document.getElementsByTagName`等方法）、修改元素的属性、内容或样式等。

四、响应式设计基础

1.媒体查询

-媒体查询允许根据设备的特性（如屏幕宽度、高度、设备类型等）来应用不同的CSS样式。例如`@mediascreenand(max-width:600px){body{font-size:14px;}}`，当屏幕宽度小于等于600px时，网页中的文字大小会变为14px。

2.流体布局

-流体布局是指元素的大小根据屏幕大小按比例调整。例如，设置元素的宽度为百分比而不是固定像素值，这样在不同屏幕尺寸下元素能够自适应。

五、浏览器兼容性

不同的浏览器对HTML、CSS和JavaScript的支持可能存在差异。

1.前缀

-一些CSS属性在某些浏览器中需要添加特定的前缀才能正常工作。例如，`-webkit-`前缀用于Chrome和Saf