截止到现在，给我最大的冲击就是HTML没有像JAVA那样严格
可以随意搭配，换句话说 HTML要的就是效果 没有一个固定的方法 即便是代码有错误 也可以实现效果
今天的东西挺好吃 能吃的消 哈哈 开森
AM:
边框样式 3个方面
1 边框宽度 border -width
2 边框外观（四周）:border-style:solid（实）dashed,(虚)，dotted（点），double（双实）
3边框颜色 border-color
简单写法：border：1px dotted red；
注意格式顺序：边框 像素 样式 颜色
局部边框样式：
border-bottom：1px double red
背景样式：
background-color 背景颜色 image 图像路径 repeat：纵向横向平铺
attachment： 是否随内容而滚动 background-postition:-30 -30;背景图起始位置
PM：
超链接样式：4个伪类：
未访问的样式：#a1:link{text-decoration:none;color:red;}
访问后： #a1:visited {color:yellow;}
鼠标经过时：#a1:hover{color:#666666}
点击时： #a1:active {color:blue;}
这4个伪类，必须按照 llink、visited、hover、active 顺序进行 不然无法读取
列表样式 list-style-type: 属性值;
decimal：1、2、3
lower-alpha：小写a、b
upper-alpha：大写
lower-roman：小写罗马
upper-roman：大写罗马
ul li{
list-style-type: circle;
list-style-image: url(img/sp.png);}
ol li{
list-style-type: lower-alpha;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style >
.p1{
/* 边框10像素 */
border-width: 10px;
/* 边框实线 */
border-style: solid;实线,虚线dashed;点线dotted}双实线double;
text-align: center;
/*边框颜色*/
/*border-color: red;*/
/*简单写法*/
border: 1px dotted orange;
/* 格式顺序:边框 像素 样式 颜色
/* 局部边框样式:*/
/*边框底线 */
border-bottom:1px dotted #000000;
border-left: 2px double #AD0002;
border-right: 2px double #295CC3;
/* 背景样式 ：1.背景颜色 2。背景图像*/
背景颜色 background-color: #FF0000;
背景位置 background-image: url(img/1.jpg);
背景图起始位置 background-position:-30 -500;
}
body{
background-image: url(img/2.png);
/* 显示方式:纵向,横向,平铺 */
background-repeat: repeat-y;
/* 是否随内容滚动 */
background-attachment: fixed;}
/* PM
/*超链接样式：未访问的样式*/
#a1:link{ text-decoration: none; color: red;}
/*访问后的样式*/
#a1:visited{ color: yellow;}
/*鼠标悬浮时的样式*/
#a1:hover{ color:#666666;}
/*点击时的样式*/
#a1:active{color:blue;}
/*hover任意鼠标经过的样式*/
#p1:hover{color: pink;}
#p1:hover{color: salmon;}
ul li{
list-style-type: circle;
list-style-image: url(img/sp.png);}
ol li{
list-style-type: lower-alpha;}
</style>
</head>
<body>
<p class="p1">你好我打啊十大离开家付了款 </p>
<span id="a1">的轻举妄动拉开距离贷款纠纷额空间 </span>
<!-- "style=text-decoration:none;" 去下划线超链接样式 -->
<a href="#" style="text-decoration: none;">百度一下你就知道</a>
<p id="p1">你好，Hello</p>
<!-- 无序列表 -->
<ul>
<li>a.</li>
<li>b.</li>
<li>c.</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>a.</li>
<li>b.</li>
<li>c.</li>
</ol>
</body>
</html>