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