前端概述及网页入门

简介: 目录一、前端简介二、前端开发技术栈HTML(超文本标记语言 Hyper Text Markup Language)CSS(层叠样式表 Cascading Style Sheet)JavaScript三、第一个页面(一)、基础模板(二)、模板解读(三)、其它模板标签一、前端简介前端是什么?前端就是网站的前台,运行在PC端,移动端等浏览器上展现给用户浏览的网页。

目录

一、前端简介

前端是什么?

前端就是网站的前台,运行在PC端,移动端等浏览器上展现给用户浏览的网页。
- 广义前端:所有用户可以直接看见并交互的界面
- 侠义前端:浏览器上运行的用户交互界面

随着互联网技术的发展,前端领域的技术发展也越来越快,各种新的思想、设计模式、工具和平台都快速发展,对前端工程师的技能要求也越来越高。JavaScript的应用也越来越广泛,在各个端,各个领域,前端也在慢慢地渗入与腐蚀其他开发语言的领地,行业对前端程序员的热度需求并没有下降,未来还是有很好的前景的。

二、前端开发技术栈

前端工程师需要学习哪些技能呢?

首先你需要掌握前端三剑客,再去学习一些框架就可以去上班啦!

img_8ee3857b2921d5852e4d501a113afc07.png

HTML(超文本标记语言 Hyper Text Markup Language)

html为标记语言,非编程语言,不具备编程语言具备的程序逻辑。文件后缀名(.html/.htm)

html是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代码,浏览器将HTML代码解释渲染后呈现给用户。因此,我们必须掌握HTML的基本结构和常用标记及属性。

有人将html比做建房子的框架(地基,架子),我觉得很好,这里就借鉴一下。

1.html组成(标签、指令、转义字符)

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

v_hint:转义字符

2.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日,第一份正式草案发布。)

3.文档类型

<!-- 标签语法规范 -->
<!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(层叠样式表 Cascading Style Sheet)

css也是标记语言,非编程语言。文件后缀名(.css)

CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的,这样就极大地提高了我们开发的速度,降低了维护的成本。负责页面的风格设计,样式、美观。

把html比作建房子的架子,那么css就是对房子的装修,粉刷墙壁颜色等。

1.css组成(选择器、作用域、样式块)

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

2.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

不同于html和css,它是一门实实在在的编程语言,有完善的语法,可以完成复杂的程序逻辑。
文件后缀名(.js)

JavaScript是浏览器脚本语言,可以编写运行在浏览器上的程序,实现更多地动态功能,表现出更加丰富的视觉效果。主要负责编写页面特效、调用浏览器的API\(BOM\)、操作改变页面内容\(DOM\),从后端获取数据\(Ajax\),渲染页面等。

JavaScript就好比房子过程中的人,房子通过打地基建造(html),装修(css),最后住人(js)。有了JavaScript网页才有灵魂。

1.JavaScript的组成(DOM、BOM、ES)

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

2.JavaScript发展史

它最初由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。

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="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2、link(链接标签)

外联样式表
<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(样式标签)

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

4、script(脚本标签)

<script type="text/javascript"></script>
焚膏油以继晷,恒兀兀以穷年。
相关文章
|
16天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
115 2
|
16天前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
111 68
|
3天前
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的10个技巧
【10月更文挑战第25天】在互联网时代,网页加载速度直接影响用户体验和搜索引擎排名。本文介绍了10个提升网页加载速度的技巧,包括减少HTTP请求、启用压缩、使用CDN、延迟加载非关键资源、优化图片、减少重定向、使用浏览器缓存、优化CSS和JavaScript、异步加载JavaScript以及代码分割。通过这些方法,可以显著提高网页性能,改善用户体验。
20 5
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
16天前
|
自然语言处理 资源调度 前端开发
前端大模型入门(四):不同文本分割器对比和效果展示-教你如何根据场景选择合适的长文本分割方式
本文详细介绍了五种Langchain文本分割器:`CharacterTextSplitter`、`RecursiveCharacterTextSplitter`、`TokenTextSplitter`、`MarkdownTextSplitter` 和 `LatexTextSplitter`,从原理、优缺点及适用场景等方面进行了对比分析,旨在帮助开发者选择最适合当前需求的文本分割工具,提高大模型应用的处理效率和效果。
|
16天前
|
机器学习/深度学习 人工智能 自然语言处理
前端大模型入门(三):编码(Tokenizer)和嵌入(Embedding)解析 - llm的输入
本文介绍了大规模语言模型(LLM)中的两个核心概念:Tokenizer和Embedding。Tokenizer将文本转换为模型可处理的数字ID,而Embedding则将这些ID转化为能捕捉语义关系的稠密向量。文章通过具体示例和代码展示了两者的实现方法,帮助读者理解其基本原理和应用场景。
|
16天前
|
人工智能 前端开发 JavaScript
前端大模型入门(二):掌握langchain的核心Runnable接口
Langchain.js 是 Langchain 框架的 JavaScript 版本,专为前端和后端 JavaScript 环境设计。最新 v0.3 版本引入了强大的 Runnable 接口,支持灵活的执行方式和异步操作,方便与不同模型和逻辑集成。本文将详细介绍 Runnable 接口,并通过实现自定义 Runnable 来帮助前端人员快速上手。
|
19天前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
19天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
27天前
|
移动开发 前端开发 JavaScript
前端开发:从零到一构建响应式网页
【10月更文挑战第1天】前端开发:从零到一构建响应式网页
32 2