HTML、css、JavaScript 代码分离

最新推荐文章于 2022-08-06 10:01:52 发布
最新推荐文章于 2022-08-06 10:01:52 发布
阅读量1.8k 收藏 4
点赞数
分类专栏： html系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaolisha9232/article/details/50977311
版权
本文针对新手介绍了如何在本地开发中实现HTML与CSS、HTML与JavaScript的有效分离，以提高代码组织和维护性。
摘要由CSDN通过智能技术生成

说明：新手......所有开发测试都在本地

HTML与CSS分离

格式：
1.html页面中的<style type=""></style>的代码单独命名保存为.css文件
2.在HTML页面<head></head>中添加<link href="文件名.css" type="text/css rel="Stylesheet" /> 
3.单独css文件中，若遇到背景图片定位问题： 



                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    


                



	

		

			

				
					
Webpack系列——CSS代码的分离

				
			

			

				

					Smart_J_King的博客
				

				

					01-14
					
					709
					
				

			

		

		

			
				
CSS 也可以从主文件中分离出来，默认情况下CSS打包后会被添加在 html 的 style 标签中。

如果 CSS 代码有很多行，那么直接嵌入在 html 文件中是不合适的，我们希望它是以 <link>标签的形式去插入到 head 标签中，也就是外部引入 CSS 文件的形式。

首先安装插件：


npm install --save-dev mini-css-extract-plugin

注意： 它要配合 css-loader 使用, 之前使用的 style-loader 去掉，此项配置

			
		

	



                

            
              



	

		

			

				
					
2024从零开始使用VSCode编程（静态页面制作篇）HTML+CSS+JS阶段

				
			

			

				

					ssrsrrn的博客
				

				

					07-25
					
					4793
					
				

			

		

		

			
				
VSCode第一个前端静态页面的编写

			
		

	



              


  
              

                


	

		

			

				
					
分离css代码

				
			

			

				

					zhangyiyang111的博客
				

				

					03-23
					
					162
					
				

			

		

		

			
				
分离css代码


需要引入1个插件模块

extract-text-webpack-plugin  使用下一个版本@next 会将所有的入口中引用的*.css，移动到独立分离的CSS文件。因此，你的样式将不再内嵌到JS中，而是会放到一个单独的CSS文件中。如果你的样式文件较大，这会做更快加载，因为CSS会跟JS 并行加载。
此插件没有压缩css代码的功能



webpack.config.js加载器修改:
const ExtractTextPlugin = require("extract-text-w

			
		

	





	

		

			

				
					
webpack（v4.8.3）中对css的几种处理总结（css分离，消除冗余的css代码，自动添加浏览器内核前缀）

				
			

			

				

					冰雪为融的博客
				

				

					05-21
					
					5577
					
				

			

		

		

			
				
一、CSS分离我们知道webpack的理念就是把所有的东西都打包到js文件中，包括css、图片呀等等，好处是减少http请求，但劣势也很明显，就是随着项目越来越大，js文件也会越来越大，所以，我们就需要对css文件进行分离css分离，嗯，其实就是将css单独打包，做法很简单，需要一个插件，extract-text-webpack-plugin@next（注意：加@next是现阶段必须要加的（前提是...

			
		

	



		

			
		



	

		

			

				
					
html分离JavaScript

					
热门推荐

				
			

			

				

					
				

				

					05-09
					
					3万+
					
				

			

		

		

			
				
分离JavaScript

test.html

<html>
	<head>
		<script type="text/javascript" src="test.js"></script>
	</head>
	<body>
		<a href="http://www.example.com/" class="pop...

			
		

	





	

		

			

				
					
分离JavaScript

				
			

			

				

					a512394464的博客
				

				

					12-22
					
					108
					
				

			

		

		

			
				
分离JavaScript类似于使用style属性，在HTML文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法。如果我们用一个”挂钩“，就像CSS机制中的Class或ID属性那样，把JavaScript代码调用行为与HTML文档的结构和内容分离开，网页就会健壮得多。那么，可以用下面这条语句来表明”当这个链接被点击时，它将调用popUp()函数“。<a hr...

			
		

	





	

		

			

				
					
html+css+javascript

				
			

			

				

					05-09
				

			

		

		

			
				
在IT行业中，前端开发是构建互联网应用不可或缺的一部分，而HTML、CSS和JavaScript是构成大前端领域的三大基础技术。本文将详细探讨这三者的核心概念、相互关系及其在实际开发中的应用。  HTML（HyperText Markup ...

			
		

	





	

		

			

				
					
基于CSS、JavaScript、Java和HTML的前后端分离论文管理系统设计源码

					
最新发布

				
			

			

				

					10-02
				

			

		

		

			
				
该项目为前后端分离的论文管理系统设计源码，由631个文件构成，涵盖251个CSS样式文件、181个PNG图像文件、100个JavaScript脚本文件、55个Java源代码文件、15个HTML文件、15个GIF动画文件、4个YAML配置文件、2个属性...

			
		

	





	

		

			

				
					
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip

				
			

			

				

					06-04
				

			

		

		

			
				
在IT行业中，前端开发是构建网站用户界面的关键环节，它主要涉及HTML、CSS、JavaScript以及各种前端框架。本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个...

			
		

	





	

		

			

				
					
《网页设计与制作项目教程（HTML+CSS+JavaScript）》源代码.zip

				
			

			

				

					02-03
				

			

		

		

			
				
总的来说，《网页设计与制作项目教程（HTML+CSS+JavaScript）》的源代码提供了丰富的实践素材，不仅涵盖了网页设计的基础知识，也涉及到了进阶技巧。通过研究这些实例，你将能够逐步提升自己的网页设计与制作能力，...

			
		

	





	

		

			

				
					
html代码拆分设计,12条技巧让你的HTML代码整洁又规范

				
			

			

				

					weixin_36110344的博客
				

				

					06-05
					
					588
					
				

			

		

		

			
				
良好的HTML代码是一个漂亮网站的基础。当我教别人CSS的时候， 我总是首先告诉他们： 良好的CSS只存在于良好的HTML标记基础上。这就好像一间房子需要一个坚固的地基一样，对不？ 整洁、语义化的HTML标记具有很多的优势，但却还是有很多网站使用着并不友好的标记写法。让我们来看一些写得并不友好的HTML标记， 并针对这些问题进行讨论，从而学习如何书写整洁规范的HTML标记。注： Chris Cyi...

			
		

	





	

		

			

				
					
Javascript二：如何实现Javascript/css与HTML的分离

				
			

			

				

					做一枚优雅的IT女
				

				

					06-06
					
					8148
					
				

			

		

		

			
				
实现Javascript/css与HTML的分离的步骤是很相似的，当然也不同，接下来就是具体的实现。
第一步：首先都是创建文件，只是创建的文件不同。如下图
       
 
1）如果创建JavaScript代码与HTML的分离的文件创建：
a)    选择JavaScript页面类型
b)    显示创建的文件，把  框架里面的代码放入到创建的文件中
（切记:不要把框架代码放入文件

			
		

	





	

		

			

				
					
html度代码分离模板技术

				
			

			

				

					靓靓软件工作室
				

				

					08-28
					
					266
					
				

			

		

		

			
				

php有smarty等
jsp有FreeMarker ，Velocity等


			
		

	





	

		

			

				
					
JavaScript第五章：分离JavaScript

				
			

			

				

					里脊的博客
				

				

					09-21
					
					251
					
				

			

		

		

			
				
  实际上，负责各项任务的JavaScript函数已存入外部文件，问题出在内嵌的事件处理函数中。

  如果我们适用一个“挂钩”，就像css机制中的class或id属性那样，JavaScript代码调用行为与HTML文档的结构与内容分离开。

 JavaScript语言不要求事件必须在HTML中处理，我们可以在外部JavaScript文件里把一个事件添加到HTML文档中的某个元素上。


elem...

			
		

	





	

		

			

				
					
如何理解HTML、CSS和JS三者分离

				
			

			

				

					jaycemxy的博客
				

				

					04-03
					
					4556
					
				

			

		

		

			
				
回答思路：正向答这道题很难说出什么，就像有人问你为什么人类需要空气和水？转换角度，用如果不... ...的思维去回答，如果没有水我们会难以维持生命，没有空气我们不能呼吸会缺氧而死。以这样的思路来解这个问题：  1、HTML可以负责样式，但如果这样会使得内容的结构有很多无用的标签，这让html的结构看上去十分复杂，有的标签是用来表示内容，有的又是用来表示样式，这样很难区分它们之间的逻辑结构。  2、...

			
		

	





	

		

			

				
					
extractCSS – 帮助你从 HTML 中快速分离出 CSS

				
			

			

				

					weixin_34067102的博客
				

				

					10-08
					
					369
					
				

			

		

		

			
				
　　extractCSS 是一个免费的基于 Web 的应用程序，能够从 HTML 中提取风格相关的信息，包括 id、class 和内联样式，而且输出可以定制（缩进和括号的用法）。该工具非常有用，当我们快速创建一个使用了内联样式的 HTML 文件时，如果要分离就会很方便。
您可能感兴趣的相关文章


那些让人惊叹的的国外创意404错误页面设计
让人爱不释手的精美 Web 应用程序图标素材
...

			
		

	





	

		

			

				
					
【Node.js】时钟案例---将一个网页分别拆分成css、html和js文件

				
			

			

				

					qiaoyangla的博客
				

				

					08-06
					
					362
					
				

			

		

		

			
				
案例的实现步骤
创建两个正则表达式，分别匹配和标签
使用fs模块，读取需要被处理的html文件
自定义resolveCSS文件，来写入index.css样式文件
自定义resolveJS文件，来写入index.js文件
自定义resolveHTML文件，来写入index.html文件...

			
		

	





	

		

			

				
					
vue中CSS与JS代码分离

				
			

			

				

					偷得浮生半日闲
				

				

					03-16
					
					1868
					
				

			

		

		

			
				
前言
一个vue页面有着 HTML、CSS和JS代码，看起来代码过多，不好管理，所以就需要分开写CSS和JS


教程
在 assets 下创建 css 和 js 文件夹，在页面中引入
<script src="@/assets/js/home.js"/>

<style lang="less" src="@/assets/css/home.less"/>

或者
<script src="../assets/js/home.js"/>

<style lang="

			
		

	





	

		

			

				
					
web标准---html、css、js分离

				
			

			

				

					我的博客
				

				

					09-01
					
					2461
					
				

			

		

		

			
				
简单的说，就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如
 W3C DOM）、ECMAScript等。 
we

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值