HTML 入门必知：详细解读基础知识，开启网页开发之旅

最新推荐文章于 2025-03-20 04:30:00 发布

珹洺

最新推荐文章于 2025-03-20 04:30:00 发布

阅读量1.2k

点赞数 32

分类专栏： # HTML-CSS基础知识文章标签： html 前端前端框架 javascript css html5

本文链接：https://blog.csdn.net/2402_83322742/article/details/143820182

版权

HTML-CSS基础知识专栏收录该内容

9 篇文章

订阅专栏

HTML 入门必知：详细解读基础知识，开启网页开发之旅

什么是HTML
一、HTML的环境怎么设置
二、HTML基本知识

什么是HTML

HTML（超文本标记语言，HyperText Markup Language）是一种用于创建网页的标准标记语言
HTML是由标签和元素共同构成的
标签：HTML 使用各种标签来标记文本内容，以定义不同的元素及其在网页中的呈现方式。标签通常是成对出现的，有开始标签和结束标签
例如

在这里插入图片描述

元素：由开始标签、结束标签（如果有）以及它们之间包含的内容共同组成一个元素
例如

在这里插入图片描述

整个就是一个标题元素，其中 “这是一个一级标题” 是该元素包含的文本内容。

一、HTML的环境怎么设置

首先，我们要在网络上获取 Visual Studio Code（简称 VScode），下载完成后，按照安装向导的提示逐步完成安装操作
安装好 VScode 之后，打开该编辑器。在其界面中，你会看到一些图标栏，重点关注其中的配置文件相关图标区域（通常在编辑器界面的侧边栏或者菜单栏中有相应的入口可以找到该配置文件图标区域）。在这里面的图标中，找到第五个图标

单击后安装插件
需要安装的插件
1.Live SERVER
2.Chinese
3.MarkDown
open in browser
通过以上步骤，我们就完成了 HTML 开发环境在 VScode 中的基本设置，可以更加高效地进行 HTML 相关的开发工作了

二、HTML基本知识

1.HTML结构讲解

在创建的HTML文件里用VScode打开后输入！（英文版）
按住回车就会出现以下结构

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

下面详细讲解一下HTML中的结构知识

<!DOCTYPE html>

这是文档类型声明，它告诉浏览器这个文档是按照 HTML5 的标准来编写的。在 HTML 的发展历程中，不同版本有不同的文档类型声明方式，而 HTML5 使用了这种简洁的<!DOCTYPE html>形式，使得浏览器能够正确识别并按照相应的 HTML5 规范来渲染页面。

<html lang="en">

<html>：这是整个 HTML 文档的根标签，所有其他的 HTML 元素都必须包含在这个根标签内部。它就像是一个容器，界定了整个 HTML 内容的范围。
lang="en"：这是标签的一个属性，用于指定文档所使用的语言。在这里"en"表示英语（English）。设置文档语言有很多好处，比如对于屏幕阅读器等辅助工具来说，它可以根据语言设置来正确地朗读网页内容；搜索引擎也可以根据语言信息更好地对网页进行索引和分类，以便在不同语言的搜索结果中准确呈现该网页。

<head>部分

<meta charset="UTF-8">：

<meta>标签用于在 HTML 文档中嵌入元数据（metadata），也就是关于数据的信息。
charset是标签的一个属性，用于指定文档的字符编码方式。在这里设置为UTF-8，这是一种非常常用的、通用的字符编码方案，它能够表示几乎所有的字符，包括各种语言的文字、符号等。使用UTF-8编码可以确保网页在不同的地区、不同的语言环境下都能正确地显示字符，避免出现乱码现象。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

主要用于控制网页在移动设备（如手机、平板电脑等）上的显示效果，确保网页能够较好地自适应移动设备的屏幕，提升用户在移动设备上浏览网页的体验

<title>Document</title>

<title>标签用于设置网页的标题
例如
在浏览器最上面的文件中会显示

<body>部分

<body>

<body>标签用于包含网页中所有实际显示给用户的内容，比如文本、图片、链接、按钮、表格等等。当你想要在网页上展示一些具体的东西时，就会在这个<body>标签内添加相应的 HTML 元素来实现。

例如，要添加一段文本可以用<p>标签（<p>这是一段文本</p>），要添加一张图片可以用<img>标签（<img src="图片路径.jpg" alt="图片描述">）等等。

2.HTML基础知识

（1）.排版标签

【1】.h1 ~ h6

h1 ~ h6 这段代码指的是网页中的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你好</title>
</head>
<body>
     <h1>Hello World</h1>
     <h2>Hello World</h2>
     <h3>Hello World</h3>
     <h4>Hello World</h4>
     <h5>Hello World</h5>
     <h6>Hello World</h6>
</body>
</html>

代码运行结果图
在这里插入图片描述

【2】.p标签

 <p>Hello World</p>

在这里插入图片描述
代码运行结果图

【3】.div标签

<div>Hello World</div>

运行结果图
在这里插入图片描述

注意事项
h1最好写一个，h2~h6 能适当多写。
2. h1~h6 不能互相嵌套，例如：h1 标签中最好不要写h2 标签了。
3. p 标签很特殊！它里面不能有：h1~h6,div,p等标签

（2）.语义化标签

在 HTML 中，语义化标签是指那些能够清晰明确地表达其包含内容的含义和用途的标签

<header>：就是网页的头部，像放网站名字、导航栏这些东西的地方。


<header>
    <h1>网站名称</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </nav>
</header>

在这里插入图片描述

<nav>：专门用来放导航链接的，像首页、产品页这些链接就放这儿。
<main>：页面主要的内容就放在这里面，一篇文章、一些产品介绍啥的。
<article>：可以看成是一篇独立完整的内容，像一篇博客文章、一则新闻报道。
<section>：把内容分成一块一块的，每块有个主题，里面还能再放

这些。
<aside>：放一些相对次要的东西，比如侧边栏的广告、相关文章推荐。
<footer>：网页的底部，一般放版权信息、联系方式之类的

简单来说语义化标签单独写出来没有什么用，需要和其他标签一起写
HTML 的语义化标签就是那些名字能清楚表明里面装的内容是干啥用的标签

使用语义化标签的好处

代码让人一看就懂，好理解。
搜索引擎能更明白网页内容，对网站排名有好处。
方便给不同的内容设置样式，也好复用样式。
对视障人士用辅助工具访问网页也更友好

（3）.块级元素与行内元素

【1】块级元素

块级元素：独占一行
例如

<div></div>

<p></p>

<h1> - <h6>

【2】行内元素

行内元素：不独占一行

<span></span>

<a></a>（超链接元素）

<em>（强调元素）和 <strong>（着重强调元素）

（4）.常用的文本标签

特点

1. 用于包裹：词汇、短语等。
1. 通常写在排版标签里面。
1. 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）
1. 文本标签通常都是行内元素

在这里插入图片描述

（5）.不常用的文本标签

在这里插入图片描述

（6）.图片标签

在 HTML 中，用于在网页上显示图片的标签是标签

【1】img用法

用法

<img src="图片的路径" alt="图片的替代文本" title="鼠标悬停时的提示文本（可选）" width="宽度（可选）" height="高度（可选）">

具体实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你好</title>
</head>
<body>
    <img src="/4ceba6d0e97d412296f53fc71bb29f07.gif" alt="初音未来" title="初音未来" width="100" height="100">
</body>
</html>

效果图
在这里插入图片描述
图片来自于网络

【2】路径讲解

{1}相对路径

同级引入（./）：
下一级引入（./ 后跟子目录名）：
上一级引入（…/）：
上上一级引入（…/…/）：以此类推

{2}绝对路径

本地绝对路径：
本地绝对路径是指在本地计算机磁盘上，从根目录（如在 Windows 系统中，一般是指各个磁盘分区的根目录，如 C:\、D:\ 等）开始，经过一系列的目录和文件，最终指向目标文件的路径。
网络绝对路径：
网络绝对路径是指在互联网上，通过特定的协议（如 HTTP、HTTPS 等），从互联网的根位置（可以理解为整个互联网的起始点，虽然这是一个比较抽象的概念）开始，经过一系列的服务器、目录和文件，最终指向目标文件的路径。

（7）.超链接

在 HTML 中，超链接是通过 <a> 标签来创建的，其基本语法如下：

<a href="目标链接地址" target="打开方式（可选）" title="鼠标悬停提示信息（可选）">链接显示内容</a>

下面详细解答一下里面的元素

【1】href元素

href

该属性指定了超链接的目标地址，也就是用户点击链接后将要跳转到的地方。目标地址可以是多种类型：

外部网页链接：

<a href="http://www.baidu.com">百度</a>，

当用户点击 “百度” 这段文本时，浏览器会跳转到 http://baidu.com 这个网站。

【2】#元素

<a href="#section2">跳转到第二部分</a>

这里的 href 属性值为 #section2，其中 # 是锚点链接的标识，后面跟着的是目标锚点的名称（即 id 属性的值）。当用户点击 “跳转到第二部分” 这段文本时，浏览器会在当前页面内滚动到 id 为 section2 的元素所在位置
下面的代码展示了这个实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面内锚点链接示例</title>
</head>

<body>

    <!-- 在页面顶部设置导航链接 -->
    <nav>
        <ul>
            <li><a href="#section1">跳转到第一部分</a></li>
            <li><a href="#section2">跳转到第二部分</a></li>
            <li><a href="#section3">跳转到第三部分</a></li>
        </ul>
    </nav>

    <!-- 第一部分内容 -->
    <section id="section1">
        <h2>第一部分：介绍</h2>
        <p>这是页面的第一部分内容，这里可以详细介绍一些相关的背景知识或者主题概述等内容。</p>
    </section>

    <!-- 第二部分内容 -->
    <section id="section2">
        <h2>第二部分：主体内容</h2>
        <p>这是页面的第二部分内容，这里会深入探讨主题相关的核心内容，比如具体的方法、案例分析等。</p>
    </section>

    <!-- 第三部分内容 -->
    <section id="section3">
        <h2>第三部分：总结</h2>
        <p>这是页面的第三部分内容，这里会对前面所介绍的内容进行总结，并可能给出一些展望或者建议等。</p>
    </section>

</body>

</html>

当点击第三部分时
在这里插入图片描述

网页会跳转到下面的界面

在这里插入图片描述

【3】target元素

{1}_self

表示在当前窗口或标签页中打开链接。例如：<a href="http://www.baidu.com" target="_self">访问示例网站，当用户点击这个链接时，会在当前正在浏览的窗口或标签页中加载 http://www.baidu.com 这个网站。

{2}_blank：

表示在新的窗口或标签页中打开链接。例如：<a href="http://www.baidu.com" target="_blank">访问示例网站，当用户点击这个链接时，会打开一个全新的窗口或标签页来加载 http://www.baidu.com 这个网站。

{3}_parent：

如果当前页面是嵌套在其他框架（frame）或 iframe 中的，那么使用 _parent 作为 target 属性的值时，会在包含当前页面的父框架中打开链接。不过现在由于框架的使用已经相对较少，所以这种情况也不常见了。

{4}_top：

同样在页面是嵌套在其他框架或 iframe 中的情况下，使用 _top 作为 target 属性的值时，会在最顶层的框架（也就是整个浏览器窗口）中打开链接，消除所有嵌套的框架结构，直接在浏览器窗口中打开链接。

【4】.title元素

当鼠标悬停在超链接上时，会显示该属性所设置的文本内容，用于提供给用户更多关于链接的补充信息或提示。

<a href="http://www.baidu.com" title="这是一个很棒网站">百度</a>

（8）. 列表

【1】有序列表

<h2>要把大象放冰箱总共分几步</h2>
 <ol>
 <li>把冰箱门打开</li>
 <li>把大象放进去</li>
 <li>把冰箱门关上</li>
 </ol>

效果图
在这里插入图片描述

【2】无序列表

<h2>我想去的几个城市</h2>
 <ul>
 <li>成都</li>
 <li>上海</li>
 <li>西安</li>
 <li>武汉</li>
 </ul>

效果图

【3】列表嵌套

<h2>我想去的几个城市</h2>
    <ul>
      <li>成都</li>
      <li>
        <span>上海</span>
        <ul>
          <li>外滩</li>
          <li>杜莎夫人蜡像馆</li>
          <li>
            <a href="https://www.opg.cn/">东方明珠</a>
          </li>
          <li>迪士尼乐园</li>
        </ul>
      </li>
      <li>西安</li>
      <li>武汉</li>
    </ul>

代码效果图

（9）. 表格

一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成

表格涉及到的标签：
table ：表格
caption ：表格标题
thead ：表格头部
tbody ：表格主体
tfoot ：表格注脚
tr ：每一行
th 、td：每一个单元格（备注：表格头部中用th ，表格主体、表格脚注中用：td）

代码的应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8" />
    <title>课程表</title>
</head>

<body>
    <table border="1">
        <caption>
            课程表
        </caption>
        <tr>
            <th rowspan="2" colspan="1">项目</th>
            <th rowspan="2" colspan="1">上课</th>
            <th rowspan="2" colspan="1">活动与休息</th>
        </tr>
        <tr>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>
        <tr border="1">
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>数学竞赛</td>
            <td rowspan="4">休息</td>
        </tr>
        <tr border="1">
            <td>数学</td>
            <td>语文</td>
            <td>化学</td>
            <td>物理</td>
            <td>英语</td>
            <td>篮球比赛</td>
        </tr>
        <tr border="1">
            <td>化学</td>
            <td>语文</td>
            <td>体育</td>
            <td>历史</td>
            <td>地理</td>
            <td>每周一考</td>
        </tr>
        <tr border="1">
            <td>体育</td>
            <td>化学</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>社会实践</td>
        </tr>
        <tr border="1">
            <td rowspan="4">下午</td>
            <td>语文</td>
            <td>英语</td>
            <td>数学</td>
            <td>物理</td>
            <td>数学</td>
            <td>英语角</td>
            <td rowspan="4">休息</td>
        </tr>
        <tr border="1">
            <td>化学</td>
            <td>物理</td>
            <td>地理</td>
            <td>生物</td>
            <td>体育</td>
            <td>自由活动</td>
        </tr>
    </table>
</body>

</html>

在这里插入图片描述

下面来详细讲解一下

<caption>课程表</caption>：这是表格的标题，显示为 “课程表”，位于表格的上方中央位置。
表格的第一行（<tr>）定义了表头：

<tr>
    <th rowspan="2" colspan="1">项目</th>
    <th rowspan="2" colspan="1">上课</th>
    <th rowspan="2" colspan="1">活动与休息</th>
</tr>

这里使用了 <th>（表格表头单元格）标签，rowspan="2" 表示这个单元格垂直跨越 2 行，colspan="1" 表示水平跨越 1 列。

<tr border="1">
    <td rowspan="4">上午</td>
   ...
</tr>

每个 <tr> 代表一行，<td>（表格数据单元格）标签用于填充具体的课程内容。例如，<td rowspan="4">上午</td> 表示这个单元格垂直跨越 4 行，内容为 “上午”

表格的常用属性在这里插入图片描述

（10）. 表单

在 HTML 中，表单（<form>）是用于收集用户输入信息的重要元素

【1】`<form>`标签

用于创建一个表单

常用属性

action：指定表单提交的地址，通常需要与后端开发人员沟通确定。
target：控制表单提交后页面的打开方式，有两种常见值：
_self：在当前窗口打开提交后的页面。
_blank：在新窗口打开提交后的页面。

【2】`<input>`输入框标签

用于创建输入框。

常用属性

type：设置输入框的类型，目前常用的值是text，表示普通文本输入框。
name：用于指定提交数据的名字，通常需要与后端开发人员沟通确定。

<form action="https://www.baidu.com/s" target="_blank" method="get">
    <input type="text" name="wd">
    <button>去百度搜索</button>
 </form>

在这里插入图片描述

【3】`<button>`按钮标签

用于创建按钮。

 <input type="submit" value="点我提交表单">
 <button>点我提交表单</button

在这里插入图片描述

<select name="from">
    <option value="黑">黑龙江</option>
    <option value="辽">辽宁</option>
    <option value="吉">吉林</option>
    <option value="粤" selected>广东</option>
</select>

在这里插入图片描述

【4】textarea文本域

用于创建一个多行文本输入区域，允许用户输入较长的文本内容，比如文章段落、详细描述等。

常用属性：

cols：用于指定文本域的可见宽度，以字符数为单位。例如，cols="50"表示文本域大约能显示 50 个字符的宽度。
rows：用于指定文本域的可见高度，以行数为单位。比如，rows="10"表示文本域大约能显示 10 行文本的高度。
name：和标签的name属性类似，用于指定提交数据的名字，以便后端能准确识别接收到的文本域数据，通常需与后端开发人员沟通确定。

<form action="#" method="post">
    <textarea cols="50" rows="10" name="description">请在此处输入详细描述内容。</textarea>
    <input type="submit" value="提交">
</form>

在这里插入图片描述

【5】select下拉框

用于创建一个下拉式的选择菜单，用户可以从预定义的多个选项中选择一个值。

常用属性：

name：用于指定提交数据的名字，当用户选择某个选项并提交表单时，后端可以通过这个名字获取到所选选项的值，通常需与后端开发人员沟通确定。

<form action="#" method="post">
    <select name="fruit">
        <!-- 以下是具体选项 -->
    </select>
    <input type="submit" value="提交">
</form>

在这里插入图片描述

【6】option下拉框的选项

作为<select>下拉框中的具体选项，每个<option>标签代表一个可供用户选择的项目

常用属性：

value：用于设置当该选项被选中并提交表单时，发送给后端的值。
selected：这是一个布尔属性，如果在某个标签中添加了该属性（即selected="selected"或直接写selected），则表示该选项在页面加载时默认被选中。

<form action="#" method="post">
    <select name="fruit">
        <option value="apple">苹果</option>
        <option value="banana" selected>香蕉</option>
        <option value="cherry">樱桃</option>
    </select>
    <input type="submit" value="提交">
</form>

在这里插入图片描述

【7】label与表控件做关联

语义：用于为表单控件（如、、等）提供一个可点击的文本标签，并且当用户点击该标签时，会自动将焦点定位到对应的表单控件上，提高了用户体验的友好性和可访问性。

<form action="#" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <input type="submit" value="提交">
</form>

在这里插入图片描述

【8】fieldset表单边框

用于将一组相关的表单元素组合在一起，并可以为其添加一个可选的边框，使表单的结构更加清晰，便于用户理解和操作。

<form action="#" method="post">
    <fieldset>
        <legend>用户信息</legend>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name">
        <label for="age">年龄：</label>
        <input type="text" id="age" name="age">
    </fieldset>
    <input type="submit" value="提交">
</form>

在这里插入图片描述

（11）. iframe框架标签

在这里插入图片描述

iframe

iframe应用

iframe标签可以用来在网页中嵌入广告。就是说这个标签能让别的内容出现在自己的网页上，像放广告就会用到
与超链接或表单的target配合，展示不同的内容。

（12）.特殊符号

在HTML中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，比如小于号 < 用于定义 HTML 标签的开始。
特殊符号总结

（13）.全局属性

【1】id属性

含义：给标签指定唯一标识，注意 id 不能重复。
作用：可以让标签与表单控件相关联，也可以与 CSS、JavaScript 配合使用。
解释：在 HTML 中，id属性用于为元素提供一个唯一的标识符。这在 CSS 中可以用来选择特定元素进行样式设置，例如#id_name { color: red; }。在 JavaScript 中，可以通过document.getElementById('id_name')来获取具有特定id的元素，从而进行操作