CSS基础3--工作流程及DOM

作者: 伊洛的小屋 | 来源:发表于2020-09-16 11:02 被阅读0次
浏览器工作流程

1.浏览器载入HTML文件
2.将HTML文件转化成一个DOM(Document Object Model)
3.拉取该HTML相关资源
4.解析CSS
5.渲染树会依照应该出现的结构进行布局
6.显示在屏幕上

什么是DOM

作用:帮助你设计、调试和维护CSS
应用:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>微信搜索:伊洛的小屋</title>
      <link href="index.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <p>
      投资的方式:
     <span>买个股</span>
     <span>买基金</span>
     <span>买期货</span>
    </p>
  </body>
</html>

浏览器会解析HTML并创造一个DOM,然后解析CSS,打开浏览器查看效果


出错

当你编写错误的代码或者拼写错误的时候浏览器会怎么显示你的内容呢?
答案是:忽略。 没错就是直接被忽略然后去继续解析正确的内容

CSS样式

来做一个假的名片

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>微信搜索:伊洛的小屋</title>
      <link href="index.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>个人简介: 伊洛Yiluo</h1>
    <div class="job-title">职位:游手好闲攻城师</div>
    <p>微信搜索:伊洛的小屋</p>

    <p>博客园:https://www.cnblogs.com/yiluotalk/</p>

    <p>爱好:游戏,投资,敲代码, 读了个书</p>

    <h2>我的联系方式</h2>
    <ul>
        <li>Email: <a href="mailto:yiluo@example.com">Yiluo@example.com(举例-非真实有效邮箱)</a></li>
        <li>Web: <a href="https://yiluotalk.com">https://yiluotalk.com</a></li>
        <li>Tel: 888 666666(举例-非真实有效电话)</li>
    </ul>
  </body>
</html>

打开浏览器



简单加点CSS美化一下


回答后台看到一些雷同的私信留言

留言大意:
我最近在看你之前Python的内容,但是遇到了一些报错我怎么也解决不了,怎么处理啊 ?



答(个人习惯并非适用所有小伙伴):
1.搜索引擎寻求答案 (某歌,百度)俗称面向某歌编程 0.0~
2.寻个身边的大佬虚心请教 (前提是:自己努力过了,但搜索引擎没有需要的答案)
请教格式通常为:我遇到了一个xxx问题,我搜索引擎看到的x种解决方法和xx种方式都试过了。但还是解决不了,等你有时间的时候可不可以帮我看一下?
3.暂时放弃继续实践学习,待自己能力提升会自然而然的解开

相关文章

  • CSS基础3--工作流程及DOM

    浏览器工作流程 1.浏览器载入HTML文件2.将HTML文件转化成一个DOM(Document Object Mo...

  • 深入浏览器渲染

    整体流程 解析 HTML,构建 DOM 树 解析 CSS, 生成 CSS 规则 合并 DOM 树和 CSS 规则,...

  • 浏览器的渲染机制

    工作流程 DOM解析,构建DOM树 CSS解析,构建CSSOM树 结合DOM树和CSSOM树构建渲染树 计算节点几...

  • 网页的渲染机制

    流程 解析 HTML 标签, 构建 DOM 树 解析 CSS 标签, 构建 CSSOM 树 把 DOM 和 CSS...

  • jQuery的基础DOM,CSS操作篇

    基础 DOM 和 CSS 操作 1.设置元素及内容 在常规的 DOM 元素中,我们可以使用 html()和 tex...

  • JavaScript基础教程(第8版)PDF版

    JavaScript基础教程(第8版)循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQu...

  • 前端知识点

    HTML及其他基础知识部分 渲染页面的流程1.解析HTML,获得Dom树,快2.解析Css,获得Cssom树,快3...

  • QSA项目Readme文档

    Readme文档 选用的技术及页面流程 选用的技术: 基础知识:HTML+CSS+JavaScript UI设计:...

  • 浏览器的回流与重绘

    基础 1 .浏览器使用流式布局模型2 .浏览器会把html解析成DOM。把css解析成CSSOM ,dom和css...

  • JS章节③ (上) DOM应用

    1.DOM基础 什么是DOM :document ,节点! 其实说的都是一个东西, CSS时管叫标签, JS时管叫...

网友评论

    本文标题:CSS基础3--工作流程及DOM

    本文链接:https://www.haomeiwen.com/subject/mtrzektx.html