HTML速通

最新推荐文章于 2025-03-14 13:39:03 发布

Xudde.

最新推荐文章于 2025-03-14 13:39:03 发布

阅读量2.4k

点赞数 68

文章标签： html 前端笔记经验分享

本文链接：https://blog.csdn.net/qq_62073188/article/details/144036844

版权

目录

1.前言
2.HTML简介
什么是HTML？
那如何查看HTML呢？
HTML结构概述
文档类型声明
HTML根元素
头部部分
主体部分
全部应用整体表示
11.结语

前言

学习要有三心，一信心，二决心，三恒心

什么？博主要带你们速通HTML！这怎么可能?!?

博主云：“没有什么不可能的，说速通就是速通，一看就懂一看就能明白！如果不明白，那就请你评论一下或私信我，由博主来为你解答！”

创作为本作者，信息来自b站泷羽sec，为了不影响你的学习，你可以先把文章看完你在前去探索，只需要点击蓝色字体即可前往。

HTML其实很简单的并不难，一览便晓。

HTML简介

什么是HTML？

HTML的全称为超文本标记语言(Hyper Text Markup Language)，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

总的来说有以下几点：

HTML的全称为超文本标记语言(Hyper Text Markup Language)
HTML是用来描述网页的一种语言
HTML指的是超文本标记语言
HTML不是一种编程语言，而是一种标记语言
标记语言是一套标记标签(markup tag)
HTML使用标记标签来描述网页
HTML文档包含了HTML标签以及文本内容
HTML文档也叫做web页面

那如何查看HTML呢？

看HTML就像是在看网页源代码一样

查看方法：

F12 然后找到元素；
右键查看页面源代码；
Ctrl+U ————博主觉得该方法最快

示图如下

HTML基本结构概述

HTML(超文本标记语言)网页有一个标准的结构

主要由以下几个关键部分组成

文档类型声明
HTML根元素
头部(head)
主体(body)部分

这种结构为浏览器解析和显示网页内容提供了清晰和框架

文档类型声明(DOCTYPE)

<!DOCTYPE html>

这是HTML5的文档类型声明。他必须位于HTML文件的第一行，作用是告知浏览器文档所遵循的HTML版本，以便浏览器能够正确地渲染页面

对于HTML5来说，这个声明简洁明了，统一了HTML文档类型的标准，取代了以往复杂的DTD(文档类型定义)声明

HTML根元素(<html>)

<html>

作为HTML文档的根标签，所有其他的HTML元素都被包含在它里面

它由 开始标签<html> 和结束标签</html>

这个标签界定了整个HTML文档的范围，浏览器会识别其中的内容为有效的HTML代码

头部部分(<head>)

1. <head> ------- </head>

2. <title> --------- </title>

3. <meta>

4. <link>

5. <script> --------- </script>

<head>

此部分包含了关于网页的元数据，这些信息对览器的染和网页的展示特性有重要作用，但不会直接在网页的可见区域显示

<head> 内容 </head>

<title>

用于定义网页的标题，标题内容会显示在浏览器的标题栏或标签页上

例如 <title> 精彩网页世界 </title>

这是用户识别网页的重要标识，同时也对搜索引擎优化(SE0)有一定影响

<meta>

用于提供多种类型的元数据。常见的有字符编码设置

如 <meta charset="UTF-8">

它确保浏览器能够正确解析和显示网页中的各种字符，支持多种语言的字符集

另外，还可用于设置页面描述、关键词等信息

如 <meta name="description" content="这是一个充满趣味的网页">

用于向搜索引擎描述网页内容

如 <meta name="keywords" content="网页，趣味，示例">

可设置关键词帮助搜索引擎索引网页

<link>

主要用于链接外部资源，最常见的是连接 CSS 样式表

例如 <link rel="stylesheet" href="styles.css">

其中 rel="stylesheet"表面这是一个样式表连接

href属性指定了CSS文件路径

通过这种方式，可以实现网页内容与样式的分离，方便网页设计和维护

<script>

可用于在 HTML 文档中嵌入 JavaScript 代码或引用外部的JavaScript文件

如果是嵌入代码，可以这样写

<script>alert('欢迎来到我的网页');</script>

若引用外部文件，则是

<script src="script.js"></script>

这里src属性指定了JavaScript文件的路径。脚本可以为网页添加交互功能

主体部分(<body>)

1. <body> ---------- </body>

2. 文本元素

3. 图片元素

4. 超链接元素

5. 表格元素

<body>

包含了所有在网页中可见的内容，如文本、图像、超链接、表格、表单等各种网页元素

文本元素

可以使用段落标签<p>来组织文本

如 <p> 这是一段普通的文本内容 </p>

<h1> - <h6>可用于创建不同级别的标题

<h1>表示最高级别的标题，重要性依次递减

例如 <h1> 主标题 </h1>

<h2> 副标题 </h2>

图片元素

使用<img>标签来插入图像

如 <img src="image.jpg" alt="图像描述">

src属性指定图像的来源途径

alt属性在图像无法正常显示时提供替代文本，对于可访问性和SEO都很重要

超链接元素

通过<a>标签创建超链接

如<a href="https://www.example.com">点击这里</a>

href属性定义了链接的目标URL,标签内的文本是用户看到的可点击的链接内容

表格元素

使用<table>标签创建表格

<tr>表示表格行

<td>表示单元格

<!--一下是一个例子-->
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>

示图如下

全部应用整体表示

<!DOCTYPE html>
<html>
<head>
<table>示例网页</table>
<meta charset="UTF - 8">
</head>
<body>
<h1>欢迎来到示例网页</h1>
<p>这是网页的主要内容部分，这里可以展示各种信息</p>
<img src="example.jpg" alt="示例图片">
<a href="https://example.com">访问示例网站</a>
</body>
</html>

手动实践

将代码打入TXT文件，然后修改后缀为HTML打开即成