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. mongodb分片集群安装教程

    mongodb 集群包含副本集群,主从集群以及分片集群,分片集群比较复杂,这里测试我采用了三台机器,交差部署 blog地址:http://www.cnblogs.com/caoguo 一 .环境:#m ...

  2. Gradle与Makefile构建工具的对比

    随着Android Studio的普及,越来越多的Android开发者也要开始了解和学习Gradle这款强大的代码构建工具了.我们在学习和了解一项新事物的时候,最快速的方法往往是与已知的事物进行比较, ...

  3. 微信小程序音频长度获取的问题

    小程序推荐使用wx.createInnerAudioContext()创建的innerAudioContext,我们也通过这个接口创建音频.音频的长度可以通过属性获取: 但是,给innerAudioC ...

  4. CPU 指令集(Instruction Set Architecture, ISA)

    本文摘自网络 概念 指令集是存储在CPU内部,对CPU运算进行指导和优化的硬程序,用来引导CPU进行加减运算和控制计算机操作系统的一系列指令集合.拥有这些指令集,CPU就可以更高效地运行.系统所下达的 ...

  5. tp定时任务,传参问题

    <?phpnamespace app\command; use think\console\Command;use think\console\Input;use think\console\i ...

  6. js 字符串,数组扩展

    console.log(Array.prototype.sort)//ƒ substring() { [native code] } console.log(String.prototype.subs ...

  7. Async/await语法糖实现(Generator)

    // generator也是一种迭代器(Iterator) 有next方法,并返回一个对象{value:...,done:...} function run(generatorFunction) { ...

  8. 《奋斗吧!菜鸟》 第八次作业:Alpha冲刺

    项目 内容 这个作业属于哪个课程 任课教师链接 作业要求 https://www.cnblogs.com/nwnu-daizh/p/11012922.html 团队名称 奋斗吧!菜鸟 作业学习目标 A ...

  9. linux学习2-压缩与解压

    1.zip 打包文件件 $ zip -r -q -o shiyanlou.zip /home/shiyanlou $ du -h shiyanlou.zip $ file shiyanlou.zip ...

  10. oracle数据库审计

    Oracle使用大量不同的审计方法来监控使用何种权限,以及访问哪些对象.审计不会防止使用这些权限,但可以提供有用的信息,用于揭示权限的滥用和误用. 下表中总结了Oracle数据库中不同类型的审计. 审 ...