<!doctype html><!--声明文档类型 网页文档-->
<html><!--根目录标签 父级-->
<head><!--网页的头部 用户看不见的-->
<meta charset='UTF-8'><!--国际编码 字符的编码格式-->
<!--网页三要素 title keywords description-->
<title>咸鱼联盟</title><!--网页的标题-->
<meta name='keywords' content='关键的搜索字符'><!--让搜索引擎找到网页-->
<meta name='description' content='这是一个简单的模板文件'><!--网页的描述-->
<style type="text/css">
.box-one{ /* .+名字 class选择器 */
width:300px;
height:150px;
background:yellow;
}
.box-two{
width:300px;
height:75px;
background:deeppink;
}
#text{ /* #+名字 id选择器 */
width:300px;
height:100px;
background:purple;
color:yellow; /* 设置文字颜色 */
}
.box-three{
width:300px;
height:100px;
background:pink;
}
.box-three .box-four{ /*后代选择器*/
width:150px;
height:50px;
background:yellow;
}
.box-three+.box-four{ /* 相邻(下面的)兄弟选择器 */
width:300px; /* 可以用~代替+选中下边所有的兄弟 */
height:100px;
background:green;
}
body .box-four{
width: 100px;
height: 100px;
background: greenyellow;
}
.box-five{
width: 300px;
height: 100px;
background: antiquewhite;
}
.box-five>.box-six{ /* 子代选择器 */
width: 100px;
height: 50px;
background: purple;
}
*{ /* 通配符选择器 */
}
</style>
</head>
<body><!--网页的身体 用户可视化区域-->
<div class="box-one"></div>
<div class="box-two"></div>
<p id='text'>咸鱼联盟</p>
<div class="box-four"></div>
<div class="box-three"> <!--父级-->
<div class="box-four"></div> <!--子级-->
</div>
<div class="box-four"></div> <!--兄弟-->
<div class="box-four"></div>
<div class="box-five">
<div class="box-six"></div>
</div>
<!--
命名规范
统一使用单引号
不允许出现数字开头结尾
html中不出现'_',选用'-'
取名要规范,百度有
选择器
标签选择器 div p ul li
class选择器 .+名字
id选择器 #+名字
后代选择器 只要有空格就是后代选择器
相邻兄弟选择器 .box-three+.box-four仅是下一个兄弟
普通兄弟选择器 .box-three~.box-four下边的兄弟都可以选的到
后代选择器 body .box-four 但是这个的优先级要比class选中的低
子代选择器 .box-five>.box-six 选择儿子辈的东西
复合选择器 div.wrap 叫wrap的div标签
选择器的权重
id选择器>class选择器>标签选择器>通配符选择器
权重高的选择器会覆盖权重低的重复属性(就是都有的属性)
id选择器>后代选择器>class选择器
-->
</body>
</html>
Python3Turtle