1.前端三剑客是哪三位?文件的后缀内容?在前端开发中的功能是什么?
HTML: .htm .html 内容
CSS: .css 效果
JS: .js 行为
2.简述三剑客的主要组成部分
HTML
标签:<>浏览器解析标记,字母开头,合法字符
指令:<> !开头
实体:&;#十进制数,特殊字母组合 ©
CSS
选择器:标签,id,class单独或组成出现
作用域:{作用域}
样式块:css连接语法的样式集合
JS
DOM:文档对象模型
BOM:浏览器对象
ES:脚本语法(ECMAScript)
一:前端概述
前端指的就是页面的设计和给用户带来极高的用户体验
前端开发技术栈分为三大类:HTML 、CSS 、JavaScript
HTML(Hyper Text Markup Language):
1 超文本标记语言
2 负责完成页面的结构
3 文件后缀:start.html
v_hint:标注,一些要注意的点(“超文本”就 是指页面内可以包含图片,连接,音乐,程序等非文字元素)
CSS(Cascading Style Sheet):
1 级联样式表
2 负责页面的风格设计,样式和美观
3 文件后缀:style.css
JS(JavaScript):
1 浏览器脚本语言,可以编写运行在浏览器上的程序 (脚本:比如游戏里面的角色,人物装备等等,这些就相当于脚本;再比如说,就是自己写的一个代码块,用相同他语言或不同他语言嵌套到别人的程序里面,我们也称之为脚本)
2 负责编写页面特效 、调用浏览器的API(BOM) 、操作改变页面内容(DOM),从后端获取数据(Ajax),渲染页面等
3 文件后缀:cascade.js
二:前端三剑客
HTML :
1 标记语言:标记语言为非编程语言,不具备编程语言具备的程序逻辑
2 HTML为前端页面的主体,由标签、指令与转义字符(实体)等组成(v_hint:转义字符)
标签:被尖括号包裹,由字母开头包含合法字符的,可以被浏览器解析的标记。eg:系统标签,⾃自定义
标签
指令:被尖括号包裹,由!开头的标记。eg:<!doctype html> <!-- -->
转义字符:被&与;包裹的特殊字母组合或#开头的十进制数。eg:< >
3 HTML发展史代表版本
4 文档类型
CSS :
1 标记语言为非编程语言,不具备编程语言具备的程序逻辑
2 css为前端页面的样式,由选择器、作用域与样式块组成
选择器:由标签、类、id单独或组合出现
作用域:一组大括号包含的区域
样式块:满足css连接语法的众多样式
3 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发展史
4 JS框架:Angular、React与Vue等均是JavaScript主流框架
三:常用标签
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 其他标签
<section></section> 块
<small></small> 小号字体
四:标签分类
1 单 | 双标签
单标签:单标签在自身标签标识结束,主要应用场景为功能性标签
双标签:双标签有成对的结束标识,主要应用场景为内容性标签
2 行 | 块标签
行标签:又名内联标签,内联标签自身不具备宽高,通常同行显示
块标签:又名块级标签,块标签拥有自身宽高,通常独自占据一行
3 单一 | 组合标签
单一标签:单独出现,表示具体的功能或展示具体的内容
组合标签:配合使用,才能产生相应的内容与效果