CH040708-优快云博客

原创 HTML中的Vue3解析！

Vue 采用了双向数据绑定机制，当数据发生变化时，视图会自动更新；反之，当用户在视图中进行操作时，数据也会相应地改变。这使得开发者无需手动操作 DOM 来更新视图，大大提高了开发效率，减少了出错的可能性。Vue 是一款流行的用于构建用户界面的渐进式 JavaScript 框架，深入浅近地介绍了vue.js的框架的功能用法及实现原理。包含了HTML、CSS和JavaScript这三种前端开发必配的功能。简洁易用：Vue 的 API 设计简洁直观，易于理解和上手，学习曲线较低，适合初学者快速掌握.

2024-12-18 22:43:06 1096

原创 Javascript中DOM操作和事件监听综合练习（具备三种功能的轮播图案例）

如何去实现图片轮播效果图，通过创建一个基本的 HTML 页面结构，包含用于展示轮播图片的区域、左右切换箭头以及放置轮播图片的容器。

2024-12-03 21:36:17 644

原创 Javascript中DOM事件监听（鼠标事件，键盘事件，表单事件）

当按下鼠标按键（左、右键均可）触发事件的发生。属性关系mousedown按下鼠标键时触发mouseup抬起鼠标键时触发click单击鼠标时触发dblclick在同一个元素上双击鼠标时触发mouseenter鼠标进入一个节点时触发，进入子节点不会触发这个事件mouseleave鼠标离开一个节点时触发，离开父节点不会触发这个事件wheel在浏览器窗口滚动鼠标滚轮时触发。

2024-12-01 20:46:56 2673

原创 javaScript语法基础（函数，对象，常用类Array，String，Math和Date）

将程序中多次要用到的代码块封装起来，就是函数。函数使代码块的重复使用更方便，且功能独立，便于维护。函数可以使用参数来传递数据，也可以不使用参数。函数在完成功能后可以有返回值，也可以没有返回值。function 函数名(参数1,参数2…)函数体；return 返回值;function 函数名(参数1,参数2…)语句；......return 表达式;//return语句指明被返回的值对象（object）是 JavaScript 中最重要的数据类型，是一组“键值对”的集合体。

2024-11-20 23:45:10 604

原创 JavaScript的语法基础（变量、数据类型、运算符、程序控制语句）！！

主要用于向HTML页面中添加交互行为；不需要编译，直接由浏览器解释运行，语法和Java类似。因此，在语法学习过程中，需注意与Java对比学习。行内式：不怎么推荐使用行内式写在<body>元素里面内嵌式：js代码不多时，或者做实验时，可以用一下内嵌式运用<script>标签运行，而<script>标签可以放置在HTML文档中任意位置；外链式：工程项目开发主打引用方式，可以解除耦合外链式先创建一个.js的文件，在HTML中通过<script>标签应用实现效果当浏览器遇到<script>

2024-11-06 10:45:20 727

原创 Javascript的进阶部分（DOM）操作！！

当网页被加载时，浏览器将网页转为一个DOM，并用JS进行各种操作。改变页面中的HTML 元素及其属性，改变页面中的CSS 样式，对页面中的事件做出响应。DOM操作就是为了用JS程序代替人工直接修改HTML和CSS代码。返回对拥有指定标签名的对象的集合控制台中可以返回出结果返回带有指定class属性的对象集合，该方法属于HTML5 DOM返回对拥有指定ID的第一个对象通过CSS选择器获取节点，返回NodeList对象通过CSS选择器获取节点，返回第一个匹配上的节点setInterval 函数。

2024-11-03 22:50:21 1106

原创 CSS中综合练习（基础学校完整静态网页教程）！！

集合三行、多行多列、百分比布局做的基础学校完整静态网页#

2024-11-03 00:13:09 446

原创 CSS中常见的两列布局、三列布局、百分比和多行多列布局！

两列布局都有固定的长度，从内容上区分主要内容和侧边栏。页面布局整体上分为上、中、下3个部分，即header区域、container区域和footer区域。container又包含mainBox（主要内容区域）和sideBox区域（侧边栏）三列布局由3个独立的而成，仅比两列布局多了一项内容，最终是基于两列布局结构演变出来。页面布局整体上分为上、中、下3个部分，即header区域、container区域和footer区域。container又包含mainBox（主要内容区域）、

2024-11-02 11:27:23 2214

原创盒模型中的浮动与清除浮动，解决父盒的高度塌陷问题！！

浮动（float）是使用率较高的一种方式，如同常见的图文混排样式。通过使用<float>向左移动，向右移动，定义元素在那个方向浮动，任何元素的可以浮动，而浮动元素就会变成一个块状元素。

2024-10-26 20:16:12 627

原创 CSS中常见的盒子定位：固定定位！

相对于浏览器可视窗口进行定位元素 ,通过 "浏览器可视窗口 + 边偏移" 的方式进行定位;固定定位方式的参考点与父元素没有任何关系；

2024-10-25 16:37:59 801

原创 CSS中深入浅出系列之盒子定位：绝对定位！（脱离文档流）

绝对定位可以用于脱离文档流，盒子从标准流中脱离，与相对定位不同，绝对定位对其后的兄弟盒子定位没有影响，原先在正常文档流中所占的空间会关闭，如同原来就不存在过一样。元素通过定位后，会生成一个新的块级框。在盒子定位中对于没有脱离文档流的元素：包含块就是其父元素.对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位，那包含块就是整个页面)。在盒子定位中通过给元素设置 position:absolute即可实现绝对定位精确控制位置。

2024-10-20 22:26:04 959

原创 CSS中的常见的盒子定位：相对定位！

定位方式 position 属性中包含静态定位（static）、相对定位(relative)、绝对定位(absolute)、固定定位(fixed) 4种不同类型的定位方式其中改变左右、上下位置改变方向；水平方向：left right 垂直方向：top bottom宽高度：width、height ，最小高度（min-height：auto | length）可见性（visibility:inherit | visible | collapse | hidden ）

2024-10-19 23:37:41 681

原创 CSS中的文档流和文档流中出现的缺陷！

块级元素独占一行，宽度自动填满父元素，高度由内容撑开。比如、等元素。行内元素不会独占一行，宽度和高度由内容决定。例如、等元素。元素排列及布局不灵活元素之间间隙过小空格折叠元素布局的局限性，会导致网页效果排列不一。

2024-10-19 22:10:02 328

原创 CSS的盒子模型！

盒子模型的内容包含了宽度（ width）和高度（height）等属性来定义。盒子模型相当于一个相框，相片就是盒子的内容（content），相框之间的距离就是内边距(padding)，相框的宽度就是边框(border)；w就是外边距(margin)。内边距作用于控制内容与编剧之间的距离。padding属性用于定义元素内容与元素边框之间的空白区域。（内边距属性不允许负值）边框的外围即为元素的最外围，围绕元素内容和内边距的一条或多条线。边框的复合写法该属性是复合属性，可以将多个单属性合并一起写。

2024-10-17 20:27:26 1243

原创 CSS的常见声明！

2024-10-13 23:19:50 904

原创 CSS的基本选择器和关系选择器语法教程！

根据元素的 id 属性的值进行选择（id名是唯一一个）常用（#id）使用。⭐在选择器中，id选择器优先级最高通过元素的 class 属性的值来选择元素，常用（.class）使用⭐在选择器中，类选择器优先级处于中间。标签选择器是通过 HTML 元素的标签名来选择元素的，可以快速选择大量相同类型的元素。⭐在选择器中，标签选择器优先级处于中间。常用于选择同时具有多个指定类、ID 或其他属性的特定元素。由两个选择器紧密相连组成，中间没有空格。

2024-10-09 23:09:28 753

原创 CSS基础的常用引入方式内容！！

通过<style></style>来写css语句写入html标签中叫做内部样式内联样式在写法中优先级最高内部样式表是在 HTML 文件的 <style> 标签内定义 CSS 样式。通常将 <style> 标签放在 <head> 标签内。外部样式表常常是将 CSS 代码保存为一个独立的 .css 文件。通过 HTML 文件中的 <link> 标签将其引入。

2024-10-06 22:51:55 702

原创 HTML中常用的网页布局！！

header> 标签用于定义文档或页面的头部区域，包含网站的标志、标题、主导航、搜索框等与页面整体相关的信息。<nav> 标签用于定义页面的导航链接部分，可以包含网站的主导航菜单，如首页、关于我们、产品、服务等页面的链接。增强语义性：有助于搜索引擎和辅助技术更好地理解页面结构和内容。提高可维护性：使开发者和后续维护人员能够更直观地识别和处理导航部分的代码。

2024-10-03 23:07:50 1242

原创 HTML中常用的编排表单标签和以块级元素、内联（行内）元素！

HTML 中的表单是用于收集用户输入信息并将其提交给服务器进行处理的重要元素。块级元素在页面中会独自占据一行，并且其前后会有换行符.独占一行，前后会有换行。可以设置宽度、高度、内外边距等属性。宽度默认是父容器的 100%。内联元素不会独自占据一行，而是在一行内与其他内联元素依次排列。不会换行，在一行内依次排列。宽度和高度由内容决定。不能设置上下边距。

2024-09-28 16:59:35 471

原创 HTML中常用的列表标签和表格标签！

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始<body><dl><dt>北京 </dt><dd>中国的首都</dd><dt>广东</dt><dd>经济发达地区</dd>

2024-09-18 22:09:31 1430

原创 HTML常用的图片标签和超链接标签！

超链接是指在一个文档中插入的指向其他文档或资源的链接。超链接通常以文字或图标的形式出现，当用户点击该文字或图标时，会跳转到链接指定的文档或资源。我们常常用<a>标签来表示超链接。链接的两端分别称为源锚点(当前锚点)和目标锚点(其他的网页)，通过点击源锚点就可以跳转到目标锚点。如今图片标签在网页设计中已经是不可或缺的一部分了，通过超链接，用户可以方便地在不同的网页间进行导航和访问相关内容。很多信息可以使用图片直观有效的表达出来，不容易造成误解，由此图片标签的重要程度就不言而喻了。

2024-09-16 14:51:13 1968

原创 HTML的基本骨架标签，段落换行水平线标签及其文本标签 !!!

meta标签用来描述一个HTML网页文档的属性，关键词等，例如：Charsel="UTF-8”是说当前使用的是u-8编码格式，在编辑中通常使用u-8。文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的尾部以及和其他头部的关系等。body元素定义文档的主题。标题标签从到，这些标签用于表示不同的标题层次. 和和和和

2024-09-08 22:47:00 386

CH040708的博客