Day3:HTML5 基础标签:h1-h6、p、hr、br、a、img

一、目标

1.掌握 h1-h6、p、br、hr 标签的使用方法,明白它们在网页结构中的作用;

2.熟练掌握 a 链接标签与 img 图片标签的核心属性及使用方法

二、标题标签 h1-h6

使用 <h1> 不仅是为了视觉上的"变大加粗",更是向浏览器和搜索引擎声明"这是页面的核心标题"。

  • 共6级,h1层级最高(建议单页一个),h6最低。
  • 自带加粗、自动换行及上下间距效果。
  • **块元素:**独占一行。

代码及效果

三、水平线标签 hr

  • 单标签,在页面中显示一条水平线。
  • 用于分隔页面不同板块,让结构更清晰。

四、段落标签 p

  • 双标签结构,专门用于包裹文本段落。
  • 自带上下间距和自动换行,用于分隔不同段落。
  • **块元素:**独占一行。

五、手动换行标签 br

  • 单标签,作用是强制换行。
  • 无间距,仅用于段落内的换行,不产生段落间隔。

核心区分:

<p> 段落标签:

1.功能:用于"段落分隔",定义一个文本块。
2.特征:自带上下间距,使段落间层次分明。
<br> 换行标签
1.功能:用于"强制换行",仅在段落内部换行。
2.特征:无间距,不产生新的段落块。
重要提醒:禁止用 <br/> 标签代替 <p> 标签来分隔段落!

六、超链接标签 a

**核心功能:**实现双标签页之间的导航,是构建网页超链接的基础。

**核心属性:**设置链接地址,支持网络URL或本地路径。

注意:网络网址必须以 http:// 或 https:// 开头。

**常用属性:**target="_blank"属性:target="_blank" 设置链接在新浏览器窗口打开;默认不设置则在当前窗口打开。

行内元素:不独占一行。

注:可以添加前面学过的br手动换行强行分开,也可在两个a标签前套一个块元素(独占一行)来实现,这里先用强调换行标签br实现。

a 标签的target属性还有几个选项,大家可以自行尝试。

七、图片引入标签

核心属性:src (来源)

指定图片路径(本地或网络地址)。建议将图片文件与HTML文件放在同一目录下,便于管理。

必备属性:alt (替代文本)

图片加载失败时的备用文本。职业开发中必须填写,符合语义化标准,提升可访问性。

常用属性:width / height

设置宽高(px),建议只设其一,图片会自动等比例缩放,避免变形。

准备工作,需要在站点文件夹下建一个专门用于存放图片的文件夹img(我取的名,也可以用其他,你知道就行)

第一步如下图可以新建,也可以直接打开电脑的F盘的站点文件夹里面建

最图如下图

然后把图片文件存于img文件夹内,总体思路就是分类存放,便于查找或链接

**特别强调:站点及其内部的文件夹及文件,不要出现中文,也不要出现空格。**

相关推荐
KaMeidebaby3 小时前
卡梅德生物技术快报|骆驼纳米抗体:从原核表达、高通量测序到分子对接全流程实现
前端·数据库·其他·百度·新浪微博
子兮曰5 小时前
Node.js v26.1.0 深度解读:FFI、后量子密码与调试器的进化
前端·后端·node.js
测试员周周5 小时前
【Appium 系列】第06节-页面对象实现 — LoginPage 实战
开发语言·前端·人工智能·python·功能测试·appium·测试用例
西洼工作室6 小时前
前端直传OSS服务端签名(Policy+Signature)/STS临时凭证
前端·文件上传·oss
你很易烊千玺7 小时前
日常练习-数组 字符串常用的场景
前端·javascript·字符串·数组
weixin199701080167 小时前
[特殊字符] RESTful API 接口规范详解:构建高效、可扩展的 Web 服务(附 Python 源码)
前端·python·restful
存在的五月雨8 小时前
Vue3项目一些语法
前端·javascript·react.js
nashane8 小时前
HarmonyOS 6学习:Web组件同层渲染事件处理与智能长截图实现
前端·学习·harmonyos·harmonyos 5
大家的林语冰8 小时前
Node 2026 发布,JS 三大新功能上线,最后一个奇偶版本
前端·javascript·node.js