Python 44 前端概述 、三剑客 、常用标签与分类

一:前端概述

  前端指的就是页面的设计和给用户带来极高的用户体验

  前端开发技术栈分为三大类: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  单一 | 组合标签

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

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

原文地址:https://www.cnblogs.com/zedong/p/9676740.html

时间: 2024-07-29 15:01:54

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

前端基础-HTML常用标签介绍

前端基础-HTML常用标签介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML是什么 1>.超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则: 2>.浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容.但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性): 3>.静态网页文件扩展名:".html "或 &qu

前端——基础和常用标签

前端 什么是前端? 任何与用户直接打交道的操作界面都可以称之为是一个前端 web服务的本质 浏览器窗口输入一个网址按下回车都发生了那些事情 朝着指定的服务端发送请求 服务端接收相应的请求 服务端返回相应的响应 浏览器接收响应,按照特定的规则渲染页面展示给用户看 HTTP协议 HTTP协议:超文本传输协议,规定了浏览器与服务端之间数据传输的格式 HTTP协议的四大特性 基于请求响应(一次请求对应一次响应) 基于TCP/IP作用于应用层之上的协议 无状态(不保留客户端的状态) 无连接 长链接 web

Web前端入门学习(2)——HTML常用标签

HTML标签 a标签 a标签是一个超链接标签,用于从一个页面链接到另一个页面.在<Web前端入门学习(1)>有提到过4个伪类,分别是a:link.a:visited.a:hover.a:active. a:link代表的是未访问过的链接,当访问者首次打开网页未点击链接时,所表现的形式: a:visited代表的是访问过的链接,相对于link,是访问者点击了连接后,所表现的形式: a:hover代表的是当鼠标经过链接上面时所表现的形式,鼠标经过后,链接会有所变化: a:active代表的是当用户

smarty前端常用标签

{* {extends file='blockparent.tpl'} *} {*必须放在模板的第一行,如果要用子模板来扩展父模板,那么它只能有{block}的区域任何其他模板的内容将被忽略*} {config_load file='config.conf'}{*载入配置文件*} <html> <head> <meta charset='utf-8' /> <style type="text/css"> .nav{ margin-left

对HTML的理解及常用标签使用介绍--来自我的百度前端技术学院的笔记

HTML是什么,HTML5是什么? --HTML:超文本标记语言,一种用于创建网页的标准标记语言: --HTML5:目前最新的HTML标准,包含新的元素.属性.行为,基于它们的功能特征将他们分成不同的组别: * 语义:能够让你更恰当地描述你的内容是什么: * 连通性:能够让你和服务器之间通过创新的技术方法进行通信: * 离线&存储:能够让网页在客户端本地存储数据更高效地离线运行: * 多媒体:使用video和audio成为了所有web中的一等公民: * 2D/3D绘图&效果:提供了一个更加

前端之head标签,基本标签,div和span,常用标签,表单标签

一.head标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="icon" href="https://www.jd.com/favicon.ico"> <meta name="keyw

python之路,Day24 常用设计模式学习

python之路,Day24 常用设计模式学习 本节内容 设计模式介绍 设计模式分类 设计模式6大原则 1.设计模式介绍 设计模式(Design Patterns) --可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码编制真正工程化,设计模式是软件工程的基石,如同大厦的一块块砖石一

HTML介绍 前端概述

前端概述 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8089)) sock.listen(5) while True: connection, address = sock.accept() buf = connection.recv(1024) connection.sendall(bytes("HTTP/1.1 201 OK

前端概述

一:什么是前端 前端即网站前台部分,运行在PC端,移动端等浏览器上展示给用户浏览的网页.前端技术一般分为前端设计和前端开发, 前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HYML和CSS以及JavaScript 广义前端:所有用户可以直接看见并交互的界面 狭义前端:浏览器上运行的用户交互界面 二:前端开发技术概览 1:HTML 超文本标记语言   (HyperText Markup Language),主要负责完成页面的结构,文件后缀名为:.html   .h