前端介绍-35

前端介绍-35 
# 前端

## 一、什么是前端

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

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

- 广义前端：所有用户可以直接看见并交互的界面
- 侠义前端：浏览器上运行的用户交互界面

## 二、前端开发技术栈

### HTML

- 超文本标记语言  Hyper Text Markup Language
- 负责完成页面的结构
- 文件后缀：.html  .htm

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

### CSS

- 级联样式表  Cascading Style Sheet
- 负责页面的风格设计，样式、美观
- 文件后缀：.css

### JavaScript

- 浏览器脚本语言，可以编写运行在浏览器上的程序
- 负责编写页面特效、调用浏览器的API\(BOM\)、操作改变页面内容\(DOM\)，从后端获取数据\(Ajax\)，渲染页面等
- 文件后缀：.js

###### v_eg：big house、live perple
# 前端三剑客

## 一、HTML

#### 1、标记语言

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

#### 2、html为前端页面的主体，由标签、指令与转义字符（实体）等组成

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

###### v_hint：[转义字符](http://tool.oschina.net/commons?type=2)

#### 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、文档类型

```html
<!-- 标签语法规范 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/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

#### 1、标记语言

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

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

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

#### 3、css发展史代表版本

```
① 1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
② 1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。
③ 哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。
④ 1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。
⑤ CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
```

## 三、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发展史

```
    它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。
    Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。
    发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。
```

#### 4、js框架

```
Angular、React与Vue等均是JavaScript主流框架
```

###### v_test：熟悉前端三剑客
# 第一个页面

## 一、基础模板

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>第一个页面</title>
    </head>
    <body>

    </body>
</html>
```

## 二、模板解读

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

###### v_hint：html标签的lang属性值 en | zh（zh-cn）

## 三、其他核心模板标签

#### 1、meta（元标签）

```html
字符编码
<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="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
```

#### 2、link（链接标签）

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

#### 3、style（样式标签）

```html
内联样式表
<style></style>
```

#### 4、script（脚步标签）

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

###### v_test：设置简单的新浪模板
# html常用标签

#### 1、无语义标签

```html
<div></div>
<span></span>
```

#### 2、常用语义标签

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

#### 3、文本标签

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

#### 4、其他标签

```html
<section></section> 块
<small></small> 小号字体
```

###### v_test：熟悉常用标签
# 样式与长度颜色

#### 1、基本样式

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

#### 2、长度

- px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
- mm：毫米
- cm：厘米
- in：英寸
- pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
- em：相当长度，通常1em=16px，应用于流式布局

#### 3、颜色

- rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
- rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue 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

###### v_test：熟悉所有的长度单位与颜色表示方式
# 常用样式

#### 1、字体样式

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

```css
font-family: "STSong", "Arial";
```

- font-size：字体大小
- font-style： 字体风格  normal \| italic \| oblique
- font-weight：字体重量 normal \| bold \| lighter \| 100~900
- line-height：行高
- font：字重 风格 大小/行高 字族

#### 2、文本样式

- color：文本颜色
- text-align：横向排列

```css
left 居左 | center 居中 | right 居右
```

- vertical-align：纵向排列

```css
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：自动换行

```css
normal：默认换行规则
break-all：允许在单词内换行
```

#### 3、背景样式

- background-color：颜色
- background-image：图片

```css
background-image: url(bg.png);
```

- background-repeat：重复

```css
repeat | no-repeat | repeat-x | repeat-y
```

- background-position：定位

```css
top | bottom | left | right | center
```

###### v_hint：定位值可为方位词、百分比及固定值，值个数默认为两位(水平/垂直)，一个值时垂直默认center

- background-attachment：滚动模式

```css
background-attachment: fixed;
```

###### v_eg：父级设置属性，子集内容超出父级范围

###### v_hint：掌握基本属性
# 标签分类

#### 1、单|双标签

- 单标签：单标签在自身标签标识结束，主要应用场景为功能性标签
- 双标签：双标签有成对的结束标识，主要应用场景为内容性标签

#### 2、行|块标签

- 行标签：又名内联标签，内联标签自身不具备宽高，通常同行显示
- 块标签：又名块级标签，块标签拥有自身宽高，通常独自占据一行

#### 3、单一|组合标签

- 单一标签：单独出现，表示具体的功能或展示具体的内容
- 组合标签：配合使用，才能产生相应的内容与效果

###### v_test：熟悉标签的分类
# CSS三种引入方式

## 一、三种方式的书写规范

#### 1、行间式

```html
<div style="width: 100px; height: 100px; </div>
```

#### 2、内联式

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

#### 3、外联式

```css
file: zero.css
div {
    width: 100px;
    height: 100px;
    background-color: red;
}
```

```css
file: zero.html
<head>
    <link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
```

## 二、三种方式间的"优先级"

- 与样式表的解析顺序有关

###### v_test：掌握三种CSS引入方式方式
posted on 2018-12-27 20:00 漫天飞雪世情难却 阅读(...) 评论(...)  编辑 收藏

转载于:https://www.cnblogs.com/jokezl/articles/10187013.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/388745.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

spring的几个通知（前置、后置、环绕、异常、最终）

spring的几个通知（前置、后置、环绕、异常、最终）

1、没有异常的 2、有异常的 1、被代理类接口Person.java 1 package com.xiaostudy;2 3 /**4 * desc 被代理类接口5 * 6 * author xiaostudy7 *8 */9 public interface Person { 10 11 public void add(); 12 public void update(); 13 public void delete();…
阅读更多...
每个Power BI开发人员的Power Query提示

每个Power BI开发人员的Power Query提示

If someone asks you to define the Power Query, what should you say? If you’ve ever worked with Power BI, there is no chance that you haven’t used Power Query, even if you weren’t aware of it. Therefore, one could easily say that Power Query is the “he…
阅读更多...
c# PDF 转换成图片

c# PDF 转换成图片

1.新建项目 2.新增一个新文件夹“lib”&#xff08;主要是为了存放引用的dll&#xff09; 3.将“gsdll32.dll 、PDFLibNet.dll 、PDFView.dll”3个dll添加到文件夹中 4.项目添加“PDFLibNet.dll 、PDFView.dll”2个类库的引用&#xff0c;并将gsdll32.dll 拷贝到项目生产根…
阅读更多...
java finally在return_Java finally语句到底是在return之前还是之后执行？

java finally在return_Java finally语句到底是在return之前还是之后执行？

点击上方“方志朋”&#xff0c;选择“置顶或者星标”你的关注意义重大&#xff01;网上有很多人探讨Java中异常捕获机制try...catch...finally块中的finally语句是不是一定会被执行&#xff1f;很多人都说不是&#xff0c;当然他们的回答是正确的&#xff0c;经过我试验&#…
阅读更多...
oracle 死锁

oracle 死锁

为什么80%的码农都做不了架构师&#xff1f;>>> ORA-01013: user requested cancel of current operation 转载于:https://my.oschina.net/8808/blog/2994537
阅读更多...
面试题：二叉树的深度

面试题：二叉树的深度

题目描述&#xff1a;输入一棵二叉树&#xff0c;求该树的深度。从根结点到叶结点依次经过的结点&#xff08;含根、叶结点&#xff09;形成树的一条路径&#xff0c;最长路径的长度为树的深度。 思路&#xff1a;递归 //递归 public class Solution {public int TreeDepth(Tre…
阅读更多...
a/b测试_如何进行A / B测试？

a/b测试_如何进行A / B测试？

a/b测试The idea of A/B testing is to present different content to different variants (user groups), gather their reactions and user behaviour and use the results to build product or marketing strategies in the future.A / B测试的想法是将不同的内容呈现给不同…
阅读更多...
hibernate h2变mysql_struts2-hibernate-mysql开发案例 -解道Jdon

hibernate h2变mysql_struts2-hibernate-mysql开发案例 -解道Jdon

Hibernate专题struts2-hibernate-mysql开发案例与源码源码下载本案例展示使用Struts2&#xff0c;Hibernate和MySQL数据库开发一个个人音乐管理器Web应用程序。&#xff0c;可将您的音乐收藏添加到数据库中。功能有&#xff1a;显示一个添加记录的表单和所有的音乐收藏的列表。…
阅读更多...
P5024 保卫王国

P5024 保卫王国

传送门 我现在还是不明白为什么NOIPd2t3会是一道动态dp…… 首先关于动态dp可以看这里 然后这里就是把把矩阵给改一改&#xff0c;改成这个形式\[\left[dp_{i-1,0},dp_{i-1,1}\right]\times \left[\begin{matrix}\infty&ldp_{i,1}\\ldp_{i,0}&ldp_{i,1}\end{matrix}\ri…
阅读更多...
提取图像感兴趣区域_从图像中提取感兴趣区域

提取图像感兴趣区域_从图像中提取感兴趣区域

提取图像感兴趣区域Welcome to the second post in this series where we talk about extracting regions of interest (ROI) from images using OpenCV and Python.欢迎来到本系列的第二篇文章&#xff0c;我们讨论使用OpenCV和Python从图像中提取感兴趣区域(ROI)。 As a rec…
阅读更多...
解决java compiler level does not match the version of the installed java project facet

解决java compiler level does not match the version of the installed java project facet

ava compiler level does not match the version of the installed java project facet错误的解决 因工作的关系&#xff0c;Eclipse开发的Java项目拷来拷去&#xff0c;有时候会报一个很奇怪的错误。明明源码一模一样&#xff0c;为什么项目复制到另一台机器上&#xff0c;就会…
阅读更多...
php模板如何使用,ThinkPHP如何使用模板

php模板如何使用,ThinkPHP如何使用模板

到目前为止&#xff0c;我们只是使用了控制器和模型&#xff0c;还没有接触视图&#xff0c;下面来给上面的应用添加视图模板。首先我们修改下 Action 的 index 操作方法&#xff0c;添加模板赋值和渲染模板操作。PHP代码classIndexActionextendsAction{publicfunctionindex(){…
阅读更多...
理解Windows窗体和WPF中的跨线程调用

理解Windows窗体和WPF中的跨线程调用

你曾开发过Windows窗体程序&#xff0c;可能会注意到有时事件处理程序将抛出InvalidOperationException异常&#xff0c;信息为“ 跨线程调用非法&#xff1a;在非创建控件的线程上访问该控件”。这种Windows窗体应用程序中 跨线程调用时的一个最为奇怪的行为就是&#xff0c;有…
阅读更多...
什么是嵌入式系统

什么是嵌入式系统

在我们的日常生活中&#xff0c;我们经常使用许多使用嵌入式系统技术设计的电气和电子电路和套件。计算机&#xff0c;手机&#xff0c;平板&#xff0c;笔记本电脑&#xff0c;数字电子系统以及其他电子和电子设备都是使用嵌入式系统设计的。 什么是嵌入式系统&#xff1f;将硬…
阅读更多...
面向数据科学家的实用统计学_数据科学家必知的统计数据

面向数据科学家的实用统计学_数据科学家必知的统计数据

面向数据科学家的实用统计学Beginners usually ignore most foundational statistical knowledge. To understand different models, and various techniques better, these concepts are essential. These work as baseline knowledge for various concepts involved in data …
阅读更多...
字符串、指针、引用、数组基础

字符串、指针、引用、数组基础

1.字符串&#xff1a;字符是由单引号所括住的单个字母、数字或符号。若将单引号改为双引号&#xff0c;该字符就会变成字符串。它们之间主要的差别是&#xff1a;双引号的字符串“A”会比单引号的字符串’A’在字符串的最后补上一个结束符’\0’&#xff08;Null字符&#xff0…
阅读更多...
suse安装php,SUSE下安装LAMP

suse安装php,SUSE下安装LAMP

安装Apache可以看到编译安装Apache出错&#xff0c;rpm包安装gcc (首先要安装GCC)makemake install修改apache端口cd /home/sxit/apache2vi conf/httpd.confListen 8000启动 apache/home/root/apache2/bin/apachectl start(stop restart)http://localhost:8000安装一下PHP开发…
阅读更多...
自己动手写事件总线(EventBus)

自己动手写事件总线(EventBus)

2019独角兽企业重金招聘Python工程师标准>>> 本文由云社区发表 事件总线核心逻辑的实现。 <!--more--> EventBus的作用 Android中存在各种通信场景&#xff0c;如Activity之间的跳转&#xff0c;Activity与Fragment以及其他组件之间的交互&#xff0c;以及在某…
阅读更多...
viz::viz3d报错_我可以在Excel中获得该Viz吗？

viz::viz3d报错_我可以在Excel中获得该Viz吗？

viz::viz3d报错Have you ever found yourself in the following situation?您是否遇到以下情况&#xff1f; Your team has been preparing and working tireless hours to create and showcase the end product — an interactive visual dashboard. It’s a culmination of…
阅读更多...
php 数组合并字符,PHP将字符串或数组合并到一个数组内方法

php 数组合并字符,PHP将字符串或数组合并到一个数组内方法

本文主要和大家分享PHP将字符串或数组合并到一个数组内方法&#xff0c;有两种方法&#xff0c;希望希望能帮助到大家。一般写法&#xff1a;<?php /*** add a string or an array to another array** param array|string $val* param array $array*/function add_val_to_a…
阅读更多...
最新文章

Copyright @ 2022~2023