简述HTML、JavaScript、CSS、PHP技术在Web开发中的作用

Posted 2023-05-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简述HTML、JavaScript、CSS、PHP技术在Web开发中的作用相关的知识，希望对你有一定的参考价值。

参考技术A 把一个网页当成一本书来看的话，html就是里面的内容，包括章节，段落，文字，图片等等，是这本书的“数据”。
css就是控制这本书里面内容的样子，包括文字的大小啦，间距啦，颜色啦等等，
javascript主要还是起着互动的作用，让用户和这本书进行交互，有点像哈利波特里面的书一样，人可以点击啊，拖动啊里面的内容，从而触发不同的事件来实现不同的功能的，另一方面就是网页中的动画部分也需要javascript来进行控制。
其实说到动画的话，就是通过javascript来控制css样式的规律性变化。
至于php的话它是服务器语言，是再服务器上面进行编译的，当然包括了对服务器上面内容的控制，包括服务器上面文件的创建，删除等等，当然还包括了服务器上面数据库的访问，最终由PHP输出成HTML给客户端进行阅读

JavaScript简述

JavaScript 是属于 HTML 和 Web 的编程语言。
JavaScript 是 web 开发者必学的三种语言之一：
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程

JavaScript 能够改变 HTML 内容：

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript 同时接受双引号和单引号

JavaScript 能够改变 HTML 属性

<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>

<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">

<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>

JavaScript 能够改变 HTML 样式 (CSS)

document.getElementById("demo").style.fontSize = "25px";

JavaScript 能够隐藏 HTML 元素

document.getElementById("demo").style.display="none";

JavaScript 能够显示 HTML 元素

document.getElementById("demo").style.display="block";

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间
JS代码可以放在 HTML 页面的<body> 或 <head> 里
把脚本置于<body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示
外部脚本
```
<script src="myScript.js"></script>
```
外部引用
可通过完整的 URL 或相对于当前网页的路径引用外部脚本：
```
<script src="https://www.w3school.com.cn/js/myScript.js"></script>
```
JavaScript 显示方案
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML写入 HTML 元素
- 使用 console.log() 写入浏览器控制台

简单实例
请写一段js，创建一个div标签，id等于test，宽度200像素，高度100像素，并把它添加到body中去

<script language="javascript">     
 /*添加div*/  
 function addDiv()	   
 	//创建一个div   
    var my = document.createElement("div");   
    //通过div指定id
    my.id = 'test'
   	//通过样式指定宽度   
    my.style.width=200;   
    //通过样式指定高度   
   	my.style.height=100;   

    //添加到页面   
   	document.body.appendChild(my);   
    
</script>

以上是关于简述HTML、JavaScript、CSS、PHP技术在Web开发中的作用的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript简述

PHP、HTML、CSS、Javascript 表单安全

如何用html css javascript php制作购物车？

程序员日常 | HTML+CSS+JavaScript+PHP

WooCommerce- 画布/绘画的 SizeInfo 按钮。 [PHP,Javascript,html,css]

用于 Web 开发和设计的有用 Vim 插件（php、html、css、javascript）？ [关闭]