zoukankan      html  css  js  c++  java
  • 前端开发之初探一

    前端开发经理了静态黄页时期,服务器组装动态网页数据时期、后端为主的 MVC(Model -View-Controller,一种数据模型、视图、逻辑分离的开发模式)模式时期、前后端分离方案开发时期、纯前端 MV*(Model - View-*, 数据模型、视图、控制方式分离的开发设计方式)为主与中间层直出的时期,最后进入到前端 VirtualDOM(虚拟 DOM,用来描述页面 DOM 树节点之间关系的一种特殊 JavaScript 对象)、MNV*(Model -NativeView-*,数据模型、原生视图、控制方式分离的开发设计模式)模式及前后端同构的开发时代。

     

    浏览器主要由七部分组成:用户界面、网络、JavaScript 引擎、渲染引擎(内核,解析 DOM 和 CSS)、UI 后端、JavaScript 解释器和持久化数据存储

     

    常见内核:Trident(IE 内核)、Gecko(FireFox)、Webkit(Safari)、Blink(基于 webkit:Chrome)、Presto(之前的 Opera,现在 Opera 用 Blink)

     

    对WEB标准以及W3C的理解与认识:网页标准和标准制定机构都是为了能让web发展的更‘健康’,开发者遵循统一的标准,降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。

     

    W3C(World Wide Web Consortium)万维网联盟 制定结构和表现的标准

    结构:XHTML、XML 

    表现:CSS

    行为:DOM、ECMAScript

    HTML 指的是超文本标记语言(Hyper Text Markup Language)

    XHTML指的是可扩展超文本标记语言(Extensible HyperText Markup Language)

    HTML5指的是HMTL 的第五次重大修改(第五个版本) 

    HTML5是W3c 和 WhatWG(浏览器厂商组成为推动网络 HTML5标准的组织) 合作的结果

     

    HTML与XHTML——二者有什么区别?

    1). 所有的标记都必须要有一个相应的结束标记

    2). 所有标签的元素和属性的名字都必须使用小写

    3). 所有的 XML 标记都必须合理嵌套

    4). 所有的属性必须用引号 "" 括起来

    5). 把所有 < 和 & 特殊符号用编码表示

    6). 给所有属性赋一个值

    7). 不要在注释内容中使用 "--"

    8). 图片必须有说明文字

     

    1、HTML5基本结构

    <!doctype>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title></title>
    <head>
    <body>
    </body>
    </html>

    基本语法:常规标记<标记 属性=“属性值” 属性=“属性值”></标记> 

    空标记<标签 属性=“属性值”/>

     

    2、Doctype 的作用

    <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范解析页面。

    严格模式:页面排版及JS解析是以该浏览器支持的最高标准来执行。

    混杂模式:不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容。

    DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

    使用 window.top.document.compatMode 可显示为什么模式。

     

    3、web 语义化

    当页面样式加载失败的时候能够让页面呈现出清晰的结构、有利于seo优化、利于被搜索引擎收录(更便于搜索引擎的爬虫程序来识别)、便于项目的开发及维护、使html代码更具有可读性、便于其他设备解析。

     

    4、表现与数据分离

    表现就是将所有涉及 UI 和 用户体验有关的 js、html、css 全部都与数据处理的 js 分割,其主要思想是根据 MVC 架构,Model数据模型, View 视图展示,Controller 控制器,目的是通过表现与数据分离便于日后的维护等。

     

    5、标签的分类

    根据css显示分类,XHTML元素被分为三种类型:块状元素,内联元素,可变元素。

    块状元素(block element) 

    1)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,iframe,colgroup,col,table,tr,td,等;

    2)默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列。

    3)块状元素都可以定义自己的宽度和高度。 

    4)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。

     

    内联元素(inline element)(或是行内元素)

    1) 常见的内联元素如:a,span,i,em,strong,b等

    2) 内联元素的表现形式是始终以行内逐个进行显示;

    3) 内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;

    4)内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性不能正确显示;

     

    可变元素

    需要根据上下文关系确定该元素是块元素或者内联元素。

     

    根据 DOM分类:根元素、文件数据元素、文件区域元素、群组元素、文字层级元素、编修记录元素、内嵌媒体元素、表格元素、窗体元素、交互式元素

     

  • 相关阅读:
    JavaScript 时间帮助封装
    EntityFramework 基类重写
    sql server 大数据, 统计分组查询,数据量比较大计算每秒钟执行数据执行次数
    C# DataTable 转实体对象
    EF自动创建数据库步骤之四(启用数据库初始器)
    EF自动创建数据库步骤之三(自定义数据库初始器)
    EF自动创建数据库步骤之二(继承DbContext类)
    EF自动创建数据库步骤之一(实体类写法)
    十大排序算法_java实现
    位运算
  • 原文地址:https://www.cnblogs.com/wmwPro/p/5708670.html
Copyright © 2011-2022 走看看