精华内容
下载资源
问答
  • 前端页面结构和加载过程页面结构举例说明:HTML 与 DOM 有什么不同操作 DOM虚拟 DOM 页面结构 最基本的页面结构: <html> <head></head> <body></body> </html> < ...

    页面结构

    最基本的页面结构:

    <html>
    
      <head></head>
    
      <body></body>
    
    </html>
    
    
    • < html>元素是页面的根元素,它描述完整的网页;
    • < head>元素包含了我们想包含在 HTML 页面中,但不希望显示在网页里的内容;
    • < body>元素包含了我们访问页面时所有显示在页面上的内容,是用户最终能看到的内容

    页面 HTML 结构不合理可能会导致页面响应慢,这个过程很多时候体现在< script>和< style>元素的设计上,它们会影响页面加载过程中对 Javascript 和 CSS 代码的处理。

    举例说明:

    (1)当我们打开百度首页的时候,浏览器会从服务器中获取到 HTML 内容。
    在这里插入图片描述

    (2)浏览器获取到 HTML 内容后,就开始从上到下解析 HTML 的元素。

    (3)< head>元素内容会先被解析,此时浏览器还没开始渲染页面。我们看到元素里有用于描述页面元数据的元素,还有一些元素涉及外部资源(如图片、CSS 样式等),此时浏览器会去获取这些外部资源。
    除此之外,我们还能看到元素中还包含着不少的

    (5)当 JavaScript 脚本下载完成后,浏览器的控制权转交给 JavaScript 引擎。当脚本执行完成后,控制权会交回给渲染引擎,渲染引擎继续往下解析 HTML 页面。

    (6)此时< body>元素内容开始被解析,浏览器开始渲染页面。在这个过程中,我们看到< head>中放置的< script>元素会阻塞页面的渲染过程:把 JavaScript 放在< head>里,意味着必须把所有 JavaScript 代码都下载、解析和解释完成后,才能开始渲染页面。
    到这里,我们就明白了:如果外部脚本加载时间很长(比如一直无法完成下载),就会造成网页长时间失去响应,浏览器就会呈现“假死”状态,用户体验会变得很糟糕。

    因此,对于对性能要求较高、需要快速将内容呈现给用户的网页,常常会将 JavaScript 脚本放在< body>的最后面。这样可以避免资源阻塞,页面得以迅速展示。我们还可以使用defer/async/preload等属性来标记< script>标签,来控制 JavaScript 的加载顺序。

    HTML 与 DOM 有什么不同

    根据 MDN 官方描述:文档对象模型(DOM)是 HTML 和 XML 文档的编程接口。

    也就是说,DOM 是用来操作和描述 HTML 文档的接口。如果说浏览器用 HTML 来描述网页的结构并渲染,那么使用 DOM 则可以获取网页的结构并进行操作。一般来说,我们使用 JavaScript 来操作 DOM 接口,从而实现页面的动态变化,以及用户的交互操作。

    在开发过程中,常常用对象的方式来描述某一类事物,用特定的结构集合来描述某些事物的集合。DOM 也一样,它将 HTML 文档解析成一个由 DOM 节点以及包含属性和方法的相关对象组成的结构集合。

    操作 DOM

    除了获取 DOM 结构以外,通过 HTML DOM 相关接口,我们还可以使用 JavaScript 来访问 DOM 树中的节点,也可以创建或删除节点。比如我们想在className为wrapper的父元素里面删除它的第一个子元素,可以这么操作:

    // 获取到 class 为 swiper-control 的第一个节点,这里得到我们的滚动控制面板
    const controlPanel = document.getElementsByClassName("wrapper")[0];
    // 获取className为wrapper的第一个子节点
    const firstChild = controlPanel.firstElementChild;
    // 删除滚动控制面板的子节点
    controlPanel.removeChild(firstChild);
    

    虚拟 DOM

    随着应用程序越来越复杂,DOM 操作越来越频繁,需要监听事件和在事件回调更新页面的 DOM 操作也越来越多,频繁的 DOM 操作会导致页面频繁地进行计算和渲染,导致不小的性能开销。于是虚拟 DOM 的想法便被人提出,并在许多框架中都有实现。

    虚拟 DOM 其实是用来模拟真实 DOM 的中间产物,它的设计大致可分成 3 个过程:

    • 用JavaScript 对象模拟 DOM 树,得到一棵虚拟 DOM 树;
    • 当页面数据变更时,生成新的虚拟 DOM 树,比较新旧两棵虚拟 DOM 树的差异;
    • 把差异应用到真正的 DOM 树上。
    展开全文
  • html页面结构详解

    2021-11-30 09:18:16
    -- 初始化结构 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>
    
    
    <!-- 标准通用标记语言的文档类型声明 声明为html5文档,告诉浏览器以什么样的类型解析文档,避免浏览器的怪异模型 -->
    <!-- 如果存在,浏览器会使用W3C标准模式解析文档,否则浏览器使用自己的怪异模式解析文档 -->
    <!DOCTYPE html>
    <!-- 根元素 -->
    <html lang="en">
    <!-- 头部元素-页面的设置信息 -->
    <head>
        <!-- 元数据,不会显示在页面上但会被浏览器解析 -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="refresh" content="30">  <!-- 每30秒刷新页面 -->
        <!-- 页面标题-显示在工具栏、收藏页面时收藏夹、搜索引擎结果页面的标题 -->
        <title>Document</title>
        <!-- 插入样式 -->
        <style></style>
        <!-- 插入js -->
        <script></script>
        <noscript></noscript>
        <!-- 默认链接地址 -->
        <base href="">
        <!-- 引入外部文件、设置页面小图标   其中rel是链接内容与页面的关系 -->
        <link rel="stylesheet" href="">
    </head>
    <!-- 主体元素-页面可见元素 -->
    <body>
        <h1></h1>
        <p></p>
        <a href=""></a>
        <div></div>
        <span></span>
        <img src="" alt="">
        
    <!-- 放在底部的js样式 -->
    <script></script>
    </body>
    </html>

    展开全文
  • 页面结构分析 元素名 描述 header 标题头部的内容(用于页面或页面中的一块区域) footer 标记脚部区域的内容(用于整个页面或页面的一块区域) section Web页面中的一块独立区域 article 独立文章...

    页面结构分析

    元素名描述
    header标题头部的内容(用于页面或页面中的一块区域)
    footer标记脚部区域的内容(用于整个页面或页面的一块区域)
    sectionWeb页面中的一块独立区域
    article独立文章内容
    aside相关内容或应用(常用于侧边栏)
    nav导航类辅助内容

    一般都放在body里面

    展开全文
  • 前端页面设计

    2021-02-03 17:32:58
    基本框架搭建好了后,我们就要开始丰富页面内容了。最起码,得有一个用户登录的表单不是么?(注册的事情我们先放一边。)一、 使用原生HTML页面删除原来的login.html文件中的内容,写入下面的代码:登录欢迎登录!...

    基本框架搭建好了后,我们就要开始丰富页面内容了。最起码,得有一个用户登录的表单不是么?(注册的事情我们先放一边。)

    一、 使用原生HTML页面

    删除原来的login.html文件中的内容,写入下面的代码:

    登录

    欢迎登录!

    用户名:

    密码:

    简单解释一下:

    form标签主要确定目的地url和发送方法;

    p标签将各个输入框分行;

    label标签为每个输入框提供一个前导提示,还有助于触屏使用;

    placeholder属性为输入框提供占位符;

    autofocus属性为用户名输入框自动聚焦

    required表示该输入框必须填写

    passowrd类型的input标签不会显示明文密码

    以上功能都是HTML5原生提供的,可以减少你大量的验证和JS代码,更详细的用法,请自行学习。

    特别声明:所有前端的验证和安全机制都是不可信的,恶意分子完全可以脱离浏览器伪造请求数据!

    启动服务器,访问http://127.0.0.1:8000/login/,可以看到如下图的页面:

    be748bc87c16be2932a59d51f8308cb2.png

    二、引入Bootstrap 4

    如果你的实际项目真的使用上面的那个页面外观,妥妥的被老板打死。代码虽然简单,速度虽然快,但没有CSS和JS,样子真的令人无法接受,在颜值即正义的年代,就是错误。

    然而,大多数使用Django的人都不具备多高的前端水平,通常也没有专业的前端工程师配合,自己写的CSS和JS却又往往惨不忍睹。怎么办?没关系,我们有现成的开源前端CSS框架!Bootstrap4就是最好的CSS框架之一!

    想要在HTML页面中使用Bootstrap4,最方便的方法就是使用国内外的免费CDN(如果app的使用环境不可以使用外部网络,也可以使用内部的CDN,或者静态文件)。

    这里推荐BootCDN:https://www.bootcdn.cn/,速度比较快,有大量的不同版本的CDN。

    762163b164d0fa7b4bf9dc36a7bcaac1.png

    这里直接给出HTML标签,复制粘贴即可:

    CSS:

    以及JS:

    由于Bootstrap依赖JQuery,所以我们也需要使用CDN引用JQuery 3.3.1:

    另外,从Bootstrap4开始,额外需要popper.js的支持,依旧使用CDN的方式引入:

    下面,我们就可以创建一个漂亮美观的登录页面了,具体代码如下:

    登录

    欢迎登录

    用户名:

    密码:

    {# 以下三者的引用顺序是固定的#}

    访问一下login页面,看起来如下:

    d6f0d86c0720a35d5733c90afb5ad2aa.png

    三、添加静态文件

    然而,上面的登录页面在宽度上依然不太合适,背景也单调,所以一般我们会写一些CSS代码,同时使用背景图片。

    在工程根目录下的login目录下,新建一个static目录,再到static目录里创建一个login目录,这种目录的创建方式和模板文件templates的创建方式都是一样的思维,也就是让重用app变得可能,并且不和其它的app发生文件路径和名称上的冲突。

    继续在/login/static/login目录下创建一个css和一个image目录,css中添加我们为登录视图写的css文件,这里是login.css,image目录中,拷贝进来你想要的背景图片,这里是bg.jpg。最终目录结构如下:

    c1b17c41de386ff4f3814a4b7d7a730e.png

    下面我们修改一下login.html的代码,主要是引入了login.css文件,注意最开头的{% load static %},表示我们要加载静态文件。

    {% load static %}

    登录

    欢迎登录

    用户名:

    密码:

    {# 以下三者的引用顺序是固定的#}

    而login.css文件的代码如下,注意其中背景图片bg.jpg的引用方式:

    body {

    height: 100%;

    background-image: url('../image/bg.jpg');

    }

    .form-login {

    width: 100%;

    max-width: 330px;

    padding: 15px;

    margin: 0 auto;

    }

    .form-login{

    margin-top:80px;

    font-weight: 400;

    }

    .form-login .form-control {

    position: relative;

    box-sizing: border-box;

    height: auto;

    padding: 10px;

    font-size: 16px;

    }

    .form-login .form-control:focus {

    z-index: 2;

    }

    .form-login input[type="text"] {

    margin-bottom: -1px;

    border-bottom-right-radius: 0;

    border-bottom-left-radius: 0;

    }

    .form-login input[type="password"] {

    margin-bottom: 10px;

    border-top-left-radius: 0;

    border-top-right-radius: 0;

    }

    form a{

    display: inline-block;

    margin-top:25px;

    font-size: 12px;

    line-height: 10px;

    }

    好了,现在可以重启服务器,刷新登录页面,看看效果了:

    757c42fe8a3a646eca37e8328df61242.png

    以上关于前端的相关内容,实在难以一言述尽,需要大家具备一定的基础。做Django开发,其实就是全栈开发,没有一定的前端能力,很难做好。前端知识薄弱的同学,可以考虑我的前端视频教程,浅显易懂,不会太难太深入,那是前端工程师的要求;也不会太简单,足以应付Django的前端开发需求。

    展开全文
  • 前端布局方案灵活,方式并不唯一,仅供参考。 八种布局1. 弹性布局(flex)布局概念优点缺点2. 流式布局(Liquid Layout)布局概念优点缺点3. 响应式布局(Responsive layout)布局概念优点缺点4. 静态布局(Static ...
  • 前端页面渲染过程

    2021-05-28 14:30:31
    当浏览器拿到一个html文件,它会怎样渲染出整个...html与css都是拥有层级关系的结构,所以我们将其解析为树结构。 (1)拿到html文件后,首先会将字节转换为字符,确认tokens标签,然后转换为节点,通过节点构建DOM树。
  • 本发明涉及前端技术领域,特别涉及一种前端页面模板复用的方法。背景技术:前端即网站前台部分,运行在pc端,移动端等浏览器上展现给用户浏览的网页。前端技术指通过浏览器到用户端计算机的统称,存贮于服务器端的...
  • 一、知识点介绍 1.表格行合并:rowspan 将多行合并成一行 。 2.表格列合并:colspan 将多列合并成一列。 3.表单元素(input)
  • 前端页面有哪三层

    2021-06-11 11:39:38
    前端页面有三层,分别是:1、网页的结构层,由HTML或XHTML之类的标记语言负责创建;2、网页的表示层,由CSS负责创建;3、网页的行为层,由Javascript语言和DOM主宰的。本文操作环境:Windows7系统、Dell G3电脑、...
  • 使用idea开发javaWeb应用程序-编写前端页面前言上一节搭建了idea+maven+tomcat的java web开发环境,创建了一个webapp模板工程:FirstJavaWeb这节将在此基础上,编写3个静态页面,并实现页面的一些效果和跳转:index....
  • 目前前端开发一般遵循MVVM设计模式的组件式开发,除了明确各层之间的职责外,还需规划其各类文件的存放目录。目录设计合理将大幅提升代码的可维护性和可读性。以下根据VUE最佳实践,在脚手架生成目录的基础上进行...
  • 前端页面测试需要测试哪些内容?前端测试主要分4大类,而这4大类也分很多小方向测试,今天小编简单的介绍每个方向的概念:1)界面样式测试固定界面样式测试:主要针对文字内容不变的区域,例如页面的页头,页脚这类...
  • 近期在自己的项目中加入了对Markdown的支持,主要用到的是...安装完成之后最终项目的目录结构如下 我们看一下根目录下的package.json文件,部分内容如下 "scripts": { "test": "jasmine --config=jasmine.json",
  • 前端页面的三层构成

    2021-01-04 18:15:46
    结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达。解决了页面”内容是什么”的问题。 b.表示层:由CSS负责创建,解决了页面“如何显示内容”的问题。 行为层:由脚本负责。解决了页面上“内容...
  • 本发明属于计算机技术领域,特别是涉及一种前端大数据树形结构展示方法。背景技术:随着信息化技术的发展,各种信息化的web应用系统越来越多。用树形结构展现数据在web应用中有着很广泛的应用,如用于显示带有上下级...
  • 网页分成三个层次 : 结构层、表示层、行为层 HTML属于结构层,负责描绘出内容的结构 CSS属于表示层,负责“如何显示有关内容” JavaScript属于行为层,负责“内容应如何对事件做出反应”
  • 前端页面展示Markdown文件

    千次阅读 2021-06-28 09:14:26
    常我们都会在GitHub上浏览很多的readme文件,这些都是Markdown语法写成的Markdown文件,HTML中并没有用于展示Markdown文件的元素,那么为什么可以在前端展示呢?有别于GitHub官方给提供的API(有访问频率限制),我...
  • 一个统一的页面结构和表现能很好的实现页面的模块话。比如一个“网友评论”模块这个会在很多地方使用到,比如日志,照片,等等,如果这个“网友评论”模块结果和表现是统一的那么我们就不用重复劳动去重新设计制作...
  • 本文主要和大家分享php和mysql创建数据表及获取内容渲染到前端页面的方法,希望能帮助到大家。1. mysql命令行创建数据表(表结构):源码:create table myValues(id int(4) not null primary key auto_increment,name...
  • 文章目录lyear-layout-weblyear-layout-containerlyear-layout-sidebarlyear-layout-headerlyear-layout-contentcontainer-fluidrowcol-lg-12(card(cardheader、cardbody(row))) lyear-layout-web ...
  • a. 结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达。解决了页面”内容是什么”的问题。 b. 表示层:由CSS负责创建,解决了页面“如何显示内容”的问题。 c. 行为层:由脚本负责。解决了页面上...
  • Vue开发的仿美团外卖Html5前端页面

    千次阅读 2021-01-21 10:55:20
    今天给大家开源一个仿美团...部分运行效果如下图,实现了基本的页面切换,导航菜单,购物车等功能。 如何运行 和其他的Vue项目一样,只需要下载源码,然后执行以下命令即可。 npm install npm run dev 源码链接 ...
  • 前台用 form 表单的形式提交数据,后台通过 res.render(用的ejs) 可以正常渲染前端页面,后台代码如下:router.post('/classifyadd',(req,res)=>{let{classifyname}=req.body;Classify.create({name:...
  • log4j输出日志到前端页面

    千次阅读 2021-03-12 23:24:26
    一、简介有些时候webapp有需求将日志输出到前台页面,便于开发者查看日志,本篇将介绍如何将日志输出到前台显示;二、准备WebSocket技术、log4j、miniui(本项目所用前端,其他也一样);三、参考文档四、过程1、log4j...
  • 在上一篇文章中,我们使用了MVC架构完成了一个学生数据的信息开发,我们可以作为本系列的一个贯穿案例,进行后续的增删改查及关联关系的功能开发,以及涉及到Web前端技术、JSTL、监听器、过滤器等技术的学习。...
  • 前端开发】代码结构及性能优化大总结

    千次阅读 多人点赞 2021-06-05 13:40:19
    1、前端结构组织与文件命名规范 前端结构组织具有如下原则: 同一项目中代码的组织结构要清晰 同类型文件归类到相同的文件夹中 文件命名规则须统一并且命名要有意义 HTML 命名规范 HTML 代码所有的标签名和属性...
  • header元素是一种表示头部的结构元素,通常用来放置整个网页或页面内一个内容区块的标题,但也可以包含其他的元素,例如标题(<h1>~<h6>)、导航部分(<nav>)或普通内容(<p>和<span>...
  • 搭建html结构页面. CSS样式 22-综合案例-新闻页面.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 217,551
精华内容 87,020
关键字:

前端页面结构