浅谈HTML & CSS

最新推荐文章于 2024-05-15 18:00:00 发布

猪齿向前冲

最新推荐文章于 2024-05-15 18:00:00 发布

阅读量98

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/qq_40245675/article/details/107006569

版权

浅谈HTML & CSS

HTML

超文本标记语言，它定义了网页内容的含义和结构。那么它是如何定义的呢？
HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如：head，title，body，header，footer，article，section，p，div，span，img，aside，audio，canvas，datalist，details，embed，nav，output，progress，video等等等等。

HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如，title标签可以写成 Title，TITLE或以任何其他方式。
其次我想从HTML的渲染来说，在一个网页绘制出来前，需要先构建DOM树和CSSOM树，然后才能构建render树。
其中HTML的作用是构建一个DOM树，将各个节点构建出来。
那么DOM树又是什么？
JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。
有这几个概念：文档、元素、节点
DOM树：
DOM树就是在层级结构下实现了DOM各个元素接口的组合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

在上述代码中，根元素是html其两个子元素是head和body，而head又有子元素title以此类推。
解析过程要注意的是，遇到任何样式（link、style）还有脚本(script)都会导致HTML的解析被阻塞，但是CSS的解析可以和HTML同步进行，注意，因为CSSOM树也是render树的重要前置，所以CSS未解析完是会阻塞DOM的渲染。

CSS

层叠样式表，其基本目标是让浏览器以指定的特性去绘制页面元素，比如颜色，定位，装饰。CSS的语法反映了这个目标，由下面两个部分构建：

属性（ property）是一个标识符，用可读的名称来表示其特性。
值（value）则描述了浏览器引擎如何处理该特性。每个属性都包含一个有效值的集合，它有正式的语法和语义定义，被浏览器引擎实现。

如果样式表只能为每个页面元素添加一个声明，那就没有真正发挥出它的价值。其真正的目标是为文档不同部分添加不同的声明。

为此，CSS可以在声明块前面放置选择器（selector)，选择器用来选择页面多个元素的条件。一对选择器与声明块称为规则集（ruleset)，常简称为规则（rule)。

CSS在加载时是会阻塞JS语句的执行，因为JS有时候会改变元素样式

猪齿向前冲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅谈HTML & CSS

浅谈HTML & CSSHTML超文本标记语言，它定义了网页内容的含义和结构。那么它是如何定义的呢？HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如，，，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img/>，</span><a
复制链接

扫一扫