HTML标签语法,基本框架

目录

1.HTML定义

2.标签语法

3.HTML基本骨架

网页模板

(1)快速生成骨架

4.标签的关系

5.注释

a.意义:

b.注释快捷键

6.排版标签-标题和段落

a.标题标签

注:显示特点

经验分享:

b.段落标签

注:显示特点

示例:

7.换行和水平线标签(单标签)

[a.换行:
(单标签)](#a.换行: (单标签))

b.水平线:


(单标签)


1.HTML定义

2.标签语法

(CTRL+S保存文件,先保存后运行)

(1) 标签成对出现,中间包裹内容

(2) <>里面放英文字母(标签名)

(3)结束标签比开始标签多 /

(4)拓展

  • 双标签:成对出现的标签

  • 单标签:只有开始标签,没有结束标签

3.HTML基本骨架

网页模板

  • html: 整个网页
  • head: 网页头部,存放给浏览器看的代码,例如 CSS
  • body: 网页主体,存放给用户看的代码,例如 图片、文字
  • title:网页标题

(1)快速生成骨架

4.标签的关系

(1)作用:明确代码书写位置

(2)关系:

  • 父子关系(嵌套关系)
  • 兄弟关系(并列关系)

5.注释

a.意义:

注释就是对代码的解释和说明,其目的是让人们能够更加轻松地了解代码。注释是编写程序时,写程序的人给一个语句、程序段、函数等的解释或提示,能提高程序代码的可读性。

在编写HTML代码时,我们经常要在一些关键代码旁做一下注释,这样做的好处很多,比如:方便理解、方便查找或方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码进行修改。

b.注释快捷键

6.排版标签-标题和段落

a.标题标签

  1. :最大的标题,通常用于主标题,每个页面应只有一个

    标签。

  2. :次级标题,通常用于章节标题。

  3. :三级标题,通常用于子章节标题。

  4. :更低级别的标题,用于更细分的章节。

注:显示特点

文字加粗 字号逐渐减小 独占一行

经验分享:

- h1 标签在一个网页中只能用一次,用来放新闻标题或网页的 logo

- h2~h6没有使用限制

b.段落标签

段落标签

用于定义文本段落。浏览器会自动在段落的前后添加一些空白行(默认的上下边距),以区分不同的段落。

注:显示特点

  1. 独占一行

    标签是一个块级元素,它会独占一行显示,前后的内容都会被挤到上下行。

  2. 默认样式 :浏览器会为

    标签添加默认的上下边距(通常是 1em)【段落之间存在间隙】

示例:

7.换行和水平线标签(单标签)

a.换行:<br>(单标签)

b.水平线:<hr>(单标签)

相关推荐
创码小奇客3 分钟前
Trae Solo模式实战:我用3小时撸了个儿童睡前故事网页
前端·javascript·人工智能
Jing_Rainbow9 分钟前
【AI-9/Lesson30(2025-11-12)】AI + Vibe Coding:Hulk 浏览器扩展开发全解析 —— 从需求文档到实战的完整指南🌈
前端·人工智能·程序员
wordbaby9 分钟前
important-defaults(重要的默认配置)
前端·react.js
niucloud-admin22 分钟前
diy自定义组件/页面装修开发——自定义页面模板
前端
wordbaby25 分钟前
React Native 实战:构建一个现代化的 Todo List (React Query + SafeArea + 键盘适配)
前端·react native
T___T27 分钟前
class 出现前,JS 是怎么继承的
前端·javascript·面试
b***748827 分钟前
前端技术的下一场革命:体验、架构与智能协作的深度重构
前端·重构·架构
2201_7578308730 分钟前
JS的学习
前端·javascript·学习
鸡腿大王31 分钟前
震惊:v8引擎竟是如此操作代码(JS预编译)
前端·javascript
whisper31 分钟前
pnpm和npm对比,为什么现在更多项目使用pnpm运行项目
前端