在网页开发中，元素的显示方式直接影响页面布局效果。CSS的display属性是控制元素盒模型与排列行为的核心。很多初学者不清楚块级、行内和弹性盒的区别，导致布局错乱。本文讲解如何通过display设置元素显示方式，包括block、inline、inline-block、flex等常用值，说明它们对宽度...

栏目：HTML/CSS 时间：07-28 css display 布局

很多初学者在用html5写前端页面时，不知道怎么把表单数据发给后端Python处理。Django作为常用Web框架，可以通过URL路由把请求交给视图函数。前端用form或fetch发请求，后端用request对象取数据并返回响应。本文讲清楚html5和Django交互的完整流程，包括模板渲染、路由配置和视图...

栏目：HTML/CSS 时间：07-28 html5 Django Python_view

很多人在用css做旋转缩放等变换时，发现元素总是绕着一个奇怪的位置动，其实是因为没搞懂transform-origin。这个属性用来设置变换的基准点，默认是元素中心。只要改了它，旋转平移缩放都会以你指定的点为起点。本文说说它的语法、取值方式，还有常见使用场景，帮你快速上手，不再被元...

栏目：HTML/CSS 时间：07-27 css transform-origin 元素变换

很多人在写购物车页面时用JavaScript做数量加减按钮，发现只有第一个商品能正常增减，点其他商品的按钮没反应。这通常是因为用了getElementById或者querySelector只拿到第一个节点，然后给单个元素绑事件。正确做法是用querySelectorAll拿到所有按钮，再循环绑定，或者利用事件委...

栏目：HTML/CSS 时间：07-27 JavaScript 购物车 事件绑定

很多人在做页面内跳转时想知道CSS伪类target怎么用。target伪类可以选中当前URL片段标识符指向的元素，常用于控制锚点跳转后的样式。通过给元素设置id并与链接hash对应，就能用target改变背景色、显示隐藏内容等。本文介绍基本写法、常见场景和注意点，帮助理解锚点元素样式控...

栏目：HTML/CSS 时间：07-27 CSS伪类 target 锚点样式

很多前端开发者在掌握基础标签后，都会思考HTML5中如何拓展原有功能。其实HTML5本身提供了丰富的API，比如自定义数据属性、Canvas绘图和Web Storage，已经能完成不少原生扩展。当原生能力不够时，可以引入轻量插件处理复杂交互、表单验证或图表展示。选择插件时要看兼容性、体积...

栏目：HTML/CSS 时间：07-27 html5 功能扩展 插件使用

在网页制作中，使用HTML和CSS给页面或元素添加背景图片是很常见的需求。很多初学者不清楚具体该怎么操作，也不知道图片重复平铺或拉伸填充是怎么控制的。其实主要通过CSS的background相关属性就能实现，比如background-image指定图片路径，background-repeat控制是否重复，backgro...

栏目：HTML/CSS 时间：07-27 HTML 背景图片 background

很多开发者在开发移动端网页时都会遇到如何在HTML中调用手机播放器播放MP4视频的问题。其实浏览器本身就支持通过video标签来触发系统默认的播放器。只要写好正确的video标签并设置好视频路径与属性，安卓和苹果手机就能自动调用自带播放器全屏播放。本文会说明具体的写法...

栏目：HTML/CSS 时间：07-27 HTML MP4播放 mobile_video

在网页开发中，我们经常需要让元素持续播放动画，同时希望在用户将鼠标悬停到元素上时暂停动画，移开鼠标后又能平滑地继续或恢复到原来的运动状态。很多初学者直接使用animation-play-state虽然能暂停，但离开后会出现跳变或不连贯的情况。其实通过结合CSS的animation-play-stat...

栏目：HTML/CSS 时间：07-27 CSS_animation hover_pause transition

很多前端开发者在写网页音视频播放逻辑时都会碰到html5play这个函数，不清楚调用它的时候到底要不要加前缀。实际上加不加前缀取决于你是怎么定义和挂载这个函数的。如果是直接挂在window对象上的全局函数，通常直接写html5play就可以；但如果是在某个模块或者对象里面定义的，就...

栏目：HTML/CSS 时间：07-27 html5play 函数前缀 HTML5音视频

很多刚接触vs2019的朋友不知道怎么在里面写网页，其实用vs2019创建并运行html文件并不复杂。本文会一步步说明如何新建html文档、编写基础页面结构，以及通过自带工具或浏览器查看运行效果。不管你是做课程作业还是练手项目，跟着操作就能快速看到页面。我们会讲到项目建立、文...

栏目：HTML/CSS 时间：07-27 vs2019 HTML文件 创建运行

在网页布局中浮动元素容易引发父容器高度塌陷问题，很多初学者不知道如何处理。本文整理了常见的CSS清除浮动方法，包括额外标签法、overflow触发BFC以及伪元素clearfix方案。重点讲解clearfix利用伪元素在父级末尾插入块级元素并清除浮动的原理，给出标准代码实现，并比较不同方...

栏目：HTML/CSS 时间：07-27 css clearfix 清除浮动

很多做移动端网页的开发人员想知道HTML怎么添加网页手势操作提示。本文介绍如何使用HTML和原生JS监听touch事件实现swipe手势，并在页面上展示引导层提醒用户左右滑动。内容覆盖手势识别原理、操作提示UI写法以及兼容处理，帮助新手快速给网页加上滑动手势提示，提升手机端交互...

栏目：HTML/CSS 时间：07-27 HTML swipe_gesture touch_event

很多开发者在测试或隔离运行程序时会用到沙箱环境，但有时候需要把里面已经启用的HTML5支持或者相关组件卸载掉。沙箱环境里的操作和真实系统不太一样，直接删除文件可能会留下配置残留。本文围绕沙箱环境中卸载HTML5的实用方法展开，介绍常见的容器型沙箱与系统级沙箱在处理HT...

栏目：HTML/CSS 时间：07-27 sandbox html5 uninstall

在网页开发中，不同设备和屏幕宽度需要展示不同尺寸的图片以提升加载速度和视觉效果。很多开发者知道 picture 标签能实现响应式图片，但不清楚如何搭配 srcset 和 media 正确书写。本文讲解标准写法，说明 media 如何匹配断点，srcset 如何提供多分辨率资源，以及浏览器选择图片的...

栏目：HTML/CSS 时间：07-27 picture标签 srcset media查询

很多人在做网页打印或者生成PDF时都会遇到内容被自动截断的问题，这时候就会想到html分页符。那么html分页符到底是怎么运行的呢。其实它并不是html自带的标签，而是依靠css的打印样式来控制。通过page-break-before、page-break-after以及page-break-inside这几个属性，浏览器...

栏目：HTML/CSS 时间：07-27 html分页符 分页机制 Print_CSS

很多前端开发者在用 CSS Modules 写样式时，习惯用 :global 去覆盖 Ant Design 组件的默认样式，但经常发现怎么写都不生效。这通常不是 :global 本身有问题，而是和样式加载顺序、选择器权重、打包后的类名结构有关。Antd 组件样式一般通过引入 antd/dist/reset.css 或组件按...

栏目：HTML/CSS 时间：07-27 antd :global CSS_Modules

很多前端开发者在做表单交互时都想用纯CSS实现好看的切换开关，不依赖JavaScript。利用checkbox的checked状态和伪元素就能做出自定义toggle效果。本文讲清楚怎么用label包住input，通过隐藏原生输入框，用span或label的before after画轨道和滑块，再配合相邻兄弟选择器控制开关...

栏目：HTML/CSS 时间：07-27 css toggle_switch 伪元素

很多前端开发者在使用TailwindCSS时，发现默认工具类里并没有直接提供文本阴影的实用类。其实TailwindCSS本身更关注布局与排版，文本阴影属于较细的样式需求。我们可以通过自定义配置、使用任意值语法或者借助插件来达成目的。本文会介绍几种在项目中用TailwindCSS添加文字...

栏目：HTML/CSS 时间：07-27 TailwindCSS 文本阴影 text-shadow

很多刚接触前端开发的朋友都会疑惑，写好的js文件要怎么用html运行。其实在网页里使用js文件非常常见，主要通过script标签引入外部js文件，或者把代码直接写在html里面。了解正确的引入方式，可以避免路径错误和加载顺序问题。本文会讲解用html运行js文件的几种实用方法，包括外部...

栏目：HTML/CSS 时间：07-27 JavaScript HTML script_tag

在Linux环境下开发前端页面时，经常需要启动一个本地服务器来预览HTML文件。每次都输入python3 -m http.server或者npx serve这类命令既繁琐又容易记错端口参数。其实我们可以利用bash的alias功能，把长命令简化成几个字母的快捷指令。只需要在用户主目录的.bashrc或者.zshrc...

栏目：HTML/CSS 时间：07-27 Linux bash_alias HTML_local_server

很多前端新手在做网站时都想让导航条看起来更生动，却又不想写复杂的JavaScript。其实只用纯CSS就能做出实用的特效导航条。本文介绍如何利用CSS的hover伪类、过渡属性和背景变化，实现鼠标悬停时文字变色、下划线滑动以及背景高亮等效果。你只需要掌握基础的选择器和transit...

栏目：HTML/CSS 时间：07-27 css 导航条 hover特效

很多前端开发者在拿到设计稿后，常困惑于进度条该怎么实现才既贴合视觉又性能好。本文围绕设计稿指引下的前端进度条实现，介绍基于HTML结构和CSS过渡动画的基础方案，说明如何用语义化标签搭建轨道与填充层，并通过transition控制平滑过渡。同时补充JavaScript动态更新进度的常...

栏目：HTML/CSS 时间：07-27 progress_bar 前端动画 CSS_transition

在写页面布局时很多人会发现span、a这类行内元素设置width和height没有效果，这是因为inline元素默认不支持盒模型中的宽高属性。要解决这个问题，最常用的方法就是把元素的display改成inline-block。这样元素既能像行内元素一样和其他内容排在同一行，又能像块级元素一样设置...

栏目：HTML/CSS 时间：07-27 css inline-block 盒模型

很多前端开发者在使用 Angular 做后台系统或可视化搭建平台时，都会遇到需要动态创建组件并支持拖拽排版的需求。本文围绕 Angular 动态创建可拖拽组件并配置属性这一主题，介绍如何利用 Angular 的 ComponentFactoryResolver 在运行时挂载组件，结合 CDK DragDrop 模块实现拖...

栏目：HTML/CSS 时间：07-27 Angular 拖拽组件 动态创建