HTML基础与网页布局-优快云博客

本文链接：https://blog.youkuaiyun.com/dragonylee/article/details/108565738

本文介绍了HTML的基础语法，包括常用标签及其功能，如标题、段落、图片、链接等，并展示了如何使用div进行网页布局，提供了实例代码及效果预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，用各种标签以及文本来描述 web 页面，浏览器可以读取 html 文件并且显示。

这学期学习数据库，其中一个小作业是要求用 MySQL+JDBC+Web 开发一个简单的数据库管理系统，要求在浏览器实现表的各种操作，这就涉及到网页开发。谈到 web，相关的东西就是 HTML、CSS 和 JavaScript，其中 HTML 用来描述网页（网页的骨架），CSS 用来定义如何显示 HTML（网页的外观），而 JavaScript 定义网页的行为（网页的思维），这是我目前的一个理解，可能不是很准确。HTML 应该不是很复杂，只要掌握一些基础的语法规则，就能做出一个界面优美的网页。

头

一开始一般要定义文档类型，方便浏览器解析：

<!DOCTYPE html>

然后 <head></head> 里面包含所有头的内容，包括如下几种：

标签	作用
<title>	文档的标题
<base>	页面链接的默认地址（也就是后面的链接自动把它当做基地址）
<link>	文档的外部资源
<meta>	描述一些文档的元数据，包括文字编码方式等
<script>	用于加载脚本

各种各样的标签

接下来是各种各样的标签，包括：

标签	作用
<html>	定义文档
<body>	定义文档主体
<h1><h2>—<h6>	标题
<hr>	水平线
<!-- -->	注释
<p>	段落
<b>	粗体
<em>	着重文字（类似斜体）
<i>	斜体
<strong>	加重语气（类似粗体）
<sub>	下标字
<sup>	上标字
<ins>	插入字（下划线）
<del>	删除字（删除线）
<code>	代码块
<abbr>	缩写
<img src="">	插入图片
<a href="">	插入超链接
<table><tr><td>	表格行列
<ul><li>	无序列表
<ol><li>	有序列表

有一些标签是有前后两部分的，比如说描述段落的标签 <p>段落内容</p> ；还有一些标签是只有一部分的，比如说换行 <br> 。标签中可以加入属性，属性一般加在前面那个标签中，比如说 <img src="图片地址" width="50%" 表示加载一张图片，并且宽度缩放为 50% 。还有很多各式各样的属性，比如 style、target、title、color、id 等等。

下面这个是一个实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的第一个网页</title>
</head>

<body style="background-color: rgb(230, 227, 227);">
    <h1>第一个标题</h1>
    <p>第一个段落</p>
    <!-- 这是一个注释 -->
    <p>
        <a href="https://blog.youkuaiyun.com/dragonylee" target="_blank"><i>这是一个链接</i></a>
        <br>
        <ins>插入字</ins>
        <del>删除字</del>
        <sup>上标字</sup>
        <sub>下标字</sub>
        <strong>加重语气</strong>
        <small>小号字</small>
        <em>着重文字</em>
        <b>粗体文本</b>
        <br>
        <hr>
        <img loading="lazy" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="10%" />
    </p>

    <p>
        这是一个<abbr title="哈哈哈我是个大帅哥">缩写</abbr>，嘿嘿。 <br>

    </p>

    <p style="color:yellow; margin-left:80px">
        黄色的段落。
    </p>
    <h2 style="background-color: blue;">蓝色的标题</h2>
    <p style="font-family: arial;color:red;font-size: 50px;">
        奇奇怪怪的字
    </p>

    <br>
    <table border="2">
        <caption>这是一个表格</caption>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
        </tr>
    </table>

    <br>这是一个列表
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>

    <br>这是一个有序列表
    <ol>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ol>
</body>

</html>

在浏览器中加载后是这样的：

网页布局

以前通常用 table 也就是表格来布局，现在通常用 div 来进行布局。

div 的作用应该是定义一个块？

比如说如下代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的第一个网页</title>
</head>

<body style="background-color: rgb(230, 227, 227);">

    <h1 style="margin-left: 150px;">页面布局</h1>

    <div id="container" style="width:500px">
        <div id="header" style="background-color: #FFA500;">
            <h1 style="margin-bottom: 0;text-align: center;">有哪些食物</h1>
        </div>
        <div id="menu1" style="background-color: #FFD700; height:200px;width:250px;float:left;">
            <b>荤菜</b>
            <ul>
                <li>红烧牛肉</li>
                <li>清蒸鲈鱼</li>
                <li>油炸脚指头</li>
                <li>香锅鹿角</li>
            </ul>
        </div>
        <div id="menu2" style="background-color: #b4ca4f; height:200px; width:250px; float:right;">
            <b>素菜</b>
            <ol>
                <li>清炒狗尾巴草</li>
                <li>凉拌枫叶</li>
                <li>油炸大嘴花</li>
                <li>树皮</li>
            </ol>
        </div>
        <div id="footer" style="text-align: center;">
            <b>魔鬼食堂</b>
        </div>
    </div>

</body>

</html>