前端三剑客必须要知道的点

danny__258__

已于 2024-07-03 11:47:34 修改

阅读量647

点赞数 16

于 2024-07-03 11:42:56 首次发布

本文链接：https://blog.csdn.net/danny__258__/article/details/140146085

版权

作为网页(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>

其中<title></title> 是网页的名称，即显示在浏览器中的网页名，h1-h6标签表示标题字号从大到小，<p>标签paragraph是段落的意思，除此之外还有各种标签，单标签，双标签，无序列表<ul><li>有序列表<ol>，其中有固定的初始值，表单表格标签等等。

二、CSS

css(Cascading Style Sheets)可以定义图片库的样式，包括布局和外观，用来描述网页样式和布局的布局的样式表语言。
下面的代码对图片宽高，网页的背景颜色，标题一的颜色和文本位置居中，段落字体样式进行设置

.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

text-decoration：none 不显示超链接文字的下划线
当鼠标悬停在超链接-主页时，背景颜色和字体颜色会发生改变

三、JS

js代码可以实现网页交互和动态效果，是用于加载内容，处理验证的脚本语言

function f() { // 声明一个函数    
	document.getElementById("demo").innerHTML = "Hello,World!";} 
	f(); // 调用函数

如果需要在 HTML 页面中插入 JavaScript要加上 <script> 标签。

<!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>

运行在浏览器的结果：