资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/CSS学习笔记(一) HTML标记与文档结构

CSS学习笔记(一) HTML标记与文档结构

yacheng / 440人阅读

摘要：用标记内容的目的是为了赋予网页语义。规定了一组标签，用来给内容打上不同的标记。最新的版本，又新规定了一批结构化标签，用于对相关内容的标签进行分组，从而更好地规范网页的整体结构。

  
用HTML标记内容的目的是为了赋予网页语义（semantic）。换句话说，就是要给你的网页内容赋予某些用户代理（user agent）能够理解的含义。


  
HTML 规定了一组标签，用来给内容打上不同的标记。每个标签都是对它所包含内容的一种描述。最常用的HTML描述的是标题、段落、链接和图片。目前，HTML一共有114个标签，但按照 80/20 原则，使用其中25个左右的标签就可以满足80%的标记需要。


  
HTML 最新的版本 HTML5，又新规定了一批结构化标签，用于对相关内容的标签进行分组，从而更好地规范网页的整体结构。这些新标签包括
、
1.标签的闭合 
  
对于每个包含内容的元素（比如标题、段落和图片），根据它所包含的内容是不是文本，有两种不同的方式给它们加标签，一种是使用闭合标签，另一种是使用非闭合标签。
1.1 文本用闭合标签

示例：

Hello, CSS!

1.2 引用内容用自闭合标签

示例：
而在 HTML5 中，可以省略最后那个表示关闭的斜杠，写成：
An HTML Template 7.块级元素和行内元素

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

  
几乎所有HTML 元素的 display 属性要么为 block，要么为 inline。最明显的一个例外是 table 元素，它有自己特俗的 display 值。


  
块级元素（比如标题和段落）会相互堆叠在一起沿页面向下排列，每个元素分别占一行。而行内元素（比如链接和图片）则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示。


  
无论你想了解哪个 HTML 元素，第一个要问的问题都应该是：它是块级元素，还是行内元素？知道了这一点之后，就可以在编写标记的时候，预想到某个元素在初始状态下是如何定位的，这样才能进一步想好将来怎么用 CSS 重新定位它。

有两点要知道的：

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

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

7.嵌套的元素

在标记中嵌套的是HTML标签，而在屏幕上嵌套的则是一个个的盒子。

8.文档对象模型

文档对象模型（简称 DOM）是从浏览器的视角来观察页面中的元素以及每个元素的属性，由此得出这些元素的一个家族树。通过DOM，可以确定元素之间的相互关系。在 CSS 中引用 DOM
中特定的位置，就可以选中相应的 HTML 元素，并修改其样式属性。

CSS 操作 DOM 的过程是先选择一个或一组元素，然后再修改这些元素的属性。通过 CSS 修改了元素后，比如修改了宽度或者在标记里插入了一个伪元素，这些变化会立即在 DOM 中发生，并体现在页面上。

简而言之，就是通过 HTML 标记来构建 DOM，然后在页面初次加载和用户与页面交互时，使用 CSS 来修改 DOM。

参考资料

CSS设计指南

混合云 云服务器 学习笔记一 css与html html与css html与css区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110965.html

相关文章

  • CSS学习笔记(一) HTML标记与文档结构

    摘要：用标记内容的目的是为了赋予网页语义。规定了一组标签，用来给内容打上不同的标记。最新的版本，又新规定了一批结构化标签，用于对相关内容的标签进行分组，从而更好地规范网页的整体结构。 用HTML标记内容的目的是为了赋予网页语义（semantic）。换句话说，就是要给你的网页内容赋予某些用户代理（user agent）能够理解的含义。 HTML 规定了一组标签，用来给内容打上不...

    jindong 评论0 收藏0

  • CSS权威指南学习笔记系列(1)CSS和文档

    摘要：行内元素不会在它本身之前或之后生成分隔符，所以可以出现在另一个元素的内容中，而不会破坏其显示。标记标记基本目的是允许创作人员将包含标记的文档与其他文档相关联。更多细节请看权威指南 题外话：HTML是一种结构化语言，而CSS是它的补充；这是一种样式语言。CSS是前端三板斧之一，因此学习CSS很重要。而我还是菜鸟，所以需要加强学习CSS。这个是我学习CSS权威指南的笔记，如有不对，请谅解和...

    peixn 评论0 收藏0

  • HTML入门学习笔记（一）

    摘要：元素表示主导链接的区域。已经习惯使用或元素对链接进行结构化的情况下，并没有取代这种最佳实践，只不过在它们外围包上了一个。不允许将嵌套在内。 第一章 网页的构造块 一个网页主要包括文本内容、对其它文件的引用和标记。 语义化HTML：有含义的标记 HTML包含关于文档中内容的信息，这些信息称作标记，用以描述内容的含义，即语义。也就是说，HTML仅仅关心网页中要展示的内容，至于如何展示，那是...

    fox_soyoung 评论0 收藏0

  • HTML入门学习笔记（一）

    摘要：元素表示主导链接的区域。已经习惯使用或元素对链接进行结构化的情况下，并没有取代这种最佳实践，只不过在它们外围包上了一个。不允许将嵌套在内。 第一章 网页的构造块 一个网页主要包括文本内容、对其它文件的引用和标记。 语义化HTML：有含义的标记 HTML包含关于文档中内容的信息，这些信息称作标记，用以描述内容的含义，即语义。也就是说，HTML仅仅关心网页中要展示的内容，至于如何展示，那是...

    Miracle 评论0 收藏0

  • 学习笔记—HTML基础标签

    摘要：标题标签会将其中的文本加粗加黑显示，并从到依次减弱。换行标签换行符。可在标签内使用。规定表头单元格可横跨的行数。HTML的概念 概念： 　　HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup t...

    CastlePeaK 评论0 收藏0

发表评论

登陆后可评论

0条评论

yacheng

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<