CSS基础3--工作流程及DOM
2020-09-16 本文已影响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.暂时放弃继续实践学习，待自己能力提升会自然而然的解开
