前端开发

前端概述

一、什么是前端

前端即网络站前台部分，运行在pc端，移动端等浏览器上展现给用户浏览的页面。随着互联网技术的发展，HTML5,CSS3,前端框架的应用，跨平台响应式网页的设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript

1.广义前端：所有的用户可以直接看见并交互的界面

2.侠义前端：浏览器上运行的用户交互界面

二、前端开发技术栈

HTML

1.超文本标记语言 Hyper Text Markup Language

2.负责完成页面的结构

3.文件后缀： .html.html

v_hint: "超文本"就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素

CSS

1.级联样式表 Cascading style Sheet

2. 负责页面的风格设计，样式、美观

3.文件后缀：.css

JavaScript

1. 浏览器脚本语言，可以编写运行在浏览器上的程序

2. 负责编写页面特效，调用浏览器上的API（BOM ),操作改变页面内容（BOM），从后端获取数据(Ajax) 渲染页面等。

3. 文件后缀.js

v_eg: big house , live people

前端三剑客

一、HTML

1、标记语言

标记语言为非标记语言，不具备编程语言具备的程序逻辑

2、html 为前端页面的主体，有标签、指令与转义字符等组成。

标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg:系统的标签，自定义标签
指令：别尖括号包裹，由！开头的标记。 eg:< !doctype html><!-- -->
转义字符： 被&与；包裹的特殊字母组合或#开头的十进制数。eg: &#60；&#62；&你不是怕；

v_hint：转义字符

3、html 发展史代表版本

① html1：在1993年6⽉作为互联⽹⼯程⼯作⼩组（IETF）⼯作草案发布（并⾮标准）
② html2：1995年11⽉作为RFC 1866发布，在RFC 2854于2000年6⽉发布之后被宣布已经过时
③ html3.2：1997年1⽉14⽇，W3C推荐标准
④ html4.0：1997年12⽉18⽇，W3C推荐标准
⑤ html4.01(微⼩改进)：1999年12⽉24⽇，W3C推荐标准
⑤ html5：2014年10⽉28⽇，W3C推荐标准(h5草案的前身名为Web Applications 1.0。于2004年被
WHATWG提出，于2007年被W3C接纳，并成⽴了新的HTML⼯作团队。在2008年1⽉22⽇，第⼀份正式草
案发布。)

4、文档类型

<!--标签语法规范-->
<! DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/tp/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>

二、CSS

标记语言

标记语言为非标记语言，不具备编程语言具备的程序逻辑

css为前端页面的样式，由选择器，作用域与样式块组成

选择器：由标签，类，id单独或组合出现
作用域：一组大括号包含的区域
样式块：满足css连接语法的众多样式

三、JavaScript

1.编程语言

实实在在的编程语言，完善的语法，可以完成复杂的程序逻辑

2.js为前端页面的脚步，由DOM，BOM与ES组成

DOM：⽂档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语⾔的标准编程接
⼝。
BOM：浏览器对象模型(Browser Object Model)，是⽤于描述这种对象与对象之间层次关系的模型，
浏览器对象模型提供了独⽴于内容的、可以与浏览器窗⼝进⾏互动的对象结构。BOM由多个对象组成，
其中代表浏览器窗⼝的Window对象是BOM的顶层对象，其他对象都是该对象的⼦对象。
ES：ES是⼀种开放的、国际上⼴为接受的脚本语⾔规范(ECMAScript)，正式名称为 ECMA 262 和
ISO/IEC 16262，是宿主环境中脚本语⾔的国际 Web 标准。

3.js框架

Angular,React与Vue等均是JavaScript

第一个页面

一、基础模板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf_8"/>
        <title>第一个页面</title>
    </head>
    <body>
        
    </body>
</html>

二、模板的解读

DOCTYPE：指定⽂档类型，规定html标签语法
html：⽂档根标签，标注着⽂档(⻚⾯)的开始与结束
head：⽂档头标签，可以引⽤脚步⽂件、指定样式表、书写代码逻辑块、提供元信息
body：⽂档主体标签，包含⽂档所有⽂本与超⽂本内容
title：⽂档tag标题标签，设置⽂档tag的标题内容

三、其他核心模块标签

1、meta（元标签）

字符编码
<meta charset="utf_8">
<meta http-equiv="content-type" content="text/html;charset=utf_8"/>
SEO
<meta name="keywords" content="8-12个以英文逗号隔开的单词或词语">
<meta name="description" content="80字以内的一段话，与网站内容无关">
移动适配
<meta name="viewport" content="with=device-width,initial-scale=1,minimum-scale=1,maxmum-scale=1,user-scalable=no" />

2、link(链接标签)

外联样式表
<link rel="stylesheet" type="text/css" herf="style.css" />
文档标签
<link rel="shortcut icon" type="image/x-icon"
 herf="http"//www.baidu.com/favicon.ico />

3、script(脚步标签)

<script type="text/javascript"></script>

html常用标签

1.无语义标签

<div></div>
<span></span>

2.常用语义标签

<hn></hn> 标题
<p></p>  段落
<pre></pre> 原文本
<br /> 换行
<hr /> 分割线

3.文本标签

<i></i> 斜体字
<em></em> 斜体字，表示强调
<b></b> 粗体字
<strong></strong> 粗体字，表示强调(语⽓更强)
<del></del> 删除的⽂本
<ins></ins> 插⼊的⽂本
<sub></sub> 下标字
<sup></sup> 上标字
<ruby>
 拼⾳<rt>pinyin</rt>
</ruby> 中⽂注⾳，h5新增

4.其他标签

<setction></setction> 块
<small></small>  小号字体

标签的分类

1.单|双标签

单标签：在自身标签标识结束，主要应用场景为功能性标签

双标签：有成对的结束标识，主要应用场景为内容性标签

2.行|块标签

行标签：又名内联标签，内联标签自身不具备宽高，通常同行显示

快标签：又名块级标签，拥有自身宽高，通常独自占一行

3.单一|组合标签

    单一标签：单独出现，表示具体的功能或展示具体的内容

    组合标签：配合使用，才能产生相应的内容与效果

CSS三种引入方式

一、三种方式的书写规范

1、行间式

<div style="width:100px;heigth=100px; color: rgb(17, 119, 0);">
    
</div>

2、内联式

<head>
    <style>
        div{
            width:100px;
            heigth:100px;
            background-color:red;
        }
    </style>
</head>

3、外联式

file: zero.css
div {
 width: 100px;
 height: 100px;
 
}
file:zero.html
<head>
    <link rel="stylesheet" type="text/css" herf="css/zero.css" />
</head>

二、三种方式间的“优先级”

与样式表的解析顺序有关

样式与长度颜色

1、基本样式

<head>
    <style>
        div{
            width:100px;
            heigth:100px;
            background-color:red;      
        }
    </style>
</head>

2、长度

px:像素，屏膜上显示的最小单位，用于网页设计
mm:毫米
cm:厘米
in:英寸
pt:点（point），一个标准的长度单位，1pt=1/72 in,用于印刷业
em:相当长度，通常1em=16px,应用于流式布局

3、颜色

rgb():三个值可为[0-255]数值或百分比，以 ， 相隔（r:red g:green b:blue)
fgba():前三个值可为像素或百分比，最后一个为[0,1]数值，以  ，隔开 （a:Alpha)
hsl():第一个值为[0-360]数值，后两个值可为百分比，以，隔开（h:Hue s:Saturation
l:Lightness）
hsla()：第⼀个值为[0,360]数值，中间⼆个值可为百分⽐，最后⼀个为[0, 1]数值，以,相隔
（h:Hue s:Saturation l:Lightness a:Alpha）
#AABBCC：六个⼗六进制位，每两位⼀整体，分别代表Red、Green、Blue，可以简写#abc

常用样式

1、字体样式

font-family:字体族科，多值用于备用，以，隔开

font-family:"STSong","Arial";
font-size:字体的大小
font-style: 字体风格 normal | italic |oblique
font-weight:字体重量 normal | bold | lighter | 100-900
font-height:行高
font:字重 风格 大小/行高 字族

2、文本样式

color：文本颜色

text-align:横向排列 left 居左 | center 居中 | right 居右

vertical-align:纵向排列

baseline: 将支持valign特性的对象的内容与基线对齐
sub:垂直对齐文本的下标
super：垂直对齐文本的上标
top:将支持valign特性的对象的内容与对象顶端对齐
text-top:将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象顶端对齐
text-indent：字体缩减 text-decoration：字划线 letter-spacing：字间距 word-spacing：词间距 word-break：⾃动换⾏

normal：默认换行规则

break-all:允许在单词内换行

3、背景样式

background-color:颜色

background-image:图片

background-image:url(bg.png);

background-repeat:重复

repeat | no-repeat | repeat-x | repeat-y

background-position:定位

top | bottom |left | right | center

v_hint:定位值可时为方位词，百分比及固定值，值个数默认为两位（水平/垂直），一个值垂直默认center

backgrount-attachment:滚动模式

background-attachment:fixed;

CSS选择器

一、基础选择器

1、通配选择器

*{
    border:solid;
}
匹配文档中所有标签：通常指html、body及body中所有显示类的标签

2、标签选择器

div{
    background-color:yellow;
}
匹配文档中所有与标签名匹配的标签：如div{}匹配文档中全部div,span{}会匹配文档中所有的span

3、类选择器

.red{
    color:red;
}
匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup><sub class="red"></sub> 均会被匹配

4、id选择器

#div{
    text-align:center;
}
匹配文档中所有拥有id属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配

二、基础选择器优先级

1.基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高

2.与匹配精度成正比，精度越高，优先级与润膏

3.优先级：id优先级>类选择器>标签选择器>通配选择器

v_hint:id选择器必须保证单文档的唯一性

三、组合选择器

1、群选择器

div,span, .red, #div{
color:red;
}

一次性控制多个选择器

选择器之间以，隔开，每一个选择器均可以为任意合法的选择器或选择器组合

2、子代（后代）选择器

子代选择器用>连接
body > div{
    color:red;
}
后代选择器用空格连接
.sup.sub{
    color:red;
}

1.一次性控制一个选择器（逻辑最后的那个选择器），前置位的选择器为修饰性选择器

2.每一个选择器位均可以为任意合法选择器或选择器组合

3.子代选择器必须为一级父子嵌套关系，后代选择器可以为子一级及多级父子嵌套关系

四、组合选择器优先级

组合选择器优先级与权值相关，权值为权重和
权重对应关系

选择器	权重
通配	1
标签	10
类、属性	100
id	1000
!important	10000

选择器权值比较，只关心权重和，不更新选择器位置

不同级别的选择器间不具备可比性：一个类选择器优先级高于n个标签选择器的任意组合

五、属性选择器

[attr]：匹配拥有attr属性的标签
[attr=val]：匹配拥有attr属性，属性值为val的标签
[attr^=val]：匹配拥有attr属性，属性值以val开头的标签
[attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
[attr*=val]：匹配拥有attr属性，属性值包含val的标签

v_hint：属性选择器权重等价于类

v_test：掌握所有选择器，并熟知选择器优先级

posted @ 2018-09-19 20:25 薛才昌阅读(647) 评论(0) 编辑收藏举报

刷新页面返回顶部

薛才昌

记录我的成长吧！

前端开发

前端开发

前端概述

一、什么是前端

二、前端开发技术栈

HTML

CSS

JavaScript

前端三剑客

一、HTML

1、标记语言

2、html 为前端页面的主体，有标签、指令与转义字符等组成。

3、html 发展史代表版本

4、文档类型

二、CSS

标记语言

css为前端页面的样式，由选择器，作用域与样式块组成

三、JavaScript

1.编程语言

2.js为前端页面的脚步，由DOM，BOM与ES组成

3.js框架

第一个页面

一、基础模板

二、模板的解读

三、其他核心模块标签

1、meta（元标签）

2、link(链接标签)

3、script(脚步标签)

html常用标签

1.无语义标签

2.常用语义标签

3.文本标签

4.其他标签

标签的分类

1.单|双标签

2.行|块标签

3.单一|组合标签

CSS三种引入方式

一、三种方式的书写规范

二、三种方式间的“优先级”

常用样式

CSS选择器

一、基础选择器

二、基础选择器优先级

三、组合选择器

四、组合选择器优先级

五、属性选择器

公告