【HTML】基础知识，学完你也可以搭建出简单的网页

黑口罩

已于 2025-01-10 15:42:37 修改

阅读量416

点赞数 4

分类专栏： # 【HTML】系列文章标签： html 前端

于 2025-01-08 08:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/xudahai513/article/details/144986727

版权

【HTML】系列专栏收录该内容

6 篇文章

订阅专栏

博主使用的编辑器下载网址：Sublime Text - Text Editing, Done Right

一、基本结构

文档类型声明（DOCTYPE）

用于告诉浏览器文档的类型，以便浏览器正确地渲染页面，<!DOCTYPE html>表示这是一个 HTML5 文档。

`<html>`标签

HTML 文档内容都包含在<html>标签内，它有两个主要的子标签：<head>和<body>。

<!DOCTYPE html>
<html>
    <head>
        <!-- 这里放置文档的头部信息，如标题、样式表引用等 -->
    </head>
    <body>
        <!-- 这里放置网页的可见内容，如文本、图像、链接等 -->
    </body>
</html>

二、`<head>头`标签

`<title>`标签

用于定义网页的标题，这个标题会显示在浏览器的标题栏中。

<head>
    <title>我的第一个网页</title>
</head>

`<meta>`标签

用于提供有关 HTML 文档的元数据，如字符编码、页面描述、关键词等。

charset 属性用于指定文档的字符编码，通常为 UTF - 8：

<meta charset="UTF-8">

还有用于搜索引擎优化（SEO）的元标签，如description 用于描述网页内容，keywords用于提供网页相关的关键词：

<meta name="description" content="学习基础编程知识，就关注黑口罩">
<meta name="keywords" content="黑口罩，学习">

`<link>`标签（引用外部资源）

主要用于引用外部的样式表（CSS）文件，使网页具有更好的样式。

其中 rel 属性表示资源与文档的关系（这里是样式表），href 属性指定资源的路径。

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

在 html 里面直接写 CSS 样式：

<style type="text/css">
    //id 为 div 的位置
	#div {position: absolute; right: 100px;top:4px;}
</style>

`<script>`标签（嵌入脚本）

用于在网页中嵌入 JavaScript 脚本，JavaScript 可以用于实现网页的交互功能。可以直接在标签内写脚本，也可以引用外部脚本文件。

引用外部脚本文件：

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

直接写脚本：

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

三、`<body>`主体

标题标签（`<h1>` - `<h6>`）

用于定义网页中的标题，<h1>是最高级别的标题，<h6>是最低级别的标题。例如：

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h3>
<h5>这是五级标题</h3>
<h6>这是六级标题</h3>

段落标签（`<p>`）

用于定义段落，浏览器会自动在段落之间添加一些间距

<p>这是第一段文字。</p>
<p>这是第二段文字。</p>

换行标签（`<br>`）

用于强制文本换行

第一行<br>第二行

水平线标签（`<hr>`）

用于在网页中插入一条水平分隔线，用于划分不同的内容区域或者章节。

<p>这是一部分内容。</p>
<hr>
<p>这是另一部分内容。</p>

加粗标签（`<b>`）和强标签（`<strong>`）

<b>这是加粗的文字b</b>
<br>
<strong>这是强调加粗的文字strong</strong>

斜体标签（`<i>`）和强调标签（`<em>`）

<i>这是斜体文字 i</i>
<br>
<em>这是强调斜体文字 em</em>

块引用标签（`<blockquote>`）

<blockquote>
  这是一段引用的长文本
</blockquote>

短引用标签（`<q>`）

用于引用较短的文本片段，通常浏览器会自动为其添加引号。

<q>这是一句短引用。</q>

上标和下标标签（`<sup>`和`<sub>`）

<sup>用于将文本显示为上标，<sub>用于将文本显示为下标。

  水的化学式是H<sub>2</sub>O，x的平方是x<sup>2</sup>。

链接标签（`<a>`）

用于创建超链接，通过href属性指定链接的目标，可以是其他网页、文档、电子邮件地址等

<a href="https://www.baidu.com">访问示例网站</a>

图像标签（`<img>`）

用于在网页中插入图像，通过 src属性指定图像的源文件路径，alt 属性用于在图像无法显示时提供替代文本

<img src="image.jpg" alt="一张图片">

列表标签（`<ul>、<ol>`）

无序列表（<ul>）：用于创建无序列表，列表项用<li>标签定义

<ul>
   <li>项目1</li>
   <li>项目2</li>
</ul>

有序列表（<ol>）：用于创建有序列表，列表项同样用<li>标签定义

<ol>
   <li>项目一</li>
   <li>项目二</li>
</ol>

表格标签（`<table>`）

用于创建表格，包括<tr>（表格行）、<td>（表格单元格）等标签

<table align="center" border="1" bgcolor="yellow" width="500px" >
      <tr>
        <td>姓名</td>
        <td>年龄</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>20</td>
      </tr>
</table>

字段解释：
align="center" 居中；
border 边框为 1 ；
bgcolor 背景颜色 yellow；
表格宽width="500px"

表单标签（`<form>`）

用于创建用户可以输入信息的表单，包括文本框、按钮、下拉菜单等多种表单元素。例如，一个简单的登录表单：

<form action=" ">
     <label for="username">用户名：</label>
     <input type="text" id="username">
     <label for="password">密码：</label>
     <input type="password" id="password">
     <input type="submit" value="登录">
</form>