博客列表 >WEB前端基础之初识HTML/CSS(基本标签和选择器)-2018年8月10日22点00分

WEB前端基础之初识HTML/CSS(基本标签和选择器)-2018年8月10日22点00分

Handwritten丶流年的博客
Handwritten丶流年的博客原创
2018年08月20日 02:32:15731浏览

学习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一个颜色属性,这样的话打开页面背景就会是我们指定的颜色,举个栗子:

红色背景颜色

<body style="background: red">
</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标签等包括在内。他可以设置一个宽高,背景颜色等。举个栗子:

div标签栗子

<div style="background:pink;width:300px;height:300px"></div>

运行实例 »


本小节总结:

1、学习了几种基础标签,基本语法

2、选择器可以用标签,id名,class名来定义其属性

3、设置网站logo用link标签引入:<link rel="shortcut icon" type="image/x-icon" href="static/images/logo.png">


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议