本文详细介绍了HTML、CSS和JavaScript在网页开发中的作用，包括HTML构建页面结构、CSS负责样式设计、JavaScript实现交互功能。讲解了HTML标签用法、CSS的选择器和引入方式，以及浏览器解析过程中的DOM树、渲染树和资源加载。同时强调了SEO优化的重要性。
- 获取HTML文件：浏览器首先通过HTTP请求获取HTML文件。这个请求可以来自用户输入的URL或者是从其他网页中的链接。
- 解析HTML：浏览器开始解析HTML文件。解析的过程包括分析HTML标记和文本内容，构建文档对象模型（DOM）树。在构建DOM树的过程中，浏览器会识别HTML标记，并将其转换为一个由节点组成的树形结构，这个结构描述了HTML文档的逻辑结构。
- 加载外部资源：一旦解析器遇到外部资源（如CSS文件、JavaScript文件、图像文件等），浏览器会开始并行加载这些资源。这些资源的加载不会阻止HTML解析和DOM树的构建，但它们的加载可能会影响页面的渲染速度。
- 构建渲染树：在解析HTML和加载外部资源的同时，浏览器还会构建渲染树（或称为呈现树）。渲染树是DOM树的一种展现，但它只包括需要呈现的内容。通常，它不包括隐藏的元素（例如display属性为none的元素）或者不可见的元素（例如不在视口内的元素）。
- 计算布局：一旦渲染树构建完成，浏览器开始计算每个元素在页面上的确切位置和大小，这个过程称为布局或重排。布局过程考虑了元素的样式、大小、位置和文档流中的位置，以确定它们在屏幕上的最终呈现。
- 绘制页面：最后，浏览器使用计算好的布局信息将页面绘制到屏幕上。这个过程通常涉及将文本、图像和其他内容转换为像素，并根据浏览器窗口的大小和其他因素来显示它们。
3.html、css和js各有什么用处？
让我们用一个生动的比喻来解释这三种技术的作用：
假设现在有一个游乐场
**HTML (骨架)：**HTML 就是这游乐场的骨架。它定义了游乐场的基本结构，比如墙壁、楼层和房间的布局。没有 HTML，就无法稳固地支撑起其他部分。
**CSS (装饰)：**现在，我们要让游乐场变得更美观、更吸引人。这时候就需要 CSS，就像是建筑的装饰和装修工具。CSS 可以给墙壁涂上不同的颜色、添加装饰性的花纹，调整窗户和门的样式，让游乐场焕发出不同的风采和氛围。
**JavaScript (活动)：**JavaScript 就像是公园里的游乐设施和活动。它让游客可以玩得更开心，比如旋转木马、过山车、蹦床等等。通过 JavaScript，我们可以添加各种交互功能，比如按钮点击打开大门、展示广告牌、播放音乐等，让游客参与到更多有趣的活动中。
那么通过以上，我们大概明白了html定义了页面中的各种元素，如链接，段落，标题，列表等。
而css可以定义字体，颜色，大小，边距，背景等网页元素的样式。
js用来操作网页中的元素。
二、html常用标签的用法
标题标签（h1-h6）
浏览器渲染后会显示如下
显而易见是六个从大到小的标题，且要确保该标签只是用于标题，不能因为要加粗字体而使用该标签，正确使用标题有利于SEO。
段落p 换行br 水平线hr
浏览器渲染完成后显示：
hr标签有一些属性可以使用：
**·**color：设置水平线的颜色
**·**width：设置水平线的宽度
**·**height：设置水平线的高度
**·**align：设置水平线的对齐方式（默认居中，可选left|right）
文本标签（em，i，strong，b，del，span）
浏览器渲染完后是：
可以看出：em和i都是斜体标签，但是em含有语气（相关用途：比如朗读的话可能会改变语气，同样会影响SEO）
strong和b都是粗体标签，区别同上
del标签会给正文加上一个删除横线
span标签没有特定的含义
图片标签img
浏览器渲染完毕后：
其中的src是图片的路径，我这里随便选用了一张图
alt指的是图片的替代文本，当图像路径错误时，会显示如下：
可以看到alt的内容显示在错误图像的右边，并且alt也有利于SEO
title指的是用户将鼠标放在图片上时会显示的信息
width和height分别指宽和高
超文本标签a
渲染完成后如下：
点击后会跳转到百度，一定要注意不能少了https（超文本传输安全协议），否则将不能跳转。
除此以外，a标签里面可以嵌套img标签，可以实现点击图片跳转。
嵌套方式如下：
有序列表，无序列表 ol,ul,li
有序列表ol
浏览器渲染完毕后：
可以看到有序指的就是上图中的数字排序，并且也可更改用什么来排序。
如上图，在
- 标签里可以设置type属性，默认为1，也就是咱刚看到的1 2 3 4，其余还有四种方式，感兴趣的小伙伴可以自己动手试试。
无序列表ul
同样的无序列表
渲染完之后：
可以发现和有序不同，无序的每一个前面都有一个点，代表并列的意思。那我可不可以将那个点去掉呢？当然可以。同样的也可使用type属性（已经不建议该方法，建议用css）：
type=“disc” 默认实心圆
type=“circle” 空心圆
type=“square” 小方块
type=“none” 不显示
表格table tr td
一个table标签就代表一个表格，他有多少个tr标签就代表有多少行,tr里面有多少个td标签就代表有多少列。
渲染完成后：
其中border=“1”则是设置了边框宽度为1，width和height代表了表格的宽高。
我如果想要合并单元格应该怎么办？
答案是rowspan和colspan,如上图所示，我想要合并1和6，合并7和8，应进行如下操作
结果如下：
可以看到rowspan是竖向合并，而colspan是横行合并
表单form
表单其实是一个容器，能容纳各种各样的控件（比如各种输入框，提交按钮等）
渲染后：
属性说明：
action指的是服务地址，也就是要将数据提交到哪来处理
name指的是表单名称
method属性的值get和post都是数据提交的方式，具体区别后面再说。
input通常用于让用户输入的情况，比如输入账号密码，同时还有别的type属性：
块元素与行内元素
块元素独占一行，并且可以设置width和height大小
如：div，p，h1-h6，form，table，ul等
行内元素只占自身大小，不可以设置width和height
如：a，b，i，strong，span等
html5新增标签
三、CSS的各种参数和用法
css其实就是网页的化妆品，如何让网页变得更好看，这就是css的用处。
css的引入和格式：
引入：
如图，在
那么css的格式是怎么样的呢？
css的规则由两部分构成，一个是选择器，另一个是声明。
如图，我在body中写了一个div标签，在{ }中我对他进行了属性值的设定，我设置这个元素的宽和高以及背景颜色。
浏览器渲染完成后为：
也就是说上面红色框中的代码就代表我设定了div标签的一些值
那么这是css的其中一种引入方式，叫做内部样式。
接下来我将介绍别的引入方式
CSS的引入方式：
首先是内部样式，也就是上面提到的在
内联样式，指的是直接在元素里进行属性值的设定，比如下图：
那么我这样也是能够进行属性值的设定的。
还有一种是外部样式，也就是我单独创建一个.css文件，在其中编写好css代码，然后在我要使用的时候进行引入就行。
我现在单独创建了一个css文件，里面写好了和之前一样的样式，都是对div标签的相同属性设置。
那么我要怎么引用呢？
我们需要在html文件头部引入link标签，如下：
其中的rel="stylesheet"表示当前文档与链接的目标资源是一个样式表
而href后的内容则是css文件的路径。
像这样编写后，浏览器渲染完后的效果都是相同的，那么以上就是三种css的引入方式。
css选择器
首先要说的就是上面提到过到，叫标签选择器，也就是我直接选择一个标签，进行属性值的设定。
上图就选用了div标签
接下来要说的是类选择器，我可以给标签定义一个类，然后设置属性的时候直接选择这个类就行。
如下图：
可以看到要使用类选择器的方法是 . + 类名
接下来是id选择器
id选择器同类选择器，如下图：
可以看到使用id选择器的方法是 # + id名
那么类选择器和id选择器有什么区别呢
区别就是：
同一个类名可被多个标签共同使用，而一个id名只能被一个标签使用，也就是说一个id对应一个标签。
还有一种选择器是全局选择器：
如图，这种选择器会应用于所有的标签，相当于设置了一个初始属性，但是它的优先级是最低的，关于优先级马上就会说到。
合并选择器
像这样可以同时选用两个选择器。
关系选择器
·后代选择器：
A B{
}
会选择所有被A包含的b元素
·子代选择器：
A>B{
}
选择所有A元素的直接子元素
·相邻兄弟选择器：
A+B{
}
选择紧跟A元素之后的第一个B元素
·通用兄弟选择器：
现在能在网上找到很多很多的学习资源，有免费的也有收费的，当我拿到1套比较全的学习资源之前，我并没着急去看第1节，我而是去审视这套资源是否值得学习，有时候也会去问一些学长的意见，如果可以之后，我会对这套学习资源做1个学习计划，我的学习计划主要包括规划图和学习进度表。
分享给大家这份我薅到的免费视频资料，质量还不错，大家可以跟着学习
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
扫一扫
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
