博客列表 >html和css基础知识(基本的标签和选择器的使用列子)—2018年8月10日22:27:58

html和css基础知识(基本的标签和选择器的使用列子)—2018年8月10日22:27:58

Hi的博客
Hi的博客原创
2018年08月16日 16:17:38536浏览

进行web页面的设计过程中html和css是不可缺失的工具,其中标签和样式的使用会提升整体页面的可观赏性,因此对于基础标签和属性的理解要透彻。

下面这段代码是我对基础标签和属性的一点理解

<!DOCTYPE html>
<html>
<head><!-- 定义页面的头部参数 -->
	<title>php中文网—视频教程</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="static/style.css"><!-- 外部样式 -->
	<link rel="shortcut icon" type="image/x-icon" href="inages/footlogo.png"><!-- 在标题处加载一个图标的使用方法 -->
	<style type="text/css">/*内部样式*/
	body{}/*标记选择器*/
	#box{width:100PX; height:100px; background:pink;} /*ID选择器,width:代表宽度,height:代表高度,PX:代表像素是一直长度单位)*/
	.main{width:100PX; height:100px; background:green;}/*类选择器*/
	.test{width:100PX; height:100px; background:blue;} /*测试样式优先级为内联样式>内部样式>外部样式*/
	a{color: red;}/*整个A标签的字体颜色是红色*/
	a[href="http://www.php.cn"]{color: blue;} /*精准定位某一列A标签的字体颜色*/
	a[href="demo2.html"]{ background:pink;}
	div a {color: #000;}/*层级关系选择器,用于定位某一列DIV标签下的A标签字体颜色*/
	#box a{}
	</style>
</head>
<body>
<img src=""><!-- 图片的链接 -->
<a href="http://www.php.cn">php中文网</a>
<a href="http://www.baidu.com">百度</a>
<a href="demo2.html">demo2.html</a>
<a href=""></a>
<div class="main"></div>
<div id="box"></div>
<div class="test" style="background:red;"></div>
<div></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下图片建议带好防护眼睛哟2018-8-10作业手抄代码.jpg

总结

这是我个人对于html/css的标签/属性的一点个人理解,标签和属性含义已经在代码实例中有注释。

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