HTML零基础入门教学第二期：常用实用标签大全-初晴小屋

660cea040c201619

本期学习目标

学会换行、横线、文字样式、超链接、插入图片五大核心标签，做出带图文、可跳转的完整页面。

一、基础排版标签

1. 换行标签

单标签，用来强制文字换行，无结束标签

<p>第一行文字<br>直接换到第二行</p>

2. 分割线 <hr>

页面画一条水平分割线，区分内容板块

<hr>

3. 空格  

网页直接打空格无效，用这个代码代表空格

<p>前端&nbsp;&nbsp;开发学习</p>

二、文字美化标签

1. 加粗 内容

2. 倾斜 内容

3. 下划线 内容

4. 删除线 <s>内容</s>

示例：

<b>加粗字体</b>
<i>倾斜字体</i>
<u>带下划线文字</u>
<s>划掉的文字</s>

三、超链接标签（重点）

作用：点击跳转到网址、页面

格式： <a href=”跳转地址”>显示文字</a>

1. 站内跳转

<a href="index.html">回到首页</a>

2.外网跳转

<a href="https://bcapi.ccwu.cc">白茶API官网</a>

3. 新窗口打开

加 target=”_blank”

<a href="https://bcapi.ccwu.cc" target="_blank">新窗口打开官网</a>

四、图片标签（高频使用）

格式： <img src=”图片地址” alt=”描述”>

– src：图片路径/网络图片链接

– alt：图片加载失败显示文字

1. 网络图片

<img src="https://xxx.jpg" alt="广告图">

2. 本地图片

图片和网页放同一文件夹直接写名字

<img src="tu.jpg" alt="图片">

五、完整实战整合代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML第二期教学</title>
</head>
<body>
    <h1>HTML第二期 实用标签</h1>
    <hr>
    <p>学习前端很简单&nbsp;&nbsp;轻松建站</p>
    <br>
    <b>白茶API优质接口</b><br>
    <i>稳定高速 免费接口多多</i>
    <p>官网直达：
    <a href="https://bcapi.ccwu.cc" target="_blank">点击进入白茶API</a>
    </p>
    <img src="https://picsum.photos/400/200" alt="宣传图">
</body>
</html>

六、路径简单讲解

1. 同级路径：文件放一起直接写文件名

2. 下级路径：文件夹/文件名

3. 上级路径： ../ 返回上一级

七、本期知识点总结

1. 学会换行、分割线、空格用法

2. 掌握四种文字样式标签

3. 精通超链接跳转、新窗口打开

4. 学会插入本地图、网络图

5. 能制作简单图文宣传页面

下期预告

第三期：列表标签+表格制作，学会做导航栏、数据表格，适合做API展示页！