1.前端三剑客是哪三位？文件的后缀内容？在前端开发中的功能是什么？

HTML:   .htm .html   内容

CSS:   .css   效果

JS:   .js   行为

2.简述三剑客的主要组成部分

HTML

标签：<>浏览器解析标记，字母开头，合法字符

指令：<> !开头

实体：&；#十进制数，特殊字母组合 &nbsp; &copy;

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:< > &nbsp;

　　　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  单一 | 组合标签

　　　　单一标签：单独出现，表示具体的功能或展示具体的内容

　　　　组合标签：配合使用，才能产生相应的内容与效果

Python 44 前端概述 、三剑客 、常用标签与分类的更多相关文章

  1. Python web前端 01 HTML常用标签

    Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...

  2. 沃土前端系列 - HTML常用标签

    html是什么 HTML是Hyper Text Markup Language的缩写,中文的意思是"超文本标记语言",它是制作网页的标准语言.由于网页中不仅包含普通文本,还包含超文 ...

  3. 2020年12月-第01阶段-前端基础-HTML常用标签

    1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了. 不会再给结构标签指定样式了. HTML标签有很多,这里我们学习最为常用的,后 ...

  4. 谷哥的小弟学前端(01)——HTML常用标签（1）

    探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...

  5. 谷哥的小弟学前端(02)——HTML常用标签（2）

    探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...

  6. python 之 前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签）

    11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. [Web 前端] 005 html 常用标签补充

    少废话,上例子 1. 正常的字 <br> <tt>小一点的字体</tt> <br> <small>变小</small> < ...

  8. 【01】HTML_day01_03-HTML常用标签

    typora-copy-images-to: media 第01阶段.前端基础.HTML常用标签 学习目标 理解: 相对路径三种形式 应用 排版标签 文本格式化标签 图像标签 链接 相对路径,绝对路径 ...

  9. web前端（4）—— 常用标签1

    标题标签h1~h6 顾名思义,这些就是把字体设置为大字体的,就如博客园的这个编辑器里的格式: 不信的话我们自己设置看看:好的,从本篇文章开始,我们需要动手了 <!DOCTYPE html> ...

随机推荐

  1. Discuz 取消 应用更新提醒 方法

    管理员每次登录论坛,遇有后台没有更新的应用都会有应用更新提醒提醒,而且关了还会继续弹出,问题是有些应用原来我装了免费的,新版本推出来了是 要收费的,我不想要更新,或者是即使有免费的新版本了,而我只要使 ...

  2. 类 Fabric 主机管理程序开发

    类 Fabric 主机管理程序开发:1. 运行程序列出主机组或者主机列表2. 选择指定主机或主机组3. 选择让主机或者主机组执行命令或者向其传输文件(上传/下载4. 充分使用多线程或多进程5. 不同主 ...

  3. ionic使用cryptojs加密 复制到黏贴版 使用md5

    npm install crypto-js npm install --save @types/crypto-js import * as crypto from "crypto-js&qu ...

  4. PHP中的几个随机数生成函数

    PHP中的几个随机数生成函数 rand() 基于 libc 的随机种子发生器 mt_rand() 基于 Mersenne Twister 算法返回随机整数.它可以产生随机数值的平均速度比 libc 提 ...

  5. 为什么有些图像在显示前要除以255？(zhuan)

    imshow是用来显示图片的,如 >> I = imread('moon.tif'); >> figure,imshow(I); 而有时为了数据处理,要把读取的图片信息转化为更 ...

  6. RBAC（Role-Based Access Control）

    http://hi.baidu.com/akini/blog/item/eddbd61b90f6d4fbae513371.html RBAC 求助编辑百科名片 基 于角色的访问控制(Role-Base ...

  7. noip模拟赛 浮游大陆的68号岛

    题目描述 妖精仓库里生活着黄金妖精们,她们过着快乐,却随时准备着迎接死亡的生活. 换用更高尚的说法,是随时准备着为这个无药可救的世界献身. 然而孩子们的生活却总是无忧无虑的,幼体的黄金妖精们过着天真烂 ...

  8. 最大公约数和最小公倍数问题 2001年NOIP全国联赛普及组

    题目描述 Description 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件:  1.P,Q是正整 ...

  9. static 语句块

    static{}(即static块),会在类被加载的时候执行且仅会被执行一次,一般用来初始化静态变量和调用静态方法,下面我们详细的讨论一下该语句块的特性及应用. 一.在程序的一次执行过程中,stati ...

  10. [bzoj3702/2212][Poi2011]二叉树/Tree Rotations_线段树

    二叉树 Tree Rotations bzoj-3702 bzoj-2212 Poi-2011 题目大意:现在有一棵二叉树,所有非叶子节点都有两个孩子.在每个叶子节点上有一个权值(有n个叶子节点,满足 ...