学习html是后期学习php必须走的路,前后端结合可以发出巨大的能量,本小节文章将记录HTML基本标签和CSS选择器的使用和注意事项
首先,放上一段代码
<!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标签跳转栗子
<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标签栗子
<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">