HTML知识点归纳

块元素：div,h1-h6,p  特点：独占一行可以设置宽和高。

内联元素：span：无意义，通常用来做布局用

                  a:超链接（页面跳转，锚点定位）

                 em(斜体)  strong(加粗) 

行内块标签：img：图片标签  hr：横线  br :换行

两个特殊符号：&copy  版权号  &nbsp空格

<img src="imge/book.jpg" alt="图片" title="书"> src:文件目录 alt：加载不成功是显示内容  title：鼠标悬停时内容

<a href="http://www.baidu.com">百度一下</a>  去掉下划线:style="text-decoration:none; 当前页面用：#

     还有更加详细的设置。

1. a:link{
         color: #3c3c3c;
         font-size: 20px;
         text-decoration: none;
         font-weight: 700;
     }

   /* 指正常的未被访问过的链接*/

 

a:visited{
    color: orange;
}

/*指已经访问过的链接*/

1. a:hover{
       color: red;
   }

   /*指鼠标在链接*/

2. a:active{text-decoration:none;

   a:active{
       color: #17861c;
       
   }

   /* 指正在点的链接*/

3. 锚点定位（通过ID去跳转）

<a href="#de">去尾部</a> <div style="height: 1500px">e</div> <p id="de">sdsds</p>   跳转到当前页面指定位置

<a href="demo.html#de">跳转到指定页面的指定的位置</a>    

列表: 

1. 无序列表
   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>

2. 有序列表

   <ol>
       <li></li>
       <li></li>
       <li></li>
   </ol>

3. 自定义列表

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dt> </dt>
    <dd></dd>
    <dd></dd>
</dl>

列表前面符号去掉

li{
    list-style: none;
}

列表前面符号改成图片

li{
   list-style-image: url("imge/pic1.png");
}

列表行置：方法一:display:inlink-block;转化成行块（不建议用这种方案）

                  方法二：通过浮动