CSS学习笔记-HTML文档结构

最新推荐文章于 2024-07-23 16:18:27 发布

Moplit

最新推荐文章于 2024-07-23 16:18:27 发布

阅读量107

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_45118086/article/details/116519970

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Chapter 1 HTML标记与文档结构

下一篇CSS选择符
每个网页在初始时都是使用HTML来标记内容的，此举的目的是赋予网页含义，操作的对象是用户代理，也就是让你的用户代理读懂你在文档中写的内容。

所谓用户代理(user agent),包含浏览器、屏幕阅读器、Web爬虫等，即存在于你和网页之间的一种中继

1.1 HTML标记基础

对于每个包含内容的元素，根据它所包含的内容是否为文本，有两种标记方式：闭合标签与非闭合标签。

HTML元素：从开始标签到结束标签的所有内容

在这里插入图片描述

1.1.1 文本用闭合标签

<标签名 属性值_1='' 属性值_2=''>文本内容</标签名>

标题、段落等文本元素均要求闭合标签
只有文本内容会在浏览器中显示
HTML有6级标题，以1开始计数

1.1.2 引用内容使用自闭合标签

<标签名 属性_1='' />

非文本内容通过自闭和标签显示

自闭和标签与闭合标签：闭合标签包含要显示的内容，自闭和标签给浏览器提供一个要显示内容的引用，浏览器在进行HTML页面加载的时候，会额外向服务器发送请求来获得自闭和标签引用的内容

<img src='./hello.png' alt='Picture' />
<!--alt属性值为图片加载失败时显式的内容，可供屏幕阅读器使用-->

延伸：XHTML与XMLHTTPRequest

XHTML：更严谨更纯净的 HTML 版本，标签必须闭合
XMLHttpRequest：一个对象，用于在后台与服务器进行数据交换

1.1.3 属性

为浏览器提供标签的额外信息。每个HTML标签都可以添加属性

1.1.4 标题与段落

六级标题，段落标签为<p>

1.1.5 复合元素

列表、表格、表单等均属于复合元素，所谓复合元素，即由多个标签共同构成

如<li> <ol>

1.1.6 嵌套标签

如：

<ol>
	<li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

<li>为<ol>的子标签

1.2 HTML文档剖析

1.2.1 HTML模板

<!DOCTYPE html> <!--声明该文档形式为HTML文档-->
<html><!--根级标签，它只有两个直接的子标签<head><body>-->
    <head>
        <meta charset="utf-8" /><!--帮助浏览器理解页面的信息-->
        <title>HTML Template</title><!--权重很大，尽量简洁-->
    </head>
    <body><!---内部包含的元素在页面中自上而下顺序排列->
        <!--网页内容-->
    </body>
</html>

<!--链接-->
<a href="www.baidu.com">这是一个链接</a>
<!--图片-->
<img src="image.jpg" alt="此处为图片" />

在没有指定CSS样式的时候，浏览器会把包含内容的元素在页面中自上而下一一排列，起点是页面的左上角。这其中控制样式的是浏览器内置的CSS样式表。

此外，排列样式还与块级元素和行内元素有关。比如链接和图片是行内元素，它们将会并列显示，而不是各占一行

1.2.2 块级元素与行内元素

所谓文档流的效果：

源码：

<!DOCTYPE html>
<hmtl>
    <head>
        <meta charset="utf-8">
        <title>示例模板</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <a href="www.baidu.com">链接</a>
        <img src="./pic/greenpaimeng.jpg" alt="图片加载失败" />
        <ol>
            <li>列表第一项</li>
            <li>列表第二项</li>
        </ol>
    </body>
</hmtl>

效果：

在这里插入图片描述

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

块级元素：如段落和标题，它们会互相堆叠在一起沿页面向下排列，每个元素占一行
行内元素：如链接和图片，它们会相互并列，只有在空间不足的情况下才会换行

在使用HTML元素之前，需要明确该元素是块级元素还是行内元素。

使用扩展Web Developer，选择Outline–>Outline Block Level Elements将会使用矩形来标记出块级元素，这个矩形即为块级元素盒子

在这里插入图片描述

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

在上图中，所有的块级元素的父元素都是<body>，<body>在默认情况下与浏览器页面同宽，因此，其子元素<ol>的元素盒子也与浏览器同宽。

行内元素盒子会收缩包裹其内容，并尽量包紧

1.2.3 嵌套的元素

在标记中嵌套的是一个个标签，但是在屏幕上嵌套的是一个个的盒子

嵌套示例1

引用标签<blockqoute>

<blockquote>
    &ldquo;
    blablabla
    &rdquo;
    <cite>
    	鲁迅//使用cite包含作者名称
    </cite>//行内元素
</blockquote>//默认缩进 块级元素

在这里插入图片描述

嵌套实例2

<p>
    Paimeng is so <strong>qute</strong> !! <em>blabla</em> <addr title="啊我死了">AWSL</addr>
</p>
<!--
<strong> 强调
<em> 斜体
<addr> 简写
-->

在这里插入图片描述

1.3文档对象模型

即DOM

<addr title="文档对象模型">DOM</addr>

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

父元素：直接祖先元素

子元素：直接后代元素

同胞元素：父元素相同

后代元素、祖先元素

通过HTML构建DOM，通过CSS修改DOM样式

Moplit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记-HTML文档结构

Chapter 1 HTML标记与文档结构每个网页在初始时都是使用HTML来标记内容的，此举的目的是赋予网页含义，操作的对象是用户代理，也就是让你的用户代理读懂你在文档中写的内容。所谓用户代理(user agent),包含浏览器、屏幕阅读器、Web爬虫等，即存在于你和网页之间的一种中继1.1 HTML标记基础对于每个包含内容的元素，根据它所包含的内容是否为文本，有两种标记方式：闭合标签与非闭合标签。HTML元素：从开始标签到结束标签的所有内容1.1.1 文本用闭合标签<标签名属性
复制链接

扫一扫

专栏目录