黑马程序员技术交流社区

标题: 前端基础 [打印本页]

作者: HydraNight 时间: 2019-6-8 00:04
标题: 前端基础

从5月17日开班到现在，已经从一个小白学习了一些前端的知识：

1、什么是前端？

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

2、常见的浏览器

IE、火狐（Firefox）、谷歌（Chrome）、safari和Operra，统称5大浏览器，我们常用谷歌浏览器。

HTML

1、Web标准

由于各个浏览器的内核不同，所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致。Web标准不是一个标准是一系列的标准：

结构标准（html） ---- 搭建页面的结构

表现标准/样式标准（css）---- 页面样式的美化

行为标准（javascript）--- 实现页面的交互效果

2、HTML的认识

HTML是超文本标记语言，不是编程语言；

所有的html标记（标签）都要放在尖括号<>里面

3、HTML的主要结构：

<html>

<head>

</head>

<body>

网页主体内容

</body>

</html>

4、html标签分类

常见的双标签

div、span、p、h1-h6、b、strong、s、del、i、em、ins、u、a

常见的单标签

br、hr、img

5、html注释：

添加注释的作用：说明代码的含义，更好的管理代码的可读性，程序是不会对注释的代码进行解析的；

快捷键：Ctrl+？

表单

完整的表单由提示文本、表单、表单域（总体的提交数据的标签）组成

Input按钮组控件

普通按钮：<input type=“button” value=“普通按钮”/> 必须要自己设置value值；

提交按钮：<input type=“submit” />；可以设置自己的value值也可以用默认的；

重置按钮：<input type=“reset” />；可以设置自己的value值也可以用默认的；

图片按钮：<input type=“image“ src=”图片路径”/> src属性必须书写查找图片路径；

文件域：<input type=“file” /> 上传文件使用；

CSS

1、Css的作用

Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；

2、使用css的原理

能够将结构html和样式css分离书写，简化代码，提高可阅读性；

3、css的书写位置

分为3类：行内式、内嵌式（内部样式）、外部链接式

三种链接方式的使用总结

行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离；

内部样式表：部分结构和样式的分离。缺点：没有彻底分离；

外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入

4、Css注释

/*css注释内容 */

快捷键 Ctrl+？，如果是外部链接的css快捷键是ctrl+shift+？

5、Css选择器的分类

Css选择器分为两类：基础选择器和高级选择器（复合选择器）

基础选择器：标签选择器（html选择器）、类选择器、ID选择器

复合选择器：后代选择器、并集选择器、指定标签选择器

CSS选择器作用

选择标签的，把想要选择的元素标签选择出来。

6、链接伪类选择器

链接的伪类四种状态：

a:link 未访问的链接（访问前）

a:visited 已访问的链接（访问后）

a:hover 鼠标移动到连接上（鼠标经过）

a:active 选定的链接（按下鼠标的时候）

注意：以上的顺序不能颠倒；

实际工作中我们不需要将四个伪类状态都书写，如果4个都要写顺序不能乱；

7、标签显示模式

实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：

块级元素：自己独占一行； --- 代表标签 div、h标签

行内元素：一行可以共存多个；--- 代表标签 span 、a

行内块元素：一行可以共存多个； --- 代表标签 img 、input

8、盒子模型

盒子模型组成

内容：实体化宽高和里面的文字图片等等

边框： border

内边距： padding 拉开内容到盒子边缘的距离；

外边距： margin 拉开盒子与盒子之间的距离；

网页布局的三种机制

普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；

行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em；

浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；

定位：将盒子在浏览器的某一个位置，后期会经常用到；

css属性书写顺序

1、布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）

2、自身属性：width/ height / margin / padding / border / background

3、文本属性：color/ font / text-decoration / text-align / vertical-align / white- space /break-word

4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow /background:linear-gradient …

定位布局：

定位模式+边偏移（方向英文更改）

边偏移：

top、bottom、left、right属性；

定位的精髓：

利用更改方向英文来进行位置设置；

2、定位模式

常见的定位模式分为：相对定位、绝对定位、固定定位

定位属性

定位属性：position 取值不同实现的效果不同，如下：

静态定位：position:static;

相对定位：position:relative;

绝对定位：position:absolute;

固定定位：position:fixed;

子绝父相的应用

子绝父相：子级绝对，父级相对，父级盒子做了相对定位定位了，但是依然占位，不会影响其他盒子的布局；

注意：其实实际工作中不一定是子绝父相，其实只要父级有了定位属性，子级就会以父级为参照，但是一般用的最多的还是子绝父相；

banner滚动图片的布局思路

一个父级盒子作为总体的大盒子，然后里面的滚动图片用ul>li>a实现，两侧的小箭头一般我们用单独的span或者div实现（css里面用子绝父相进行定位实现），切换的小圆点用ol>li实现（css里面用子绝父相将ol进行定位，然后将里面的li浮动控制外边距即可）；

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2