HTML基础（新手入门教程，高手巩固）

最新推荐文章于 2023-07-18 13:31:50 发布

小研说技术

最新推荐文章于 2023-07-18 13:31:50 发布

阅读量250

点赞数 2

分类专栏： JavaScript 文章标签： html html5 爬虫 java c语言

本文链接：https://blog.csdn.net/m0_52110974/article/details/119812453

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、HTML 简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

解释说明如下：

!DOCTYPE html：声明为 HTML5 文档；
html：元素是 HTML 页面的根元素；
head：元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8；
title：元素描述了文档的标题；
body：元素包含了可见的页面内容；
h1：元素定义一个大标题
p：元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

1-1 什么是HTML？

HTML 是用来描述网页的一种语言。

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

1-2 HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

1-3 HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。

1-4 浏览器

我们一般使用谷歌浏览器来查看网页内容；
官网：谷歌
直接去下载即可。

1-5 <!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

1-6 中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

2、HTML 编辑器

可以使用专业的 HTML 编辑器来编辑 HTML。如Visual Studio Code。

由于Visual Studio Code免费，不需去官网下载，直接在软件管家下载即可。

下载教程：

第一步：打开软件管家，进入商店
第二步：搜索框输入vs
第三步：下载安装即可

个人建议：下载软件安装地址不要放在C盘！

3、HTML 基础

3-1 HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

效果演示

3-2 HTML 段落

HTML 段落是通过标签 来定义的。

效果展示

3-3 HTML 链接

HTML 链接是通过标签 <a> 来定义的。

效果展示

3-4 HTML 图像

HTML 图像是通过标签 <img> 来定义的.

效果展示：

注意：图像的名称和尺寸是以属性的形式提供的。

4、HTML 元素

在这里插入图片描述
开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

4-1 HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

4-2 嵌套的HTML元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
HTML 文档由相互嵌套的 HTML 元素构成。

4-3 HTML空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
 就是没有关闭标签的空元素（ 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 ，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 在所有浏览器中都是有效的，但使用 其实是更长远的保障。

温馨提示：HTML标签使用小写标签！

5、HTML属性

属性是 HTML 元素提供的附加信息。

5-1 HTML属性

HTML 元素可以设置属性；
属性可以在元素中添加附加信息；
属性一般描述于开始标签；
属性总是以名称/值对的形式出现，比如：name=“value”。

5-2 HTML属性常用引用属性值

属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。

温馨提示：在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘John “ShotGun” Nelson’

温馨提示：使用小写属性！

5-3 常见属性

在这里插入图片描述

6、HTML标题

在 HTML 文档中，标题很重要。

6-1 HTML标题

标题（Heading）是通过

-

标签进行定义的。

定义最大的标题。

定义最小的标题。

6-2 标题的重要性

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

6-3 HTML水平线

<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

6-4 HTML注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

如果使用vscode编译器，快捷键ctrl+?

6-5 如何查看源代码

你是否看过一些网页然后惊叹它是如何实现的。
如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

小技巧：快捷键F12

6-6 常用标签

在这里插入图片描述

7、HTML段落

HTML 可以将文档分割为若干段落。

7-1 HTML段落

段落是通过 标签定义的。

知识点：浏览器会自动地在段落的前后添加空行。（ 是块级元素）
温馨提示：不要忘记结束标签

7-2 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <\br> 标签。
<\br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。三个字概括“单标签”！

7-3 注意事项

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。