HTML+CSS+学习总结

 

写在前面的话：前端主要由“HTML+CSS+Javascript”,如果以盖房子类比三者的关系，HTML就好比是盖房子的原材料，沙浆和砖块，CSS就好比钢架和装修，所有的布局和内饰都需要CSS来实现，js就好比房间酷炫的灯光和流水墙，所有动态的元素都靠js实现！

一、HTML

知识点总结（重要且容易忽略的知识点）:

1. <a></a>标签，
   功能：添加超链接和锚点
   eg: <a href="http://www.baidu.com" tsrget="_self"> 搜索入口</a>
   解析：
   href="http://www.baidu.com" ——指的是点击“搜索入口”后会打开连接“http://www.baidu.com”
   tsrget="_self"——覆盖当前页面打开href的超链接
   补充：
   target的四个值：_sefl 、_blank、_top 、 _parrent，分别表示，在覆盖当前页面打开href超链接、在新的页面打开超链、在顶层框架打开、在父框架来装载新资源
2. 列表相关
   <ul>无序列表、<ol>有序列表、两者的子元素，<li>列表项；
   <dl>定义术语列表项，只能包含<dt>和<dd>两种子元素，<dt>定义标题列表项，<dd>定义普通列表项。
3. <img>添加图片：
   src:指定图片文件所在的位置，可以是相对路径也可以是绝对路径；
   height和width:指定图片的高度和宽度，但是一般只指定两个参数中的一个，另一个根据图片原有的长宽比自动调整；
   alt:指定一段文本，该文本的作为该图片的提示信息；
4. 表格相关元素：
   <table>标签，用于定义表格
   属性：
   cellpadding:指定单元格内容和单元格边框之间的距离;
   cellspacing:指定单元格之间的距离；
   特别注意：可以通过content-collapse：collapse属性合并单元格边框
   <caption></caption>用于定义表格标题，该标签内容可以是文本、图片、超链接、表单空间以及文本格式化元素；
   <tr>表示表格行
   <th>表示表格表头
   <td>表示表格普通单元格，该标签的属性如下：
         colspan="n"：合并所少个列单元格，被合并的列单元格位置的单元格应该删除；
         rowspan="n"：合并多少个行单元格，被合并的行单元格位置的单元格应该删除；
5. HTML 的增强iframe元素属性：
   src:指定这个元素将装载哪个资源；
   name:指定iframe元素的名称；
   height和width：指定装载的页面窗口的高和宽；
6. HTML新增的通用属性：
   contentEditable:将该属性设置为true，就被允许在网页上可以编辑该属性所在的元素；该属性具有可继承性。
   hidden：被设置了该属性的元素在html 页面上被隐藏，不显示出来。

<link>标签的妙用：
<link rel="stylesheet" href=" css/loginPage.css">链接外部的css文件；
<link rel="shortcut icon" href="java.ico">指定页面的图标
<link  rel="prefetch" href="login.jpg">预先加载资源；

---

二、CSS

知识点总结：

1. background相关：
   background:url("") center/cover  no-repeat——插入背景图片，且让背景图片在该容器中居中，并且图片没有重复的情况下覆盖整个容器；
   background-color: red;——背景颜色；
2. 容器基本属性：
   width：100px (70%);——具体的像素值或者百分比，为了实现容器随着浏览器窗口大小动态调整布局，只设置容器的width且按照百分比；
   height：200px;——一般不直接设置容器高度，在高度方向，依靠容易中元素的高度填充和margin、padding的设置来自动确定最终的高度；
3. 容器的定位：
   margin：当前容器与父容器的容器之间的距离，也被称为外边距。可以分别设置，margin-top,margin-right,margin-bottom,margin-left;当容器的四个方向的margin相同时，也可以合并设置，如margin：10px;当上下margin相同，左右margin相同，可以设置为margin：10px  auto,表示上下的margin和10px,左右相等且随着随着浏览器窗口的大小自动调整，这也是div 等块体容器在父容器中水平居中的方法；如果margin：10px  7px  28px;表示上下分别是10px 和28px，左右都是7px；
4. 内容的定位：
   padding：指定当前容器中内容（文本、图片、input框）与当前元素所在的容器的上下左右的边距，也被称为填充边距；具体参数设置和margin相同；
5. 布局相关：
   有了web设计原型，首先分析其布局，然后画出布局的操作 ，理清楚每个元素在的父子关系，属性继承关系，横向和纵向布局影响因素，然后根据布局设计填充CSS代码，进行内饰装修。
   基本布局方式有三种，flow、float、layer（layer又包括，positive、absolute、fixed），下面简单说说float布局思路，案例如下：要写河北大学的官网的首页中红色框内的元素， 布局解析如下：
    

   

   设计布局如下：

   

    

   相同颜色的为兄弟关系，直接包含的为父子关系，左右的使用float布局，上下的使用block属性，导航栏设置display：block-inline属性，可是实现在同一行展示；