<!DOCTYPE html><!-- 声明文档类型 -->
<html><!-- html标签 lang设置文档语言 -->
<head><!-- 声明网页文件的头部 -->
<meta charset="UTF-8"><!-- meta标签(用于声明网页显示方面的设置) charset(设置网页字符编码格式) -->
<title>Document</title><!-- 网页标题标签 -->
<link rel="stylesheet" type="text/css" href="./static/css/main.css"><!-- link标签(用于引入外部文件) 标签中属性rel表示网页文档与引入的外部文件的关系，type属性表示引入文件的类型，href记录外部文件的地址以便页面载入时进行链接 -->
<link rel="shortcut icon" type="image/x-icon" href="./static/img/niceguy.png"><!-- 引入网页title图标 -->
<!-- style内部样式标签 作用域为本html页面 -->
<style>
/*设置样式时选择器可用:
1.标签名 tagName{},
2.类名 .className{},
3.ID名 #id{},
4.属性设置(可以自定义属性) [attribution="value"]{}
5.根据上下关系 tagName > #id 等等
6.用以上几种选择方式组合使用 */
/*标签选择器*/
body{
font-size: 12px;
color: black;
line-height: 40px;
text-indent: 10px;
}
li{
list-style-type: none;
}
/*类选择器*/
.active{
background-color: #ccc;
}
/*id选择器*/
#main{
height: 200px;
width: 30%;
}
/*属性选择器*/
[data-mark="selected"]{
font-size: 1.5em;
}
/*派生选择器*/
#main >ul >a{
border-left: 1px solid #ccc;
}
/*组合使用*/
ul[data-mark="pull"] a.home{
text-decoration: none;
color: pink;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li data-mark="selected"><a href="#">测试</a></li>
<!-- 内联样式 在标签中加入style属性，其值为样式的内容 -->
<li style="transform: rotate(180deg);background-color: yellow;"><a href="#" style="font-size: 20px;color: red;">测试</a></li>
<li><a href="#">测试</a></li>
</ul>
<ul data-mark="pull">
<li><a href="https://www.baidu.com">百度</a></li>
<li><a href="http://www.php.cn">PHP中文网</a></li><!--跳转至PHP中文网的超链接-->
</ul>
</div>
</body>
</html>以下为手抄部分
