CSS设计基础与HTML结构解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39590977/article/details/131034467

CSS设计指南笔记1

1 HTML标记与文档结构

HTML（Hypertext Markup Language，超文本标记语言）

赋予网页语义（semantic）
规定了一组标签，用来给内容打上不同的标记
HTML5：新规定了一批结构化标签，对相关内容的标签进行分组，从而更好地规范网页的整体结构

CSS的用途：为HTML标记添加样式

添加样式的根据：标签名、标签属性（id、class）

1.1 HTML 标记基础

闭合标签、非闭合标签

1.1.1 文本用闭合标签

标题、段落等文本元素都要求闭合标签

有一个开标签，一个闭标签

<标签名>文本内容</标签名>

<标签名属性="属性值">文本内容</标签名>

1.1.2 引用内容用自闭合标签

闭合标签包含的是会显示的实际内容，给浏览器提供一个对要显示内容的引用，浏览器会在HTML页面加载时额外向服务器发送请求易趣得自闭合标签引用的内容

<标签名属性="属性值" />

1.1.3 属性

属性赋值为浏览器提供有关标签的额外细腻些

1.1.4 标题与段落

<h1>不仅是最大最突出的标题，搜索引擎也会将其视为仅次于<title>的另一个搜索关键词的来源

段落用于标记主要的文本内容

1.1.5 复合元素

由多个标签共同构成

某些标签要求其他标签与之共同出现
被嵌套在其他标签中

<li>是一个列表项，只在<ol>（ordered list，有序列表）和<ul>（unordered list，无序列表）这两种列表标签中才有效，在<dl>（definition list，定义列表）中无效

1.1.6 嵌套标签

要在一个标签里嵌套另一个标签，必需要先关闭后一个标签再关闭前一个标签

建立标签间的“父 - 子”关系

1.2 HTML文档剖析

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>An HTML Template</title>
    </head>
    <body>
        <!-- 这里是网页内容-->
    </body>
</html>

初始（默认）的样式，来自浏览器内置的一个CSS样式表，为每个HTML元素添加一些最基本的样式

1.2.2 块级元素和行内元素

文档流：HTML元素会按照它们各自在标记中出现的先后顺序，依次从页面上方“流向”下方

块级元素：相互堆叠在一起沿页面向下排列，每个元素分别占一行

行内元素：相互并列，只有在空间不足的情况下才会折到下一行显示

块级元素盒子会扩展到与父元素同宽

行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧

1.2.3 嵌套的元素

父元素的盒子只截嵌套这所有子元素盒子

HTML实体

常用于生产键盘上没有的印刷字符
以&开头，;结尾，二者之间是表示实体的字符串

1.3 文档对象模型

DOM（Document Object Model）

子元素、父元素、同胞元素、祖先元素、后代元素

CSS操作DOM的过程

先选择一个或一组元素，然后修改这些元素的属性
这些变化会立即在DOM中发生，并体现在页面上

通过HTML标记来构建DOM，然后在页面初次加载和用户与页面交互时，用CSS来修改DOM

CSS设计指南 笔记1

CSS设计指南 笔记1

1 HTML标记与文档结构

1.1 HTML 标记基础

1.1.1 文本用闭合标签

1.1.2 引用内容用自闭合标签

1.1.3 属性

1.1.4 标题与段落

1.1.5 复合元素

1.1.6 嵌套标签

1.2 HTML文档剖析

1.2.2 块级元素和行内元素

1.2.3 嵌套的元素

1.3 文档对象模型

CSS设计指南笔记1

CSS设计指南笔记1