Blogger Information
Blog 35
fans 0
comment 0
visits 22300
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html和css基础知识(基本的标签和选择器的使用列子)—2018年8月10日22:27:58
Hi的博客
Original
537 people have browsed it

进行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的标签/属性的一点个人理解,标签和属性含义已经在代码实例中有注释。

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments