当前位置：首页 > news >正文

HTML详解连载（1）

news 2025/7/21 13:51:34

HTML详解连载（1）

- HTML
- - 定义
  - HTML 超文本标记语言
  - 标签语法
  - 注意
  - 拓展
- HTML基本骨架
- - 解释
  - VS Code 快速生成骨架：
  - 标签的关系
  - - 父子关系（嵌套关系）
    - 兄弟关系（并列关系）
  - 代码格式
  - 注释
- 标题标签
- 标签名:h1-h6(双标签)
- - 经验：
- 段落标签
- - 标签名：p(双标签)
  - 显示特点：独占一行、段落之间存在间隙
- 换行和水平线标签
- 文本格式化标签
- - 作用：
- 图像标签-基本使用
- - 强调
  - 图像标签-属性
  - 属性名=“属性值”
- 路径
- - 路径分类：
  - - 相对路径
    - - 强调
    - 绝对路径
- 注释

HTML

定义

Hyper TextMarkup Language。
在这里插入图片描述

HTML 超文本标记语言

超文本是链接
标记也叫标签，带尖括号的文本

标签语法

<strong> 需要加粗的文字 </strong>
<strong>--开始标签
</strong>--结束标签

注意

标签成对出现，中间包裹内容
<>里面放英文字母(标签名)
结束标签比开始标签多/

拓展

双标签：成对出现的标签
单标签：只有开始标签，没有结束标签
<br>:换行
<hr>:水平线

HTML基本骨架

	<html><head><title>网页标题</title>	</head><body>网页主体内容</body></html>

在这里插入图片描述

解释

html:整个网页
head:网页头部，用来存放给浏览器看的信息，例如CSS
title:网页标题
body:网页主体，用来存放给用户看的信息，例如图片，文字

VS Code 快速生成骨架：

在HTML文件(.html)中，!(英文)配合Enter/Tab

标签的关系

作用：明确标签的书写位置，让代码格式更整齐

父子关系（嵌套关系）

	<html><head></head></html>

兄弟关系（并列关系）

<head></head>
<body></body>

代码格式

父子关系：子集标签换行且缩进
兄弟关系：兄弟标签换行要对齐

注释

注释中...是注释内容

快捷键: Ctrl + /

在这里插入图片描述

标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

标签名:h1-h6(双标签)

显示特点：文字加粗、字号逐渐减小、独占一行（换行）

经验：

h1标签再一个网页中只能用一次，用来放新闻标题或者网页的logo
h2-h6没有使用的限制

段落标签

一般用在新闻段落，文章段落，产品描述信息等。

标签名：p(双标签)

显示特点：独占一行、段落之间存在间隙

换行和水平线标签

  换行<br>(单标签)水平线<hr>(单标签)

文本格式化标签

作用：

为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等

  效果		标签名1		标签名2加粗		strong		b倾斜		em			i下划线	ins			u删除线	del			s

strong em ins del标签自带强调含义（语义）。
在这里插入图片描述

图像标签-基本使用

作用：在网页中插入图片

<img src=”图片的URL”>

强调

src用于指定图像的位置和名称，是的必须属性。

图像标签-属性

属性	作用	说明
alt	替换文本	图片无法显示的时候显示文字，可以不影响图片浏览
title	提示文本	鼠标悬停再图片上的时候显示的文字
width	图片的宽度	值为数字，没有单位默认等比缩放
height	图片的高度	值为数字，没有单位