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

HTML基础（一）

news 2025/10/29 9:39:39

一、HTML
- 1.1 基本标签
- 1.2 基本语法
- 1.3 基本结构
二、常用标签说明
- 2.1 链接
- - `<a>`：链接资源
  - `<link>`: 链接资源
  - `<script>`：链接JS文件
  - `<ID>`：标识符
  - `<class>`：类名
  - `robots`：元标签
- 2.2 内容
- - `<input>`：输入框-Void元素
  - `<ul>...`：列表标签
  - `<strong>`...：字体
- 2.3 格式
- - `<main>`：主要内容区域
  - `<section>`：章节或主题
  - `<figure>`：独立内容单元
  - `<div>`：内容分块
  - `<mainfooter>`：页脚
- 2.4 特殊
- - `<og>`：协议
  - `<SEO>`：优化
  - `<<>`...：实体
End

一句话总结前端三件套

HTML（结构）：网页的骨架和内容。像Word文档里的标题、段落、列表、图片、链接等。
CSS（表现）：网页的外观和布局。像Word里的格式刷、字体颜色、段落间距、页面边距等功能。
JavaScript（行为）：让网页从“文档”变成“应用”，行为交互。响应用户的操作（如点击按钮、输入表单）、动态修改HTML和CSS的内容与样式（如弹窗、轮播图）、与服务器进行数据交换（如无刷新更新内容）

在这里插入图片描述

一、HTML

由元素组成

1.1 基本标签

标题标签（h1~h6）
段落标签（p）
换行标签（br）
水平线标签（hr）
图片标签（img）属性：src
链接标签（a）属性：href

1.2 基本语法

标签使用尖括号包裹，如：<h1> 标题 </h1>
标签可嵌套，如：<p> 段落1 </p> < p> 段落2 </p>
标签有属性，如：<img src="图片路径" alt="图片描述">
标签有内容，如： <p>这是一个段落</p>

嵌套

段落嵌套一个链接
<p>这是一个段落，包含一个链接：<a href="https://www.fly63.com">fly63</a>。</p>
通过用必要的元素标签包围图像，将图像变成链接
<a href="https://www.fly63.com" target="_blank> <img src="image.jpg" alt="fly63"></a>

1.3 基本结构

文档类型声明（<!DOCTYPE html>）:告诉浏览器该文档是 HTML5 文档，是 HTML 的最新版本；
根元素（<html>）：环绕所有内容，并可以指定页面的语言；
头部元素（<head>）：该部分包含重要的幕后信息；

元数据标签（<meta>），用于描述文档的元数据，例如：字符编码、作者、描述等

主体元素（<body>）：该部分是所有内容的位置；

基本框架（HTML样本）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="这是一个描述"><title>Document</title><link rel="stylesheet" href="style.css"><script src="script.js"></script>
</head>
<body><h1>这是一个标题</h1><p>这是一个段落。</p><a href="https://www.fly63.com">fly63</a><img src="image.jpg" alt="这是一个图片">
</body>
</html>

void 元素（也称为空元素或自闭合元素 ）

不能包含任何子内容的元素。通常用于在文档中嵌入一些单一的资源或对象。
常见的void元素：

<area>: 定义图像映射中的区域，用于点击跳转。
<base>: 定义文档中所有链接的默认目标。
<col>: 定义表格中的列，用于设置列的宽度、对齐方式等。
<embed>: 嵌入外部资源，例如：视频、音频等。
<source>: 定义媒体资源的源文件，例如：视频、音频等。
<track>: 定义媒体资源的文本轨道，例如：字幕、描述等。
<wbr>: 可选换行点，用于在长单词或URL中换行。

二、常用标签说明

2.1 链接

`<a>`：链接资源

属性：href（链接目标）、target（打开方式）

  <a href="https://www.fly63.com">fly63</a><a href="https://www.fly63.com" target="_blank">fly63（新窗口打开）</a><a href="https://www.fly63.com" target="_self">fly63（当前窗口打开）</a><a href="https://www.fly63.com" target="_parent">fly63（父窗口打开）</a><a href="https://www.fly63.com" target="_top">fly63（顶部窗口打开）</a>

在这里插入图片描述

`<link>`: 链接资源

用于链接外部资源，例如：CSS文件、JavaScript文件、图标等。
<link rel="stylesheet" href="style.css">

`<script>`：链接JS文件

需要在 HTML 文档中嵌入 JavaScript 代码或链接到外部 JavaScript 文件时，使用script元素。
<script src="script.js"></script>

`<ID>`：标识符

例如：为导航菜单中的每个项目指定唯一的ID，以便可以通过JavaScript或CSS对其进行操作。
注意：中间不能有空格
<div id="header"><h1>这是一个标题</h1>
</div>

`<class>`：类名

例如：class属性用于为文档中的元素指定一个或多个类名，以便可以通过CSS对其进行样式化。
<div class="container"><h2>这是一个章节标题</h2><p>这是一个段落。</p>
</div>

`robots`：元标签

robots元标签用于告诉搜索引擎爬虫（如Googlebot）如何索引和爬取网站的内容。

index: 允许搜索引擎索引页面内容。
follow: 允许搜索引擎遵循页面上的链接。
noindex: 不允许搜索引擎索引页面内容。
nofollow: 不允许搜索引擎遵循页面上的链接。
应用示例：<meta name="robots" content="index, follow">

2.2 内容

`<input>`：输入框-Void元素

属性：type（输入类型）、name（表单名称）、value（默认值）

  <input type="text" name="username" value="请输入用户名" disabled>   <!--disabled：禁用--><input type="password" name="password" value="请输入密码"><input type="submit" value="提交"><input type="reset" value="重置"><input type="checkbox" name="hobby" value="足球"  checked >足球  <!--checked：选中--><input type="radio" name="gender" value="男">男<input type="file" name="file">文件上传

>在这里插入图片描述

`<ul>...`：列表标签

<ul>无序、<ol>有序、<li>项目

一个无序列表
<ul><li>项目1</li><li>项目2</li><li>项目3</li>
</ul>

`<strong>`…：字体

强调：<p>这是一个段落，包含<em>强调</em>的文本。</p>
加粗：<p>这是一个段落，包含<strong>加粗</strong>的文本。</p>
下划线：<p>这是一个段落，包含<u>下划线</u>的文本。</p>
删除线：<p>这是一个段落，包含<s>删除线</s>的文本。</p>
小号字体：<p>这是一个段落，包含<small>小号字体</small>的文本。</p>
大号字体：<p>这是一个段落，包含<big>大号字体</big>的文本。</p>
黄色背景：<p>这是一个段落，包含<mark>黄色背景</mark>的文本。</p>
下标：<p>这是一个段落，包含<sub>下标</sub>的文本。</p>
上标：<p>这是一个段落，包含<sup>上标</sup>的文本。</p>

2.3 格式

`<main>`：主要内容区域

定义文档的主要内容区域

 <main><h1>这是一个标题</h1><p>这是一个段落。</p>
</main>

`<section>`：章节或主题

定义文档中的一个章节或主题。
 <section><h2>这是一个章节标题</h2><p>这是一个段落。</p>
</section>

`<figure>`：独立内容单元

定义文档中的一个独立内容单元，例如：图片、图表、代码等。
figcaption：单元（图片、图表、代码）描述
<figure><img src="image.jpg" alt="fly63"><figcaption>图1. 内容<em>图片</em>说明：</figcaption> 
</figure>

`<div>`：内容分块

当需要将文档内容分组时，使用div元素。例如：将页面分为不同的区域、将文章分为不同的部分等。
<div><p>Example paragraph element.</p></div>

`<mainfooter>`：页脚

定义文档的页脚区域。
<footer><p>这是一个页脚。</p>
</footer>

2.4 特殊

`<og>`：协议

og（Open Graph）是一种用于在社交媒体上分享网页的协议。它定义了一些重要的属性，用于指定网页的标题、描述、图片和URL等。
og:title：指定网页的标题。
og:description：指定网页的描述。
og:image：指定网页的图片。
og:url：指定网页的URL。
og:type：指定网页的类型。`<meta property="og:type" content="article">`
og:site_name：指定网页所属的网站名称。`<meta property="og:site_name" content="fly63">`  

`<SEO>`：优化

定义：SEO（Search Engine Optimization）是一种优化网页以提高在搜索引擎结果中的排名的技术。
当需要优化网页以提高在搜索引擎结果中的排名时，使用title、description和keywords属性
   重要属性：title：指定网页的标题，应包含关键词。description：指定网页的描述，应包含关键词。keywords：指定网页的关键词，用逗号分隔。示例：<meta name="keywords" content="HTML, CSS, JavaScript">

`<&lt>`…：实体

一种特殊的字符序列，用于在HTML文档中表示特殊字符或不可打印字符。

&lt; 小于号
&gt; 大于号
&amp; 与号
&copy; 版权符号
&trade; 商标符号
&reg; 注册商标符号
&euro; 欧元符号
&pound; 英镑符号
&yen; 日元符号
&cent; 分符号

网页代码示例

<body><main><h1>CatPhotoApp</h1><section><h2>Cat Photos</h2><p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p><p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p><a href="https://freecatphotoapp.com"><img src="https://i-blog.csdnimg.cn/img_convert/c4671c6bef03d987fef4963f04e50044.jpeg" alt="A cute orange cat lying on its back."></a></section><section><h2>Cat Lists</h2><h3>Things cats love:</h3><ul><li>catnip</li><li>laser pointers</li><li>lasagna</li></ul><figure><img src="https://i-blog.csdnimg.cn/img_convert/263ef9b3be922f616bd8c1b41d2cf10d.jpeg" alt="A slice of lasagna on a plate."><figcaption>Cats <em>love</em> lasagna.</figcaption>  </figure><h3>Top 3 things cats hate:</h3><ol><li>flea treatment</li><li>thunder</li><li>other cats</li></ol><figure><img src="https://i-blog.csdnimg.cn/img_convert/be37f6b1ea1222d165c8760579303b86.jpeg" alt="Two tabby kittens sleeping together on a couch."><figcaption>Cats <strong>hate</strong> other cats.</figcaption>  </figure></section></main><footer><p>No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a></p></footer>
</body>
</html>

网页效果如下：

CatPhotoApp

Cat Photos

Everyone loves cute cats online!

See more cat photos in our gallery.

Cat Lists

Things cats love:

catnip
laser pointers
lasagna

A slice of lasagna on a plate. — Cats *love* lasagna.

Top 3 things cats hate:

flea treatment
thunder
other cats

Two tabby kittens sleeping together on a couch. — Cats **hate** other cats.

0.学习资源

资源网：fly63
学习网站：w3school
交互式学习：Freecodecamp（推荐）
…

1.练习工具

工具1：codepen（推荐）
工具2：jsfiddle
…

2.开发环境

Trae：字节跳动（推荐）
VS Code：微软经典
WebStorm：专业开发
…

3.在线部署

netlify
vercel

参考博文：

HTML零基础入门教程（详细）
HTML基础教程（非常详细）

End

查看全文

http://www.dtcms.com/a/541124.html

诺亚财富汪静波：在波动中捕捉结构性机会，创造穿越周期的长期价值

SAP SD销售开票及回款信息查询接口分享

更新维护：定期更新、功能修复、性能优化的全面指南

vue3 全局定义动态样式

常州网站建设效果黑马程序员学费多少钱

昆山设计网站的公司深圳市涂能装饰设计公司网站

Rocky Linux 9.4 搭建k8s-1.28.0 + docker一主多从集群测试环境

做网站的一般要多钱wordpress国内不使用方法

docker自定义网络

K8S 安装部署文档

stm32_关于乐鑫ESP8266-07S WIFI模组烧录安信可科技的MQTT固件流程

GitLab 私服（基于 Docker）搭建方案

外贸网站wordpresswordpress模版安装

React 09

2 VTK的基本概念

慈溪市建设局网站表格下载工装公司名字怎么起

苏州街网站建设外网设计网站

磐石网站建设注册微信公众平台

Docker从入门到实战——含容器部署、docker基础、项目部署

Neo4j-图数据库入门图文保姆攻略

【LangChain】LangChain Model 模型分类

如何将多张PGN、JPG等格式图片合并成一个PDF文档？

如何做游戏网站百度推广关键词怎么优化

如何正确创建一个后端项目nodejs+express，只针对windows用户

给我一个网站好吗做网站模板的软件

网站使用特殊字体重庆市建设工程网官网

官方网站下载微信html5网页制作代码成品

Python-env变量读取

仓颉编程（19）函数语法糖

idea中更新github token 登录github

HTML基础（一）

目录

一、HTML

1.1 基本标签

1.2 基本语法

1.3 基本结构

二、常用标签说明

2.1 链接

`<a>`：链接资源

`<link>`: 链接资源

`<script>`：链接JS文件

`<ID>`：标识符

`<class>`：类名

`robots`：元标签

2.2 内容

`<input>`：输入框-Void元素

`<ul>...`：列表标签

`<strong>`…：字体

2.3 格式

`<main>`：主要内容区域

`<section>`：章节或主题

`<figure>`：独立内容单元

`<div>`：内容分块

`<mainfooter>`：页脚

2.4 特殊

`<og>`：协议

`<SEO>`：优化

`<&lt>`…：实体

CatPhotoApp

Cat Photos

Cat Lists

Things cats love:

Top 3 things cats hate:

End

相关文章：

目录

一、HTML

1.1 基本标签

1.2 基本语法

1.3 基本结构

二、常用标签说明

2.1 链接

<a>：链接资源

<link>: 链接资源

<script>：链接JS文件

<ID>：标识符

<class>：类名

robots：元标签

2.2 内容

<input>：输入框-Void元素

<ul>...：列表标签

<strong>…：字体

2.3 格式

<main>：主要内容区域

<section>：章节或主题

<figure>：独立内容单元

<div>：内容分块

<mainfooter>：页脚

2.4 特殊

<og>：协议

<SEO>：优化

<&lt>…：实体

CatPhotoApp

Cat Photos

Cat Lists

Things cats love:

Top 3 things cats hate:

End

相关文章：

`<a>`：链接资源

`<link>`: 链接资源

`<script>`：链接JS文件

`<ID>`：标识符

`<class>`：类名

`robots`：元标签

`<input>`：输入框-Void元素

`<ul>...`：列表标签

`<strong>`…：字体

`<main>`：主要内容区域

`<section>`：章节或主题

`<figure>`：独立内容单元

`<div>`：内容分块

`<mainfooter>`：页脚

`<og>`：协议

`<SEO>`：优化

`<&lt>`…：实体