Collection
Collection
学习html是后期学习php必须走的路，前后端结合可以发出巨大的能量，本小节文章将记录HTML基本标签和CSS选择器的使用和注意事项
首先，放上一段代码
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html> <!-- 声明网页类型 -->
<html> <!-- 所有网页内容全部写在html双标签内 -->
<head><!-- 定义网页头部 通常为title和meta -->
<title>基本标签和选择器一</title><!-- 网页标题 显示在浏览器标签栏 -->
<meta charset="utf-8"> <!-- 声明网页编码格式 -->
<link rel="stylesheet" type="text/css" href="static/css/style.css"><!-- 引入外部文档使用link标签 rel:当前文档和被链接文档之间的关系 type:被链接文档的类型-->
<link rel="shortcut icon" type="image/x-icon" href="static/images/logo.png"><!-- 引入外部图片作为网页logo -->
<style type="text/css">/*内部样式，只针对当前页面*/
/*标签名、id名、class名*/
body{background: pink;}
#box{width:100px;height: 100px;background: pink;}
.main{width: 100px;height: 100px;background: red;}
a{color: green;}
a[href="http://www.php.cn/"]{color: blue;}
a[href="test_page.html"]{color: black;}
div a{color: gray;} /*派生选择器*/
#box a{color: black;}
</style>
</head>
<body style="background: #fff"> <!-- 内联样式 -->
<img src="">
<a href="https://www.baidu.com/">百度</a>
<a href="http://www.php.cn/">php中文网</a>
<a href="test_page.html">test_page</a>
<a href="#">#</a>
<div id="box">
<a href="">php</a>
</div>
<div class="main"></div>
<div></div>
<div></div>
</body>
</html>这么多的代码，要怎么解读呢？首先，可以观察到有很多成对的东西出现，这个东西就叫做标签，比如<html></html>、<head></head>、<body></body>、<div></div>、<a></a>、<style></style>、<title></title>，也有单独的标签，也就是单标签，比如<link>、<img>，在这些标签内部，有一些代码，除此之外，代码的第一行，是声明此文档的类型为html文档，还可以是xml、xhtml等。
所有的代码，除了声明文档类型之外，全部写在html双标签内。
在head标签内，定义网页的头文件，通常为网页的标题title和声明网页的编码格式meta，此外还有引入外部的样式文件、内部样式等。
body标签内部就是网页的关键部分了，所有的网页内容都放在这里。我们可以给body一个颜色属性，这样的话打开页面背景就会是我们指定的颜色，举个栗子：
a标签可以用作跳转用，比如点击跳转百度首页，点击跳转php中文网，还可以跳转到咱们自己网站内的其他页面，还可以制作显示用，不跳转。举个栗子：
<a href="https://www.baidu.com/">百度</a> <a href="http://www.php.cn/">php中文网</a> <a href="test_page.html">test_page</a> <a href="#">#</a>
img标签可以引用图片进行展示，可以是本地图片也可以是网络图片，同时可以设置尺寸。举个栗子：
<img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" style="width:300px;height:400px;" >
div标签可以把a标签，img标签等包括在内。他可以设置一个宽高，背景颜色等。举个栗子:
本小节总结：
1、学习了几种基础标签，基本语法
2、选择器可以用标签，id名，class名来定义其属性
3、设置网站logo用link标签引入：<link rel="shortcut icon" type="image/x-icon" href="static/images/logo.png">