写在前面的话:前端主要由“HTML+CSS+Javascript”,如果以盖房子类比三者的关系,HTML就好比是盖房子的原材料,沙浆和砖块,CSS就好比钢架和装修,所有的布局和内饰都需要CSS来实现,js就好比房间酷炫的灯光和流水墙,所有动态的元素都靠js实现!
一、HTML
知识点总结(重要且容易忽略的知识点):
- <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超链接、在新的页面打开超链、在顶层框架打开、在父框架来装载新资源 - 列表相关
<ul>无序列表、<ol>有序列表、两者的子元素,<li>列表项;
<dl>定义术语列表项,只能包含<dt>和<dd>两种子元素,<dt>定义标题列表项,<dd>定义普通列表项。 - <img>添加图片:
src:指定图片文件所在的位置,可以是相对路径也可以是绝对路径;
height和width:指定图片的高度和宽度,但是一般只指定两个参数中的一个,另一个根据图片原有的长宽比自动调整;
alt:指定一段文本,该文本的作为该图片的提示信息; - 表格相关元素:
<table>标签,用于定义表格
属性:
cellpadding:指定单元格内容和单元格边框之间的距离;
cellspacing:指定单元格之间的距离;
特别注意:可以通过content-collapse:collapse属性合并单元格边框
<caption></caption>用于定义表格标题,该标签内容可以是文本、图片、超链接、表单空间以及文本格式化元素;
<tr>表示表格行
<th>表示表格表头
<td>表示表格普通单元格,该标签的属性如下:
colspan="n":合并所少个列单元格,被合并的列单元格位置的单元格应该删除;
rowspan="n":合并多少个行单元格,被合并的行单元格位置的单元格应该删除; - HTML 的增强iframe元素属性:
src:指定这个元素将装载哪个资源;
name:指定iframe元素的名称;
height和width:指定装载的页面窗口的高和宽; - 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
知识点总结:
- background相关:
background:url("") center/cover no-repeat——插入背景图片,且让背景图片在该容器中居中,并且图片没有重复的情况下覆盖整个容器;
background-color: red;——背景颜色; - 容器基本属性:
width:100px (70%);——具体的像素值或者百分比,为了实现容器随着浏览器窗口大小动态调整布局,只设置容器的width且按照百分比;
height:200px;——一般不直接设置容器高度,在高度方向,依靠容易中元素的高度填充和margin、padding的设置来自动确定最终的高度; - 容器的定位:
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; - 内容的定位:
padding:指定当前容器中内容(文本、图片、input框)与当前元素所在的容器的上下左右的边距,也被称为填充边距;具体参数设置和margin相同; - 布局相关:
有了web设计原型,首先分析其布局,然后画出布局的操作 ,理清楚每个元素在的父子关系,属性继承关系,横向和纵向布局影响因素,然后根据布局设计填充CSS代码,进行内饰装修。
基本布局方式有三种,flow、float、layer(layer又包括,positive、absolute、fixed),下面简单说说float布局思路,案例如下:要写河北大学的官网的首页中红色框内的元素, 布局解析如下:
设计布局如下:相同颜色的为兄弟关系,直接包含的为父子关系,左右的使用float布局,上下的使用block属性,导航栏设置display:block-inline属性,可是实现在同一行展示;