【HTML&CSS】简单网页布局

一、学习内容回顾

☆常用标签列举

<p></p>                                                     <!--段落标签-->
 <b></b>                                                    <!--加粗标签-->
 <br/>                                                      <!--换行标签-->
 <img src="" alt=""/>                                       <!--插入图片-->
 <ul>                                                       <!--无序列表-->
     <li></li>                                              <!--列表项-->
     <li></li>							 
 </ul>     	 							
 <ol>                                                       <!--有序列表-->
     <li></li>                                              <!--列表项-->
     <li></li>
 </ol>
 <span></span>                                              <!--文字标签-->
 <div></div>                                                <!--区隔标记-->
 <sub></sub>                                                <!--下标-->
 <sup></sup>                                                <!--上标-->
 <a href=""></a>                                            <!--连接标记-->
 <iframe src="" frameborder="0"></iframe>                   <!--网页中插入框架-->
 <table>                                                    <!--表格标签-->
     <tr>                                                   <!--表格行-->
         <td></td>                                          <!--表格列-->
     </tr>
 </table>
<i></i>                                                    <!--斜体-->
<h></h>                                                    <!--标题标签h1到h6-->
<form action=""></form>                                    <!--表单标记-->
<pre></pre>                                                <!--预定义格式标签-->

☆元素选择器：匹配元素

1. 基本选择器：按标签名选择
   TagName{
   }

2. class类选择器
   .ClassName{
   }

3. id选择器
   #id{

   }

4. 子父元素选择器
   ul>li{
   }(直接子元素)
   ul li{
   }(所有后代元素）

5. 属性选择器
   TagName[class][id]{
   }
   TagName[class=" “][id=” "]{
   }

☆样式

• 样式的写法：属性：值；
• 样式可以分为：行内样式 内嵌样式 外部样式.
• 使用外部样式时，head标签中应用link标签导入样式文件.
• 若网页样式比较多或者复杂时，采用内嵌样式会大大降低网页的加载速度.
• 如果样式冲突：（优先级）行内样式>内嵌样式>外部样式.
• 如果样式不冲突：混合使用.
• 内嵌和外部样式有优先级之分：从上到下 id>class>元素.
• 如果要提高样式优先级：属性值后面加!important.

☆定位position

• 定位分为：绝对定位(不占位置） 相对定位(占位置） 固定定位
• 元素定位后可以使用z-index top bottom left right属性.
• 绝对定位position:absolute top bottom left right属性值是相对于浏览器定位的.
• 相对定位position:relative top bottom left right属性值是相对于元素本身的位置来定位的.
• 若想要通过绝对定位实现元素相对于其父元素移动，其父元素必须是相对定位的.

☆伪类

        /*:visited 已访问过伪类*/
        TagName:visited{
            color: blue;
        }
        /*:hover 鼠标悬停伪类*/
        TagName:hover{
            color: orange;
        }
        /*:link 未访问过伪类*/
        TagName:link{
            color: deeppink;
        }
        /*:active 鼠标激活伪类*/
        TagName:active{
            color: red;
        }

注意：

• hover必须在link 和visited之后，active必须在hover之后。
• 伪类的名称不区分大小写。

二、需要掌握的知识点

☆iframe标签的使用

<a href="https://www.taobao.com/" target="tarlist">淘宝首页</a>
<iframe name="tarlist" src="http://www.baidu.com"></iframe>

☆锚链接
1、锚点在其他页面

<a href="mao1.html#target">找衣服</a>
<a name="target">衣服</a>        				   <!--这行代码在mao1.html页面-->

2、与锚点在同一页面

<a name="targetC">衣服</a>
<a href="#targetC">找衣服</a>

☆多级菜单注意

• 鼠标悬停出来的子菜单，必须是当前悬停元素的子集

☆盒子模型

☆meta标签的作用

1. meta 标签是一个特殊的 html标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等，许多搜索引擎都使用 meta 标签信息。例如，要将 John 指定为作者，则使用以下 meta 标签：

<meta name = “作者" content = "John">

2. meta的http-equiv属性用于向浏览器提供一些说明信息，从而可以根据这些说明做出相应。 http-equiv 属性可用来代替 meta 标签中的 name 属性 :

<meta  http-equiv = "expires" content = "Wed, 26 Feb 1997 GMT">

3. 表示每隔2秒，自动刷新网页：

<meta  http-equiv="refresh"  content=“2">

4. meta标签指定了当前文档所使用的字符编码为gb2312，也就是中文简体字符:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">