html+css基础知识

GGYY__

已于 2022-05-11 18:53:50 修改

阅读量2.1k

点赞数

文章标签： css html 前端

于 2022-05-10 14:25:47 首次发布

本文链接：https://blog.csdn.net/weixin_52682120/article/details/124685633

版权

Javascript基础专栏收录该内容

4 篇文章 1 订阅

订阅专栏

0、前提

80%知识，只有20%的场景可以用到；
20%的知识，有80%的场景可以用到。

1 、HTML & CSS 到底是什么，有什么用？

它们是两门语言。

HTML + CSS + Javascript = 网页

HTML：Hyper Text Markup Language 超文本标记语言；定义网页中有什么。

CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。

1.1 执行HTML CSS

HTML、CSS -> 浏览器内核 -> 页面

浏览器：

shell：外壳
core：内核（JS执行引擎、渲染引擎）

IE: Trident
Firfox: Gecko
Chrome: Webkit / Blink
Safari: Webkit
Opera: Presto / Blink

1.2 整体：element （元素）

元素 = 起始标记（begin tag） + 结束标记（end tag） + 元素内容 + 元素属性

属性 = 属性名 + 属性值

1.3 路径的写法

站内资源和站外资源

站内资源：当前网站的资源

站外资源：非当前网站的资源

绝对路径和相对路径

站外资源：绝对路径

站内资源：相对路径

1. 绝对路径

绝对路径的书写格式：

url地址：

协议名://主机名:端口号/路径

schema://host:port/path

当跳转目标和当前页面的协议相同时，可以省略协议

2. 相对路径

以./开头，./表示当前资源所在的目录

可以书写…/表示返回上一级目录

相对路径中：./可以省略

2、语义化

2.1 什么是语义化

每一个HTML元素都有具体的含义

a元素：超链接
p元素：段落
h1元素：一级标题

所有元素与展示效果无关

元素展示到页面中的效果，应该由CSS决定。
因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。

重要：选择什么元素，取决于内容的含义，而不是显示出的效果

2.2 为什么需要语义化？

为了搜索引擎优化（SEO）

搜索引擎：百度、搜搜、Bing、Google

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码

为了让浏览器理解网页

阅读模式、语音模式

3、Html标签

3.1 锚点连接

a href=“#chapter1”---->h2 id=“chapter1”

<body>
    <!-- 目录 -->
    <a href="#chapter1">章节1</a>
    <a href="#chapter2">章节2</a>
    <a href="#chapter3">章节3</a>
    <a href="#chapter4">章节4</a>
    
    <h2 id="chapter1">章节1</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem quae deserunt odio, sunt voluptates</p>
    <h2 id="chapter2">章节2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi rem quae deserunt odio, sunt voluptates</p>
    <h2 id="chapter3">章节3</h2>
        <p>Laboriosam eius, itaque ad enim inventore minus aspernatur ea molestias fuga</p>
    <h2 id="chapter4">章节4</h2>
        <p>Consequatur ut fugit molestias voluptates. Accusamus autem, ab nisi perspiciatis ex, cupiditate expedita officia </p>
        
 <a href="#">回到顶部</a>

3.2 多媒体元素

video视频

controls: 控制控件的显示，取值只能为controls

某些属性，只有两种状态：1. 不写 2. 取值为属性名，这种属性叫做布尔属性

布尔属性，在HTML5中，可以不用书写属性值

autoplay: 布尔属性，自动播放。

muted: 布尔属性，静音播放。

loop: 布尔属性，循环播放

audio音频

和视频完全一致

<body>
      <video controls autoplay muted loop style="width:500px;">
        <source src="media/open.mp4">
        <source src="media/open.webm">
        <p>
            对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器
        </p>
    </video>
</body>

3.3 列表元素

有序列表

ol: ordered list

li：list item

无序列表（ul

）

把ol改成ul

ul：unordered list

无序列表常用于制作菜单或新闻列表。

定义列表

通常用于一些术语的定义

dl: definition list

dt: definition title

dd: definition description

3.4 容器元素

容器元素：该元素代表一个块区域，内部用于放置其他元素

div元素

没有语义

语义化容器元素

header: 通常用于表示页头，也可以用于表示文章的头部

footer: 通常用于表示页脚，也可以用于表示文章的尾部

article: 通常用于表示整篇文章

section: 通常用于表示文章的章节

aside: 通常用于表示侧边栏

3. 5 元素包含关系

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

元素的包含关系由元素的内容类别决定。
例如，查看h1元素中是否可以包含p元素

总结：

容器元素中可以包含任何元素
a元素中几乎可以包含任何元素
某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
标题元素和段落元素不能相互嵌套，并且不能包含容器元素

4 、 css样式

4.1、 CSS代码书写位置

内部样式表

书写在style元素中

内联样式表，元素样式表

直接书写在元素的style属性中

外部样式表[推荐]

将样式书写到独立的css文件中。

1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器缓存，从而提高页面响应速度
3). 有利于代码分离（HTML和CSS），更容易阅读和维护

 <link rel="stylesheet" href="css/index.css">

4.2 常见样式声明

color：元素内部的文字颜色

预设值：定义好的单词

三原色，色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，色值。

rgb表示法：
rgb(0, 255, 0)
hex（16进制）表示法：
#红绿蓝

淘宝红：#ff4400, #f40
黑色：#000000，#000
白色：#ffffff, #fff
红：#ff0000, #f00
绿：#00ff00, #0f0
蓝：#0000ff, #00f
紫：#f0f
青：#0ff
黄：#ff0
灰色：#ccc

background-color：元素背景颜色
font-size：元素内部文字的尺寸大小

1）px：像素，绝对单位，简单的理解为文字的高度占多少个像素
2）em：相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。

font-weight：文字粗细程度，可以取值数字，可以取值为预设值

strong，默认加粗。

font-family：文字类型

必须用户计算机中存在的字体才会有效。

使用多个字体，以匹配不同环境

sans-serif，非衬线字体

font-style：字体样式，通常用它设置斜体
text-decoration：文本修饰，给文本加线。
text-indent：首行文本缩进
line-height：行高

每行文本的高度，该值越大，每行文本的距离越大。

设置行高为容器的高度，可以让单行文本垂直居中

行高可以设置为纯数字，表示相对于当前元素的字体大小

width：宽度
height：高度
letter-space：文字间隙
text-align：元素内部文字的水平排列方式

4.3 选择器

简单选择器

ID选择器
元素选择器
类选择器
通配符选择器: * 选中所有元素
属性选择器: 根据属性名和属性值选中元素

6. 伪类选择器: 选中某些元素的某种状态

1）link: 超链接未访问时的状态

2）visited: 超链接访问过后的状态

3）hover: 鼠标悬停状态

4）active：激活状态，鼠标按下状态

爱恨法则：love hate

    <style>
        a:link{
            color: green;
        }

        a:visited{
            color: red;
        }

        a:hover{
            color: chocolate;
        }

        a:active {
            color: #000;
        }
    </style>
</head>
<body>
    <a href="http://163.com">
        网易
    </a>
</body>

7. 伪元素选择器

before

after

选择器的组合

并且
后代元素 : 空格
子元素 : >
相邻兄弟元素 : +
后面出现的所有兄弟元素: ~

选择器的并列

多个选择器, 用逗号分隔

4.4 层叠

声明冲突：同一个样式，多次应用到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

1. 比较重要性

重要性从高到底：

作者样式表：开发者书写的样式

1）作者样式表中的!important样式
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式

2. 比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个4位数（x x x x）

千位：如果是内联样式，记1，否则记0
百位：等于选择器中所有id选择器的数量
十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
个位：等于选择器中所有元素选择器、伪元素选择器的数量

3. 比较源次序

代码书写靠后的胜出

应用

重置样式表

书写一些作者样式，覆盖浏览器的默认样式

重置样式表 -> 浏览器的默认样式

常见的重置样式表：normalize.css、reset.css、meyer.css

爱恨法则

link > visited > hover > active

4.5 继承

子元素会继承父元素的某些CSS属性

通常，跟文字内容相关的属性都能被继承

5、盒模型（块盒）

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

5.1 盒子类型：

行盒，display等于inline的元素
块盒，display等于block的元素

行盒在页面中不换行、块盒独占一行

display默认值为inline

浏览器默认样式表设置的块盒：容器元素、h1~h6、p

常见的行盒：span、a、img、video、audio

5.2 盒子的组成部分

无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：

1. 内容 content

width、height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的内容盒 content-box

2. 填充(内边距) padding

盒子边框到盒子内容的距离

padding-left、padding-right、padding-top、padding-bottom

padding: 简写属性

padding: 上右下左

填充区+内容区 = 填充盒 padding-box

3. 边框 border

边框 = 边框样式 + 边框宽度 + 边框颜色

边框样式：border-style
边框宽度：border-width
边框颜色：border-color

边框+填充区+内容区 = 边框盒 border-box

4. 外边距 margin

边框到其他盒子的距离

margin-top、margin-left、margin-right、margin-bottom

速写属性margin

5、盒模型的运用

5.1 改变宽高范围

默认情况下，width 和 height 设置的是内容盒宽高。

衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒。

精确计算
CSS3：box-sizing

    <style>
        div {
            width: 236px;
            height: 51px;
            color: #a7a7a7;
            background: #2d2e36;
            line-height: 51px;
            padding-left: 46px;
            border: 3px solid red;
          /* content-box：表示的是内容盒 默认
			    border-box: 边框盒  内容就自行计算
	    	*/
			 box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>
        页游中心
    </div>

5.2 改变背景覆盖范围

默认情况下，背景覆盖边框盒

可以通过background-clip进行修改

    <style>
        div{
            width:100px;
            height: 100px;
            background: #008c8c;
            border: 2px dashed red;
            padding: 30px;
			/* border-box 默认背景覆盖边框盒 
			content-box 背景覆盖内容盒 
			padding-box  背景覆盖填充盒
			*/
			background-clip: padding-box;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit.
    </div>
</body>

5.3 溢出处理

给定宽，高，内容超过就会溢出。
overflow，控制内容溢出边框盒后的处理方式

    	<style>
    		/* visible  默认可见
			   hidden  影藏
			   scroll  生成滚动条 
			   overflow-y: scroll / auto(自动);
			 */
		    	overflow: scroll;
		</style>

5.4 断词规则（一般不用设置）

word-break，会影响文字在什么位置被截断换行

normal：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）

break-all：截断所有。所有字符都在文字处截断

keep-all：保持所有。所有文字都在单词之间截断(空格，符号)

5.5 单行文本~空白处理（…）

①溢出不换行： white-space: nowrap --》溢出
②溢出隐藏：white-space: nowrap–》显示不完…
③文本溢出加点 text-overflow: ellipsis
注意：只能控制单行文本，多行用js处理。

    <style>
        li{
            border-bottom: 1px dashed #ccc;
            line-height: 2;
            border-left: 3px solid #008c8c;
            padding-left: 10px;
            margin: 1em 0;
            width: 300px;
			/*① white-space: nowrap  不换行--》溢出
		      ②溢出隐藏：white-space: nowrap--》显示不完...
			  ③文本溢出  加点   text-overflow: ellipsis
			  ----和width有关。
			 */
            white-space: nowrap;
			overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Atque animi delectus corporis hic!</li>
        <li>Reiciendis quos ratione culpa saepe.</li>
        <li>Deserunt voluptas numquam doloremque beatae!</li>
        <li>Cum architecto nulla dolorem at.</li>
        <li>Repudiandae deserunt temporibus tempora quaerat?</li>
        <li>Dolores laborum veritatis fuga commodi!</li>
        <li>Velit explicabo dicta doloremque unde!</li>
        <li>Sed magnam ratione quaerat ducimus!</li>
        <li>Explicabo perspiciatis aspernatur maiores. Accusantium?</li>
    </ul>
</body>

6、行盒（可以看作内容）

（内容撑开，没有宽高）
（padding、border、margin 都水平（左右）方向有效）

6.1 行盒的盒模型

常见的行盒：包含具体内容的元素

span、strong、em、i、img、video、audio

6.2 显著特点

1. 盒子沿着内容沿伸（内容撑开，没有宽高）
2. 行盒不能设置宽高

调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。

内边距（填充区）

水平方向有效，垂直方向不会实际占据空间。

边框

水平方向有效，垂直方向不会实际占据空间。

外边距

水平方向有效，垂直方向不会实际占据空间。

7、行块盒

display：inline-block 的盒子
既有行盒的特点，也有块盒的特点。（不独占一行，所有样式都有效）
有空白折叠（分页）。

1. 不独占一行
2. 盒模型中所有尺寸都有效

7.1 空白折叠

空白折叠，发生在行盒（行块盒）内部或行盒（行块盒）之间

7.2 可替换元素和非可替换元素（重要）

大部分元素，页面上显示的结果，取决于元素内容（写啥显示啥/百度），称为非可替换元素

少部分元素，页面上显示的结果，取决于元素属性（img、video、audio 类似行内块盒子，可以设置宽高），称为可替换元素。

绝大部分可替换元素均为行盒。可替换元素类似于行块盒，盒模型中所有尺寸都有效。

7.3 行块盒 ——分页应用

<style>
			.pager a{
				border: 1px solid #e1e2e3;
				text-decoration: none;
				color: #38f;
				display: inline-block;
				width: 34px;
				height: 34px;
				text-align: center;
				line-height: 34px;
			}
			.pager a:hover {
			    border-color: #38f;
			    background: #f2f8ff;
			}
			
			.pager a.selected{
				border: none;
				color: #000;
				background: initial;
				
			}
		</style>
	</head>
	<body>
        <div class="pager">
			<a href="">1</a>
			<a href="">2</a>
			<a href=""  class="selected">3</a>
			<a href="">4</a>
			<a href="">5</a>
			<a href="">6</a>
			<a href="">7</a>
			<a href="">8</a>
			<a href="">9</a>
			<a href="">10</a>
		</div>
	</body>

8、布局规则（视觉格式化模型）

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中的多个盒子排列规则

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

1. 常规流
2. 浮动
3. 定位

8.1 常规流

常规流、文档流、普通文档流、常规文档流—>都是一个东西。
所有元素，默认情况下，都属于常规流布局。

总体规则：块盒独占一行，行盒水平依次排列

包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域（活动范围）。绝大部分情况下：盒子的包含块，为其父元素的内容盒。

块盒

1. 每个块盒的总宽度，必须刚好等于包含块的宽度

宽度的默认值是auto

margin的取值也可以是auto，默认值0

auto：将剩余空间吸收掉

width吸收能力强于margin

若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收（布局一般从左到右，可以改）

在常规流中，块盒在其包含快中居中，可以定宽、然后左右margin设置为auto。

    <style>
        .child{          
            margin: 0 auto;
    }
    </style>

2. 每个块盒垂直方向上的auto值

height:auto，适应内容的高度

margin:auto，表示0（上下）

3. 百分比取值（重要）

宽、padding、margin可以取值为百分比

以上的所有百分比相对于包含块的宽度！！！！！！

高度的百分比：

1）. 包含块的高度是否取决于子元素的高度（父元素没有高度，子元素占50%），设置百分比无效
2）. 包含块的高度不取决于子元素的高度（父元素给了高度），百分比相对于父元素高度

4. 上下外边距的合并

两个常规流块盒，上下外边距相邻（第一个的margin-bottom和第二个magin-top重合），会进行合并。两个外边距取最大值（一个100和一个50 最后外边距为100px）。

8.2 浮动（float）

浮动元素必定是块盒。

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流
浮动
定位

应用场景

文字环绕
横向排列

浮动的基本特点

修改float属性值为：

left：左浮动，元素靠上靠左
right：右浮动，元素靠上靠右

默认值为none（默认情况下，就是常规流布局。）

当一个元素浮动后，元素必定为块盒(强制更改display属性为block，系统)
浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

宽度为auto时，适应内容宽度
高度为auto时，与常规流一致，适应内容的高度
margin为auto，为0.
边框、内边距、百分比设置与常规流一样

盒子排列

左浮动的盒子靠上靠左排列
右浮动的盒子考上靠右排列
浮动盒子在包含块中排列时，会避开常规流块盒（常规流在前–>浮动盒子在其下面）
常规流块盒在排列时，无视浮动盒子（常规流盒子在后,不管浮动盒子，就当不存在覆盖—>浮动盒子压住常规流盒子）
行盒在排列时，会避开浮动盒子（文字环绕–图片浮动起来就行-----P元素不知道天上还有东西----修改图片的 margin-right）
外边距合并不会发生

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。

高度坍塌

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
清除浮动。（浮动盒子脱离了常规流，因此常规流盒子在高度计算的时候不考虑浮动盒子）

解决方法：css属性：clear

默认值：none
left：清除左浮动，该元素（clear：left）必须出现在前面所有左浮动盒子的下方
（抬头看看天上的兄弟，排列时参考一下浮动盒子的位置。—以前常规流是看不见天山的兄弟的）
right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

第一种方法
①最下方加一个div
②clear: both;

    <style>
        .container {
            background: lightblue;
            padding: 30px;
        }

        .item {
            width: 200px;
            height: 200px;
            background: red;
            margin: 6px;
            float: left;
        }
        
		.clearfix{
			clear: both;
		}
    </style>
</head>

<body>
    <div class="container ">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
		<div class="clearfix"></div>
    </div>
</body>

第二种方法（推荐）
①是外面的容器坍塌+div class=“container clearfix”
② ::after 伪元素选择器（给clearfix添加一个最后一个子元素）
.clearfix::after {
content: “”;
display: block;
clear: both;
}

   <style>
        .container {
            background: lightblue;
            padding: 30px;
        }

        .item {
            width: 200px;
            height: 200px;
            background: red;
            margin: 6px;
            float: left;
        }

       .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="container clearfix">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

8.3 定位（position）

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流
浮动：float
定位：position

定位：手动控制元素在包含块中的精准位置

涉及的CSS属性：position

position属性

默认值：static，静态定位（不定位）
relative：相对定位
absolute：绝对定位
fixed：固定定位

一个元素，只要position的取值不是static，认为该元素是一个定位元素。

定位元素会脱离文档流（相对定位除外—即相对定位不会脱离文档流）

一个脱离了文档流的元素：（absolute 和fixed）

文档流中的元素摆放时，会忽略脱离了文档流的元素
文档流中元素计算自动高度时，会忽略脱离了文档流的元素

相对定位（relative 特殊，不脱）

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。（宽度width不变-----margin-left宽度会减小）
相对定位主要用于为绝对定位提供包含块。

可以通过四个CSS属性对设置其位置：

left
right
top
bottom

（相对定位下）盒子的偏移不会对其他盒子造成任何影响。

绝对定位（absolute）

宽高为auto，适应内容
包含块变化：（如果一个元素是绝对定位，它的包含块）找祖先中第一个定位元素（只要position的取值不是static），该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）

固定定位（fixed）

其他情况和绝对定位完全一样。

包含块不同：固定为视口（浏览器的可视窗口（你能看见的区域【不变】，内容大于视口—滚动条）小广告）

定位下的居中

某个方向居中：

定宽（高）
将左右（上下）距离设置为0
将左右（上下）margin设置为auto

绝对定位和固定定位中（居中），margin为auto时，会自动吸收剩余空间

    <div style="width:100px; height:100px; position:fixed; background: red;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
       ">
    </div>

多个定位元素重叠时

堆叠上下文

设置z-index，通常情况下，该值越大，越靠近用户

只有定位元素设置z-index有效

z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖（五环跑到文字下面)

[奥运五环]

<style>
        .item {
            position: absolute;
            width: 70px;
            height: 70px;
            border: 5px solid;
            box-sizing: border-box;
            border-radius: 50%;
        }
        .circle1{
            left: 0;
            top: 0;
            border-color: blue;
			z-index: 6;
        }
        .circle2{
            left: 70px;
            top: 0;
            border-color: #000;
			z-index: 2;
        }
        .circle3{
            left: 140px;
            top: 0;
            border-color: red;
			z-index: 3;
        }
        .circle4{
            left: 35px;
            top: 40px;
            border-color: yellow;
			z-index: 4;
        }
        .circle5{
            left: 105px;
            top: 40px;
            border-color:green;
			z-index: 5;
        }
    </style>
</head>

<body>
    <div class="item circle1"></div>
    <div class="item circle2"></div>
    <div class="item circle3"></div>
    <div class="item circle4"></div>
    <div class="item circle5"></div>
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores vel ullam quam quisquam magni eaque officiis 
</body>

补充

绝对定位、固定定位元素一定是块盒
绝对定位、固定定位元素一定不是浮动
没有外边距合并

GGYY__

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
html+css基础知识

0、前提80%知识，只有20%的场景可以用到；20%的知识，有80%的场景可以用到。1 、HTML & CSS 到底是什么，有什么用？它们是两门语言。HTML + CSS + Javascript = 网页HTML：Hyper Text Markup Language 超文本标记语言；定义网页中有什么。CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。1.1 执行HTML CSSHTML、CSS -> 浏览器内核 -> 页面
复制链接

扫一扫