2302_81399643的博客

一、JavaScript概述JavaScript是一种高级编程语言，常用于网页开发和服务器端应用程序。它是一种动态类型语言，可以在浏览器中直接解释执行，而不需要编译。脚本（Script）是一种与计算机程序相关的指令集或代码块，用于执行特定的任务或操作。脚本通常用于自动化重复性的任务或进行特定功能的扩展。脚本语言是一种专门用于编写脚本的编程语言，与传统的编译型语言不同，脚本语言通常不需要编译，可以直接解释执行。脚本语言具有易学易用、灵活、动态和交互式等特点。

本篇博客讲解做出一个经典的完整的官网页面布局，适合小白来学习哦~

很多网站都有些共同的特点，如页面顶部放置一个大的导航栏或广告条，右侧是链接或图片，左侧放置主要内容，页面底部放置版权信息等；一般情况下，此类页面布局的两列都有固定的宽度，而且从内容上很容易区分主要内容和侧边栏。页面布局整体分为上、中、下3个部分，即 header 区域、container 区域和 footer 区域。CSS3中提供了多列布局的支持，可以将文本内容以多列的形式进行排列。通过设置列数和间距等属性，可以控制列布局的样式。当然还有更多的方法可以做出两列布局效果，比如相对定位等等...方法多种多样！

高度塌陷（也称为浮动塌陷）是指当一个父元素包含浮动元素时，父元素没有正确包裹浮动元素的高度，导致父元素的高度变成了0的情况。这会导致布局混乱，浮动元素可能会溢出父元素，影响页面的结构。将2、3、4盒子设置左浮动，生成了一个与其父盒article等宽的浮层，所以这三个盒子脱离了文档流，在浮层从左到右排列，盒子5就向上替补，盒子2就将盒子5挡住了。将一个元素设置浮动之后，会根据其父元素的宽高出现一个浮层，来放置这个元素与其设置浮动了的兄弟元素，与绝对定位不同的是设置了一个绝对定位就会出现一个浮层，而浮动是。

将广告或重要信息悬浮在页面的固定位置，无论用户如何滚动页面，都能保持显示，增加广告或信息的曝光率。：将网站的导航栏固定在页面顶部或侧边，使用户在页面滚动时可以随时访问导航栏，提供更好的用户体验。：在长页面中添加一个返回顶部按钮，通过固定定位将其放置在页面角落，使用户可以方便地回到页面顶部。：在网页中弹出一个模态框，通过固定定位将模态框固定在页面中心，使用户注意力集中在模态框上。：将侧边栏固定在页面的一侧，使用户可以在阅读内容的同时访问其他相关链接或信息。使用了固定定位的元素会形成一个浮层！

盒子的绝对定位是指将一个元素的定位设置为绝对定位 absolute，这样它将根据其最近的已定位父元素为基准进行偏移来确定其位置。绝对定位的元素会脱离文档流并形成一个浮层，设置了绝对定位的盒子，都会有浮层，有几个绝对定位的盒子，就有几个浮层（对其后的兄弟盒子的定位没有影响，其他盒子就好像这个盒子不存在一样，原先在正常文档流中所占的空间会关闭），不会影响其他元素的布局。

属性来实现不同的定位方式，其参数为 static（静态定位）、 relative（相对定位）、 absolute（绝对定位）和 fixed（固定定位）；元素的位置通过 left 、top 、right 以及 bottom 属性进行规定。也就是说，在相对定位中，盒子并没有脱离文档流，它不会影响其他元素的布局，并且在正常文档流中保持其占据的空间，网页中的文档流机制的流水线排布方式还是存在。通过设置top、right、bottom、left属性，可以改变盒子的位置，但是其他元素不会受到影响。

网页文档流（Document Flow）是指网页中元素（如文本、图片、链接等）按照特定的顺序在浏览器中渲染和显示的过程。文档流的概念是为了保证网页的结构和布局能够正确地呈现给用户。以上展示出来的就是网页的文档流，顾名思义就是按顺序排列。

每个HTML元素都可以看作是一个盒子，这个盒子包含了内容、内边距、边框和外边距四个部分。：用于设置边框的宽度，可以取值为像素（px）、百分比（%）或预定义的值（thin、medium、thick）。，分别用于设置上、右、下和左的外边距值。这些值可以取像素（px）、百分比（%）或auto（自动）的形式。这些值可以取像素（px）、百分比（%）或auto（自动）的形式。在CSS中，可以通过设置不同的CSS属性来调整盒模型的各个部分。：用于设置边框的颜色，可以取值为颜色名称、十六进制值或RGB值。

一、设置表格样式一、设置表格样式CSS中有许多表格属性可以用来设置表格的样式，以下是一些常用的表格属性：设置表格的边框合并规则。可以设置为collapse来合并边框，或设置为separate来分隔边框（默认值为separateborder：设置表格的边框样式、宽度和颜色。表示边框为1像素宽度、实线样式、黑色颜色。：设置表格单元格的背景色。text-align：设置表格单元格内文本的水平对齐方式。可以设置为left（默认值）、centerright。：设置表格单元格内文本的水平对齐方式。可以设置为。

一、结构元素语义化标签：这些HTML5新增语义化标签可以用来定义页面的不同部分，使布局更有结构和可读性使用这些语义化标签可以使HTML代码更加清晰和有逻辑性，同时也有助于提升页面的可访问性和SEO优化。

作为单独的图像本身，它的很多属性可以直接在HTML中进行调整，但是通过CSS统一管理，不但可以更加精确地调整图像的各种属性，还可以实现很多特殊的效果。

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页文档外观样式的语言。它与HTML一起被广泛用于网页设计和开发中。通过CSS，可以对网页中的元素进行布局、颜色、字体、大小、边框等各种样式的控制。CSS通过将样式与HTML文档分离，使网页结构与样式分离，增加了网页的可维护性和可重用性。使用CSS可以轻松地改变整个网站的外观，而无需修改HTML代码。

一、图像图像标签在HTML中，可以使用标签来插入图像标签有以下属性srcURL相对路径绝对路径altwidthheighttitlealignleftrighttopmiddlebottomhspacevspace../示例代码：示例代码：上面的代码将插入一个名为example.jpg的图像，并将其显示为宽度为500像素，高度为300像素的图像。如果图像无法加载，将显示"Example Image"作为替代文本。当鼠标悬停在图像上时，显示标题"Example"。

特殊符号和文本层次语义元素标签

HTML（HyperText Markup Language）的一些基础标签