前端开发
前端开发前端概述一、什么是前端二、前端开发技术栈HTMLCSS 前端三剑客一、HTML1、标记语言2、html 为前端页面的主体，有标签、指令与转义字符等组成。3、html 发展史代表版本4、文档类型二、CSS三、 1.编程语言2.js为前端页面的脚步，由DOM，BOM与ES组成3.js框架第一个页面 一、基础模板二、模板的解读三、其他核心模块标签1、 （元标签）2、 (链接标签)3、 (脚步标签)html常用标签1.无语义标签2.常用语义标签3.文本标签4.其他标签标签的分类1.单|双标签2.行|块标签3.单一|组合标签
前端概述
一、什么是前端
前端即网络站前台部分，运行在pc端，移动端等浏览器上展现给用户浏览的页面。随着互联网技术的发展，HTML5,CSS3,前端框架的应用，跨平台响应式网页的设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。
前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及
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连接语法的众多样式
三、
1.编程语言
实实在在的编程语言，完善的语法，可以完成复杂的程序逻辑
2.js为前端页面的脚步，由DOM，BOM与ES组成
DOM：⽂档对象模型(Document Model)，是W3C组织推荐的处理可扩展标志语⾔的标准编程接 ⼝。 BOM：浏览器对象模型(Browser Model)，是⽤于描述这种对象与对象之间层次关系的模型， 浏览器对象模型提供了独⽴于内容的、可以与浏览器窗⼝进⾏互动的对象结构。BOM由多个对象组成， 其中代表浏览器窗⼝的Window对象是BOM的顶层对象，其他对象都是该对象的⼦对象。 ES：ES是⼀种开放的、国际上⼴为接受的脚本语⾔规范(ECMA )，正式名称为 ECMA 262 和 ISO/IEC 16262，是宿主环境中脚本语⾔的国际 Web 标准。
3.js框架
Angular,React与Vue等均是
第一个页面
一、基础模板
<!DOCTYPE html>
<html>
<head>
< charset="utf_8"/>
< >第一个页面</ >
</head>
<body>
</body>
</html>
二、模板的解读
DOCTYPE：指定⽂档类型，规定html标签语法 html：⽂档根标签，标注着⽂档(⻚⾯)的开始与结束 head：⽂档头标签，可以引⽤脚步⽂件、指定样式表、书写代码逻辑块、提供元信息 body：⽂档主体标签，包含⽂档所有⽂本与超⽂本内容 ：⽂档tag标题标签，设置⽂档tag的标题内容
三、其他核心模块标签
1、 （元标签）
字符编码 < charset="utf_8"> < http-equiv="content-type" content="text/html;charset=utf_8"/> SEO < name="keywords" content="8-12个以英文逗号隔开的单词或词语"> < name="de ion" content="80字以内的一段话，与网站内容无关"> 移动适配 < name="viewport" content="with=device-width,initial-scale=1,minimum-scale=1,maxmum-scale=1,user-scalable=no" />
2、 (链接标签)
外联样式表 < rel="stylesheet" type="text/css" herf="style.css" /> 文档标签 < rel="shortcut icon" type="image/x-icon" herf="http"//www.baidu.com/favicon.ico />
3、 (脚步标签)
< type="text/ "></ >
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.单一|组合标签
单一标签：单独出现，表示具体的功能或展示具体的内容 组合标签：配合使用，才能产生相应的内容与效果
继续阅读与本文标签相同的文章
-
《Android进阶解密》| 每日读本书
2026-05-18栏目： 教程
-
watchbog再升级，企业黄金修补期不断缩小，或面临蠕虫和恶意攻击
2026-05-18栏目： 教程
-
阿里巴巴资深技术专家雷卷：值得开发者关注的 Java 8 后时代的语言特性| 9月9号栖夜读
2026-05-18栏目： 教程
-
3年Java开发6个点搞定高并发系统面试疑惑
2026-05-18栏目： 教程
-
请求支援！我被“非结构化数据包围了” | 开发者必读（060期）
2026-05-18栏目： 教程