收藏
批改状态：合格
老师批语：
进行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>点击 "运行实例" 按钮查看在线实例
以下图片建议带好防护眼睛哟
总结
这是我个人对于html/css的标签/属性的一点个人理解，标签和属性含义已经在代码实例中有注释。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
