如果把网页看做一个动物，那么其中html就是动物的骨架，可以拥有不同的形状；css就像动物的外观，可以表现出各种各样的外表；而JavaScript是能够与其进行交互，可以给反馈的一些动作。网页的本质就是文字组成的计算机代码，因此记事本软件等各种写代码的软件工具均可以用来写网页，但网页设计需要专门的例如dreamweaver等工具软件来完成才会比较方便。 网页就是由HTML，CSS和JS(JavaScript)共同组成，构成了丰富的互联网世界，基于这些基础技术又逐渐衍生发展出来一系列的框架，改进的typescript等语言，还有比较著名的脚手架vue-cli、create-react-app 和 vite等。 有朋友问？现在AI这么发达了，我们还需要学习这些知识吗？笔者认为确有必要，须了解一些基本技术，才能更好的接触AI和使用AI；正因为有AI的加入，反而不需要学习太深入的内容，只需要了解基本原理，技术和框架。然后在现有的方法上进行创新，继续创造一些新的技术等。 接下来介绍一下骨架HTML，全称是HyperText Markup Language，翻译为中文是超文本标记语言，也可以理解为专为浏览器设计的可以识别进行解释输出的一门计算机程序设计语言，以html为后缀的文本文件。 网页大致结构如下： 其骨架构成为head头和body体，其中头标记的内容不会在浏览器页面中显示，出现在浏览器页面的内容为体标记内的部分。网页中包含非常多的标记，除了上述的h1和标记之外，还有可以在网页中插入图片，音频，视频，表格和表单等的标记。具体显示效果如下： 网页大多都有良好的布局方式，结构合理，例如：菜鸟教程官网:https://www.runoob.com/html/html-tutorial.html snipaste截图工具:https://zh.snipaste.com/download.html 中国大学MOOC：https://www.icourse163.org/ 国家中小学智慧教育平台：https://basic.smartedu.cn/ 还有一些比较惊艳的交互网站，例如苹果17商品介绍页面 https://www.apple.com.cn/iphone-17-pro/ 在任意网站按F12键就可以切换到开发者模式看到网页的代码。 下面我们将对骨架进行填充外表，设计良好的界面。上述介绍的网页结构布局通常是最上面的导航栏，中间的大图轮播图，侧边菜单栏和底部网站信息，点击网页中图片和文字等可以通过超链接跳转到其他页面。 CSS样式可以给这些文字图片等设置大小，高宽，颜色等属性。小型的网页网站可以通过HTML的标记进行区分，大型网站网页一般都是单独分开的css文件，专门用来保存样式表。 专门保存css样式的文件需在html主文件的头标记中的link标记对里面指定存放的css样式表的位置。上述代码就是链接样式表的示例，rel为名称，href是css文件所在的文件路径。 同一个文件内设置CSS样式表一般在head头标记对的style样式标签中。 设置网页背景颜色为橙色，网页中h1标题标记颜色为红色，字体居中显示，设置段落标记颜色为蓝色，字体大小为15像素。 通过上述两种技术已经打造了完整实体，只需有一些交互就可以完成基本的网站的编写。同样的，js交互脚本文件也可以通过文件的方式单独保存。 或者在head头标记中使用script标记进行编写。 比如更改网页内容的js代码如下： 这段代码实现了id绑定的段落标记的内容点击按钮更改为我的第一个JavaScript函数。 在实际开发的过程中，有很多工作是重复的，对于这些重复的内容可以直接封装起来，形成一种脚手架，直接使用这些封装好的脚手架代码即可。还有很多计算机编程语言对前端都有很好的框架支持，例如Java的web框架，著名的有Maven，Spring Boot，python的flask，django等等数不胜数。这些都是开发网页端程序用到的技术。 比较主流的前端技术vue和react也是各有千秋，一次编写多段运行的代码基本都是使用前端技术写出来进行多端适配的。 vue深入学习官方网站:https://cn.vuejs.org/ react深入学习的官网：https://zh-hans.react.dev/learn 写在最后，下面是本公众号的所有文章主题，公众号于2016年注册，发表了多篇文章，坚持原创，写作不易，希望各位多多支持。 另外，由于作者水平和时间有限，文章难免有错误，文中有不当之处敬请批评指正！ 感谢你的关注，分享与转发，你的支持是我前进的动力，欢迎评论区留言。
一文搞懂网页基本原理，做提高工作效率的网页工具
网页基础知识
HTML超文本标记语言
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页地址URL处标题</title>
</head>
<body>
<h1>网页内容标题标记</h1>
<p>网页显示的段落标记</p>
</body>
</html>
CSS样式
<link rel="stylesheet" href="css/xxx.css">
body{
background:orange
}
h1{
color:red;
text-align:center;
}
p{
color:blue;
font-size:15px;
}Javascript动态脚本
<script src="js/jquery_2.0.0.min.js"></script>
<script language="JavaScript">js代码
</script> <p id="demo">网页显示的段落标记</p>
<button type="button" onclick="myFunction()">点击一下</button>function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
前端框架
名称（可直接点击前往）
内容
相关的局域网机房工具，分享常用工具和技术。
使用安卓手机Python的turtle库编程画各种有趣图形。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
