HTML网页布局学习

基础模板含义

HTML（超文本标记语言）的核心是“标签 + 属性 + 内容” 构成的层级结构，整体可分为三大核心部分：

1. 文档声明与根元素（页面基础框架）

<!DOCTYPE html>：文档声明，告诉浏览器这是 HTML5 文档（必须放在第一行）；

<html>：根标签，包裹整个页面的所有内容，所有 HTML 代码都在这个标签内；

2. 两大核心子容器（头部 + 主体）

<html> 内只有两个核心子标签：<head> 和 <body>（头部 + 主体）

（1）html标签的结构

标签一般由<、>、/、还有英文单词或字母组成

常见标签：双标签，前部分为开始标签，后部分为结束标签，中间包裹内容，例如：
<strong>这里写包裹的内容</strong>
少数标签：单标签，例如：
<hr>，<br>

（2）html标签的属性

标签属性一般写在开始标签内部，可以同时存在多个属性，属性之间用空格隔开，标签名与属性之间必须用空格隔开
<strong class="one" id="two">文字变粗</strong>
strong与class之间就是有空格隔开，class和id属性没有顺序，谁先谁后都可以

三、常用标签

（1）标题标签

标题标签为h系列标签，文字大小由h1到h6逐渐减小，每个标题独占一行

例如：
<h1>我是1级标签</h1>
<h2>我是2级标签</h2>
<h3>我是3级标签</h3>
<h4>我是4级标签</h4>
<h5>我是5级标签</h5>
<h6>我是6级标签</h6>
效果：

（2）段落标签

段落标签为p标签，段落之间存在间隙，每个段落是独占一行的
<p>前端开发是创建WEB⻚⾯或APP等前端界⾯呈现给⽤户的过程，通过HTML，CSS及JavaScrip
t以及衍⽣出来的各种技术、框架、解决⽅案，来实现互联⽹产品的⽤户界⾯交互</p>

<p>前端开发跟随移动互联⽹发展带来了⼤量⾼性能的移动终端设备应⽤。HTML5，Node.js的⼴
泛应⽤，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>
效果：

那么如果想要在段落对应的字后面进行换行，这时候就该用到换行标签

（3）换行和水平线标签

换行标签为br，水平线标签为hr，都是单标签，可以强制换行

就用段落标签中的内容举例子，需要在第二段话的每个句号进行换行
<p>前端开发跟随移动互联⽹发展带来了⼤量⾼性能的移动终端设备应⽤。
<br>
HTML5，Node.js的⼴泛应⽤，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>
这里是为了看清楚，实际写的时候br接在对应字后面就行，不用特意空行

效果：

hr的很好就能体现出来
<p>前端开发是创建WEB⻚⾯或APP等前端界⾯呈现给⽤户的过程，通过HTML，CSS及JavaScrip
t以及衍⽣出来的各种技术、框架、解决⽅案，来实现互联⽹产品的⽤户界⾯交互</p>
<hr>
<p>前端开发跟随移动互联⽹发展带来了⼤量⾼性能的移动终端设备应⽤。HTML5，Node.js的⼴泛应⽤，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>
效果：

（4）文本格式化标签

文本格式化标签就是：让文本有加粗、下划线、倾斜、删除线文本的效果
分别为：
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
效果：

（5）图片标签

图片标签：img，也是单标签；用于展示图片

标签属性：

src -- 显示图片的路径

alt -- 当图片加载失败时显示的文字

title -- 当鼠标悬停在图片上时显示的文字

width -- 图片的宽度

height -- 图片的高度

注意：当只设置宽度或高度时，另一个会等比例缩放；同时设置时，如果设置不当会导致图片变形

展示：

首先要将图片放入html文件同级的文件夹里（这样方便写路径），这里我拿我截的图为例
<img src="图片.png" alt="这是图片不显示时的文字" title="这是图片的例子">
有图片的效果：

没有图片显示时（路径错误时）：

（6）多媒体标签

多媒体标签：音频标签audio；视频标签viedo

标签属性：

controls -- 播放用的控件

autoplay -- 自动播放（有些浏览器不支持）

loop -- 循环播放

去网上随便找个能下载的视频和音频举例子

<audio src="Dear D - 项睿娴.mp3" controls autoplay loop></audio>
<video width="400px" height="400px" src="视频.mp4" controls autoplay loop ></video>

效果：

（7）链接标签

链接标签为a标签；点击后会跳转网页

标签属性：

href -- 跳转页面的路径（分为外部链接和内部链接）

target -- 打开网页的方式

（_self：为默认值，会在当前窗口进行跳转，原网页被覆盖；_blank：在新窗口中进行跳转，原网页保留）

<a href="https://www.baidu.com/" target="_self">百度一下</a>
<br>
<a href="https://chat.deepseek.com/" target="_blank">deepseek</a>
效果不好直接展示，可以自己将代码复制后实操试试

四、路径与布局

（1）路径的选择

1、相对路径

当在同级的目录时，直接写文件名

下级目录：写文件夹名/文件名

上级目录：../文件名

注意文件名的后缀不同也会找不到目标文件

2、绝对路径

通常从盘符开始的路径，像下面一样

盘符开头：D:\day01\images\1.jdg

完整的网络地址：https://www.baidu.com/2018czgw/images/logo.gif

（2）布局标签

没有语义的：

div标签：一行只显示一个

span标签：一行显示多个

二者都为容器元素，用于包裹需要使用的标签元素

有语义的：html5标签

header -- 网页头部

nav -- 网页导航

footer -- 网页底部

aside -- 网页侧边栏

section -- 网页区块

article -- 网页文章

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5语义标签示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 20px auto;
            padding: 20px;
        }
        
        header { background: #4CAF50; color: white; padding: 30px; text-align: center; }
        nav { background: #2196F3; color: white; padding: 15px; margin: 10px 0; text-align: center; }
        
        .container {
            display: flex;
            gap: 20px;
            margin: 10px 0;
        }
        
        main {
            flex: 3;
        }
        
        article { background: #FF9800; color: white; padding: 30px; margin-bottom: 10px; }
        section { background: #9C27B0; color: white; padding: 30px; margin-bottom: 10px; }
        aside { background: #F44336; color: white; padding: 30px; flex: 1; }
        
        footer { background: #333; color: white; padding: 30px; text-align: center; margin-top: 10px; }
        
        h1, h2, h3, p {
            margin: 0;
        }
    </style>
</head>
<body>

    <header>
        <h1>我是 header - 网页头部</h1>
    </header>

    <nav>
        <h2>我是 nav - 导航栏</h2>
    </nav>

    <div class="container">
        <main>
            <article>
                <h2>我是 article - 独立文章</h2>
            </article>
            
            <section>
                <h2>我是 section - 内容区块</h2>
            </section>
        </main>
        
        <aside>
            <h2>我是 aside - 侧边栏</h2>
        </aside>
    </div>

    <footer>
        <h2>我是 footer - 网页底部</h2>
    </footer>

</body>
</html>

这里面包括了css，在这只是为了看到各个部分的效果

（3）列表与表格

无序列表

无序列表在网页中表示一组无顺序的列表

标签：

ul -- 作为无序列表的整体，用于包裹li标签；

li -- 表示列表的每一项，用于包含每一行的内容
    <ul>
        <li>这是第一行</li>
        <li>这是第二行</li>
        <li>这是第三行</li>
        <li>这是第四行</li>
        <li>这是第五行</li>
    </ul>
效果：

有序列表

有序列表在网页中表示一组有顺序的列表

标签：

ol -- 作为有序列表的整体，用于包裹li标签，内容依旧由li标签包含
    <ol>
        <li>这是第一行</li>
        <li>这是第二行</li>
        <li>这是第三行</li>
        <li>这是第四行</li>
        <li>这是第五行</li>
    </ol>
效果：

表格

表格以行+列的方式展示数据

标签：

table -- 表格的整体，可包裹多个tr

tr -- 表格的行数，用于包裹td

td -- 表格的单元格，包裹内容

注意：嵌套关系为 table > tr > td

属性：

border -- 边框的宽度

width -- 表格的宽度

height -- 表格的宽度

caption -- 表格的大标题，默认在表格顶部居中显示

th -- 表头的单元格，表示一列小标题，通常用于第一行，默认内部文字加粗且居中显示

注意：caption要写在table内部；th要写在tr内部（用于替换td）

<table border="1px solid red">
        <caption>这是大标题</caption>
        <tr>
            <th>表头标题</th>
        </tr>
        <tr>
            <td>第一列</td>
            <td>第二列</td>
        </tr>
    </table>

这里为了方便展示加入了边框的输入

合并单元格

这里添加一个操作：合并单元格

属性：用于合并单元格的个数

rowspan -- 跨行合并，多行单元格垂直合并
    <table border="1px solid red">
        <caption>这是大标题</caption>
        <tr>
            <th>表头标题</th>
        </tr>
        <tr>
            <td rowspan="2">第一列</td>
            <td>第二列</td>
        </tr>
        <tr>
            <td>第三行第二列</td>
        </tr>
    </table>
可以看到经过跨行合并后第二行和第三行的第一列合并了

colspan -- 跨列合并，多行单元格水平合并
    <table border="1px solid red">
        <caption>这是大标题</caption>
        <tr>
            <th colspan="2">表头标题</th>
        </tr>
        <tr>
            <td>第一列</td>
            <td>第二列</td>
        </tr>
    </table>
可以看到之前的表头标题显示在第一列的位置，合并后跨了两列

（4）表单标签扩展

表单

表单一般用于显示收集用户信息，常用form标签包裹表单进行使用

form 是 HTML 中用于创建用户与服务器交互的表单的核心标签，它可以包裹各类表单控件

标签：input 通过type属性值的不同展示不同效果

type属性：

text -- 文本框，用于输入单行文本

password -- 密码框，用于输入密码

radio -- 单选框，用于多选一

checkbox -- 多选框，用于多选多

file -- 文件选择，用于上传文件

注意：最后这三个不仅可以当作type属性值，还可以作为button按钮标签属性值

submit -- 提交按钮，用于提交

reset -- 重置按钮，用于重置

button -- 普通按钮，默认没有功能，配合之后js的学习会添加功能

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>input 标签 type 属性演示（仅保留type）</title>
</head>
<body>
    <h2>input 标签 type 属性功能演示</h2>
    <form>
        <!-- 1. 文本框：text -->
        文本框（text）：
        <input type="text"><br><br>

        <!-- 2. 密码框：password -->
        密码框（password）：
        <input type="password"><br><br>

        <!-- 3. 单选框：radio（多选一） -->
        单选框（radio）：
        <input type="radio"> 男
        <input type="radio"> 女<br><br>

        <!-- 4. 多选框：checkbox（多选多） -->
        多选框（checkbox）：
        <input type="checkbox"> 敲代码
        <input type="checkbox"> 打游戏
        <input type="checkbox"> 阅读<br><br>

        <!-- 5. 文件选择：file -->
        文件选择（file）：
        <input type="file"><br>
        <h3>作为 input 按钮类型：</h3>
        <!-- 6. 提交按钮：submit -->
        <input type="submit">
        <!-- 7. 重置按钮：reset -->
        <input type="reset">
        <!-- 8. 普通按钮：button -->
        <input type="button"><-这是一个普通按钮
    </form>
</body>
</html>

这是input的这些属性的一个综合展示，有兴趣的可以自己复制代码

button按钮标签

    <h1>作为 button 标签属性：</h1>
    <!-- button 标签的三种类型 -->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>

select下拉菜单标签

标签：

select -- 下拉菜单的整体

option -- 下拉菜单的每一项

属性：selected -- 下拉菜单的默认选中
    <form>
        
        <label>所在城市：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option selected>广州</option> 
            <option>深圳</option>
        </select>
    </form>
效果：

可以看到默认出现在框中的是广州

textarea文本域标签

标签：textarea -- 提供可输入多行文本的表单控件

属性：

cols -- 文本域的可见宽度

rows -- 文本域的可见行数
    <form>
        <label>个人简介：</label><br>
        
        <textarea cols="30" rows="5">这里是默认文本，可输入多行内容</textarea>
    </form>
效果：

不过似乎这个文本域可以手动拉长，解决方法等学习css时会知道

label标签

标签：label -- 用于绑定内容与表单标签的关系

label使用1：

使用label标签包裹内容；在表单标签（input）中添加id值；然后在label的for属性中设置对应id值
    <form>
        
        <input type="checkbox" id="agree">
        
        <label for="agree">我已阅读并同意用户协议</label>
    </form>
效果：

label使用2：

直接包裹内容和表单标签，不用for属性就行

    <form>
        <!-- label直接包裹文本和表单控件，无需for和id -->
        <label>
            <input type="radio" name="gender"> 男
        </label>
        <label>
            <input type="radio" name="gender"> 女
        </label>
    </form>

效果：