前端开发
前端概述
一、什么是前端
前端即网络站前台部分,运行在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
1. 浏览器脚本语言,可以编写运行在浏览器上的程序 2. 负责编写页面特效,调用浏览器上的api(bom ),操作改变页面内容(bom),从后端获取数据(ajax) 渲染页面等。 3. 文件后缀.js v_eg: big house , live people
前端三剑客
一、html
1、标记语言
标记语言为非标记语言,不具备编程语言具备的程序逻辑
2、html 为前端页面的主体,有标签、指令与转义字符等组成。
标签:被尖括号包裹,由字母开头包含合法字符的,可以被浏览器解析的标记。eg:系统的标签,自定义标签 指令:别尖括号包裹,由!开头的标记。 eg:< !doctype html><!-- --> 转义字符: 被&与;包裹的特殊字母组合或#开头的十进制数。eg: <;>;&你不是怕;
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:掌握所有选择器,并熟知选择器优先级
上一篇: 从零开始一个http服务器(六)-多路复用和压力测试
下一篇: 寝室哥们手机铃真的幽默大全