Collection
Collection
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html> <!-- 声明 -->
<html>
<head>
<title>php中文网-培训-感恩的心</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="static/style.css">
<link rel="short icon" type="image/x-icon" href="images/footlogo.png">
<style>
/* tag标签名、id名、class名 */
body{}
#box{width:100px;height: 100px;background: pink;}/* id选择器 */
.main{width: 100px;height: 100px;background: green;}/* class选择器 */
a{color:red;}
a[href="www.php.cn"]{color:blue;}
a[href="demo2.html"]{color:pink;}
div a{color:#000;}
</style>
</head>
<body><!-- 内联样式 style="background:blue;" -->
<img src="">
<a href="https://www.baidu.com">百度</a>
<a href="http://www.php.cn">php中文网</a>
<a href="demo2.html">demo2</a>
<div id="box">
<a href="#">php</a>
</div>
<div class="main"></div>
<div></div>
<div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、 手写作业
3、本次课程总结：
HTML head 元素：
<head>定义了文档的信息
<title>定义了文档的标题
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了脚本文件
<style>定义了HTML文档的样式文件
CSS类型选择器
CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器)，可以向这种元素类型的每个实例上应用声明。
(1)CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲，可以使用CLASS属性来分类元素，在样式表中创建规则来引用CLASS属性的值，然后浏览器自动将这些属性应用到该组元素。
(2)ID属性的操作类似于CLASS属性，但有一点重要的不同之处：ID属性的值在整篇文档中必须是唯一的。
(3)STYLE属性的值实际上是一个或多个CSS声明。通常情况下，使用CSS，设计者将把所有的样式规则置于一个样式表中，该样式表位于文档顶部的STYLE元素内（或在外部进行链接）。
(4)组合选择器类型，可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。