大家好，欢迎来到IT知识分享网。
作为网页(Web)前端开发的基础，前端三剑客是指HTML，CSS，JS(JavaScript)。
HTML 作用于网页的结构，CSS 作用于网页的样式，JavaScript 作用于网页的交互和动态效果。
形象地形容为网页的骨骼，皮肤和器官，下面简单介绍一下这三种技术：
一、HTML
HTML(Hyper Text Markup Language)超文本标记语言，可以使用HTML来建立自己的WEB站点，HTML运行在浏览器上，由浏览器来解析。头标签基本上是固定的，示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello,World!</title>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>
二、CSS
.img{ width:200px; height:200px; } body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; }插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
css的代码：
ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } /* 鼠标移动到选项上修改背景颜色 */ li a:hover { background-color: #555; color: white; }html完整的代码（使用了内联式）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello,World!</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 鼠标悬停时修改背景和字体的颜色 */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html
三、JS
js代码可以实现网页交互和动态效果，是用于加载内容，处理验证的脚本语言
function f() { // 声明一个函数 document.getElementById("demo").innerHTML = "Hello,World!";} f(); // 调用函数如果需要在 HTML 页面中插入 JavaScript要加上 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Hello,World!</title>
<body>
<p>声明一个函数，函数调用时在id="demo"的元素上输出 "Hello,World"</p>
<p id="demo"></p>
<script>
function f() {
document.getElementById("demo").innerHTML="Hello,World!";
}
f();
</script>
</body>
</html>
运行在浏览器的结果：
END.
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/126231.html
