HTML&CSS基础篇之三：HTML基础结构之ML篇

HTML基础结构解析：从ML到CSS

最新推荐文章于 2025-05-05 23:22:52 发布

原创最新推荐文章于 2025-05-05 23:22:52 发布 · 903 阅读

1 ·

CC 4.0 BY-SA版权

HTML&CSS&JS 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了HTML的基础结构，包括HTML的头部和主体，详细解析了HTML标记的结构和嵌套，解释了浏览器如何根据HTML显示内容，并简要探讨了CSS在定义网页样式中的作用。内容涵盖HTML的、和元素，以及CSS的使用和在HTML头部的应用。

基础结构

代码：

<html>
    <head>
        <title>Starbuzz Coffee</title>
        <style type="text/css">
            body {
                background-color: #d2b48c;
                margin-left: 20%;
                margin-right: 20%;
                border: 1px dotted gray;
                padding: 10px 10px 10px 10px;
                font-family: sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>Starbuzz Coffee Beverages</h1>
        <h2>House Blend, $1.49</h2>
        <p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>

        <h2>Mocha Cafe Latte, $2.35</h2>
        <p>Espresso, steamed milk and chocolate syrup.</p>

        <h2>Cappuccino, $1.89</h2>
        <p>A mixture of espresso, steamed milk and foam.</p>

        <h2>Chai Tea, $1.85</h2>
        <p>A spicy drink made with black tea, spices, milk and honey.</p>
    </body>
</html>

HTML结构概述

<html></html>标记以包围你的HTML，用此通知浏览器文件的内容是HTML。
头部由<head></head>标记及它们之间的内容组成。
主体由<body></body>标记及它们之间的内容组成；主体包含了网页的所有内容和结构-你在浏览器中看到的那些部分。

备注：
<head></head>标记，这两个头部标记内包含了网页的信息，如标题。通过头部告诉浏览器有关的网页的信息。
<title></title>标题标记嵌入到头部。标题显示在浏览器顶部。

解剖标记

<h1>Starbuzz Coffee Beverages</h1>

标记通常由尖括号及标记名组成，尖括号<和>。
通常在部分内容周围添加标记。
这个是用来结束标题的结束标记。在这里 </h1>用来结束<h1>标题，它之所以是个结束标记。因为它出下载内容后面，而且在h1之前还多了一个/。所有结束标记都有 /。
整个语句称为一个元素，在这里我们称其为<h1>元素。一个元素由闭合标记及它们之间的内容组成。元素=开始标记+内容+ 结束标记。

关于嵌套

HTML 标记经常这样嵌套。每一个HTML有一个主体，主体又包含了一个段落等，这是自然，很正常的。许多HTML元素会在它们的标记之间嵌入另外一个元素。后续研究说明。

Q&A

关于浏览器如何显示HTML：
HTML告诉浏览器文档的结构：哪里是标题，哪里是段落，哪里需要强调等。在得到以上信息后，浏览器会按照默认的规则来显示每一个元素（注意是默认规则），可以通过CSS来添加自己的样式和格式规则。
关于制表符，回车，空格
浏览器显示HTML文件时会忽略制表符，回车，还有大多数的空格；在书写时添加制表符，回车，空格增加了代码的可读性，方便后续维护。
hx 一共有6个 h1~h6,字体由大变小。
关于<html></html>
通知浏览器这个是一个html文件。
注释书写方式

元素的属性
属性用来为一个元素提供附加信息