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

最新推荐文章于 2024-04-24 13:35:29 发布

伊洛的小屋

最新推荐文章于 2024-04-24 13:35:29 发布

阅读量169

点赞数

分类专栏： CSS基础文章标签： python html java css 小程序

本文链接：https://blog.csdn.net/weixin_44386231/article/details/108617332

版权

CSS基础专栏收录该内容

6 篇文章 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.暂时放弃继续实践学习，待自己能力提升会自然而然的解开

关注公众号获取更多内容

欢迎下方【戳一下】【点赞】
Author：伊洛Yiluo
愿你享受每一天，Just Enjoy !

伊洛的小屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础3--工作流程及DOM

本文首发公众号：伊洛的小屋，欢迎关注并查看更多内容！！！浏览器工作流程1.浏览器载入HTML文件2.将HTML文件转化成一个DOM（Document Object Model）3.拉取该HTML相关资源4.解析CSS5.渲染树会依照应该出现的结构进行布局6.显示在屏幕上什么是DOM作用：帮助你设计、调试和维护CSS应用：<!DOCTYPE html><html> <head> <meta charset="utf-8"&g..
复制链接

扫一扫